Idag ska vi bygga en fantastisk webbplatskarta i Photoshop med hjälp av ett antal avancerade tekniker.
Jag tar dig igenom hela processen i tio enkla steg och ger dig en länk för att ladda ner den färdiga mallen. Låt oss börja!
Förhandsgranska och ladda ner
Innan vi börjar, här är en titt på vad vi ska bygga. Du kan ladda ner och använda PSD men du vill, var noga med att ge kredit för bakgrunden som anges i artikeln nedan.
Ladda ner Layered PSD
Steg 1: Skapa ett nytt dokument
Skapa först ett nytt dokument i Photoshop. Gör duken 1200 pixlar breda med 1700 pixlar långa. Oroa dig inte, vårt innehåll kommer inte att vara någonstans nära det breda, vi vill bara ge oss gott om plats att arbeta.
För att definiera innehållsområdet ritar du en ruta som är 960 pixlar bred, centrerar den horisontellt i duken och drar sedan ut ledare till vänster och höger kant och tar bort rutan. Ditt tomma dokument ska se ut som bilden ovan (färg spelar ingen roll vid denna tidpunkt).
Steg 2: Ta tag i bakgrundsbilden
Inspirationen för denna design kommer från en fantastisk fri resurs från Matthew Skiles. Matthew skapade en vacker träbakgrundsstruktur och distribuerade den fritt på Dribbble. Kom bara ihåg att om du ska använda denna textur, måste du ge en länk tillbaka till Matthew.
Ta tag i trästrukturen från länken ovan och skala ner den så att den är lika bred som din PSD. Det sträcker sig bara ungefär halvvägs ner på sidan vertikalt men det är perfekt vid denna punkt.
Steg 3: Lägg till bakgrundsgradient
Träbakgrunden ser bra ut i Photoshop men det kommer att ge oss några problem på webben på grund av den oändliga webbläsaren. Våra två grundläggande alternativ är att konvertera det till ett sömlöst bakgrundsmönster eller luta det ut till en fast färg.
I det här fallet valde jag den enkla vägen och bestämde mig för att tillämpa gradienter till vänster och höger sida av bakgrunden. För att göra detta, skapa ett nytt lager och sätt din förgrundsfärg till # 421a0e eller någon annan mörk färg som du gillar från träbilden. Därefter sätt din gradient att gå från denna färg till transparent och sträck gradienten från lefsidan mot mitten och upprepa sedan gradienten på höger sida.
Detta ger oss en fin, smidig övergång till en fast färg. Om vi kodade den här webbplatsen skulle vi ställa in den här bilden i bakgrunden och ange bakgrundsfärgen i CSS till # 421a0e. Oavsett vilken skärmstorlek tittaren är på kommer webbplatsens bakgrund att se perfekt ut.
Steg 4: Logotypen
Logotypen på toppen av webbplatsen är helt enkelt textskriven ut i Ballpark, en fantastisk fri font designad av Mickey Rossi. Skriv ut ett ord, gör det svart och sätt fyllet till cirka 25%. Därefter applicera en inre skugga och en droppe skugga för att ge det som bokstäverna ser ut. Här är de inställningar jag använde:
Observera att droppskuggan är väldigt annorlunda än standardinställningarna. Detta beror på att vi faktiskt använder droppskugga som en bit av ett hack för att skapa en yttre fas. Var noga med att ställa in färgen till vit och ändra blandningsläget från Multiplicera (standard) till skärm (fungerar med vit).
Tricket till den inre skuggan är att inte överdriva det. Gå lätt på avståndet och se till att opaciteten inte är för mörk. Dessa inställningar ska ge dig den fantastiska effekten som ses nedan:
Skriv sedan lite undertext för att gå under logotypen och tillämpa samma effekt. Jag använde en enkel Helvetica Bold och skrev i alla kepsar.
Steg 5: Lägg till några ljus
För att lägga till lamporna överst i mallen använder vi ett super enkelt trick. Ta en fin mjuk vit borste och klicka en gång på din duk för att skapa en fuzzy vit prick. Nu slår du Command-T för att använda Free Transform-verktyget för att sträcka pricken ut som sett nedan.
För att få den snedställda effekten håller du Command-Shift-Option medan du klickar och drar på en hörnkontroll. Detta borde flytta båda hörnen lika.
När du har en lätt form som du gillar, duplicera skiktet två gånger och sprida ljusen ut. Kasta sedan dem alla i en lagergrupp och sätt blandningsläget för gruppen till Överlagring. Du kan också spela runt med att lägga en yttre glöd på varje ljus för att finjustera effekten.
Steg 6: Den utvalda innehållsrutan
Under logotypen kommer vi att skapa en stor låda som kommer att fungera som platshållare för innehåll som du vill presentera. Det här är en fantastisk plats att inkludera en jQuery bildreglage.
För att börja, skriv en rektangel helt enkelt och fyll den med en lutning eller en fast färg, det spelar ingen roll eftersom tanken är att placera innehåll över det. Se till att du håller dig bra inom de 960-guider som du installerat tidigare.
Nästa lägger vi till en av de trendiga böjda skuggorna som är så populära i webbdesign just nu. För att göra detta lägger du till en typisk droppskugga från lageneffekter-menyn. När du har applicerat droppskuggan högerklickar du på den lilla effektikonen på skiktet och väljer? Skapa lag? nära botten. Som namnet antyder kommer detta att göra skugg-effekten till ett verkligt skugglager.
Använd nu Warp Mode inuti Free Transform för att kurva bottenkanten av skuggan enligt bilden nedan.
Den övergripande effekten gör att hörnen ser ut som de curl upp lite medan de faktiska innehållslådorna hålls en standardform som är lätt att fylla med bilder i utvecklingsfasen.
Steg 7: Navigationsområde
Strax ovanför den innehållsfulla innehållsrutan skriver du några exempel på navigationsalternativ. Jag använde Museo, en fri typsnitt som lätt kan användas med @ font-face i CSS.
Som du ser kan mallen följa snyggt. Vi har avslutat toppdelen och kan gå ner till nästa avsnitt.
Steg 8: Färgfältet
Strax under det innehållsfulla innehållsområdet bör vara om var trästrukturen slutar. Skapa ett lager och fyll i denna del ner till botten med # 3c1306. Kasta sedan in någon platsinnehållsinnehåll.Jag valde en tre kolumnlayout som upprepade boxbehandlingen från tidigare och använde Museo igen för rubrikerna.
Den svåraste saken här ställer in färgfältet bortsett från träbakgrunden. Om du tittar noga på bilden ovan kan du se att jag sträckte en lutning uppåt från svart till transparent så det ser ut som om lådan kastar en skugga på träet. För att lägga till ännu mer kontrast här, målade jag i viss vit med en stor, mjuk pensel, minskade opaciteten hos den vita till 75% och ställde in blandningsläget för överläggning. Detta är ett bra knep för att lätta upp mörka områden i en konsistens.
Steg 9: Citatlåda
Nära längst ned i färgfältet inkluderade jag en insatslåda för att hålla ett kundcitat. Detta är en tre stegs process. Först rita en rundad rektangel som är lite mörkare än bakgrundsfärgen. Applicera sedan samma insetteknik som vi använde på logotypen ovan (vit dropshadow inställd på skärm + inre skugga). Slutligen släpp in lite text. Jag använde en kursiv version av Georgien.
Steg 10: Footer
För att avsluta mallen tog jag ner en liten bit av trästruktur och upprepade många av stegen ovan. Först lade jag till gradienter på sidan precis som vi gjorde i början. Sedan lade jag till en annan skugga på botten av färgfältet precis som vi gjorde på toppen. Slutligen upprepade jag samma inmatningseffekt som vi har använt tre gånger tidigare för att inkludera några grundläggande sociala medierikoner och attributet för bakgrundsstruktur.
Slutsats
Med de sista handen är du klar! Vi lärde oss bland annat att bleka en texturerad bakgrund till en solid färg så att den fungerar på webben, hur man skapar en bokstävereffekt i trä och tillämpar det på ett antal sätt, hur man skapar några fantastiska belysnings illusioner, och hur man använder överlay-blandningsläget för att lätta upp mörka områden i en textur.
Jag hoppas att du lärde dig mycket av handledningen, glöm inte att ladda ner PSD! Om du använder det i ett projekt, lämna en länk i kommentarerna nedan så jag kan kolla in det (valfritt men uppskattat).