Design en ren e-handel Website Interface i Photoshop
Husk Fashion Store freebie? I dag skal jeg vise deg hvordan du kan lage denne rene e-handel grensesnittet i Adobe Photoshop. Denne opplæringen er ikke bare fylt med mange Photoshop teknikker, men også design konsepter som går utover hvordan-til del, som jeg er sikker på at du ikke vil gå glipp av. Så la oss komme i gang!
Fashion Store, The Freebie
Først av alt, vil jeg gjerne gi kreditt til Sunil, som faktisk designet dette grensesnittet. Jeg har gjort noen endringer i oppsettet, slik som å omorganisere det i henhold til et rutenett.
Skisser ideen din
Hold skisser løs og grov.
Før vi hopper rett inn i Adobe Photoshop, bør vi først litt tid på å tenke på hvordan vi skal strukturere vår design. La oss ta en penn og papir og begynne å skissere vår wireframe.
Når vi skaper en trådramme, skisse vi vår side til å prøve ut forskjellige visuelle plasseringer for hvert element i vår side. Så det vi gjør er å tenke på hvordan elementene fungerer best, passer sammen på siden, og hvordan de best forholder seg til hverandre. Vi vurderer også hvilke elementer som bør vektlegges, og som ikke burde.
På dette stadiet vi skal slutte å bekymre deg for hvordan spesifikke elementer vil bli vist, og tenk på hva den generelle site design kan bli.
Dessverre, siden jeg ikke har laget dette oppsettet fra grunnen av, jeg har ikke et skjermbilde av det skisserte wireframe vise deg. Men en ting vil jeg si: Hold dine skisser løs og grov. De trenger ikke å være fancy eller kunstnerisk
Hvis du er ny på dette, her er ditt første oppdrag. Prøve å skissere dette endelige utformingen, eller noen annen eksisterende nettside du vil. Dette vil hjelpe deg legge merke til forholdet mellom elementene på en nettside
Videre lesning:.
Hvorfor tegning og Wireframing Ideas Styrker Designs
Opprette en gråtone Rammeverk
Nå har vi skissert noen ideer det er på tide å slå disse skissene til en mer solid wireframe. Vi skal begynne å lage en gråskala wireframe der alle layout og type behandlinger vil være til stede, men det blir ingen farge, tekstur, bilder, etc.
Her er hvordan vår endelige gråtoner wireframe skal se slik ut:
Layout: Sammensetning
Før vi begynner å arbeide på vår wireframe i Adobe Photoshop, har vi noen beslutninger å gjøre
Først vil vår layout være et fast oppsett, betyr dette at. dimensjonene av vår layout vil bli spesifisert i et bestemt antall piksler. Vår layout skal være 940px bredt slik, som du kan se på bildet nedenfor, enten det er vist på en mindre eller større vindu, størrelse forblir den samme
Layout:. The Grid
Ved hjelp av et rutenett gjør det så mye lettere å justere våre elementer og bestemme sin egen størrelse. I denne designen, vil vi bruke denne registerlinjer skapt av den utrolige gutta på Teehan + Lax. Det er en 6PX registerlinjer kombinert med 960 bæresystem
Videre lesning:.
Som vi gå videre vil vi diskutere hvordan vi skal innrette vår tekst og elementer, men for nå du bør gå foran og lese denne artikkelen for å få en idé om hvordan du bruker dette rutenettet
Designe Raskere med en Baseline Grid
Layout:. White Space
Hvit eller Negative Space er den plassen i mellom elementer i vår grensesnitt. Plassen mellom de store elementene kalles Macro White Space. Micro White Space er White Space mellom elementer som listeelementer, mellomrommet mellom en bildetekst og et bilde, eller avstanden mellom ord og bokstaver.
White Space hjelper posisjons merker og designere vanligvis bruker White Space i deres design for å gi dem en følelse av raffinement og luksus. Så det er noe som vi bør ta vare på mens vi utformer
Typografi:. Skrifttyper
Vi bør alltid velge våre Skrifttyper /fonter nøye. Å velge riktig font er ikke lett i det hele tatt, og du må se på mange aspekter, fra å velge en skrifttype med en personlighet som vil levere det rette budskapet, til hvordan det vil se ut på nettleseren. Jeg vil ikke komme inn mye detalj, i stedet jeg vil nevne et par innlegg som jeg fant veldig interessant:
Videre lesning:
En nybegynners guide til Sammenkobling Fonts
Hvordan velge en skrifttype
"Hva Font skal jeg bruke?": Fem prinsipper for valg og bruk av Skrift
Velg riktig Font: En praktisk guide til typografi på Web
Velg din web fonter klokt
På Velge type
I vårt grensesnitt vil vi bruke følgende tre skrifttyper: Helvetica, en ren og moderne skriftsnitt som sier alt. Georgia, en skrifttype som fremkaller kongelige og har en alvorlig tone. Bebas, en skrifttype som har en følelse av autoritet, og er som en dristig uttalelse, alltid gjør et poeng
Helvetica Neue:.. Body kopi (Standard font)
Bebas: Overskrifter (Last ned her)
Georgia:.. Andre ledet elementer (Standard font)
Typografi: Hierarki
"Typografiske hierarki" beskriver bare hvordan ulike skrifttyper, vekter og størrelser av skrifttyper struktur et dokument.
I form av skriftstørrelser, er registerlinjene vi har besluttet å bruke designet for å være kompatibel med standard skriftstørrelser, det er derfor vi vil holde med dem. Disse størrelsene vise seg å være svært nyttig når den kombineres med ledende avledet fra tre. Så her er de viktigste pikselstørrelser for vår grensesnitt:
24px. H1 overskrifter
18px. H2 overskrifter
14px. H3 og navigasjon overskrifter
12px: Body kopi med en ledende verdi på 18px
Men i sidepanelet bannere og kjennetegnet innholdsområdet, vil vi ende opp med et par andre forskjellige størrelser. (tross alt, vil disse annonsene bli erstattet i tid), men de vil være standard skriftstørrelser.
Når det gjelder vekter, vil jeg gå fra Roman små bokstaver hvis du Fet små bokstaver. Ingenting veldig komplisert
Typografi:. Ledende, Utligning & Sporing
Som jeg allerede har sagt, vil vi bruke ledende (linjeavstand) verdier drevet fra nettet, som vil være:. 18px, og 21px
Vår utligning vil være Metrics for brødtekst, og optisk for overskrifter (se videre lesning). Og til slutt, vil vi bruke standard kniping (0) for all tekst
Videre lesning:.
Typografi: Anti-Aliasing
Her er en veldig god artikkel. Du må lese dette! Jeg vil ikke si et eneste ord, bortsett fra at for kroppen kopi (små punktstørrelser) vil vi bruke Sharp, og for overskrifter (større punktstørrelser) vil vi bruke Crisp.
Trinn 1: Sette opp Document
Nå som vi har gjort noen beslutninger, er det på tide å åpne opp Adobe Photoshop og faktisk begynne å lage vår wireframe! Så åpne opp rutenettet dokumentet vi tidligere lastet ned som heter "grid2.psd". Det første vi skal gjøre er å velge alle de eksisterende lagene i dokument-unntak for mappen som heter "Marks" - og bli kvitt dem, eller gruppere dem i en mappe og skjule dem for nå. Før vi går videre, la oss velger du "Marks" -mappen og klikk “ Lock All ” knappen i lag-panelet.
Nå må vi endre høyden vår dokument, fordi vår endelige utformingen er høyere enn den eksisterende dokument. For å gjøre det, vil vi gå til Image> Canvas Size, endre høyden til 1540px og sørg for å sette ankeret til toppen Center.
Deretter klikker du Vis> Tillegg (for å se våre Guides), herskere (for å vise herskere) og Snap (slik at objektene vi skal opprette kan knipse til de Guides)
Trinn 2:. Opprette Bakgrunn
Vi vil begynne med å lage vår bakgrunn. Lag et nytt lag, gi den et navn ("bg" for eksempel), så grip den Rectangular Marquee Tool (M). Opprett et utvalg over hele lerretet, og for å fylle den, klikker du Shift + Backspace, bruk: Color ... deretter fylle markeringen med denne fargen verdi: # f5f5f3. Legg merke til at fargeverdiene vi skal bruke i gråtoner wireframe er ikke de endelige verdiene, men vi vil bruke dem til å differensiere våre sideelementer
Trinn 3:. Opprette Top Bar
Nå la oss lage den øverste linjen. Igjen ta tak i Rectangular Marquee Tool (M), opprette et utvalg av 1260x45px, og deretter fylle det med denne fargeverdien. # 2d2d2d
Velg Horizontal Type Tool (T), skriver navigasjons elementer, deretter bruker følgende innstillinger tegn til det:
Font: Helvetica Neue LT Std
Vekt:. 55 Roman
Størrelse:.. 12px
utligning. Metrics
Farge:. # 767676
Anti-Aliasing. Sharp
For å være sikker på at vår tekst er i samsvar med bakgrunnen, velge begge lagene (tekstlaget og bakgrunnslaget) og klikk på Juster vertikale sentre i kontrollinjen
Trinn 4:. Opprette Påloggings Form
Skriv inn ordet "Logg inn" ved å bruke Horisontal Type Tool (T), gjelder følgende innstillinger tegn til det, og sørg for å justere det som bildet nedenfor
Font:.. Helvetica Neue LT Std
Vekt:. 75 Fet
Størrelse:. 12px
Utligning:. Metrics
Farge. #ffffff
Anti-Aliasing. Sharp
Nå la oss lage tekstfeltene. Bruke Avrundet rektangel Tool (U) lage to avrundede rektangler hver og en av dem skal være 127x26px, med 15px radius. Fyll dem med denne fargen verdi: # 767676 og justere dem som bildet nedenfor
Skriv de to ordene "brukernavn" og "passord" inni de to feltene, med følgende innstillinger tegn brukes på dem, da. justere dem i henhold til bildet under:
Font: Helvetica Neue LT Std
Vekt:. 55 Roman
Størrelse:.. 12px
Utligning:. Metrics
Farge. #ffffff
Anti-Aliasing. Sharp
Vi skaper vår "Go" -knappen bruker Avrundet rektangel Verktøyet (U), men denne gang et 33x25px rektangel med 25px radius. Deretter skriver du inn ordet "Go" inni den bruker de samme tegn innstillingene i det forrige bildet, men endre vekten til 75 Fet.
Grab the Line Tool (L), lage en linje av 1x25px og fyll den med hvit . Deretter skriver du inn ordet "Sign Up" ved hjelp av de samme tegn innstillingene vist i følgende bilde, også justere alle elementene vi har skapt i dette trinnet i henhold til det
Trinn 5:. Opprette et ad Space
La oss bruke Rectangular Marquee Tool (M) for å lage et rektangel av 480x60px, fyll den med # 767676, og juster den som på bildet nedenfor. Dette skal fungere som en plassholder for en annonseplass.
Så gi dette laget et hjerneslag. Bildet nedenfor viser innstillingene vi ønsker
Trinn 6:. Opprette Logo
Praktisk sett logoen vår bør ikke utformes her i Adobe Photoshop, men for nå vil vi bare lage lage den her. Så ta tak i Ellipse Tool (U), lage en sirkel av 60x60px, fyll den med denne fargeverdien. # 2d2d2d, og juster den som vist på bildet nedenfor
Skriv inn bokstaven "F" ved hjelp av følgende karakter innstillinger og justere den i henhold til følgende bilde:
Font. Avant Quelombre
Størrelse:. 53.65px
Farge: #ffffff
.
Anti-Aliasing. Crisp
Deretter skriver du inn ordet "Fashion" og gjelder følgende tegn innstillingene til det:
Font. Avant Quelombre
Størrelse:. 30px
Utligning. Optical
Farge:. # 2d2d2d
Anti-Aliasing. Crisp
og "Store" med følgende innstillinger karakter:
Font. Georgia
Vekt:. Regelmessig
Størrelse:. 12px
Utligning .: Metrics
color: # 767676
Anti-Aliasing:.. Sharp
Pass på at du plasserer dem både i henhold til bildet nedenfor
.
Trinn 7: Opprette Navigation Bar
I dette trinnet vil vi lage vår navigasjonslinjen. Gå videre og ta tak i Rectangular Marquee Tool (M), opprette et utvalg av 940x48px, fyll den med denne fargen verdi: # c3c3c3, og sette 20 piksler under annonseplass som på bildet nedenfor
Vi er. ll gå videre og ta tak i Horizontal Type Tool (T), og skriv titlene på våre undersider ved hjelp av følgende innstillinger karakter:
Font. Bebas
Vekt: Regular .
Størrelse:. 14px
Utligning. Optical
Farge:. # 2d2d2d /# ffffff
Anti-Aliasing. Crisp
Nå la oss skille de titlene vi har nettopp opprettet. Bruke Line Tool (U), lage en vertikal linje mellom hver to titler, fyll den med denne fargeverdien. # B4b4b4, og sørg for å forlate 20px mellom hver tittel og vertikal linje
Trinn 8: Lage Drop-Down Menu
Nå la oss lage en drop-down menyen, skal vi? Grab Rectangular Marquee Tool (M), opprette et utvalg som fyller opp plassen mellom de to omkringliggende linjer av ordet "kvinner" og fylle det med denne fargen verdi: # 2d2d2d. Deretter oppretter enda en utvalg av 340x147px, fyll den med samme fargeverdi, og justere den i henhold til bildet nedenfor. Dette vil fungere som en bakgrunn for vår rullegardinmenyen.
Hit (T) knappen på tastaturet for å velge Horizontal Type Tool (T), og begynner å skrive elementene i undermenyen, ved hjelp følgende innstillinger karakter:
Font: Helvetica Neue LT Std
Vekt:.. 55 Roman
Størrelse:. 12px
Utligning: . Metrics
Ledende. 30px
Farge:. # 767676
Anti-Aliasing. Sharp
Til slutt, sørg for at de ' re justert som følgende bilde.
Hva vi skal gjøre nå er å skape en ramme for et bilde (hvor vi skal plassere et bilde av en kvinne bare for å fortelle brukeren du har valgt "Kvinner" -delen). Så grip den Rectangular Marquee Tool (M), opprette et utvalg av 139x105px, og fyll den med # 1f1f1f, deretter opprette en annen utvalg av 121x87px og fyll den med # 767676. Sørg for at sentrene i de to rektangler er justert horisontalt og vertikalt
Trinn 9:. Creating the Search Bar
La oss gå videre og lage et inntastingsfelt for vår søkelinjen. Grab Avrundet rektangel Tool (U), opprette et rektangel av 123x26px, med 15px radius, og fyll den med hvitt. Ikke glem å justere den som vist på bildet nedenfor
Ved hjelp av den utro Horizontal Type Tool (T), skriver ordet "søk" inne i avrundet rektangel og bruke følgende innstillinger tegn til det. < .no>
Font: Helvetica Neue LT Std
Vekt:. 55 Roman
Størrelse:.. 12px
Utligning:. Metrics
< li> color: # 767676
Anti-Aliasing:.. Sharp
Finn et ikon av et forstørrelsesglass, og sett det på høyre side av søkefeltet, sørg det er farget med # 929292 og justert i henhold til bildet nedenfor
Trinn 10:. Creating the Search Bar
La oss begynne å lage den "Featured Content" område. Start med å lage et utvalg av 640x315px bruke Rectangular Marquee Tool (M), og fyll den med # c3c3c3.
Nå la oss lage denne baren hvor en melding om kjennetegnet produkt går. Grab Rectangular Marquee Tool (M), opprette et utvalg av 480x33px, fyll den med denne fargeverdien. # 767676, og juster den som vist på bildet nedenfor
Velg Horizontal Type Tool (T) og skriver en melding ved hjelp av følgende tegninnstillingen:
Font: Helvetica Neue LT Std
Vekt:. 55 Roman
Størrelse:.. 14px
< li> Utligning. Metrics
Farge. #ffffff
Anti-Aliasing. Sharp
Ikke glem å justere teksten og bakgrunnen som demonstrert.
Det er på tide å skrive noen innledende tekst. Grab Horizontal Type Tool (T), og skriv inn ordet "Collection" med følgende innstillinger karakter:
Font: Georgia
Vekt:.. Fet
Størrelse:. 18px
Utligning. Optical
Farge:. # 2d2d2d
Anti-Aliasing. Crisp
Deretter skriver du inn Ordet "Summer" ved hjelp av følgende innstillinger karakter:
Font. Georgia
Vekt:. Fet
Størrelse:. 48px
Utligning .: Optisk
Farge. #ffffff
Anti-Aliasing. Crisp
Og til slutt skriver "Hjelper du ser kult" med følgende innstillinger tegn søkt til det:
Font. Helvetica Neue LT Std
Vekt: 55 Roman
Størrelse:.. 18px
Utligning: Optical.
Farge:. # 2d2d2d
Anti-Aliasing:.. Crisp
Sørg for å justere vår tekst som vist på bildet nedenfor
Trinn 11: Opprette Sale Tag
Nå la oss lage vår salg tag. Bruk Ellipse Tool (U) for å lage en 80x80px sirkel, fyll den med denne fargen verdi: # 2d2d2d, deretter plassere det som vist på bildet nedenfor
Skriv inn tekst inne i sirkelen ("40% rabatt. "for eksempel) og gjelder følgende tegn innstillingene til det:
Font. Georgia
Vekt:. Regular /Fet
Størrelse: 48px /14px.
Utligning: Metrics
Farge:.. #ffffff
Anti-Aliasing. Crisp
Trinn 12: Opprette hovedinnhold området
La oss gå videre og starte skaper vår hovedinnhold området. Vi begynner med den tittelen, så grip den Horisontal Type Tool (T), skriv en tittel, og gjelder følgende tegn innstillingene til det:
Font. Bebas
Vekt:. Regelmessig
Størrelse:. 24px
Utligning. Optical
Farge: # 2d2d2d
Anti-Aliasing:.. Crisp Anmeldelser
Ikke glem å plassere den 20px under kjennetegnet innholdsområdet.
Med Horizontal Type Tool (T) fortsatt er valgt, skriver du inn en kort beskrivelse for denne tittelen, bruker følgende innstillinger karakter : Og selvfølgelig det bør være på linje i henhold til registerlinjene som vist på bildet nedenfor Ved hjelp av Line Tool (U), lage en linje som er 640px bred og farge det med denne verdien. # e5e5e5 Grab Rectangular Marquee Tool (M), opprette et utvalg av 200x152px, fyll den med # 2d2d2d og juster den 20px under linjen vi har nettopp opprettet. Opprett et salg tag som den vi opprettet i trinn 11, men denne gangen gjør sirkelen 45x45px og fyll den med hvitt. Og teksten skal være 24px /14px og fylt med # 767676 Bruk Horizontal Type Tool (T) for å skrive inn navnet og prisen på produktet ved hjelp av følgende innstillinger tegn. Vi skal fylle dette tomrommet mellom teksten med et ikon - i Hvis du lurer på. Plasser et ikon av en handlekurv, plasser den i det tomme rommet vi igjen i forrige trinn, og juster den som vist på bildet nedenfor. Hvis ikonet er farget, gå til Layer> New Adjustment Layer> Black &White ... for å gjøre det gråtoner. Velg alle produkt forhåndsvisning elementene vi opprettet i dette trinnet, og gruppere dem sammen, deretter kopiere dette mappen fem ganger. Juster seks produkt previews som vist på bildet nedenfor Nå skal vi jobbe med sidebar vår. Vi begynner med den store banner, så grip rektangel Tool (U), opprette et 280x314px rektangel og fyll den med # 2d2d2d. Med verktøyet likevel valgt å lage en firkant av 280x41px og fyll den med # 767676, må du justere både på dem som vist på bildet nedenfor. Bruke Horizontal Type Tool (T), skriv en tittel for dette banneret ved hjelp av følgende innstillinger karakter: Hit (U) for å velge Ellipse Tool (U), lage en sirkel som er 210x210px , fyll den med # 7676767 og prøve å justere det liksom som på bildet nedenfor. Nå for å kvitte seg med den delen av sirkelen som går ut av banneret bakgrunnen, åpne opp lagpanelet sette laget av sirkelen ("tag_bg") rett ovenfor lag banner bakgrunnen ("box_bg"), deretter høyreklikk på sirkelens lag> Opprett Klipping Mask. Nå bruker Horizontal Type Tool (T ), skriv litt tekst inne i denne sirkelen, ved hjelp av følgende tegn innstillinger: Pass også på at " Faux Fet "i tegnpanelet er valgt Grab rektangel Tool (U) og lage et rektangel av 280x144px, fyll den med # 2d2d2d, og plassere det i henhold til bildet under. Nå la oss skape "vite mer" -knappen. Bruk Rectangular Marquee Tool (M) for å opprette et utvalg av 120x30px og fyll den med # 767676. Så grip Horizontal Type Tool (T), type "vite mer" inne i rektangelet ved hjelp av følgende innstillinger karakter : Med Horizontal Type Tool (T) fortsatt valgt å skrive en tekst som på bildet nedenfor ved hjelp følgende innstillinger karakter: Bildet nedenfor viser deg hvordan du kan justere teksten Lag en kopi av dette banneret og la 20px av vertikal plass mellom dem Grab Horizontal Type Tool (T) og skriv inn en tittel ved hjelp av følgende tegn innstillinger: Ved hjelp av Line Tool (U) lage en linje som er 240px bred og fylle det med denne fargen verdi: # e5e5e5. Finn et ikon /illustrasjon på Twitter fugl og legg den som på bildet nedenfor. Pass også på å gjøre det gråtoner som vi gjorde i forrige trinn Grab Horizontal Type Tool (T) og skriv litt tekst som et eksempel på en tweet, deretter bruker følgende innstillinger tegn til det. < .no> Deretter skriver du "Flere Tweets" ved hjelp av følgende tegn innstillinger: Ikke glem å klikke "Understreket" i tegnpanelet Grab rektangel Tool (U) og lage et rektangel av 940x264px, fyll den med #ffffff, og sted 20px under "Twitter Updates" seksjonen Lag en tittel for denne delen som er akkurat den samme som den vi opprettet i forrige trinn. Deretter bruker Line Tool (U) for å lage en 898px bred linje og fyll den med # e5e5e5. Bruk rektangel Tool (U) for å lage en 178x113px rektangel. Lag tre eksemplarer av det og justere dem i henhold til bildet nedenfor Igjen, skriver litt informasjon om produktet og bruke følgende innstillinger tegn i teksten. Til slutt ikke glem å gjøre "Kjøp nå" understreket Finn. et ikon av en pil og legg den som på bildet nedenfor, kan du prøve å endre størrelsen til noe rundt 28x28px, og fyll den med denne fargen verdi: # 2d2d2d. Lage en ny kopi av dette ikonet og satte den på høyre side Grab Rectangular Marquee Tool (M) og opprette et utvalg av 1260x122px, deretter fylle det med # 2d2d2d Skriv inn tekst i bunnteksten ved hjelp av følgende innstillinger tegn. Til slutt plassere en kopi av logoen og sørg for at det er justert som på bildet nedenfor, og det er det Nå som vi er ferdige med vår gråtoner trådramme, er det på tide å fokusere på å farge vår grensesnitt. Farge er en veldig stort emne, så jeg bare kommer til å gå gjennom den fargekombinasjonen delen. Vår fargevalget vil inneholde tre typer farger: Følgende bilde viser vår base, viktigste, og aksentfarger. Siden vi skal bruke noen portretter i vår design, jeg trodde jeg skulle kort snakke om "Looking Room". Vanligvis vil et portrett fotografi har et emne og plass rundt dem. Den visuelle interesse i portrettet kan komme fra bevegelsen, det er hvordan våre øyne flytte rundt på bildet. Og for å få øye bevegelse, justerer fotografen plass rundt motivet tilsvarende. Så for eksempel som du kan se på bildet nedenfor, justeringen av motivet på venstre (1), med White Space (Looking Room) på høyre, skaper bevegelse (3), som gjør våre øyne ser i den retningen der motivet er ute Nå la oss starte farging vår grensesnitt! For å fylle bakgrunnslaget med farge, kan du klikke på miniatyrbildet i Lag-panelet mens du holder nede Cmd /Ctrl-tasten for å velge sine piksler og klikk Shift + Backspace> Color ...> # f6f6f4. Eller du kan legge til en farge Overlay til det Color ordet "Logg inn" med denne fargen verdi: #ffffff, "brukernavn /passord" med:. # 8e8e8e, input felt med # 8e8e8e, bakgrunnen på knappen og "Sign Up" med # ea6a53, og navigasjons tekst med # 999999 Fyll reklameplass med et bilde som vist i bildet nedenfor, og skape klipping maske for det, som vi gjorde i trinn 14. Tid for å farge logo. Gi sirkelen og ordet "Fashion" denne fargen verdi: # 2d2d2d, fyll bokstaven "F" med samme farge som bakgrunnen # f6f6f4, og ordet "store" med # bc3726 Vi vil fylle navigasjonsbakgrunnstekst med denne fargen verdi: # c3c3c3, teksten med # 2d2d2d, ordet "kvinner" med # f6f6f4 (som representerer hover /valgt stat), og de vertikale skillelinjer med med # b4b4b4. For å legge til mer visuell interesse til navigasjons teksten, vil vi legge til en Drop Shadow til det. Bildet nedenfor viser innstillingene ... Flytte til søkefeltet, vil vi fylle inndatafeltet med hvit #ffffff, ordet "Søk" med # a6a6a6, og ikonet med # ea6a53. Anmeldelser Nå la oss gi vår sub-navigasjonsfeltet noen farger ... Fyll bakgrunnen med # 2d2d2d, teksten med # c4c4c4, og grensen av bildet med # 1f1f1f. Vi vil gjøre bildekanten litt mer interessant ved å legge til en Drop Shadow og Indre skygge til det. Alle innstillinger kan sees på bildet under. Til slutt plassere et bilde av en kvinnelig modell som vist på bildet nedenfor. Nå er det tid for å lage de stiplede linjer mellom navigasjonselementer . Åpne opp Adobe Illustrator, opprette et nytt dokument, velg Linje Segment Tool (\\), lage en linje som er 135px bredt, og fyll den med Ingen (/). Deretter åpner opp Strek-panelet og justere innstillinger i henhold til bildet nedenfor Kopier den stiplede linjen og lim det inn i Adobe Photoshop, lage to kopier av den, og fylle dem alle med denne fargen verdi:. # 484848 . Vi starter dette trinnet ved å plassere et bilde for å fylle bakgrunnen på banneret. Gå til File> Place ...> Velg et bilde> Place. La oss gå videre og farge sirkelen med teksten inni den. Fargeverdiene vi skal bruke er vist på bildet nedenfor. For å gjøre tallet "50" skiller seg ut litt vil vi bruke en Drop Shadow til laget som inneholder det. . Innstillinger kan sees på bildet under Tid for å jobbe med tittelen ... Fyll bakgrunn av det med denne fargen verdi: # 000000, og teksten med denne fargen verdi: # c3c3c3. Deretter oppretter to stiplede linjer (som den vi opprettet i trinn 21) fylle dem med # 414141 og plassere dem som vist på bildet nedenfor. La oss legge til noen visuell interesse til tittelen bakgrunn, ved å legge til en subtil grunge tekstur til det. Last ned dette fantastiske børste settet: "Funksjons Subtile Grunge Børster" skapt av awesome gutta på WeFunction eller noen annen børste satt du foretrekker. Lag et nytt lag rett over tittelen sin bakgrunnslaget, mens du har den valgt, male over tittelen med en av børstene ved hjelp av Brush Tool (B) (eller kanskje du kan bruke en av de PNGs inkludert i stedet) fyll den med hvit, deretter redusere lagets tetthet ned til 30%. Endelig, høyreklikk på den> Opprett klipping maske ... Vi vil fylle på bakgrunn av verdig innholdsområdet med en gradient slik at den ser mer interessant. Så gå videre og ta tak i Gradient Tool (G), åpne opp Gradient Editor fra kontrollpanelet, og angi fargeverdier fra # b6a397 til # 9d8a83. Vi trenger å spesifisere området som skal fylles med gradient, og vi gjør det ved å gjøre et utvalg over det. Så la oss gå til Lag-panelet, klikk på bakgrunnslaget miniatyrbilde mens du holder nede Cmd /Ctrl-tasten for å foreta et valg over det, og med Gradient Tool (G) fortsatt er valgt, velger Radial Gradient, og dra fra, som vist i Bildet nedenfor mens du holder nede Skift-tasten for å begrense engel. De fargeverdier av elementene i denne delen er vist på bildet nedenfor. Til slutt, finne et bilde av en kvinnelig modell , plasser den i vårt dokument, og justere den i henhold til nettet som vist på bildet nedenfor Igjen, vi vil plassere enda en bilde som bakgrunn for vår banner, og bruke fargeverdiene vist på bildet nedenfor for å farge våre elementer. For å gjøre teksten skiller seg ut litt mer, vil vi gi det en Drop Shadow. Innstillingene kan sees på bildet under. Og vi vil gjøre det samme med den andre banner ... La oss nå gi noen farger til "Twitter Updates" -delen ... Bildet nedenfor
Font: Helvetica Neue LT Std
Vekt:.. 55 Roman
Størrelse:. 12px
Utligning: Metrics
Farge:. # 767676
Anti-Aliasing:.. Sharp
Trinn 13: Lage produkt Images
< li> Font. Helvetica Neue LT Std
Vekt:. 55 Roman
Størrelse:. 12px
Ledende. 21px
Utligning: Metrics. ..
color: # 767676 /# 000000
Anti-Aliasing: Sharp
Trinn 14:. Opprette Big Sidebar Banner
Font: Bebas
Vekt:. Regelmessig
Størrelse:. 18px
Utligning. Optical
Farge. #ffffff
Anti-Aliasing. Crisp
Font: Georgia
Vekt: Regular
Størrelse:. 18px /14px /24px . /30px
Utligning. Optical
Farge. #ffffff
Anti-Aliasing. Crisp
Trinn 15:. Opprette en mindre Sidebar Banner
Font: Helvetica Neue LT Std
Vekt:.. 55 Roman
Størrelse:. 18px
Utligning. Optical
Farge. #ffffff
Anti-Aliasing. Crisp
Font: Helvetica Neue LT Std
Vekt:. 55 Roman
Størrelse:.. 14px /24px /18px
< li> Ledende. 24px
Utligning. Optical
Farge: #ffffff
Anti-Aliasing:.. Crisp
Trinn 16:.. Opprette "Twitter Updates" Section
< p> Lag et utvalg av 280x235px bruke Rectangular Marquee Tool (M), fyll den med hvit, og plasser den 20px under banneret.
Font. Bebas
Vekt:. Regelmessig
Størrelse:. 18px
Utligning. Optical
< li> Farge:. # 2d2d2d
Anti-Aliasing. Crisp
Font: Helvetica Neue LT Std
Vekt:. 55 Roman
Størrelse:.. 12px
Ledende. 18px
< li> Utligning. Metrics
Farge:. # 2d2d2d /# 767676
Anti-Aliasing. Crisp
Font. Helvetica Neue LT Std
Vekt:. 55 Roman
Størrelse:. 12px
Utligning: Metrics.
Farge:. # 2d2d2d
Anti-Aliasing:.. Crisp
< h2> Trinn 17:. Opprette "Andre produkter"
Vekt:.. 55 Roman
Størrelse:. 12px
Ledende. 18px
Utligning:. Metrics
Farge: # 2d2d2d /# 767676
Anti-Aliasing:.. Crisp
Trinn 18:. Opprette bunntekstområdet
Font. Helvetica Neue LT Std
Vekt: 55 Roman .
Størrelse:. 12px
Ledende. 21px
Utligning:. Metrics
Farge. #ffffff /# 767676
Anti-Aliasing:.! Crisp
farge Kombinasjon Anmeldelser
Underordnet eller base farge: Dette er en visuelt svak eller underordnet farge. Det står i kontrast eller utfyller
Dominant eller hovedfarge.. Dette definerer kommunikative verdier av fargekombinasjonen
Accent eller høydepunkt farge: Dette kan være sympatisk til basen eller hovedfargen. Eller i stedet, kan du velge en aksent farge som er visuelt sterk, og ser ut til å konkurrere med hovedfargen, for å gi spenning i kombinasjonen.
Ser Room
Videre lesning:.
A Practical Guide Å designe Med Faces
Du ser hvor de ser
Trinn 19: Farging Bakgrunn
Trinn 20:. Farging Top Bar
Trinn 21. : Farging Navigation Bar
Trinn 22: Farging Big Sidebar Banner
Trinn 23: Farging Featured Content området
Trinn 24:. Vipper Small Sidebar bannere