Design Web 2.0 Interface i Photoshop
Att förstå handledningen nedan är att förstå det är teknik, med det kan du rita dig själv ett grafiskt användargränssnitt för en webbplats. Sidnavigering, knappar, headers, till exempel. Alla Web 2.0-stilar.
Starta en ny duk; vilken storlek som helst. Något större än 450x300px skulle vara bra. Välj Rundad rektangulär verktyg och rita en rektangulär så stor som visad i bilden ovan.
Dubbelklicka på lagret av den rundade rektangulära för att starta Blandningsalternativ. Ändra inställningarna för följande stilar.
Drop Shadow
Opacitet: 31% Distans: 1px Spridning: 0% Storlek: 5px
Bevel och Emboss
Djup: 100% Storlek: 0px Mjuk: 0px
Gradiantöverlagring
Dubbelklicka på Gradiant och ställ in följande stopppunkter. Plats: 0%, # 1378cd Plats: 100% # 4da5f0
Stroke
Storlek: 5px Position: Invändig Färg: # 54abf6
Låt oss infoga lite text, en tagline, URL eller något. Ha det mitt och justera rätt så logotypen kan ligga på vänster sida senare. Låt oss utforma texten. Jag använder Lucida Sans Unicode; 55pt; slät; -120 för teckenuppföljning (brevavstånd). Dubbelklicka på textlagret och ange följande i Blandningsalternativ.
Gradientöverlägg
Dubbelklicka på Gradiant och ställ in följande stopppunkter. Plats: 0%, # 9ec7eb Plats: 100% ecf6ff
Du måste då infoga logotypen på vänster sida av texten. Jag använder en rundad rektangulär med radie 5px för att representera logotypen. Här är Blandningsalternativ inställningar för den avrundade rektangulära.
Inre skugga
Opacitet: 45% Avstånd: 0px Storlek: 43px;
Bevel och Emboss
Djup: 100% Storlek: 0px Mjuka: 0px Markeringsläge Opacitet: 50% ShadowMode Opacitet: 100%
Gradiantöverlagring
Dubbelklicka på Gradiant och ställ in följande stopppunkter. Plats: 0% # 0e2f4a Plats: 47% # 001a31 Plats: 48% # 002545 Plats: 100% # 0f4b7f
Stroke
Storlek: 5px Dubbelklicka Gradiant och ställ in följande stopppunkter. Plats: 0% # 1468af Plats: 100% # 50abf8
Låt oss ge den en liten blank effekt. Håll CTRL och vänster klicka på rundad rektangulär Lager miniatyrbild. När hela den rundade rektangulära är vald, ändras till Rektangulärt markeringsverktyg, håll ALT och drar ut den andra halvan av det valda området; precis som bilden ovan.
Skapa ett nytt lager Dra upp den så att den sitter ovanpå alla lager; fyll i den valda delen med vit [#ffffff]; ändra opacitet till 15%.
Handledningen slutar här. Hur du ska använda denna design är helt upp till dig. Genom att ändra storleken och färgerna, kan den användas som en webhuvud eller knappar. Här är ett exempel.
Webbplatshuvud
Webbplatsknappar
