resultatet skal være noe sånt som dette:

Opprett Gule Navigation Bar &

nå som vi har vår bakgrunn opprettet, vil vi gå videre og begynne å lage noen av elementene på siden – starter med at fancy gul navigasjonsfeltet.

Opprett en ny Layer Group, og endre navn på denne gruppen "Navigasjon". Inne i "Navigasjon" gruppe, opprette et utvalg som er 100px høy og hele bredden på dokumentet. Lag et nytt lag, og treffer Shift + F5 for å fylle laget. Som din fyllfarge, bruk # edd38d (gul). Gi nytt navn til dette laget "bg" innenfor "Navigasjon" gruppe.

Du har nå navigasjonslinjen. Det ser litt flat, så vi vil gå videre og legge til noen Layer Styles til det å gjøre det skiller seg ut litt mer. Høyreklikk på "bg" lag og velger Blending Options

Drop Shadow: Opacity. 36%; Vinkel: 90 grader, Avstand: 5, Spread: 0, Mål: 5

Gradient Overlay: # b98045 til # eacf9e

"Navigasjon" bar skal se slik ut:

Nok en gang, vi trenger en viss tekstur — ellers vil det ende opp som ser flatt. Jeg brukte denne sand-aktig struktur jeg hadde liggende rundt. Det viktige her er fargen. Du kan bruke alle teksturen du ønsker, men fargen skulle være lik fyllfargen vi brukte tidligere. Legg denne teksturen i et nytt lag over "bg" lag vi opprettet tidligere, og sette sin opacity til 30%. Gi nytt navn til dette laget tekstur, og sørge for at det er nøyaktig samme dimensjoner som "bg" lag.

Vi ønsker å gi litt mer dybde til den gule linjen, så vi kommer til å lage en mørkere manuelt skygge på nedre kant. For å gjøre dette, gjør et valg nederst den gule linjen og opprette et nytt lag.

Fyll ut dette nye laget med en gradient (Shift + F5) fra Transparent til # 2f1408 (30% Opacity)

det burde gjøre det for den gule linjen. Det skal se omtrent slik ut:

Navigasjon Elementer

Opprett en ny gruppe med navnet "Nav", og lage alle av følgende tekst og lag innenfor det

Ganske enkelt. navigasjon her, stor og lett å lese. Skriften er Georgia, 30px. Sørg for at teksten har god avstand mellom hvert ord (for å tillate eventuelle aktive stater). Gjør tekstfarge # 92583f, med aktivt element (Home i dette tilfellet), # 64311b.

For å lage den "aktive" under for navigasjon, brukte jeg penselverktøyet til øyeeplet en noe tittelen understreking. Dette knytter logoen sammen med resten av området. Ikke bekymre deg hvis du ikke får det riktig på første forsøk — Jeg sannsynligvis trakk det 50 ganger før jeg fant den linjen jeg likte.

Nå må vi "Sign Up" -knappen. Duplisere navigasjon tekst (velg tekstlaget og Command + J) og endre ord å lese "Sign Up"

Deretter velger Avrundet rektangel verktøyet og tegne et rektangel med Radius 20px.; Dette vil gi oss den form rundt Sign Up tekst

Sett påfylling av dette laget til 0%, og gjelder følgende Layer Styles:

Indre skygge. Multiply; Opacity: 56%; Color: # 592b17; Vinkel: 120 grader; Avstand: 3px; Choke: 0px; Størrelse: 5px;

1px Stroke, Inside med farge # d1bc8d

Logo på en serviett

For å lage logoen, jeg fant en gratis lager serviett og trimmet kantene litt. . Du kan finne din egen på: iStockPhoto eller andre gratis nettsteder

Jeg har lagt en skygge for å gjøre det synes som om serviett ble sittende over alt annet:

Avstand: 0; Spread: 0; Størrelse: 27px; Color: # 000

Jeg brukte en aksje tekstur av en kaffe flekk (for å gi litt mer autentisitet til vår kaffe nettstedet og serviett). Du må kanskje tinker med opacity til det ser riktig. Du kan også prøve å sette Blending Mode av flekken til Multipliser å gjøre det skiller seg ut litt mer.

Som for resten av logoen, valgte jeg en håndskrift font og raskt trakk en kopp kaffe. Ingenting er for vanskelig her.

Søk Box

Vi skal nå lage den gjennomskinnelig søkeboksen. Lag et nytt lag Group, under "Gule Bar" lag (fordi vi ønsker i søkefeltet til å vises som en fane som stikker ut under overskriften). Ditt lag stack bør være noe langs disse linjene:

Vi vil begynne med å skape avrundet rektangel som har søkefeltet i den. Grab Avrundet rektangel verktøyet og lage et rektangel som er 300px bred og ca 70 piksler høy. Pass på at rektangelet passer på "høyre kolonne gutter" med guider som vi hadde skapt i første trinn i denne opplæringen.

Resultatet skal se slik ut:

Det neste vi skal lage input boksen med avrundet rektangel verktøyet. Lag et rektangel, med Radius 5px, Bredde: 280 piksler, Høyde: 30px. Sentrer denne nye rektangel innenfor "container" rektangelet du opprettet tidligere. Gi nytt navn til dette laget "input"

Sett "input" Fill til 0%

Color Overlay: # 61301a på 43% Opacity

Indre skygge: Color # 000000; Vinkel: 120 grader; Avstand: 1; Choke: 0; Størrelse: 5px

Grab tekstverktøyet og legg til litt tekst med # af8753 som din farge. Velg din favoritt lager ikonet (Jeg anbefaler å bruke IconFinder for ikoner)

3 Innledende Bokser &ndash.; Søk /particpate /Nyt

Nå som vi har hele header laget, kan vi nå komme inn i den virkelige innhold. Vi skal skape de 3 viktigste bøtter med innholdet først. Igjen, ta tak i avrundet rektangel verktøyet med en radius på 20px og lage tre avrundede rektangler i 3 kolonner vi hadde skapt tidligere.

For å få disse boksene for å se ut som hva jeg bare viste i skjermbildet, bruke følgende lagstiler:

jeg fant noen flotte kaffe ikoner på nettet som passer design perfekt, som jeg brukte på disse 3 seksjoner. Igjen, vi bare gjør bruk av våre ressurser – og ingen mening i å gjenskape hjulet her.

Jeg deretter lagt en overskrift, med samme font Georgia, og noen punkt tekst, og denne delen er ferdig.

Siste anmeldelser
< p> Siden design bruker åpenhet gjennom hele design, følte jeg tabellstilene bør ikke være annerledes. Tabellen er ren og enkel, noe som bidrar til den gli inn i utformingen perfekt.

Grab marquee-verktøyet og lage en firkant valg der du vil at tabellen skal være. Mitt bord er 700 piksler bred (følger retningslinjene vi har satt tidligere), og 220px høy.

Lag et nytt lag og fylle dette laget (Shift + F5) med en mørkere brun (jeg valgte # 3c2014). Gi nytt navn til dette laget til "table bg" og sett opacity til 70%. Nå bruker én linje markeringsverktøy, oppretter vi skille mellom kolonner og rader. Når du har valgt hvor du vil at divisjonene skal være, trykk Delete og fjerne de fylte piksler fra "bordet bg" lag

Du skal nå ha et hyggelig bord rutenett som dette:.

jeg bruker Georgia å fylle cellene med tekst, og jeg skal la det opp til deg å velge farger /størrelser. Sørg for å legge hovedoverskriften, og tabelloverskriftene.

Nå skal vi lage vurderinger ikoner. For "pris" karakterer, valgte jeg en font med en tykk dollartegn og brukt noen lagstiler til det. Når du finner din skrifttype, skriv inn 4 dollartegn. Duplicate dette laget, så skift det rett og skriv inn en dollartegn (de vil ha separate lagstiler brukt på dem). For den "aktive" gule dollartegn, bruker vi følgende lagstiler:

Og for de inaktive dollartegn, vi vil at de skal se innfelt (som om de ikke er fylt). Vi kommer til å bruke ulike lagstiler her:

For stjerneklassifisering, jeg brukte Photoshop Custom Shape Tool og valgte stjernen. Samme teknikk som vi brukte for dollartegn (Bare kopier /lim inn Layer stiler fra ovenfor) til disse stjernene

Resultatet skal være langs disse linjene.

Gruppe denne ene raden du opprettet og Duplicate gruppen to ganger, skiftende rad nedover for å passe inn i rutenettet du opprettet tidligere. Det endelige resultatet skal se slik ut:

Mest aktive brukere

Vår siste hoveddelen er den mest aktive brukere listen. Vi fortsetter vår bruk av Georgia, men å legge en fin touch for de brukerne som ikke har avatarer. Du vil se mønsteret er faktisk fra ikonet i "Browse" boksen øverst – dampen som kommer fra krus. En annen fin detalj å knytte designer sammen. Her er hvordan du oppretter den.

I vår høyre kolonne gutter, legger overskriften (gjenbruk hva du hadde opprettet for "Siste anmeldelser") og fylle et rektangel med 40% Opacity (farge spiller ingen rolle her) . Navn dette laget "container", og så får vi legge til noen Layer Styles (farge Overlay & slag) til det:

Resultatet skal være en ugjennomsiktig boks med en fin ytre grense som er mørkere enn den indre bakgrunn:

for avatar, bruke marque verktøy for å lage en 50 piksler x 50 piksler valg. Lag et nytt lag, og fylle valget med hvilken som helst farge (Shift + F5).

Nå skal vi legge til noen Layer Styles å gjøre denne avataren ser litt bedre for de brukerne som ikke har en avatar sett .

Legg til tekst for brukerens navn og land, og dampen swirls fra kaffekoppen, og duplisere rad noen ganger for å fylle plassen.

Footer

til slutt bunnteksten. For å gi en liten separasjon, er det en mørk brun til gjennomsiktig gradient fra topp til bunn for å tilveiebringe en visuell linje for å bryte opp de to seksjonene. For å lage dette skillet, bruker du markeringsverktøyet til å gjøre et utvalg og fylle markeringen med en gradient (brunt til transparent). Juster tettheten på graderingen til du kan se mønstre fra bakgrunnen skinne gjennom.

Igjen, vi vil bruke Georgia her for å lage noen supplerende linker om nettstedet. Jeg brukte 18px for linkene, og 14 piksler for opphavsrett nedenfor. Pass på venstre side er på linje med de retningslinjene vi opprettet tidligere

Den siste finishen er gjenbruk kaffekoppen ikonet fra "Søk" boksen ovenfor i nedre høyre hjørne.; nok en gang å justere høyre side med retningslinjene.

Konklusjon

Ikke så hardt rett? Det er ganske enkelt når du kan dele den opp i stykket, gjenbruk noen av de samme stiler og teknikker du har gjort om og om igjen. Skiver filer er også inkludert, slik at du kan se hvordan dette ble kodet. Mye har endret seg siden jeg designet & kodet dette, og mange av bildene kan sannsynligvis gjenskapes med CSS3 og gradienter, men nesten tre år siden, er dette hvordan jeg hadde gjort det. Du har kanskje sett denne design på www.coffeenatic.com; nå at området er borte, jeg trodde det ville være en god idé å dele den med alle som jeg har mottatt slike positive tilbakemeldinger om det. Håper du likte det!