Share
I år har vi sett en stor ökning av grungey / texturerad / handritad stilad webbdesign. I naturen tenderar jag att utforma ett renare utseende själv, men jag trodde att jag skulle försöka min hand på grunge idag och skriva upp en handledning om att skapa en enkel pappersteknik från början i Photoshop och gifta sig med en webbdesign för att skapa en snygg design.
Senare senare i veckan tar vi samma webbdesign och jag visar hur du kan remixa ännu längre än att bara ändra bakgrund och färgscheman, det kan du faktiskt ändra hela stilen på en design. Men först låt oss göra vår pappersstruktur webbplats!
Det här inlägget är dag 4 i vår webbdesignsession. Creative Sessions "Session Day 3Session Day 5"
Det finns tre olika sätt att få ett texturerat pappersutseende:
Att skapa en textur i Photoshop resulterar i allmänhet i ett mer stiliserat än realistiskt utseende, men det har sin egen charm. Det betyder också att du inte behöver några externa bilder.
Så först börjar vi ett nytt dokument, denna duk är 1200px bred x 900px hög. Därefter fyller vi bakgrundsskiktet med en beigefärg - # e8e8e2.
Skapa nu ett nytt lager ovanpå och gör dina förgrunds- och bakgrundsfärger: # 979a8f och # cfd1c5 vilka är variationer av den ursprungliga färgen. Gå sedan till Filtrera> Render> Moln
Nu kör vi Filter> Konstnärlig> Palettkniv med inställningarna som visas i bilden ovan. Palettkniv vänder våra moln till blobs ... sorts, så småningom kommer detta att ge en liten skrynklig känsla till strukturen.
Nästa lägger vi lite ljud på duken av Filter> Buller> Lägg till Buller med den inställda inställningen. Detta bör göra vår textur ser grov ut.
Nu tar vi vårt högljudda, smula lager och sätter det på Multiplicera och 30%. Detta kommer att tona det direkt tillbaka.
Skapa nu ett nytt lager ovanpå och gör dina förgrunds- och bakgrundsfärger: # 42433e och # cfd1c5 - vilket är en mörkare version av den senaste uppsättningen så att vi får mer kontrast den här gången. Gå sedan till Filtrera> Render> Moln
Sedan kör vi igen Filter> Konstnärlig> Palettkniv filtrera.
Och den här gången sätter vi det nya skiktet på Täcka över och 60%. Detta bör ge vår konsistens lite djupare.
Och det är allt! Detta är vår textur!
För den här handledningen är den lätta konsistensen perfekt, men du kan enkelt göra andra variationer genom att bara röra om med blandningsverktyg. Till exempel för att göra den här mörkbruna pappersstrukturen:
Om färgvariationer inte räcker kan du också ändra textens känsla med hjälp av olika filter. Till exempel här har vi gjort en mer pergament-y-känsla genom att ta vår lätta textur och:
Nu när du har en struktur kan du självklart göra den till en sömlös kaklad bakgrund.
För denna handledning kommer vi att använda först konsistens vi gjorde - den från steg 8.
Så nu ska vi skapa en portföljlayout för att gå med vår pappersstruktur. Här är den ungefärliga strukturen för hemsidan. Som du kan se är det lite mer av en komplicerad struktur än i den tidigare webblayouthandledningen, för den här gången har vi en layout i layouten.
Så vårt övergripande galler är ett tre kolonnnät, sedan i huvudpanelen har vi använt det nätet för att bryta området i två huvudområden, en är storleken på kolumn 1 och den andra sträcker sig över de andra kolumnerna.
Så först ska vi skapa ett arbetsområde och lätta upp det. Så här har jag dragit två guider på skärmen, en på 100px och en på 1100px - det gör att jag jobbar i exakt 1000px vilket är perfekt.
Då skapar vi ett nytt lager och ritar en stor vit låda som visas.
Därefter sätter vi den vita rutan tillbaka till 25% opacitet.
Då kommer vi att grova upp det. Det finns massor av bra grungeborstar runt, men för det här steget använder vi bara en av Photoshops standardborstar. Du kan se den i skärmdumpen ovan med 60 under den.
Om den här penseln inte visas för dig klickar du bara på den lilla högra pilen överst på borstens skärm och väljer Vätska med borstar, klicka sedan på Lägg till för att lägga till dem i din nuvarande uppsättning.
Välj så Eraser Tool (E), välj den borsten som vi just nämnde och sedan gå runt kanterna på vår form och bara grova upp det men du känner dig. Jag har lämnat överkanten intakt som du kan se.
Skapa sedan ett nytt lager strax under den vita rutan och dra in en Radial Gradient (G) går från vit till öppenhet. Detta kommer bara att lyfta fram var vi ska placera vår logotyp på en sekund. Ställ in skiktet till Täcka över och 70%.
Nu lägger vi till en liten "logotyp" - i vårt fall bara ett ord i en fin typsnitt. Stilsorten jag har valt här är Egyptian710 BT, vilket är ganska välkänt teckensnitt och lämpligt för våra ändamål, eftersom det är mycket ojämnt. Huvudbokstäverna är tjockare än små bokstäver - och slabserifs ser typ av skrivmaskin-ish som går med vårt papperstema.
Nästa gör vi ett vattenstämpel bara för att lägga till lite mer saker i bakgrunden. Egentligen kan du bli galen och lägga till massor av saker i bakgrundsstrukturen, men vi kommer att lösa oss för ett enda vattenstämpel.
Så här har jag skrivit ordet Folio i något slumpmässigt teckensnitt (HumstSlab712 Blk) och jag har satt den i den här färgen - # c5c6ba.
Låt oss nu ändra blandningsläget till Färgbränna och 70% och vi lägger till en 1px stroke som visas. Observera att för Fyll typ Jag har använt en Mönster och sedan valt en textur som jag hade hängt på. När det kombineras med en låg opacitet (36%) och blandningsläge (Multiplicera) så blir vår kontur likt att den är blekad i delar.
Nu flyttar vi vårt vattenmärke för att sitta bakom logotypen.
Nästa kommer vi att göra ett litet horisontellt separatorelement. Så skapa ett nytt lager och dra in en 1px linje i mörkbrun.
Ta nu samma gamla gummiborste och gå bara över linjen radera små bitar ut ur det så det ser ut som nöd. Ta också av med kanterna så att den börjar på samma plats som den vita boxen.
Skapa sedan ett nytt lager nedan och dra i en brun låda som är ungefär 3-4px hög som visas.
Ställ in den bruna rutan till Multiplicera och 5%. Detta kommer att vara en slags skugga till vår separator.
Därefter skapar du ett nytt lager och den här tiden ritar en vit låda ca 20px högt ovanför linjen.
Ställ in den vita rutan till ungefär 50% opacitet och återigen använda vår borste, radera bara toppen på ett rörigt sätt.
Nu upprepa de tre sista stegen för att rita en andra vit låda, men den här gången när du raderar den, raderas mer så att det är en tunnare vit remsa.
När båda vita lagren kombineras kommer de att ge en rörig slags höjdpunkt.
Grupp dessa separatorlager i en enda lagergrupp.
Nu kan vi duplicera vår lagergrupp för att ha tre kopior för att bilda vårt horisontella rutnätområde, som visas.
Här har jag just lagt in lite innehåll. Som du kan se har jag blandat en liten bit av teckensnittet med en vanlig HTML-typsnitt.
För den vanliga texten har jag faktiskt använt Cambria som är en Vista-typsnitt. I CSS skulle du ha det som standard till Georgien för personer som inte har Vista-teckensnitt. Om du själv inte har Vista-teckensnitt, kan du få dem fritt och juridiskt, följ bara dessa instruktioner. Det finns ett par snygga teckensnitt, jag gillar Calibri också.
Nu ska vi lägga till vår huvudpanel. Dra så i en stor rektangulär låda i den mörkbruna färgen - # 1e1a19 - och gör det med hjälp av Avrundat rektangelverktyg (U) med en radie av 5px.
Zooma nu in i det övre vänstra hörnet och ta ett litet urval och fyll i det med samma mörkbruna färg. Vi vill inte ha en kurva i detta hörn.
Zooma in i det övre högra hörnet och använd Polygonal Lasso Tool (L) medan du håller skift ner gör ett vinklat urval som visat och tryck sedan på Radera.
Nu i ett nytt lager ovanför rita i en kvadrat med en ljusare brun färg, säg # 352f2b, och gör sedan ett annat vinklat urval och ta bort halva torget så att du lämnas med en triangel som ligger 1px bort från kanten.
Skapa sedan ett nytt lager och zooma in i det övre vänstra hörnet igen. Vi ska nu göra vår flikform. Vi gör det med pennverktyget och några få exakta klick. I bilden ovan har jag stängt av alla bakgrundslager så att du kan se formen exakt. Så här gör du det:
När du har gjort den femte punkten kan du bara fylla i resten av formen någon gammal hur, för vi kommer bara att skära bort bottenkanten för att vara helt rakt ändå.
När du har fyllt i formen, högerklicka och välj Göra val.
Nu kan du fylla i formen med mörkbrun för att matcha huvudlådan. Skär sedan bort de övre bitarna så att den är fin och platt och sitter perfekt ovanpå som visas.
Därefter kopierar vi vårt fliklager och flyttar det nya Nedan Den gamla fliken (så den bruna ser ut som den är framför). Högerklicka sedan på vår nya flik och välj Blandningsalternativ och ge den en Färgöverlagring av denna snygga röd-orange färg - # cc5630. Anledningen till att vi gör ett färgöverlägg och inte bara fyller in fliken med den nya färgen är att om du gör den andra metoden får du några kvar över bruna pixlar som visar genom.
Nästa håll ner CTRL och klicka på den första fliken och välj sedan Rektangulärt markeringsverktyg och tryck på högerpilen ett par gånger tills ditt val har flyttats för att överlappa med orangefliken. Anledningen till att jag säger att du borde välja markeringsverktyget i detta steg är att för att flytta ett urval måste du ha ett valverktyg. Om du istället hade valt det vanliga pilverktyget skulle du faktiskt flytta pixlar runt samt urvalet. Prova båda och du kommer att se vad jag menar.
Nu skapar vi ett nytt lager mellan de två flikarna och fyller i vårt urval med en mörkare orange färg - # b44724. Håll sedan ned CTRL och klicka på det orange fliklagret och klicka sedan på Ctrl-Skift-I att vända om valet och klicka på mellanskiktet och träffa Radera. Detta borde lämna dig med den mörkare orange delen som överlappar den orange fliken.
Som du kan se har vi skapat en slags skugga på vår andra flik.
Nu om jag säger det själv ser dessa flikar fantastiskt ut, och anledningen till att de gör det är att de överlappar varandra. Tyvärr gör det också dem svårare att arbeta med i HTML. Du kan dock göra en mängd saker med genomskinliga PNG, eller alternativt bara göra textbyte färger i rollovers och inte oroa dig för att ändra flikfärger. Hur som helst är det här lite längre än omfattningen av denna handledning. Det är tillräckligt att säga att menyn kan vara lite knepig att bygga.
Så här är vår layout hittills. Jag har lagt till ett par fler flikar och gav dem lite text.
Nu kommer vi att dra i det utvalda arbetsområdet. Detta kommer att bli en enkel vit rektangel där arbetet kommer att gå. Därefter skapa ett annat lager och använd Polygonal Lasso Tool (L) att rita en form av wonky rektangel och fyll den med en mörk, mörkbrun färg - # 0e0c0c.
Nästa lägger vi till en del beskrivande text till vänster och själva objektet. Lägg märke till att det med texten som jag har använt en mörkbrun för de två beskrivarna (Projekttitel och Projektbeskrivning) gör dem blekna i bakgrunden vilket är bra för att de inte är så viktiga. Projektets titel och beskrivande text å andra sidan sticker ut. Dessa sista två objekt är inställda i en ljus beige färgplockad från bakgrunden med titeln ljusare än texten.
Jag har också lagt till en svag radial gradient till arbetsprovet som går från vitt till en ljus beige - bara för att jag älskar radiella gradienter och inte kan få nog av dem :-)
Till sist lägger jag till ett par små handritade klotter för att avsluta designen. För dessa har jag använt David Leggett of Tutorial9s utmärkta och fria handdröjda borstar. Du kan lägga borstar genom att öppna borstpaletten som visas, klicka på den lilla högra pilen och välj Ladda borstar, Välj sedan borstfilen du laddade ner.
Eftersom borstarna är mycket större än vad jag vill ha är det viktigt att skärpa skiktet efter att du har ändrat det. Så här har jag krympt pilen ner och kör sedan en Filtrera> Skärpa> Unsharpen Mask att fixa upp det.
Så där går vi, den slutliga designen, med ett par variationer för olika sidor. Den slutliga PSD-designen är givetvis upp på ThemeForest till salu, och jag lägger till hemsidan PSD till Plus-systemet.
Så det är jag som tar på en pappersstruktur, typ av layout. Det finns många designers som ser det här mycket bättre ut än mig, kolla in Liam McKays arbete på WeFunction och ta en titt genom designgallerier som WebCreme och du hittar massor av snyggt grungy, papper.
Det här inlägget är dag 4 i vår webbdesignsession. Creative Sessions "Session Day 3Session Day 5"
Accentsconagua