Share
I denne opplæringen lager vi et strukturert nettstedslayout ved å legge til flere bilder. Å lage høyt strukturerte webdesignoppsett er enklere enn du kanskje tror. Du kan lære å bygge bildeintensive motiver raskt. For mellomliggende Photoshop-designere som lager dette, tar det mindre enn en time, og du lærer noen profesjonelle tips underveis. La oss komme i gang!
Du kan se det endelige bildet forhåndsvisning nedenfor.
Ta en titt på nettsteddesignen vi skal lage nedenfor.
Vår videoredaktør Gavin Steele har laget denne videoopplæringen for å komplimentere denne teksten + bildeopplæringen.
I denne opplæringen bruker vi noen lagerbilder for å lage et svært teksturert weblayout. La oss starte med å opprette et nytt dokument med følgende størrelse: 1000 piksler med 1000 piksler.
Nå går du og laster ned sømløs trestruktur fra Grafplus.com. Her finner du nedlastingskoblingen: Last ned tre sømløs tekstur. Åpne "texture-small.jpg" i Photoshop, og gå deretter til Rediger> Definer mønster. Velg et navn for mønsteret ditt og klikk OK. Du kan nå lukke bildet med tretekstur.
Velg "bakgrunn" -laget og trykk på Kommando + J. Denne snarveien vil duplisere "bakgrunn" -laget. Velg dette nye laget og fra toppmenyen velg Lag> Lagstil> Mønsteroverlegg ... Bruk mønsteret du opprettet for noen sekunder siden.
Bruk rektangulærverktøyet til å lage noen vertikale stenger med forskjellige farger /
Velg alle disse figurene i lagpaletten ved å holde nede Kommando-tasten og med museklikk på hvert lag). På denne måten velger du alle former.
Når du har alle former valgt, trykk på Kommando + E (denne snarveien vil fusjonere alle lagene til en enkelt). Endre blandingstilstanden til Color Dodge, og Opacity-verdien til mellom 40% og 50%.
Nå er det på tide å legge til et nytt flott lagerbilde. Besøk grafplus en gang til og last ned følgende bilde: Grunge tekstur. Legg dette bildet i dokumentet ditt øverst. Gå til Arkiv> Plasser, og velg denne fine grunge tekstur.
Pass på at du har valgt dette laget, og bruk en enkel dråpeskygge. Lag> Layer-stiler> Drop Shadow.
Bruk Rektangulær markørverktøy for å gjøre et valg som vist.
Pass på at du har laget med grunne tekstur valgt, og trykk deretter på Kommando + J (denne snarveien vil skape et nytt lag via kutt). Velg det nye laget og roter laget 180 grader (Rediger> Transform> Roter 180. Plasser dette nye laget øverst på oppsettet med Move-verktøyet. Gå videre og legg til din logo nå også. For denne opplæringen bruker jeg tekst: "PSDtuts +."
Endre blandingsmodus for tekstlogoen til Color Burn.
Bruk samme teknikk til å kutte noen knapper og en bunntekst. Her kan du se resultatet.
Hvis du vil lage en tydelig knapp med en annen farge, må du velge laget med knappen du vil gjøre det unikt, og trykk deretter på Kommando + U for å hente inn Hue / Saturation-innstillingene. Marker avkrysningsruten i farger, og flytt skyvekontrollene til høyre eller venstre til du er fornøyd med resultatet.
På høyre side lager du en hvit form med rektangulærverktøyet.
Bruk Linjeverktøyet til å lage noen tynne linjer og plasser dem over den hvite formen. Fargen som brukes for linjene er # d3d1d2.
Velg den hvite formen og linjene i lagpaletten din, og trykk deretter på Kommando + E for å slå sammen alle lagene. Velg Eraser Tool og, med en liten, rund børste, slette noen deler av laget til du har et realistisk stykke papir.
Legg nå følgende lagestiler.
Bruk det horisontale verktøyet for å legge til litt tekst. Jeg brukte Myriad Pro-fonten (du finner skrifttypen i Windows 7 og Vista).
Legg til et annet bilde i midten av layoutet, og på høyre side av bildet legger du til to piler. Pilene finner du under Custom Shape Tool.
Sammen med PSD-filen finner du to lagerbilder i Psd Plus-kildefilene for denne opplæringen. Selvfølgelig, hvis du ikke er et pluss medlem, kan du søke etter tilsvarende bilder på nettet. Den første er et blad, og den andre er en rød blomst. Åpne begge bildene i Photoshop, og fjern bakgrunnen. Begge bildene er svært høy kvalitet på rundt 4000 piksler, og du kan fjerne bakgrunnen med Magic Eraser Tool, eller bruk din foretrukne metode.
Legg bildet med bladet på høyre side av oppsettet under det hvite papirstykket.
Dupliser laget med bladet flere ganger og plasser disse flere bladene i forskjellige posisjoner som vist.
Det siste trinnet er å plassere den røde blomsten over de grønne bladene.
Her er sluttresultatet. Ha det gøy å lage dine egne svært teksturerte Photoshop-layouter.
Accentsconagua