Design Web 2.0 grensesnitt i Photoshop
Å forstå opplæringen nedenfor er å forstå det er teknikk, med det kan du tegne deg selv et grafisk brukergrensesnitt for et nettsted. Side navigasjon, knapper, overskrifter, for eksempel. Alle Web 2.0-stiler.
Start et nytt lerret; enhver størrelse. Noe større enn 450x300px ville være bra. Velg Avrundet rektangulært verktøy og tegne en rektangulær så stor som vist i bildet ovenfor.
Dobbeltklikk på laget av den avrundede rektangulære for å starte Blandingsalternativer. Endre innstillingene for følgende stiler.
Drop Shadow
Opasitet: 31% Avstand: 1px Spredning: 0% Størrelse: 5px
Bevel og Emboss
Dybde: 100% Størrelse: 0px Bløt: 0px
Gradiant Overlay
Dobbeltklikk Gradiant og angi følgende stopppunkter. Sted: 0%, # 1378cd Plassering: 100% # 4da5f0
Stroke
Størrelse: 5px Stilling: Innvendig Farge: # 54abf6
La oss legge inn litt tekst, en tagline, nettadresse eller noe. Ha det midt og juster slik at logoen kan ligge på venstre side senere. La oss style teksten. Jeg bruker Lucida Sans Unicode; 55pt; glatt; -120 for tegnsporing (brevavstand). Dobbeltklikk på tekstlag og sett inn følgende Blandingsalternativer.
Gradient Overlay
Dobbeltklikk Gradiant og angi følgende stopppunkter. Sted: 0%, # 9ec7eb Sted: 100% ecf6ff
Du må da sette inn logoen på venstre side av teksten. Jeg bruker en avrundet rektangulær med radius 5px for å representere logoen. Her er Blandingsalternativ Innstillinger for den avrundede rektangulære.
Indre skygge
Opacity: 45% Avstand: 0px Størrelse: 43px;
Bevel og Emboss
Dybde: 100% Størrelse: 0px Bløt: 0px Fremhevsmodus Opacity: 50% ShadowMode Opacity: 100%
Gradiant Overlay
Dobbeltklikk Gradiant og angi følgende stopppunkter. Sted: 0% # 0e2f4a Plassering: 47% # 001a31 Plassering: 48% # 002545 Plassering: 100% # 0f4b7f
Stroke
Størrelse: 5px Dobbeltklikk Gradiant og angi følgende stopppunkter. Sted: 0% # 1468af Beliggenhet: 100% # 50abf8
La oss gi den en liten glanset effekt. Holde CTRL og venstre klikk på avrundet rektangulær Lag miniatyrbilde. Når hele rundet rektangulær er valgt, endret til Rektangulært markeringsverktøy, holde ALT og trekker ut den andre halvdelen av det valgte området; akkurat som bildet ovenfor.
Lag et nytt lag; Dra den opp slik at den sitter på toppen av alle lagene; fyll den valgte delen med hvit [#ffffff]; endre opasiteten til 15%.
Opplæringen avsluttes her. Hvordan du skal bruke dette designet, er helt opp til deg. Ved å endre litt på størrelse og farger, kan den brukes som en webtekst eller knapper. Her er noen eksempler.
Nettstedshoved
Nettstedsknapper
