Share
Gode design bør aldri gå til spill. Denne designen ble opprinnelig gjort for en klient som aldri betalte, og siden det var så overveldende positiv tilbakemelding, bestemte jeg meg for å lage en opplæring for den. Rike og kremete teksturer gir dette designet et unikt tema. Håper du elsker kaffe!
Ikke bare gir vi bort Photoshop-filene for dette designet, men vi gir også bort HTML-filene, slik at du kan sjekke hvordan det er kodet etter designfasen! Du bør jobbe gjennom denne opplæringen fra starten, men vær så snill å ta tak i kildefilene.
Som med hvilken som helst design, trenger vi et godt rutenett for å komme i gang. Jeg starter alltid med et dokument som er 960px bredt (som vil være bredden på siden vår). Sørg for å gi dokumentet nok høyde for å tillate alle elementene vi skal skape - jeg valgte 1100px.
Dra retningslinjer til sidene av dokumentet. Disse vil fungere som takrenner for vårt designområde, som vil være 960px bred. Dra også retningslinjer på 10px og 960px på det horisontale. Disse vil fungere som en ident for å holde alt kuttet opp når vi beveger oss nedover siden.
Når du har angitt retningslinjene dine, går du til Image -> Canvas Size og endrer verdien på lerretbredden til 1000px. Dette vil gi oss et lite ekstra rom å jobbe med på utsiden, og vise hvordan nettstedet vil utvide i nettleseren.
Øverste venstre hjørne av dokumentet ditt skal se slik ut:
Vi trenger å lage noen flere retningslinjer, da vi har noen få kolonner som går vertikalt nedover siden. Lag 6 mer vertikale retningslinjer ved 330px, 350px, 650px, 670px, 730px og 750px. Disse skal hjelpe oss med å komme og holde alt på linje.
Deretter fyller vi i bakgrunnen. Vi går åpenbart for brun på grunn av det er rikdom (og det er fargen på kaffe). Begynn med å lage et nytt lag, og fyll på hele dokumentet med en solid farge (vi skal endre den med lagstiler). Du kan gjøre dette raskt ved å trykke Shift + F5 på "Fill".
Gi nytt navn til dette laget til "bg", og høyreklikk det i paletten Lag og velg "Blandingsalternativer". Velg "Gradient Overlay", og opprett en gradient fra # 67331c til # 2e1308; Vi vil ha den mørkere brune på toppen av siden, og lyseren brun i bunnen.
Nå må vi legge til en liten tekstur slik at graden ikke ser så flatt ut. Lag et nytt lag, over ditt "bg" -lag, og nevne dette laget "Mønster".
Resultatet skal være noe slikt:
Nå som vi har opprettet vår bakgrunn, går vi videre og begynner å lage noen av elementene på siden - starter med den fancy gule navigeringsfeltet.
Opprett en ny laggruppe, og gi nytt navn til denne gruppen "Navigasjon". Inne i "Navigasjon" -gruppen, opprett et valg som er 100px høyt og hele bredden på dokumentet ditt. Opprett et nytt lag, og trykk Shift + F5 for å fylle laget. Som utfyllingsfarge, bruk # edd38d (gul). Gi nytt navn til dette laget "bg" i "Navigasjon" -gruppen.
Du har nå navigasjonslinjen din. Det ser litt flatt ut, så vi går videre og legger til noen lagstiler for å få det til å skille seg ut litt mer. Høyreklikk på "bg" -laget og velg Blending Options.
Navigeringslinjen skal se slik ut:
Nok en gang trenger vi litt tekstur - ellers vil det ende opp med å se flatt ut. Jeg brukte denne sandlignende teksten jeg hadde ligget rundt. Den viktige delen her er fargen. Du kan bruke hvilken som helst tekstur du vil, men fargen skal lignes på fyllfarge vi brukte tidligere. Legg til denne tekstur i et nytt lag over "bg" -laget som vi tidligere har opprettet, og sett det opacity til 30%. Gi nytt navn til denne lagteksturen, og kontroller at den er nøyaktig samme dimensjoner som "bg" -laget.
Vi ønsker å gi litt mer dybde til den gule stangen, så vi skal manuelt lage en mørkere skygge på undersiden. For å gjøre dette, gjør et valg nederst i den gule linjen og opprett et nytt lag.
Fyll dette nye laget med en gradient (Shift + F5) fra Transparent til # 2f1408 (ved 30% Opacity)
Det burde gjøre det for den gule baren. Det skal se slik ut:
Opprett en ny gruppe kalt "Nav", og opprett all følgende tekst og lag i den.
Ganske enkel navigering her, stor og lett å lese. Skriften er Georgia, 30px. Pass på at teksten din har god avstand mellom hvert ord (for å tillate mulige aktive stater). Lag tekstfarge # 92583f, med det aktive elementet (Hjem i dette tilfellet), # 64311b.
For å lage den "aktive" understreken for navigasjonen, brukte jeg børsteverktøyet til å øyeeball en noe tittel understreket. Dette knytter logoen sammen med resten av nettstedet. Ikke bekymre deg hvis du ikke får det rett på første forsøk - jeg trakk nok det 50 ganger før jeg fant linjen jeg likte.
Nå trenger vi "Sign Up" -knappen. Dupliser navigasjonsteksten (velg tekstlag og Command + J) og endre ordene for å lese "Sign Up".
Deretter velger du det avrundede rektangelverktøyet og tegner et rektangel med Radius 20px; Dette gir oss form rundt Sign Up-teksten.
Sett fyll på dette laget til 0%, og bruk følgende lagstil:
For å opprette logoen fant jeg et fritt lager serviett og trimmet kantene litt. Du kan finne din egen på: iStockPhoto eller andre gratis nettsteder.
Jeg la til en dråpe skygge for å få det til å se at servietten satt over alt annet:
Jeg brukte en lager tekstur av en kaffe flekk (for å gi litt mer autentisitet til kaffesiden og servietter). Du må kanskje tinker med opaciteten til den ser riktig ut. Du kan også prøve å sette blandingsmodus av flekken til Multiply for å få det til å skille seg ut litt mer.
Når det gjelder resten av logoen, valgte jeg en håndskrift skrift og trakk raskt en kaffekopp. Ingenting er for vanskelig her.
Vi lager nå den gjennomsiktige søkefeltet. Opprett en ny lagergruppe, under lagene "Yellow Bar" (fordi vi vil at søkefeltet skal vises som en fane som står under overskriften). Lagstakken din skal være noe i henhold til disse linjene:
Vi starter med å lage det runde rektangel som har søkefeltet i det. Ta tak i det avrundede rektangelverktøyet og opprett et rektangel som er 300px bredt og ca 70px høyt. Pass på at rektanglet passer inn i vår "høyre kolonnekledning" med støttelinjene som vi hadde opprettet i første trinn i denne opplæringen.
Resultatet skal se slik ut:
Deretter skal vi lage innboksboksen med verktøyet avrundet rektangel. Lag et rektangel, med Radius 5px, Bredde: 280px, Høyde: 30px. Senter dette nye rektangelet i "beholder" rektangelet du tidligere opprettet. Gi nytt navn til dette laget "input"
Ta tak i tekstverktøyet og legg til litt tekst med # af8753 som fargen din. Velg ditt favoritt lagerikon (jeg anbefaler å bruke IconFinder for ikoner).
Nå som vi har hele overskriften opprettet, kan vi nå komme inn i det virkelige innholdet. Vi lager de 3 viktigste bøssene av innhold først. Igjen, ta tak i det avrundede rektangelverktøyet med en radius på 20px og opprett 3 avrundede rektangler i de 3 kolonnene vi hadde opprettet tidligere.
For å få disse boksene til å se ut som det jeg bare viste i skjermbildet, bruk følgende lagstiler:
Jeg fant noen flotte kaffepikoner på nettet som passer perfekt til designet, som jeg brukte på disse 3 seksjonene. Nok en gang bruker vi bare ressursene våre - og det er ingen mening å gjenskape hjulet her.
Jeg la til en overskrift med samme font Georgia, og noen punkttekst, og denne delen er ferdig.
Siden designet bruker gjennomsiktighet gjennom hele designen, følte jeg at tabellstilene ikke skulle være noe annerledes. Bordet er rent og enkelt, noe som hjelper det med å smelte inn i designet perfekt.
Ta tak i markeringsverktøyet og opprett et firkantet utvalg hvor du vil at bordet ditt skal være. Mitt bord er 700px bredt (følger retningslinjene vi satte tidligere), og 220px høyt.
Lag et nytt lag og fyll dette laget (Shift + F5) med en mørkere brun (jeg valgte # 3c2014). Gi nytt navn til dette laget til "bord bg" og sett opaciteten til 70%. Nå bruker vi enkeltlinjevalgverktøyet, vil vi opprette separasjonen mellom kolonner og rader. Når du har valgt hvor du vil at divisjonene skal være, trykker du på Slett og fjern de fylte pikslene fra "tabell bg" -laget.
Du bør nå ha et fint bordrutenett slik:
Jeg bruker Georgia til å fylle ut cellene med tekst, og jeg lar det være deg å velge farger / størrelser. Pass på å legge til hovedoverskriften og tabelloverskriftene.
Nå skal vi opprette vurderingsikonene. For prisverdiene valgte jeg en skrift med et tykt dollarskilt og brukte noen lagstiler på den. Når du finner fonten din, skriv inn 4 dollar tegn. Dupliser dette laget, deretter skift det riktig og skriv inn 1 dollar-tegn (de vil ha separate lagstiler brukt på dem). For de "aktive" gule dollartegnene, bruker vi følgende lagstiler:
Og for de inaktive dollartegnene, vil vi at de skal se inn (som om de ikke er fylt). Vi bruker forskjellige lagstiler her:
For stjernevurderingen brukte jeg verktøyet Photoshop Custom Shape og valgte stjernen. Samme teknikk som vi brukte for dollartegnene (bare Kopier / Lim inn Layer-stilene ovenfra) til disse stjernene.
Resultatet ditt bør være på følgende måter:
Grupp denne enkelt raden du opprettet, og Dupliser gruppen to ganger, skift raden nedover for å passe inn i rutenettet du opprettet tidligere. Det endelige resultatet skal se slik ut:
Vår siste hovedavdeling er den mest aktive brukerlisten. Vi fortsetter bruken av Georgia, men legger til en fin touch for de brukerne som ikke har avatarer. Du vil se at mønsteret faktisk er fra ikonet i "Browse" -boksen nær toppen - dampen kommer fra kruset. En annen fin detalj å knytte designeren sammen. Slik lager du det.
I kolonnen til høyre i kolonnen legger du til overskriften (gjenbruk det du hadde opprettet for "Nylige omtaler") og fyll et rektangelområde med 40% Opacity (farge spiller ingen rolle her). Navngi dette lagets "container", og så legger vi til noen lagstilarter (fargeoverlegg og strekk) til det:
Resultatet skal være en ugjennomsiktig boks med en fin ytre kant som er mørkere enn den indre bakgrunnen:
For avataren, bruk marque verktøyet til å lage et 50px ved 50px utvalg. Lag et nytt lag, og fyll ditt valg med hvilken som helst farge (Shift + F5).
Nå legger vi til noen lagstiler for å gjøre denne avataren litt bedre for de brukerne som ikke har et avatar-sett.
Legg til litt tekst for brukerens navn og land, og dampen virvler fra kaffekoppen, og dupliser rækken et par ganger for å fylle ut plassen.
Til slutt, bunnteksten. For å gi en liten adskillelse, er det en mørk brun til gjennomsiktig gradient fra topp til bunn for å gi en visuell linje for å bryte opp de to seksjonene. For å opprette denne separasjonen, bruk markeringsverktøyet til å gjøre et valg og fyll ut valget med en gradient (brun til gjennomsiktig). Juster opaciteten til gradienten til du kan se mønstrene fra bakgrunnen skinne gjennom.
Igjen, vi bruker Georgia her for å lage noen supplerende lenker om nettstedet. Jeg brukte 18px for koblingene og 14px for opphavsrettserklæringen nedenfor. Pass på at venstre side er i samsvar med retningslinjene vi opprettet tidligere.
Etterbehandlingen er å bruke kaffekoppikonet fra "Bla gjennom" -boksen over i nederste høyre hjørne; igjen å rette opp høyre side med retningslinjene.
Ikke så vanskelig ikke? Det er ganske enkelt når du kan bryte det inn i stykket, gjenbruk av noen av de samme stilene og teknikkene du har gjort igjen og igjen. De skivede filene er også inkludert, så du kan se hvordan dette var kodet. Mye har endret seg siden jeg designet og kodet dette, og mange av bildene kunne sannsynligvis bli gjenopprettet med CSS3 og gradienter, men for nesten 3 år siden, så har jeg gjort det. Du har kanskje sett denne designen på www.coffeenatic.com; Nå som siden er borte, trodde jeg det ville være en god ide å dele det med alle som jeg mottok en positiv tilbakemelding om det. Håper du likte det!
Accentsconagua