Design en varm, munter Website Interface i Adobe Photoshop
Dette innlegget er en del av en serie som heter Photoshop til HTML og CSS.Convert en varm, munter Web Design til HTML og CSS: Kapittel 2

Oppdatert med HTML-koding Guider! - Ikke lenge etter Webdesigntuts lansert, skrev vi dette utmerket tutorial som beskriver prosessen med å designe en varm og munter hjemmesiden i Photoshop. Etter stor etterspørsel, har vi begynt å ta det gjennomført design og vi konvertere den til en standardbasert HTML og CSS nettside! Underveis går vi gjennom en rekke smarte teknikker som vil hjelpe deg å forbedre din egen arbeidsflyt.

Enda bedre, når Nettuts treffer 80.000 RSS-abonnenter, Jeffrey har avtalt å ta ting enda lenger og konvertere ferdig produkt i et egendefinert WordPress tema. Sjekk ut vår fremgang under.

PSD til HTML-koding Guider

Jeffrey Way har produsert noen spektakulære koding tutorials på vår søsterside Nettuts på å konvertere denne designen fra PSD til HTML, så gjør deg selv en tjeneste og sjekke dem ut når du har fullført utformingen delen! Det er 8 kapitler totalt (vi er opp til trinn 8 i øyeblikket), og de er vel verdt å sjekke ut hvis du noensinne har hatt noen spørsmål om å konvertere en PSD til HTML /CSS.

The Design fase

i denne opplæringen vi er i ferd med å lære å designe en varm, glad og koselig grensesnitt for en portefølje /blogg Nettstedet i Adobe Photoshop. Som vi gå gjennom denne opplæringen, vil vi arbeide med: Enkle former (rektangler, linjer, piler, etc), lagstiler (mange av dem faktisk!), Lagmasker, mønstre, tegn- og avsnittsmaler, og så mange andre design og Photoshop teknikker som du kan tilpasse til ditt nettsted grensesnitt design arbeidsflyt.

Trinn 1

for å holde alt på linje vi kommer til å bruke 960s Grid System (Få det herfra). Når lastet ned, åpne opp filen "960_grid_24_col.psd" sikret høyden på gjeldende dokument er mindre enn vår endelige utformingen. Så vil vi gå til Image > Canvas Size > Høyde: 1820px, Anker. Top sentrum

Vi må også sørge for at våre linjaler og veiledninger blir sett. Så vil vi gå til Vis > Tillegg /linjaler /Snap (slik at våre objekter knipse i tråd med våre guider).

La oss fylle vår bakgrunn med en sloid farge. Velg laget "Bakgrunn", høyreklikk på den, og velg: Lag fra bakgrunn, og gi den et passende navn (for eksempel: "bg"). Nå, ved hjelp av Rectangular Marquee Tool (M), opprette et utvalg løpet hele lerretet, sett forgrunnsfargen til # f8eedf, klikk deretter Shift + Backspace for å fylle ditt valg

Trinn 2

La oss begynne å lage vår header.. Bruke Rectangular Marquee Tool (M), eller rektangel Tool (U) (eller hva verktøyet du foretrekker å bruke), opprette et rektangel /utvalg av 1020x100px og fyll den med hvilken som helst farge bare for nå.

Gå videre og søke en Gradient Overlay til header, ved å høyreklikke på våre lag > Blending Options > Gradient Overlay > bruke bildet under som referanse:

Nå, for å stoppe vår header bakgrunn ser flate ut, vil vi bruke en enkel Noise tekstur. Så, opprette et nytt lag (selvsagt må det være over bakgrunnslaget i seg selv), opprette et utvalg over header bakgrunn, og deretter fylle den (ved å klikke Shift + Backspace) med denne fargeverdi. # Ffc05e
< p> Gå til Filter > Støy > Legg Noise > Beløp: 48px, Distribusjon: Gaussian. Endre dette laget Blend Mode til: Lysstyrke, og ta sin Opacity ned til. 5%

Trinn 3

Det er på tide å skrive inn navnet på nettstedet vårt. Grab Horisontal Type Tool (T), skriver nettstedet ditt navn i henhold til følgende tegninnstillinger:

Font Familie: Archer (få det fra typography.com)

Størrelse: 30pt

Vekt: Fet

Anti-aliasing innstilling: Crisp

Farge: # ffffff

Utligning: Optisk

Tracking: 50 < .no>

Bruk en Drop Shadow til vår tekst ved hjelp av innstillingene som vises på bildet nedenfor:

for å være sikker på at nettstedet navnet er på linje vertikalt med overskriften bakgrunn, velger begge lag, deretter klikk på "align vertikale sentre" som du finner i kontrollpanelet.

trinn 4

i dette trinnet skal vi plassere sosiale medier ikoner. Vi starter med å laste ned denne virkelig utrolig sosiale medier ikoner, ved KomodoMedia, og deretter plassere fire ikoner som på bildet under:

For å være sikker på at mellomrommene mellom de fire ikonene er enda. Velg fire lag, og klikk på. Fordel horisontale sentre i kontrollpanelet

La oss nå lage en separator ved siden av våre ikoner. Bruke Line Tool (U), lage to linjer hver av dem skal være 1x60px, fyll den på igjen med denne fargen verdi: # ffd593, og en på høyre med denne fargen verdi: # c08c3a.Also, sørg å forlate 20px av vannrette hvite rommet mellom de to linjene og de fire ikonene.

Velg Gradient Tool (G), åpne opp fargeovergangsbehandlaren dialogboksen, angi gradient innstillinger i henhold til bildet below.Then, høyreklikk på lag med en av linjene vi nettopp opprettet, velger du. Legg lagmaske

Dra med Gradient Tool (G) fra topp til bunn. Gjør det samme med lag av den andre linjen (eller, du kan bare kopiere lagmaska ​​og lim den inn i andre lag).

Trinn 5

Det er på tide å begynne å jobbe på navigasjonsfeltet. Velg Rectangular Marquee Tool (M), opprette et utvalg av 1020x600px, og fyll den med denne fargen verdi. # 40312a

Ved hjelp av Single Row Marquee Tool, skape en 1020x1px, og fyll den med denne fargeverdi .: # f9ba59

Vi skal legge et høydepunkt ved å opprette et utvalg av 1020x1px, fylle den med denne fargen verdi: # 735a4f, og tar sin Opacity ned til:. 70%

Trinn 6

I dette trinnet skal vi lage vår navigasjon tekst. Så, ved å bruke Horisontal Type Tool (T), skriver ordet "Home" med følgende tekst innstillinger:

Font Familie: Gotham Avrundet (få det fra typography.com)

Størrelse: 16 punkter

Vekt: Medium

innstillingen Anti-aliasing: Crisp

color: # 2c8897

Utligning: Metrics

Tracking: 50

Bruk deretter en Drop Shadow til det i henhold til følgende bilde:

i et nytt tekstlag, skriver resten av navigasjons teksten, med samme karakter innstillinger vi brukte ovenfor, bortsett fra at denne gangen vil vi endre fargeverdi til: # ffffff.Again, bruke en Drop Shadow til dette laget i henhold til følgende bilde:

Trinn 7

nå la oss lage vår søkefeltet, hvorfor gjør vi ikke? Vi starter med å skrive ordet "SØK" ved hjelp av de samme tegn innstillingene vi har foretatt til navigasjons tekst, men denne gangen vil vi endre skrift vekt: Book. Vi vil også gjelde for det samme Skygge vi har søkt på ordet "Home".

Det er på tide å skape inntastingsfeltet. Bruke Avrundet rektangel Tool (U), opprette en 190x25px rektangel, med 3px radius, fyll den med denne fargen verdi: # 2c8797, og påfør et lag stil til det, i henhold til følgende bilde:

Prøv å finne eller lage en veldig enkel forstørrelsesglasset, plasser den som på bildet under, og ikke glem å bruke samme skygge vi har søkt på ordet "Søk" for å dette ikonet.

Trinn 8

La oss begynne å jobbe på den populære /velkommen-området. Bruke Rectangular Marquee Tool (M), opprette et utvalg av: 1020x400px, og fyll den med denne fargen verdi: #deccaaa

Vi vil lage en enkel og raffinert mønster for å gjøre vår bakgrunn ser mer interessant.. Gå videre og opprette et nytt dokument av 25x25px, og fylle sin bakgrunn med denne fargeverdi. #deccaaa

Bruke Ellipse Tool (U) lage en sirkel på rundt 4x4px, fyll den med # aa9364, og sørge for at er justert til midten av dokumentet

Opprett en ny kopi av denne sirkelen, dytte den ned to piksler, og endre fyllfarge til:.. # f2e5cb

Gå til Rediger > Definer Pattern > Gi den et navn

Bruk følgende Layer Style til bakgrunnslaget (den vi opprettet i begynnelsen av dette trinnet).

Trinn 9

Dra et par av horisontale føringer i henhold til følgende guide:

Bruke Avrundet rektangel Tool (U), opprette en 950x260px rektangel, med 5px radius, og fyll den med denne fargen verdi. # 40312a

Påfør en Indre skygge til det. Bruk bildet under for mer informasjon:

Bruk en Noise effekt til dette rektangelet (vi har allerede gjort det til bakgrunnen for vår header), legge til lagmaske i dette laget, og dra fra høyre til ned igjen med en svart til hvit Lineær Gradient.

Trinn 10

Lag et rektangel eller utvalg av 230x250px, fyll den med hvilken som helst farge, justere den i henhold til følgende bilde, og bruke Layer Style til det også i henhold til følgende bilde:

Gå til fil > Place > og plassere et bilde av en kjennetegnet design prosjekt. Høyreklikk på dette laget > Opprett klipping maske.

Trinn 11

Nå vil vi lage en skygge for vårt image. Så, ved hjelp av Ellipse Tool (U), skape en ellipse som den i bildet nedenfor. Deretter går du til Filter > Blur > Gaussian Blur > Radius:. 3.0px

Åpne opp fargeovergangsbehandlaren, og angi innstillingene i henhold til følgende bilde. Lag en klipping maske for ellipse er lag, og drar med Gradient Tool (G) fra høyre til venstre med en lineær gradient. Sørg også for å holde nede Shift-tasten mens du drar for å begrense din engel.

Vi vil plassere et annet bilde. Men det eneste vi vil endre er at innehaveren av vårt bilde vil være: 230x220px

Trinn 12

Det er tid for noen innbydende tekst.. Grab Horisontal Type Tool (T), og skriv en innbydende tittel, ved hjelp av følgende tegn innstillinger:

Font Familie: Archer

Størrelse: 24 pkt

Vekt Fet

Anti-aliasing innstilling: Crisp

Farge: # 3da2b4

Utligning: Optisk

Tracking: 50

nå skriver du inn tekst ved hjelp av følgende tegn- og avsnittsinnstillinger:

Font Familie: Verdana

Størrelse: 12pt

Vekt: Regular
< li> Anti-aliasing innstilling: Glatt

Farge: # ffffff

Utligning: Metrics

Tracking: 0

Ledende: 18 pt

Avsnitt: Begrunn alle

Trinn 13

La oss lage våre to call-to-action knapper. Bruke Avrundet rektangel Tool (U), opprette en 160x45px rektangel, med 5px radius, og fyll den med hvilken som helst farge for nå. Sørg også for å justere den i henhold til følgende bilde:

Bruk en støy effekt på denne knappen (vi har allerede gjort det flere ganger). Legg lagmaske, og ved hjelp av en svart til hvit Lineær Gradient dra fra topp til bunn.

Bruk en Layer Style til dette laget. Bruk bildet under som referanse:

Bruke Horisontal Type Tool (T), skriv noe inni den knappen (for eksempel: "Lær mer"), ved hjelp av følgende tegn innstillinger:

Font Familie: Gotham Avrundet

Størrelse: 16 punkter

Vekt: Fet

Anti-aliasing innstilling: Crisp

Farge: #ffffff

Utligning: Optisk

Tracking: 50

Bruk en Drop Shadow til denne teksten laget. Innstillinger kan sees på bildet under:

Lag en annen kopi av denne knappen, og sørg for å justere den i henhold til følgende bilde:

Trinn 14

La oss gå videre og lage en Breadcrumb. Bruke Avrundet rektangel Tool (U), opprette en 950x40px rektangel, med 5px radius, justere det som bildet nedenfor, og bruke en Gradient Overlay til det i henhold til følgende bilde:

Bruke Horisontal Type Tool ( Størrelse Archer

:: 13pt


Font Family > Vekt: Fet

Anti-aliasing innstilling: Crisp

Farge: # ffffff

Utligning: Metrics

Tracking: 50

Bruk deretter en Drop Shadow i teksten. Innstillinger kan finnes i bildet nedenfor:

Bruk av Polygon Tool (U), opprette en 12x12px trekant, og fyll den med denne fargen verdi. # E0cfad

Trinn 15

i dette trinnet skal vi lage en enkel separator som består av tre linjer som satt oppå hverandre. Så, ved hjelp Line Tool (U), opprette en 1020x2px linje og fyll den med denne fargen verdi: # bba67b.Then, opprette en ny linje av 1020x1px og fylle det med denne fargen verdi: # e6d6b8.And endelig, lage enda en tråd av 1020x1px og fyll den med denne fargen verdi. # bba67b

Trinn 16

Dra et par horisontale Guides henhold til følgende bilde:

den første delen av vår innholds~~POS=TRUNC området~~POS=HEADCOMP vil være "From The Blog" -delen. Grab Horisontal Type Tool, skriv inn en tittel ved hjelp av følgende tegn innstillinger:

Font Familie: Archer

Størrelse: 24 pkt

Vekt: Fet
< li> Anti-aliasing innstilling: Crisp

farge: Alle farger for nå

Utligning: Optisk

Tracking: 50

Bruk en Layer stil til denne tekstlaget, i henhold til følgende bilde:

Skriv inn navnet på den første blogginnlegg, ved hjelp av følgende tegn innstillinger:

Font Familie: Gotham Avrundet

Størrelse: 24 pkt

Vekt: Lys

Anti-aliasing innstilling: Crisp

Farge: # 40312a

Utligning: Optisk
< li> Tracking: 50

Skriv inn noen detaljer om blogginnlegget, ved hjelp av følgende tegn innstillinger:

Font Familie: Archer

Størrelse: 13pt

Vekt: Fet Kursiv

Anti-aliasing innstilling: Crisp

Farge: # ce953c

Utligning: Metrics

Tracking: 0

Vi vil nå lage en holder for ledelsen bilde av blogginnlegget. Så, ved hjelp av Avrundet rektangel Tool (U), opprette en 550x140px, med 5px radius, fyll den med hvilken som helst farge, og deretter bruke en Layer stil til det, i henhold til følgende bilde:

Plasser bly bilde og skape klipping maske for dette laget

Skriv tre linjer med tekst som en introduksjon av blogginnlegget, ved hjelp av følgende tegn innstillinger.

Font Familie: Verdana

Størrelse: 12pt

Vekt: Regular

Anti-aliasing innstilling: Glatt

Farge: # 000000 - # 247184

Utligning: Metrics

Tracking: 0

Ledende: 18 pt

Opprett en ny kopi av dette blogginnlegget, og sørg for å justere elementer i henhold til følgende bilde:

Trinn 17

Grab rektangelverktøyet (U), og lage en 110x30px rektangel, fyll den med hvilken som helst farge, og påfør et lag stil til det i henhold til følgende bilde:

igjen, bruke en støyeffekten til denne knappen, gjelder lagmaske, og dra fra bunn til topp med en svart til hvit Lineær Gradient.

Ved hjelp av line Tool (U), opprette en 110x1px linje, og fylle det med denne fargeverdi. # b2988d

Skriv inn et ord inne i rektangelet ( "The Blog," for eksempel), ved hjelp av følgende tegninnstillinger:

Font Familie: Archer

Størrelse: 16 punkter

Vekt: Fet

Anti-aliasing innstilling: Crisp

Farge: # ffffff

Utligning: Optisk

Tracking: 50

Bruk en Drop Shadow til det i henhold til følgende bilde:

trinn 18

Vi starter dette trinnet ved å dra en ny horisontal guide henhold til følgende bilde:

det er på tide å begynne å jobbe på sidelinjen. Grab Rectangular Marquee Tool (M), opprette et utvalg av 385x720px, og fyll den med hvilken som helst farge for nå

Bruk en Gradient Overlay til dette laget, i henhold til følgende bilde:.

Legg lagmaske til dette laget, deretter bruke Gradient Tool (G), dra med en svart til hvit Lineær Gradient, fra høyre til venstre.

Ved hjelp av line Tool (U), opprette en 1x720px linje, og fylle det med denne fargen verdi: # dfcdb2

Legg lagmaske i dette laget, og igjen ved hjelp av Gradient Tool (G), dra med en svart til hvit Lineær Gradient, men denne gangen fra bunn til topp..

Dupliser laget av linjen vi har nettopp opprettet, dytte det 1PX til venstre, og endre farge til:. # fff7ea

Trinn 19

Vi er vil lage vår sidebar-kategorien. Bruke Avrundet rektangel Tool (U), opprette en 310x200px rektangel, med 5px radius, fyll den med hvilken som helst farge, deretter bruker Layer Style til det i henhold til følgende bilde:

Dra en ny horisontal Guide henhold til følgende bilde:

Ctrl + Klikk på miniatyrbildet av dette laget til å laste sine piksler. Grab Rectangular Marquee Tool (M), sett markeringsinnstillingene til: Trekk fra utvalget, deretter foreta et valg i løpet av de områdene som er vist nedenfor for å oppheve dem. Nå sitter du igjen med et område som er valgt, opprette et nytt lag, og fyll den med denne fargen verdi: # 40312a

Ved hjelp av Line Tool (U), lage to linjer ved siden av hverandre (. se bildet nedenfor), skal hver og en av dem være 1px. Fyll den på igjen med denne fargen verdi: # 134a56, og en på høyre med denne fargen verdi:.. # 257386

Gjør det samme igjen, men denne gangen horisontalt

Trinn 20

Skriv inn ordet "kommentarer" i den første kategorien, ved hjelp av følgende tegn innstillinger:

Font Familie: Archer

Størrelse: 16 punkter

Vekt: Medium

Anti-aliasing innstilling: Crisp

Farge: # ffffff

Utligning: Metrics

Tracking: 50

Bruk samme skygge vi har brukt på brødsmule tekst, til det

Skriv inn ordene "kategorier" og "Archives" ved hjelp av følgende tegn innstillinger.

Font Familie: Archer

Størrelse: 16 punkter

Vekt: Medium

innstillingen Anti-aliasing: Crisp

Farge: #ffffff

Utligning: Metrics

Tracking: 50

Sørg for å justere dem som bildet nedenfor. Også bruke en Drop Shadow til det i henhold til følgende bilde:

Trinn 21

Skriv et eksempel på en kommentar, ved hjelp av følgende tegn innstillinger:

Skrift Familie: Verdana

Størrelse: 12pt

Vekt: Regular

Anti-aliasing innstilling: Glatt

Farge: # ffffff

kniping: Metrics

Tracking: 0

Ledende: 18 pt

Skriv inn noen detaljer om den kommentaren, ved hjelp av følgende tegn innstillinger:
< li> Font Familie: Archer - Gotham Rounded

Størrelse: 12pt

Vekt: Fet Kursiv - Medium

Anti-aliasing innstilling: Crisp

Farge: # f8eedf

Utligning: Optisk

Tracking: 0

Lag en kopi av denne kommentaren, og skape mellom dem en separator som den vi opprettet i trinn 19 .

Trinn 22

Opprett en annen tittel (som sier: "HVEM ER VI") som den i bildet nedenfor:

Bruk rektangel Tool (U), skape en 310x100px rektangel, bruke en Stroke til den (innstillinger kan sees på bildet under), og deretter plassere et bilde inne som rektangelet.

Bruke Horisontal Type Tool (T), skriv noen ord om hvem du er, ved hjelp av følgende tegn innstillinger:

Font Familie: Verdana

Størrelse: 12pt

Vekt: Regular - Fet

Anti- aliasing innstilling: Glatt

Farge: # 000000 - # 247184

Utligning: Metrics

Tracking: 0

Trinn 23
< p> Opprett en annen tittel (som sier: "sponser"). Deretter bruker rektangel Tool (U), opprette en 138x138px, og fyll den med denne fargen verdi. # Febf5d

Plasser et bilde av en annonse som bildet nedenfor:

Opprett en kopi av denne annonsen sted

ved hjelp av line Tool (U), lage to linjer ved siden av hverandre, må hver og en av dem være 1x95px, fyll den på igjen med denne fargeverdi. #ffffff, og en på høyre med denne fargeverdi. # cfbea3

Åpne opp fargeovergangsbehandlaren, sette innstillingene som bildet nedenfor, velger du ett av lagene i de to linjene, legge til lagmaske, og deretter dra fra topp til bunn med denne Gradient. Dessuten gjør det samme med lag av den andre linjen

Trinn 24

Dra en ny horisontal Guide henhold til følgende bilde:.

Bruke Rectangular Marquee Tool ( M), opprette et utvalg av 1020x420px, fyll den med hvilken som helst farge, og deretter bruke en Gradient Overlay til det, i henhold til følgende bilde:

Ved hjelp av Single Row Marquee Tool, skape et valg, og fyll den med denne fargen verdi: # b2988d

Step 25

Dra to horisontale Guides henhold til følgende bilde:.

Bruke Horisontal Type Tool (T), skriv den første tittelen av bunnteksten, ved hjelp av følgende tegn innstillinger:

Font Familie: Archer

Størrelse: 24 pkt

Vekt: Fet

Anti-aliasing innstilling: Crisp

farge: Alle farger

Utligning: Optisk

Tracking: 50

Bruk deretter en Layer Style til det i henhold til følgende bilde:

Vi vil nå lage vårt kontaktskjema. Vel, trenger jeg ikke å si noe, bildet nedenfor sier alt

Bruk følgende Layer Style til alle felt /rektangler vi har nettopp opprettet:.

Nå, skriv noen tekst i disse feltene som viser hva de er for, ved hjelp av følgende tegn innstillinger:

Font Familie: Archer

Størrelse: 13pt

Vekt: Fet

Anti-aliasing innstilling: Crisp

Farge: 247184

Utligning: Metrics

Tracking: 0

Trinn 26

La oss skape "SEND". Bruke rektangelverktøyet (U), opprette en 110x30px rektangel, og fyll den med denne fargen verdi: # febf5d. Deretter gjelder en Layer Style til det i henhold til følgende bilde:.

Igjen, bruke en støyfilter, legge lagmaske, og deretter drar fra topp til bunn med en svart til hvit Lineær Gradient
< p> Ctrl + Klikk for å velge bildepunktene på knappen bakgrunnen. Deretter går du til Velg > Endre > Contract > Kontrakts Av: 1px, og fylle dette valget med: # ffffff.Again gå til Velg > Endre > Contract > Kontrakts Av: 1px, deretter traff Delete.Deselect utvalget, og ta Opacity i dette laget ned til:. 15%

Skriv inn ordet "Send" inne knappen, ved hjelp av følgende tegninnstillinger:


Font Familie: Archer

Størrelse: 16 punkter

Vekt: Fet
Anti-aliasing: Crisp

Farge: # ffffff

Utligning: Optisk

Tracking: 50

Og deretter bruke en Drop Shadow til det i henhold til følgende bilde:

Trinn 27

Den andre delen av vår footer vil inneholde bilder av våre siste prosjekter. Så, ved hjelp rektangel Tool (U), opprette en 125x95px rektangel, bruke en Stroke til det, plassere et bilde, og lage klipping maske til det.

Hold legge bilder og lage enda en knapp.

Trinn 28

den tredje og siste del av vår store bunntekst er det Twitter stream. Så, ved å bruke Horisontal Type Tool (T), skrive en tekst som et eksempel på tweet, ved hjelp av følgende tegn innstillinger:

Font Familie: Verdana

Størrelse: 12 pkt

Vekt: Regular

Anti-aliasing innstilling: Glatt

Farge: # f8eedf

Utligning: Metrics

Tracking: 0

Deretter skriver du noen detaljer om tweet, ved hjelp av følgende tegn innstillinger:

Font Familie: Archer

Størrelse: 12pt

Vekt Fet Kursiv

Anti-aliasing innstilling: Glatt

Farge: # 2e91a0

Utligning: Metrics

Tracking: 0
< p> Hold legge flere eksempler på tweets ... også lage en "følg oss" -knappen som vist nedenfor:

Sett hver av de tre seksjonene i en individuell Layer Group. Velg de tre grupper, og klikk deretter på Fordel horisontale sentre i kontrollinjen.

Trinn 29

Det er på tide nå å skape den lille bunntekst. Bruke Rectangular Marquee Tool (M), opprette et utvalg av 1020x70px, og bruke en Gradient Overlay til det i henhold til følgende bilde:

Bruk en Noise effekt til dette laget (samme effekt som vi har brukt til overskriften)

Ved hjelp av Single Row Marquee Tool, skape et valg, og fyll den med denne fargen verdi:.. # 38a4bs

Bruke Horisontal Type Tool (T), skriv copyright merknader, ved hjelp av følgende tegn innstillinger:

Font Familie: Archer

Størrelse: 13pt

Vekt: Medium

Anti-aliasing innstilling: Crisp

Farge: # ffffff

Utligning: Metrics

Tracking: 50

Bruk deretter en Drop Shadow til det, i henhold til følgende bilde:.

og til slutt, skriver en liten navigasjon, ved hjelp av de samme tegninnstillinger og Drop Shadow innstillinger nevnt ovenfor

Konklusjon

det er det, folkens! Vi er ferdige med vår nettside grensesnitt design. Håper virkelig du har funnet denne opplæringen nyttig. Og hvis du har noen kommentarer, vennligst la dem nedenfor, og vil sørge for å svare på dem. Også, ikke glem å sjekke ut oppfølgingen del om hvordan å få dette designet leve!