Design Web 2.0 Interface i Photoshop
Forståelse af tutorialet nedenfor er at forstå det er teknik, med det kan du tegne dig selv en grafisk brugergrænseflade til en hjemmeside. Side navigation, knapper, overskrifter, for eksempel. Alle Web 2.0-stilarter.
Start et nyt lærred; enhver størrelse. Noget større end 450x300px ville være godt. Vælg Afrundet rektangulært værktøj og tegne en rektangulær så stor som vist i billedet ovenfor.
Dobbeltklik på laget af den afrundede rektangulære for at starte Blandings muligheder. Rediger indstillingerne for følgende stilarter.
Drop Shadow
Opacitet: 31% Afstand: 1px Spredning: 0% Størrelse: 5px
Bevel og Emboss
Dybde: 100% Størrelse: 0px Blødgør: 0px
Gradiant Overlay
Dobbeltklik på Gradiant og indstil følgende stoppunkter. Placering: 0%, # 1378cd Placering: 100% # 4da5f0
Slag
Størrelse: 5px Position: Indvendig Farve: # 54abf6
Lad os indsætte nogle tekst, en tagline, URL eller noget. Få det midt og juster højre, så logoet kan ligge på venstre side senere. Lad os indstille teksten. Jeg bruger Lucida Sans Unicode; 55pt; glat; -120 for tegnsporing (brevafstand). Dobbeltklik på tekstlag og indstil følgende Blandings muligheder.
Gradient Overlay
Dobbeltklik på Gradiant og indstil følgende stoppunkter. Placering: 0%, # 9ec7eb Placering: 100% ecf6ff
Du skal derefter indsætte logoet på venstre side af teksten. Jeg bruger en afrundet rektangulær med radius 5px til at repræsentere logoet. Her er den Blending Option indstillinger for den afrundede rektangulære.
Indre skygge
Opacitet: 45% Afstand: 0px Størrelse: 43px;
Bevel og Emboss
Dybde: 100% Størrelse: 0px Blødgør: 0px Fremhævningsmodus Opacitet: 50% ShadowMode Opacitet: 100%
Gradiant Overlay
Dobbeltklik på Gradiant og indstil følgende stoppunkter. Placering: 0% # 0e2f4a Placering: 47% # 001a31 Placering: 48% # 002545 Placering: 100% # 0f4b7f
Slag
Størrelse: 5px Dobbeltklik Gradiant og indstil følgende stoppunkter. Placering: 0% # 1468af Placering: 100% # 50abf8
Lad os give det en lille blanke effekt. Holde CTRL og venstre klik på afrundet rektangulær Lag miniatur. Når hele den afrundede rektangulære er valgt, skiftes til Rektangulært marquee værktøj, holde ALT og trækker ud anden halvdel af det valgte område; ligesom billedet ovenfor.
Opret et nyt lag; Træk det op, så det sidder oven på alle lag; Fyld den valgte del med hvid [#ffffff]; ændre opacitet til 15%.
Tutorialet afsluttes her. Hvordan du skal bruge dette design er helt op til dig. Ved lidt forandring er det størrelse og farver, det kan bruges som en web header eller knapper. Her er nogle eksempler.
Hjemmesideoverskrift
Website knapper
