Ontwerp Web 2.0-interface in Photoshop
Inzicht in de onderstaande tutorial is het begrijpen van de techniek, waarmee je jezelf een grafische gebruikersinterface voor een website kunt tekenen. Neven navigatie, toetsen, headers, bijvoorbeeld. Alle Web 2.0-stijl.
Lanceer een nieuw canvas; elke grootte. Iets groter dan 450x300 px zou goed zijn. Selecteer de Afgeronde rechthoekige tool en teken een rechthoekig zo groot als in de bovenstaande afbeelding.
Dubbelklik op de laag van de afgeronde rechthoek om de Meng opties. Wijzig de instellingen voor de volgende stijlen.
Slagschaduw
Dekking: 31% Afstand: 1px Spread: 0% Grootte: 5px
Schuine kant en reliëf
Diepte: 100% Grootte: 0px Verzachten: 0px
Gradiant Overlay
Dubbelklik op Gradiant en stel de volgende stoppunten in. Locatie: 0%, # 1378cd Locatie: 100% # 4da5f0
Beroerte
Grootte: 5px Positie: Inside Kleur: # 54abf6
Laten we wat tekst, een slogan, URL of zoiets invoegen. Zorg dat het midden en recht uitgelijnd is, zodat het logo later aan de linkerkant kan blijven. Laten we de tekst opmaken. Ik gebruik Lucida Sans Unicode; 55pt; glad; -120 voor het volgen van tekens (letter spacing). Dubbelklik op de tekstlaag en stel het volgende in Meng opties.
Overlay met kleurovergang
Dubbelklik op Gradiant en stel de volgende stoppunten in. Locatie: 0%, # 9ec7eb Locatie: 100% ecf6ff
U moet dan het logo aan de linkerkant van de tekst plaatsen. Ik gebruik een afgeronde rechthoek met straal 5px om het logo weer te geven. Hier is de Meng optie instellingen voor de afgeronde rechthoekig.
Innerlijke schaduw
Dekking: 45% Afstand: 0px Grootte: 43px;
Schuine kant en reliëf
Diepte: 100% Grootte: 0px Verzachten: 0px Markeermodus Dekking: 50% ShadowMode Dekking: 100%
Gradiant Overlay
Dubbelklik op Gradiant en stel de volgende stoppunten in. Locatie: 0% # 0e2f4a Locatie: 47% # 001a31 Locatie: 48% # 002545 Locatie: 100% # 0f4b7f
Beroerte
Grootte: 5px Dubbelklik op Gradiant en stel de volgende stoppunten in. Locatie: 0% # 1468af Locatie: 100% # 50abf8
Laten we het een beetje glanzend effect geven. Houden CTRL en klik met de linkermuisknop op afgerond rechthoekig Laagminiatuur. Wanneer de volledige afgeronde rechthoek is geselecteerd, verandert in Rechthoekig selectiekader, houden ALT en haalt de tweede helft van het geselecteerde gebied eruit; net zoals de afbeelding hierboven.
Maak een nieuwe laag; Sleep het naar boven zodat het bovenop alle lagen zit; vul het geselecteerde gedeelte met wit [#ffffff]; zet de dekking op 15%.
De tutorial eindigt hier. Hoe u van dit ontwerp gaat gebruikmaken, is geheel aan u. Door de afmetingen en kleuren iets aan te passen, kan het worden gebruikt als een webkop of knoppen. Hier is een voorbeeld.
Website Header
Website knoppen
