Share
Photoshop er ofte det rette verktøyet for webdesign, spesielt hvis du lager et design ved hjelp av mange bilder og børsteeffekter. I denne veiledningen vil jeg vise deg hvordan du lager en komplett grunge hjemmeside design. Vi skal utforme topptekst, sidebjelke, kropp, bunntekst og stil alt for å jobbe sammen i en tungt strukturert og slitt design.
Denne gangen skal vi lage et komplett webdesign i grunge-stil ved hjelp av Photoshop og mange bilder. Siden dette er et mellomliggende til avansert nivåopplæring, vil jeg hoppe over forklaringen av noen grunnleggende trinn. Først opprett et nytt dokument 950 px med 800 px ved RGB 72dpi. Vis linjalene og dra fire guider som begrenser dokumentet, dette vil være det optimale arealet av designet. Jeg planlegger å holde en fast breddeoppsett.
Gå til bilde> lerretstørrelse og øk bredden og høyden mye mer, 1200 px ved 1000 px er OK, slik at vi skal designe for større skjermoppløsninger. Deretter legger du til flere guider hvor du planlegger å legge til containerne (Header, Navigeringslinje, Sidebar, Footer).
La oss forestille oss at dette designet er bestemt for en Wordpress-mal, så vi trenger en header, en navigeringslinje inne i toppteksten og en høyre sidefelt. Ta en titt på bunnen av bildet nedenfor. Deretter fyller du en bakgrunn med denne fargen # 7A8173.
Nå skal vi lage et mønster for topptekstens bakgrunn, noe som er ganske enkelt. Opprett et nytt dokument 50 px med 300 px og tegne noe som bildet nedenfor. Jeg bruker guider for å gjøre min form så symmetrisk som mulig. Gå deretter til Rediger> Definer mønster og lagre formen som "mønster 1."
På et nytt lag i vår hoveddesignfil tegner du et rektangel på 300 px med rektangulærverktøyet. Gå til Filtre, og legg til et mønsteroverlegg, søk etter ditt helt nye mønster og bruk det. For å få det til å se riktig ut må du klikke på knappen Snap to Origin. Endre laget Fyll til 0%, opprett et nytt, tomt lag over formlaget, og slå sammen begge, slik at du får mønsteret til å legge til noen effekter på det. Navn det laget "Mønster 1."
Velg "Mønster 1" -lag og legg til det noen lagstiler: Drop Shadow, et overtoningsoverlegg og et mønsteroverlegg. Prøv å få noe som ligner på bunnen av bildet nedenfor, ved hjelp av følgende verdier.
Nå skal vi legge til navigasjonslinjens bakgrunn. Tegn et rektangel som gjemmer litt av "Mønster 1" laget. Påfør dette rektangelet et mønsteroverlegg, en svart til rød svart gradientoverlegg og en myk Drop-skygge. Bruk verdiene av bildene nedenfor som referanse. Deretter legger du til en lagermaske> Skjul alt, og tegner en svart til hvit til svart reflektert grad på lagmasken, du får noe som ligner på bunnbildet under.
Tegn nå en ellipse (# 691E1B) over "Mønster 1" -laget, betegne det "Light", og Påfør en Gaussian Blur til den med en radius på 50 piksler. Jeg opprettet en ekstra guide for å tegne lyset i midten av overskriften. Slett alt under navigeringslinjen, og endre lagets blandingstilstand til fargegods.
For å fullføre den første delen av oppsettet, skal vi tegne sidebjelkens bakgrunn. Tegn noen guider for å avgrense sidebjellet og også redigere eksisterende guider for å gjøre dem tilpasning til den faktiske designen. Deretter tegner du et rødt rektangel (# 3D100B), og bruker følgende stiler: en dropshadow, et fargekobling og et mønsteroverlegg.
På dette punktet må du vurdere hvordan du skal kutte opp bildet i HTML + CSS; Derfor bruker jeg Dropshadows med 0px of Distance mesteparten av tiden, og bare horisontale eller vertikale gradienter. Teksturet i dette tilfellet har mange horisontale linjer. Det må være enkelt å konvertere dette til en gjentakende bakgrunn for mange områder. Dette er også et godt poeng å ta en pause og organisere lagene i mappene dine for å holde orden på organisasjonen.
Nå begynner med detaljene, jeg vil legge til nettstednavnet på et fremtredende sted, derfor bruker jeg dette flotte grunge etikettbildet. Tydeligvis må du trekke ut etiketten og plassere den i øverste venstre hjørne av vårt design. Prøv å få noe som det første bildet nedenfor. Deretter bruker du Magic Wand-verktøyet til å velge den lille brune sirkelen, deretter Command + Shift + I for å reversere valget. Juster nivåene og fargetone / metning med de verdiene som vises nedenfor.
Når du bruker Eraser-verktøyet og en uregelmessig børste, sletter du noen områder av etikettens grense. For å legge til en papirkutt effekt, velg Dodge-verktøyet og bruk samme penselform for å bruke unnfanget til etikettens kantlinje.
Vi skal legge til en skygge på vår etikett neste. For dette dupliserer du "Label" -laget, endrer Hue / Saturation> Lightness til -100, og bruker en Gaussian Blur med en radius på 10 px. Deretter endrer du "Label copy" Blending modus til Multiply og setter Opacity til 75%.
En siste retusjering for etiketten, endrer metningen til -40 for å gjøre den mer grå.
Nå legger vi til noen støttebilder, prøver å finne bilder rundt et konsept, men da dette er en veiledning om teknikkene, velger jeg en tilfeldig en. Dette er et vakkert bilde av et vintagestog her i Bolivia. Trekk ut formen på toget, men du vil. Endre deretter "tog" lagets blanding modus til mørkere.
La oss legge til litt tekst, først sidenavnet. Skriv noe ved hjelp av a grunge font; Du kan finne noen interessante de her. For tittelen bruker du en svartype og endrer lagets blandingstilstand til Overlegg, dupliser deretter laget og endre kopiens Opacity til 75%. For å få en liten uklarhet, flytt det kopierte laget ett eller to piksler til venstre eller høyre. Legg til mer tekst ved hjelp av denne teknikken, som et slagord eller noe. Det er også et godt øyeblikk å legge til navigasjonslinkene også.
Legg nå flere ting, det er grunge stil! Jeg lastet ned noen Jenn B's børster herfra, disse børstene har begrensninger. Bruke disse børstene legger til noen tall, hjørner, maskeringsbånd og hva ikke, gjerne gjøre hva du vil i dette trinnet. Bare husk å legge til alle lagene under både "Label" og "Label Copy" -lagene.
Nå begynner vi å legge til sideseksjonene. Først av alt, i overskriften trenger vi en søkefelt. Skriv inn et søkemerke. Deretter tegner du et rødt (# 6A0400) rektangel som et søkefelt, og deretter bruker du en strekk- og et mønsteroverleggslagseffekt.
Nå begynner vi å legge til hovedinnholdet i vårt design. Først skal vi legge til et felt for å legge inn noen kjennetegnet tekst på. Tegn et mørkegråt (# 0D0F0E) rektangel i et lag under sidebjelken. Jeg opprettet fire mapper for å holde layoutet organisert: Ett for "Header" over alt, en for "Sidebar" under "Header", en for "Innhold" under "Header" og "Sidebar", og den siste en for "bunntekst".
Du kan legge til dette rektangelet i "Innhold" -laget, også du kan legge til så mange mapper etter behov i disse fire mappene. Når du har plassert rektangelet på et riktig sted, må du bruke en dråpeskygge og en strekk effekt ved hjelp av verdiene nedenfor.
Last ned noen grunge hjørner og grenser herfra, og lim inn en over den grå bakgrunnen. Bruk deretter en overleggseffekt til hjørnet med en farge på # 171612. Legg også til et annet hjørne over sidefeltet, men denne gangen bringer du ned Opacity under 25%.
La oss legge til litt tekst. Du kan legge til noen eksempeltekst, forestill deg at det er javascript-drevet tekst nylig innleggsseksjon, eller en omtalt innleggsseksjon, noe sånt. Jeg bruker samme grunge skilttype som brukes til navigeringslinjen med fargen # 4D0D0D og Arial med en farge på # 3F3F3F for kroppens tekst.
Bruk en dråpeskyggingseffekt til tittelen og legg til samme effekt for navigasjonselementene også. Når du konverterer denne PSD til en HTML + CSS-fil, må du konvertere disse titlene til bilder, så det er OK hvis du vil legge til flere stiler for dem. Til slutt bruker du noen guider for å sette tekstlagene til et riktig sted.
Vårt utvalgte bar ser litt tomt ut, så la oss legge til et støttebilde. I dette tilfellet brukte jeg et polaroid skudd. Du kan laste ned polaroidbildet herfra. Trekk ut polaroidet, lim det inn i et lag over den grå bakgrunnen og grunge hjørnet på mappen "Innhold", og endre deretter Hue / Saturation for å gjøre polaroid litt mer sepia (Velg Colorize-alternativet).
Bruk de samme teknikkene for "Label" -lagets kanter (trinn 9). Slett og Dodge kantene på Polaroid-bildet. Til slutt legger du til en dråpeskygge ved hjelp av samme teknikk som brukt i trinn 10 i denne opplæringen.
Jeg hadde dette sepia-bildet av meg selv, så jeg legger det til designet. Legg til et bilde i et nytt lag over "Polaroid" -laget, velg det svarte firkanten av polaroidet, deretter Command + Shift + I for å reversere valget. Velg bildelaget og Slett alt ekstra. Deretter kan du legge til flere grunge detaljer, som noen maskeringsbånd over bildet, som vist på bildene nedenfor. Jeg brukte en 1px Drop Shadow-effekt til det ekstra båndet også.
Det er et godt øyeblikk å legge til et RSS-ikon i sidefeltet. Tegn et avrundet hjørnerektangel (# 99917E), og bruk deretter følgende effekter: En innvendig glød, et mønsteroverlegg og en dropshadow, bruk verdiene som vises i bildet nedenfor. Deretter tegner eller limer inn i et nytt lag over rektangelet den vanlige RSS-formen og fyll den med svart. Endelig endrer du "RSS form" -laget Blending Mode til Overlay.
Sett nå RSS-ikonet på sidefeltet øverst til venstre. Legg til litt tekst som "RSS FEED." Tegn et annet stykke maskeringsbånd, og skriv antall abonnenter over det. Husk, nå jobber vi i mappen "Sidefelt".
Det er på tide å legge til et enkelt innlegg i vårt design. Bare skriv litt tilfeldig tekst som et tittel, en annen linje for datoen, kategorien og forfatteren. Også noen ord som teksten til innlegget. Typografi er det viktigste i dette trinnet. Jeg elsker å bruke Serif-fonter for titlene og Sans-Serif for kroppen, men er bare meg. Bestem hva du føler er best for ditt design.
For å gi vår prøvepost litt mer holdning, kommer vi til å legge til et forhåndsvisningsbilde, akkurat som på TUTS-nettstedene, men da dette er en grunge-design, må vi legge til en grunge bakgrunn til bildene våre. Dette er like enkelt som å legge på topp og bunn med CSS, og deretter sette et repeterende bakgrunnsbilde.
Dette bildet vil være av 35mm film. Trekk ut to små striper fra filmen, og bytt nyans / Saturation ved å bruke verdiene i bildet nedenfor. Deretter sletter du noen områder av stripene ved hjelp av en uregelmessig Eraser. Til slutt legger du til en Drop Shadow til hver stripe. Når du er ferdig med filmen, lim inn et bilde under filmlagene. Jeg legger til et bilde av en av mine reiser. Til slutt, bruk en Stroke Effect (# 2F261D) til det bildet.
Tegn en 2px rød linje under innlegget og litt tekst for kommentarene, det er en god ide å legge til alle postrelaterte lag i en ny mappe som heter "Post". Så øk dokumentets høyde litt, det kan du gjøre ved å bruke Beskjæringsverktøyet, gjør dette bare for å se hvordan vårt design vil se ut om det har to eller tre innlegg på den. Dupliser "Post" -gruppen, og endre teksten og bildet, som vist nedenfor.
Faktisk ser det bra ut, legger du nå titlene på sidebjelkens elementer. Du kan også lage en mappe for hvert element.
Legg nå et listeikon. Du kan bruke hvilken som helst egendefinert form. Legg til litt tilfeldig tekst, jeg bruker Georgia til sidefeltet. Kopier ikonene og rediger en som representerer sveve stat. Gjør det samme for hvert sidebjelkeelement.
Vi er nær ferdig. Legg til noen grunge detaljer nederst i sidefeltet, ved å legge til noen grunge børster i et nytt lag over sidelinjens bakgrunnslag. Velg Sidebarens bakgrunnslag, og gå til Lag> Lagermask> Avslør alt. Deretter gjemmer du noen områder nederst til venstre på sidefeltet med en uregelmessig svart pensel.
Endelig velg Sidebarens bakgrunnslag og kopier lagets stil. Tegn et rektangel nederst på motivet i "Footer" -mappen og lim inn lagstilen i den. Deretter ekstraher og lim dette bildet over Footer bakgrunn.
Juster metningen for å gjøre den litt gråere. Du kan også søke på det arket en dråpe skygge som gjentar teknikken i trinn 10. Legg litt tekst over papiret, kanskje et slagord eller noe. Og legg også til litt teksttekst, som en rask navigasjonslinje, og opphavsrettsinformasjonen.
Webdesign er ikke et stykke kake, men jeg håper denne opplæringen vil hjelpe deg med å forbedre dine ferdigheter. Det er opp til deg nå, designe ditt eget, eller registrer deg for PLUS for å laste ned PSD-kilden og spille med den. Jeg vil gjerne se noen grunge webdesign i Psdtuts + Flickr-gruppen. Du kan se det siste bildet under eller se en større versjon her.
Abonner på Psdtuts + RSS-feed for de beste Photoshop-knappene og artiklene på nettet.
Accentsconagua