Share
Photoshop är ofta det rätta verktyget för webbdesign, speciellt om du skapar en design med många bilder och pensel effekter. I den här handledningen visar jag dig hur man skapar en komplett design för grungehemsida. Vi ska utforma sidhuvud, sidofält, kropp, sidfot och stil allt för att arbeta tillsammans i en starkt texturerad och sliten design.
Den här gången kommer vi att skapa en hel webbdesign i grunge stil med Photoshop och många stockbilder. Eftersom detta är en mellanliggande till avancerad nivåhandledning, hoppar jag över förklaringen av några grundläggande steg. Skapa först ett nytt dokument 950 px med 800 px vid RGB 72dpi. Visa linjalerna och dra fyra guider som begränsar dokumentet, det här är det optimala området för designen. Jag planerar att hålla en fast breddslayout.
Gå till Bild> Canvas Storlek och öka bredden och höjden mycket mer, 1200 px per 1000 px är OK, så kommer vi att designa för större skärmupplösningar. Lägg sedan till fler guider där du planerar att lägga till behållarna (rubrik, navigeringsfält, sidofält, sidfot).
Låt oss föreställa oss att den här designen är avsedd för en Wordpress-mall, så vi behöver en rubrik, en navigeringsfält inne i rubriken och en höger sidofält. Ta en titt på botten av följande bild. Fyll sedan en bakgrund med denna färg # 7A8173.
Nu ska vi skapa ett mönster för huvudets bakgrund, vilket är ganska enkelt. Skapa ett nytt dokument 50 px med 300 px och dra något som bilden nedan. Jag använder guider för att göra min form så symmetrisk som möjligt. Gå sedan till Redigera> Definiera mönster och spara formen som "mönster 1."
I ett nytt lager i vår huvuddesignfil ritar du en rektangel på 300 px med hjälp av rektangulärverktyget. Gå till Filter och lägg till ett mönsteröverlägg, sök efter ditt helt nya mönster och tillämpa det. För att det ska bli korrekt måste du klicka på knappen Snap to Origin. Ändra skiktet Fyll till 0%, skapa ett nytt tomt lager ovanför formskiktet och slå ihop båda, så har du mönstret redo att lägga till några effekter på det. Namn det lagret "Mönster 1."
Välj "Pattern 1" -lagret och tillämpa det på vissa lagstilar: Drop Shadow, ett överdrag överlagring och ett mönsteröverlägg. Försök få något liknande botten av bilden nedan med följande värden.
Nu ska vi lägga till navigeringsfältets bakgrund. Rita en rektangel som gömmer lite av "Mönster 1" -skiktet. Applicera på den rektangeln ett mönsteröverlägg, ett svart till rött svart överdrag och en mjuk dropskugga. Använd värdena för bilderna nedan som referens. Lägg sedan till en lagermask> Dölj alla och dra ett svart till vitt till svart reflekterad grad på lagmasken, så får du något som liknar den nedersta bilden nedan.
Dra nu en ellips (# 691E1B) ovanför "Mönster 1" -laget, namnge det "Light", och Applicera en Gaussian Blur till den med en radius på 50 pixlar. Jag skapade en extra guide för att rita ljuset i mitten av rubriken. Ta bort allt under navigeringsfältet och ändra lagrets blandningsläge till Color Dodge.
För att avsluta den första delen av layouten ska vi rita sidospärrens bakgrund. Rita några guider för att avgränsa sidofältet och även redigera de befintliga guiderna så att de passar på den faktiska designen. Dra sedan en röd rektangel (# 3D100B) och tillämpa följande stilar: en Drop Shadow, ett färgöverlägg och ett mönsteröverlägg.
Vid den här tiden måste du överväga hur du ska skära bilden i HTML + CSS; Därför använder jag Drop Shadows med 0px of Distance mest och bara horisontella eller vertikala gradienter. Strukturen i detta fall har många horisontella linjer. Det måste vara enkelt att konvertera detta till en upprepande bakgrund för många områden. Det här är också en bra punkt att ta en paus och organisera lagren i dina mappar för att hålla orden på saker.
Nu börjar med detaljerna, jag vill lägga till webbplatsnamnet på ett framträdande ställe, det är därför jag kommer att använda den här fina bilden för grunge etiketter. Självklart måste du extrahera etiketten och placera den i det övre vänstra hörnet av vår design. Försök få något som den första bilden nedan. Använd sedan Magic Wand-verktyget för att välja den lilla bruna cirkeln, sedan Command + Shift + I för att inversa valet. Justera nivåerna och färgtonen / mättnad med hjälp av värdena som visas nedan.
Använd nu Eraser-verktyget och en oregelbunden pensel, radera några områden i etikettens kant. Lägg till en papperssår effekten, välj Dodge-verktyget och använd samma penselform för att applicera dodge till etikettens kant.
Vi ska lägga till en skugga på vår etikett nästa. För detta, duplicera "Label" -laget, ändra nyans / Mättnad> Ljushet till -100, och använd en Gaussisk suddighet med en 10 px radie. Ändra sedan "Label copy" blandningsläge till Multiplicera och ställ in opacitet till 75%.
En senast retuschering för etiketten, ändra mättnad till -40 för att göra den mer grå.
Nu lägger vi till några supportbilder, försök att hitta bilder som omger ett koncept, men eftersom det här är en handledning om teknikerna väljer jag en slumpmässig. Den här är en vacker bild av ett vintageståg här på höglandet Bolivia. Extrahera tågets form, men du vill ha det. Ändra sedan "tåg" skiktets blandningsläge till mörkare.
Låt oss lägga till lite text, först sidnamnet. Skriv något med hjälp av a grunge teckensnitt; du kan hitta några intressanta sådana här. För titeln använder du en svartyp och ändrar lagrets blandningsläge till Överlägg, duplicerar du sedan lagret och ändrar kopiens opacitet till 75%. För att få en liten oskärpaffekt, flytta det kopierade lagret en eller två pixlar åt vänster eller höger. Lägg till mer text med den här tekniken, som en slogan eller något. Det är också ett bra ögonblick att också lägga till navigeringslänkarna.
Lägg nu till fler saker, det är grunge stil! Jag hämtade några Jenn Bs borstar härifrån, dessa borstar har begränsningar. Använda dessa borstar lägg till några siffror, hörn, maskeringstejp och whatnot, gärna göra vad du vill i det här steget. Kom bara ihåg att lägga till alla lager under "Label" och "Label Copy" -lagren.
Nu börjar vi lägga till sidavsnitt. Först av allt, i rubriken behöver vi en sökfält. Skriv in en söketikett. Därefter ritar du en röd (# 6A0400) rektangel som ett sökfält, och applicerar sedan en streck och ett mönsteröverlagringseffekt.
Nu börjar vi lägga till huvudinnehållet i vår design. Först kommer vi att lägga till ett fält för att lägga in en del av den presenterade texten. Rita en mörkgrå (# 0D0F0E) rektangel i ett lager under sidofältet. Jag skapade fyra mappar för att hålla layouten organiserad: En för "Header" ovanför allt, en för Sidebar under "Header", en för "Innehåll" under "Header" och "Sidebar" och den sista en för "Footer".
Du kan lägga till denna rektangel i "Innehåll" -laget, du kan också lägga till så många mappar som behövs inuti dessa fyra mappar. När du har placerat rektangeln på rätt plats, applicera en Drop Shadow och en Stroke-effekt med hjälp av värdena nedan.
Hämta några grunge hörn och gränsar härifrån och klistra in en över den grå bakgrunden. Använd sedan en överlagseffekt på hörnet med en färg på # 171612. Lägg också till ett annat hörn över sidofältets bakgrund, men den här gången sänker du dess opacitet under 25%.
Låt oss lägga till lite text. Du kan lägga till någon provtext, föreställa dig att det är javascript driven text, nyligen inlägg, eller ett inslaget inlägg, något liknande. Jag använder samma grunge display typsnitt som används för navigeringsfältet med färgen # 4D0D0D och Arial med en färg på # 3F3F3F för kroppstexten.
Applicera en drop-shadow-effekt på titeln och lägg till samma effekt för navigationsobjekten också. När du konverterar denna PSD till en HTML + CSS-fil måste du konvertera dessa titlar till bilder, så det är OK om du vill lägga till fler stilar för dem. Slutligen, använd några guider för att lägga textskikten i rätt plats.
Vårt aktivitetsfält ser lite tomt ut, så låt oss lägga till en supportbild. I det här fallet använde jag ett polaroidskott. Du kan ladda ner polaroidbilden härifrån. Plocka ut polaroid, klistra in det i ett lager ovanför den grå bakgrunden och grungehörnet i mappen "Innehåll", ändra sedan nyans / Mättnad för att göra polaroid lite mer sepia (Välj färgalternativet).
Använd samma tekniker för skiktet "Label" -skiktet (steg 9). Radera och dodge kanterna på polaroidbilden. Slutligen lägg till en droppskugga med samma teknik som används i steg 10 i denna handledning.
Jag hade denna sepia bild av mig själv så jag lägger till den i designen. Lägg till en bild i ett nytt lager ovanför "Polaroid" -laget, välj den svarta rutan i polaroiden, sedan Command + Shift + I för att inversa valet. Välj bildskiktet och ta bort allt extra. Därefter kan du lägga till fler grunge detaljer, som vissa maskeringstejp över bilden, som visas i bilderna nedan. Jag tillämpade en 1px Drop Shadow-effekt på det extra bandet också.
Det är ett bra ögonblick att lägga till en RSS-ikon i sidofältet. Rita en avrundad hörnrektangel (# 99917E), använd sedan följande effekter: ett inre glöd, ett mönsteröverlagring och en droppskugga, använd värdena som visas i bilden nedan. Dra sedan eller klistra in i ett nytt lager ovanför rektangeln den vanliga RSS-formen och fyll den med svart. Ändra slutligen "RSS-form" -lagret Blandningsläge till Överlagring.
Placera nu RSS-ikonen på sidofältet till vänster. Lägg till lite text som "RSS FEED." Rita en annan bit av tejptejp och skriv antal abonnenter över det. Kom ihåg att vi nu arbetar i mappen Sidebar.
Det är dags att lägga till ett enda inlägg i vår design. Skriv bara en slumpmässig text som en titel, en annan rad för datum, kategori och författare. Också några ord som texten i posten. Typografi är det viktigaste i detta steg. Jag älskar att använda Serif-teckensnitt för titlarna och Sans-Serif för kroppen, men är bara jag. Bestäm vad du tycker är bäst för din design.
För att ge vårt prov en lite mer attityd ska vi lägga till en förhandsgranskningsbild, precis som på TUTS-sidorna, men eftersom det här är en grungedesign behöver vi lägga till en grungebakgrund till våra bilder. Det här är lika enkelt som att lägga på vadderingen överst och ner med CSS, och ställer sedan in en upprepad bakgrundsbild.
Den här bilden kommer att vara 35mm film. Extrahera två små ränder från filmen och ändra deras färgton / mättnad med värdena i bilden nedan. Därefter, Använd en oregelbunden Eraser, Radera några områden av randarna. Slutligen lägg till en Drop Shadow till varje rand. När du är färdig med filmen klistar du in någon bild under filmlagren. Jag lägger till en bild av en av mina resor. Slutligen, applicera en Stroke Effect (# 2F261D) på den bilden.
Rita en 2px röd linje under inlägget och lite text för kommentarerna, det är en bra idé att lägga till alla postrelaterade lager i en ny mapp som heter "Post". Därefter öka höjden på dokumentet lite, det kan du göra genom att använda Beskärningsverktyget, gör det bara för att se hur vår design kommer att se ut om den har två eller tre inlägg på den. Kopiera "Post" -gruppen och ändra texten och bilden, som visas nedan.
Egentligen ser det ganska bra ut, lägg nu titlarna på sidofältets föremål. Du kan också skapa en mapp för varje objekt.
Lägg nu till en listaikon. Du kan använda vilken som helst anpassad form. Lägg till lite slumpmässig text, jag använder Georgia för sidofältet. Kopiera ikonerna och redigera en för att representera sväva stat. Gör detsamma för varje sidobalkobjekt.
Vi är nära färdiga. Lägg till några grunge detaljer längst ned i sidofältet genom att lägga till några grungeborstar i ett nytt lager ovanför sidofältets bakgrundsskikt. Markera sidofältets bakgrundsskikt och gå till Lag> Layer Mask> Reveal all. Dölja sedan några områden längst ned till vänster på sidofältets bakgrund med en oregelbunden svart pensel.
Slutligen väljer du sidofältets bakgrundsskikt och kopierar lagets stil. Rita en rektangel längst ner i designen i "Footer" -mappen och klistra in lagstilen i den. Nästa, extrahera och klistra in den här bilden ovanför Footers bakgrund.
Justera mättnaden för att göra den lite gråare. Du kan också på det pappersarket använda en droppskugga som upprepar tekniken i steg 10. Lägg till lite text över pappersbiten, kanske en slogan eller något. Och lägg även till lite footer-text, som en snabb navigationsfält och upphovsrättsinformationen.
Webbdesign är inte en bit tårta, men jag hoppas att den här handledningen hjälper dig att förbättra dina färdigheter. Det är upp till dig nu, designa din egen eller anmäla PLUS för att ladda ner PSD-källan och spela med den. Jag skulle gärna se några grunge webbdesigner i gruppen Psdtuts + Flickr. Du kan se den slutliga bilden nedan eller se en större version här.
Prenumerera på Psdtuts + RSS-flödet för de bästa Photoshop-verktygen och artiklarna på webben.
Accentsconagua