Share
I år har det vært en stor økning i grungey / teksturert / håndtegnet stildesign. Av natur har jeg en tendens til å designe et renere utseende selv, men jeg trodde jeg ville prøve hånden min på grunge i dag og skrive opp en opplæring om å lage en enkel papirstruktur fra grunnen av i Photoshop og deretter gifte seg med et weboppsett for å skape en fin design.
Så senere i uken tar vi samme webdesign, og jeg viser deg hvordan du kan remixere enda lenger enn bare å endre bakgrunn og farger, som faktisk kan endre hele stilen til et design. Men først la oss lage vårt papir tekstur nettsted!
Dette innlegget er dag 4 i vår webdesignsession. Creative Sessions "Session Day 3Session Day 5"
Det er tre forskjellige måter du kan få et strukturert papir utseende på:
Å lage en tekstur i Photoshop vil generelt resultere i et mer stilisert enn realistisk utseende, men det har sin egen sjarm. Det betyr også at du ikke trenger noen eksterne bilder.
Så først begynner vi et nytt dokument, dette lerretet er 1200px bredt x 900px høyt. Deretter fyller vi bakgrunnslaget med beige farge - # e8e8e2.
Opprett nå et nytt lag på toppen og lag din forgrunns- og bakgrunnsfarger: # 979a8f og # cfd1c5 som er variasjoner av den opprinnelige fargen. Så gå til Filter> Render> Clouds
Nå løper vi Filter> Kunstnerisk> Palettkniv med innstillingene som vises i bildet ovenfor. Palettkniv setter våre skyer inn i klosser ... Slike, til slutt vil dette gi en liten krøllete følelse til tekstur.
Deretter legger vi litt støy til lerretet ved Filter> Støy> Legg til støy bruker innstillingen som vises. Dette bør gjøre vår tekstur ser grov ut.
Nå tar vi vårt støyende, krumme lag og setter det på Multiplisere og 30%. Dette vil tone det rett tilbake.
Opprett nå et nytt lag på toppen og lag din forgrunns- og bakgrunnsfarger: # 42433e og # cfd1c5 - som er en mørkere versjon av det siste settet slik at vi får mer kontrast denne gangen. Så gå til Filter> Render> Clouds
Så løper vi igjen Filter> Kunstnerisk> Palettkniv filter.
Og denne gangen setter vi det nye laget til overlegg og 60%. Dette burde gi tekstur litt mer dybde.
Og det er det! Dette er vår tekstur!
For denne opplæringen er den lyse teksten perfekt, men du kan enkelt lage andre variasjoner bare ved å rote om med blandingsverktøy. For eksempel for å lage denne mørkebrune papirtekstur:
Hvis fargevariasjoner ikke er nok, kan du også endre følelsen av tekstur ved bruk av forskjellige filtre. For eksempel her har vi laget en mer pergament-y-følelse ved å ta vår lyse tekstur og:
Nå som du har en tekstur, kan du selvsagt gjøre det til en sømløst flislagt bakgrunn.
For denne opplæringen bruker vi først tekstur vi laget - den fra trinn 8.
Så nå skal vi lage en porteføljelayout for å gå med papirtekstur. Her er omtrentlig struktur for hjemmesiden. Som du kan se er det litt mer av en komplisert struktur enn i den forrige webopplæringsveiledningen fordi denne gangen har vi et oppsett inne i oppsettet.
Så vårt overordnede grid er et tre kolonne rutenett, så i hovedpanelet har vi brukt det rutenettet for å bryte området inn i to hovedrom, en er størrelsen på kolonne 1 og den andre spenner over begge de andre kolonnene.
Så først skal vi skape et arbeidsområde og lette det opp. Så her har jeg trukket to guider på skjermen, en på 100px og en på 1100px - det gjør området jeg jobber i akkurat 1000px som er perfekt.
Da lager vi et nytt lag og tegner en stor hvit boks som vist.
Deretter setter vi den hvite boksen tilbake til 25% opasitet.
Da skal vi grove det opp. Det er mange flotte grunge børster rundt, men for dette trinnet bruker vi bare en av Photoshops standardbørster. Du kan se det i skjermbildet over med 60 under det.
Hvis denne penselen ikke vises for deg, klikker du bare den lille pilen øverst på børsteskjermbildet og velger Våtbørster, klikk deretter Legg til for å legge dem til ditt nåværende sett.
Så velg Eraser Tool (E), velg den børsten vi nettopp nevnte og så gå rundt kantene i vår form og bare grove den opp, men du føler deg. Jeg har forlatt toppkanten intakt som du kan se.
Deretter lager et nytt lag rett under den hvite boksen, og tegne inn en Radial Gradient (G) går fra hvitt til gjennomsiktighet. Dette kommer bare til å markere hvor vi skal plassere vår logo på et sekund. Sett lag til overlegg og 70%.
Nå legger vi til en liten "logo" - i vårt tilfelle bare et ord som er satt i et fint skrifttype. Skrifttypen jeg har valgt her er Egyptian710 BT, som er ganske velkjent skrifttype og egnet til vårt formål fordi det er veldig ujevnt utseende - store bokstaver er tykkere enn små bokstaver - og platene ser ut som typemaskin-ish som går med vårt papir tema.
Deretter skal vi lage et vannmerke bare for å legge til litt flere ting i bakgrunnen. Faktisk kan du bli gal og legge til tonnevis av ting i bakgrunnsstrukturen, men vi vil slå seg ned for et enkelt vannmerke.
Så her har jeg skrevet ut ordet Folio i noen tilfeldig skrift (HumstSlab712 Blk), og jeg har satt den i denne fargen - # c5c6ba.
La oss nå endre blandingstilstanden til Fargeforbrenning og 70% og vi legger til 1px slag som vist. Legg merke til at for Fyll type Jeg har brukt en Mønster og deretter valgt en tekstur jeg hadde hengende på. Når det kombineres med lav oppasitet (36%) og blandingsmodus (Multiply), får dette vår utseende til å se ut som om den er falmet ut i deler.
Nå flytter vi vår vannmerke for å sitte bak logoen.
Deretter skal vi lage et lite horisontalt separatorelement. Så lag et nytt lag og trekk i en 1px linje i mørkbrun.
Ta nå den samme gamle viskelbørsten og bare gå over linjen som sletter små biter ut av det, slik at det ser ut til å være bekymret. Ta også av kantene slik at den starter på samme sted som den hvite boksen.
Deretter lager et nytt lag under og tegne en brun boks som er omtrent 3-4px høy som vist.
Sett den brune boksen til Multiplisere og 5%. Dette vil være en slags skygge til vår separator.
Deretter lager et nytt lag, og denne gangen tegner du en hvit boks ca 20px høyt over linjen.
Sett den hvite boksen til omtrent 50% ugjennomtrengelighet og igjen med vår pensel, sletter du toppen på en rotete måte.
Gjenta nå de tre siste trinnene for å tegne en annen hvit boks, men denne gangen du sletter den, slettes mer slik at den er en tynnere hvit stripe.
Når begge hvite lagene er kombinert, vil de gi en rotete slags høydepunkt.
Grupper disse skillearkene i en enkeltlagsgruppe.
Nå kan vi duplisere vår laggruppe for å ha tre kopier for å danne vårt horisontale gridområde som vist.
Her har jeg nettopp lagt inn noe innhold. Som du kan se har jeg blandet litt av skjermtypen med en vanlig HTML-skrifttype.
For den vanlige teksten har jeg faktisk brukt Cambria som er en Vista-skrifttype. I CSS vil du ha det som standard tilbake til Georgia for folk som ikke har Vista-skrifter. Hvis du selv ikke har Vista-skriftene, kan du få dem fritt og lovlig, følg bare disse instruksjonene. Det er et par pene skrifttyper, jeg liker Calibri også.
Nå skal vi legge til hovedpanelet vårt. Så tegne i en stor rektangulær boks i mørkbrun farge - # 1e1a19 - og gjør det med å bruke Avrundet rektangelverktøy (U) med en radius på 5px.
Nå zoome inn i øverste venstre hjørne og ta et lite firkant utvalg og fyll det inn med samme mørkebrune farge. Vi ønsker ikke en kurve i dette hjørnet.
Zoom inn nå øverst til høyre og bruk Polygonal Lasso Tool (L) mens du holder skift ned, gjør et vinklet utvalg som vist og trykk deretter Slett.
Nå i et nytt lag over trekke i en firkant med en lysere brun farge, si # 352f2b, og deretter lage et annet vinklet utvalg og slett bort halvparten av firkanten slik at du er igjen med en trekant som er 1px vekk fra kanten.
Deretter lager et nytt lag og zoome inn i øverste venstre hjørne igjen. Vi skal nå lage vår tabbeform. Vi gjør dette ved hjelp av pennverktøyet og noen få presise klikk. I bildet ovenfor har jeg slått av alle bakgrunnslagene slik at du kan se formen nøyaktig. Slik gjør du det:
Etter at du har gjort det femte poenget, kan du bare fylle resten av formen til noe gammelt, fordi vi bare skal kutte ned nederkanten for å være helt rett uansett.
Når du har fullført formen, høyreklikk og velg Gjøre valg.
Nå kan du fylle ut formen med mørk brun for å matche hovedboksen. Deretter kutter du bort de nederste ekstrabitene, så det er fint og flatt og sitter perfekt på toppen som vist.
Deretter dupliserer vi vårt tabellag og flytter den nye under Den gamle kategorien (slik at den brune en ser ut som den er foran). Høyreklikk deretter på vår nye fane og velg Blandingsalternativer og gi den en Fargeoverlegg av denne fine rød-oransje fargen - # cc5630. Grunnen til at vi gjør et fargeoverlegg og ikke bare fylle ut fanen med den nye fargen er at hvis du gjør den andre metoden, får du noen få venstre over brune piksler som viser gjennom.
Neste hold nede CTRL og klikk på den første kategorien og velg deretter Rektangulært markeringsverktøy og trykk på høyre pil et par ganger til valget ditt har flyttet sammen for å overlappe med oransjefanen. Grunnen til at jeg sier at du bør velge markeringsverktøyet i dette trinnet er at for å flytte et utvalg må du ha et valgverktøy opp. Hvis du i stedet hadde valgt det vanlige pilverktøyet, ville du faktisk flytte piksler rundt så vel som valget. Prøv begge og du vil se hva jeg mener.
Nå lager vi et nytt lag mellom de to kategoriene og fyller ut vårt utvalg med en mørkere oransje farge - # b44724. Deretter holder du nede CTRL og klikk på det oransje fanearket, og klikk deretter Ctrl-Shift-I å invertere valget og klikk på mellomlaget og trykk Slett. Dette bør etterlate deg med den mørkere oransje delen som overlapper den oransje kategorien.
Som du kan se har vi opprettet en slags skygge på vår andre fane.
Nå, hvis jeg sier det selv, ser disse kategoriene fantastisk ut, og årsaken til at de gjør det er fordi de overlapper. Dessverre gjør dette også dem vanskeligere å jobbe med i HTML. Du kan imidlertid gjøre en rekke ting med gjennomsiktige PNGs, eller alternativt bare lage tekstbytterfarger i rollovers, og ikke bekymre deg for å endre tabulatorfarger. Uansett er dette alt litt utenfor omfanget av denne opplæringen. Det er nok å si at menyen kan være litt vanskelig å bygge.
Så her er vårt oppsett så langt. Jeg har lagt til et par flere faner og gitt dem litt tekst.
Nå trekker vi i det fremhevede arbeidsområdet. Dette vil være et enkelt hvitt rektangel hvor arbeidet vil gå. Deretter lager et annet lag og bruk Polygonal Lasso Tool (L) å tegne en slags wonky rektangel og fylle den med en mørk, mørk brun farge - # 0e0c0c.
Deretter legger vi til noen beskrivende tekst til venstre og selve elementet. Legg merke til at det med teksten jeg har brukt en mørk brun for de to beskrivelsene (Prosjekttittel og Prosjektbeskrivelse) gjør dem til å falme inn i bakgrunnen som er bra fordi de ikke er så viktige. Tittelen på prosjektet og beskrivende tekst derimot skiller seg ut. Disse to siste elementene er satt i en lys beige farge hentet fra bakgrunnen, med tittelen som er lysere enn teksten.
Også jeg har lagt en svak radiell gradient til arbeidsprøven som går fra hvit til en lys beige - bare fordi jeg elsker radialgradienter og ikke kan få nok av dem :-)
Nå til slutt legger jeg til et par små håndtekkede klotter for å avslutte designen. For disse har jeg brukt David Leggett av Tutorial9s utmerkede og frie håndtegnede børster. Du kan legge til pensler ved å åpne børstepaletten som vist, klikke på den lille høyre pilen og velge Legg børster, Deretter velger du penselfilen du lastet ned.
Fordi børstene er mye større enn jeg vil ha dem, er det viktig å skarpe laget etter at du har endret størrelsen på det. Så her har jeg krympet pilen ned og kjør deretter en Filtrer> Skarpe> Skarphetmaske å fikse det opp.
Så der går vi, det endelige designet, med et par variasjoner for forskjellige sider. De endelige PSD-designene er selvfølgelig på ThemeForest for salg, og jeg legger til hjemmesiden PSD til Plus-systemet.
Så det er jeg tar på en papirstruktur slags layout. Det er mange designere som gjør dette ser mye bedre ut enn meg, spesielt se på Liam McKays arbeid på WeFunction, og ta en titt gjennom designgallerier som WebCreme, og du vil finne mange fine grungy papery design.
Dette innlegget er dag 4 i vår webdesignsession. Creative Sessions "Session Day 3Session Day 5"
Accentsconagua