Bij het maken van een website is de fase van het weergeven van het pagina-ontwerp erg belangrijk, dat vervolgens wordt gezet en op het netwerk wordt gepubliceerd. In dit artikel leer je hoe je met Adobe Photoshop een competente lay-out voor een website tekent, op basis waarvan je later complexere lay-outs kunt maken.
Het is nodig
Adobe Photoshop-programma
instructies:
Stap 1
Maak een nieuw bestand in Photoshop (Ctrl + N) met de afmetingen 1040x1400, waarbij 1400 de hoogte is. Schakel de weergave van linialen in (Ctrl + R) en stel pixels in als maateenheden in de liniaalinstellingen.
Stap 2
Begin met het uitrekken van de hulplijnen zodat ze in de randen van de lay-outvakken passen. Rek de zijranden uit zodat er 40 pixels overblijven aan de randen. De boven- en onderranden moeten ook 40 pixels aan elke kant overlaten aan de randen van de achtergrond.
Stap 3
Selecteer vervolgens een hulplijn die 200 px lager is dan de bovenkant van de achtergrond voor de bovenste koptekst.
Stap 4
Om de zijbalken links en rechts van de lay-out te vormen, stelt u de hulplijnen in op 240 pixels van de achtergrondrand naar links en 800 naar rechts.
Stap 5
5px naar binnen vanaf de linker- en rechterzijbalken en teken nog twee verticale hulplijnen. Sleep vervolgens nog twee hulplijnen 245 px naar links en 795 px naar rechts.
Stap 6
Meet nu vanaf de rand van de kop 30px en teken een horizontale hulplijn voor het horizontale menu.
Stap 7
Selecteer het smalle gebied van het horizontale menu dat u zojuist hebt gemarkeerd met een rechthoekige selectie met behulp van de M-toets. Selecteer het vulgereedschap en vul het gebied met een neutrale lichtgrijze kleur.
Stap 8
Selecteer het vulgereedschap en vul het gebied met een neutrale lichtgrijze kleur. Klik op het menu "Select-Modify-Compress", geef een optie van 1 pixel op en klik op "OK". Vul het gebied met een lichtere grijstint - je hebt een menukader.
Stap 9
Maak een nieuwe laag en selecteer een geschikte afbeelding voor het sitepictogram of logo en open deze vervolgens.
Stap 10
Voeg een afbeelding in op een nieuwe laag in de koptekst en plaats deze aan de linkerrand. Schrijf rechts van de afbeelding de teksttitel van de site in een willekeurig lettertype.
Stap 11
Ontwerp uw websiteblokken in hetzelfde kleurenschema als de nieuw gemaakte koptekst. Selecteer het gebied van de linkerzijbalk en voer dezelfde tweekleurige opvulbewerkingen erop uit als bij het menublok.
Stap 12
Doe hetzelfde met het middelste brede blok met inhoud. Kopieer de linkerzijbalklaag en plaats deze als de rechterzijbalk.
Stap 13
Voeg tekst toe aan uw lay-out - kies een neutraal lettertype en vul de menutitels, nieuwsvoorbeelden, foto's, tags en links in.
Stap 14
Maak de lay-out af door een "footer" of footer te maken - noteer daar uw auteursrechten en uw contacten.
