Share
Goda mönster ska aldrig gå i spill. Denna design var ursprungligen gjord för en klient som aldrig betalat, och eftersom det var så överväldigande positiv feedback, bestämde jag mig för att skapa en handledning för den. Rika & krämiga texturer ger denna design ett unikt tema. Hoppas du älskar kaffe!
Inte bara ger vi bort Photoshop-filerna för den här designen, vi ger också bort HTML-filerna så att du kan kolla hur det har kodats efter designfasen! Du bör arbeta igenom denna handledning från början, men gärna ta upp källfilerna också.
Som med vilken design som helst, behöver vi ett bra nät för att komma igång. Jag börjar alltid med ett dokument som är 960px bredt (vilket kommer att vara bredden på vår sida). Se till att du ger tillräckligt med höjd för ditt dokument för att tillåta alla de element vi ska skapa - jag valde 1100px.
Dra riktlinjer till sidorna av ditt dokument. Dessa kommer att fungera som takrännor för vårt designområde, som kommer att vara 960px breda. Dra också riktlinjer vid 10px och 960px på horisontalplanet. Dessa kommer att fungera som en ident för att hålla allt uppåt när vi flyttar ner på sidan.
När du har ställt in dina riktlinjer, gå till Bild -> Kanfastryck och ändra värdet på din dukvidd till 1000px. Detta ger oss lite extra utrymme att arbeta med på utsidan, och visa hur webbplatsen kommer att expandera i webbläsaren.
Det övre vänstra hörnet av ditt dokument ska se ut så här:
Vi behöver skapa några fler riktlinjer, eftersom vi har några kolumner som kör vertikalt nedåt på sidan. Skapa 6 vertikala riktlinjer på 330px, 350px, 650px, 670px, 730px och 750px. Dessa bör hjälpa oss att gå och hålla allt justerat.
Därefter fyller vi i bakgrunden. Vi går självklart för brunt på grund av dess rikedom (och det är färgen på kaffe). Börja med att skapa ett nytt lager och fylla hela dokumentet med någon solid färg (vi kommer att ändra det med lagstilar). Du kan göra det snabbt genom att slå Shift + F5 till "Fyll".
Byt namn på det här skiktet till "bg", och högerklicka på det i paletten Lager och välj "Blandningsalternativ". Välj "Gradient Overlay" och skapa en gradient från # 67331c till # 2e1308; vi vill ha den mörkare bruna längst upp på sidan och ljusaren brun längst ner.
Nu behöver vi lägga till lite textur så att lutningen inte ser så platt ut. Skapa ett nytt lager ovanför ditt "bg" lager och namnge detta lager "Pattern".
Resultatet ska vara något så här:
Nu när vi har skapat vår bakgrund kommer vi att fortsätta och börja skapa några av elementen på sidan - börjar med den fina gule navigeringsfältet.
Skapa en ny laggrupp och byt namn på den här gruppen "Navigation". Inne i "Navigation" -gruppen, skapa ett val som är 100px lång och hela bredden på ditt dokument. Skapa ett nytt lager och tryck på Shift + F5 för att fylla i lagret. Som din fyllfärg, använd # edd38d (gul). Byt namn på det här lagret "bg" i "Navigation" -gruppen.
Du har nu din navigeringsfält. Det ser lite platt ut, så vi går vidare och lägger till några lagstilar för att få det att stå ut lite mer. Högerklicka på "bg" -laget och välj Blandningsalternativ.
Navigationsfältet ska se så här ut:
Än en gång behöver vi en viss textur - annars kommer det att bli platt. Jag använde denna sandliknande konsistens som jag hade ljugit runt. Den viktiga delen här är färgen. Du kan använda vilken textur du vill, men färgen ska likna den fyllningsfärg vi använde tidigare. Lägg till den här texturen i ett nytt lager ovanför det "bg" -lagret som vi tidigare skapat och ställ det opacitet till 30%. Byt namn på den här skikttexturen och se till att det är exakt samma mått som bg-skiktet.
Vi vill ge lite mer djup till den gula baren, så vi ska manuellt skapa en mörkare skugga på bottenkanten. För att göra detta, gör ett val längst ner i den gula stapeln och skapa ett nytt lager.
Fyll det här nya lagret med en gradient (Shift + F5) från Transparent till # 2f1408 (vid 30% Opacity)
Det borde göra det för den gula stången. Det borde se ut så här:
Skapa en ny grupp med namnet "Nav", och skapa alla följande text och lager i den.
Ganska enkel navigering här, stor och lättläst. Teckensnittet är Georgia, 30px. Se till att din text har bra avstånd mellan varje ord (för att möjliggöra möjliga aktiva tillstånd). Gör texten färg # 92583f, med det aktiva objektet (Hem i det här fallet), # 64311b.
För att skapa den "aktiva" understrukningen för navigeringen, använde jag borstverktyget för att få en ögonboll med något betitlat underlag. Detta knyter logotypen tillsammans med resten av webbplatsen. Oroa dig inte om du inte får det rätt vid första försöket - jag trodde troligen det 50 gånger innan jag hittade den linje jag gillade.
Nu behöver vi "Sign Up" -knappen. Kopiera navigeringstexten (välj textlagret och kommandot + J) och ändra orden för att läsa "Registrera".
Därefter markerar du det runda rektangelverktyget och ritar en rektangel med Radius 20px; Detta ger oss formen kring anmälningstexten.
Ställ in fältet för detta lager till 0% och använd följande lagstilar:
För att skapa logotypen hittade jag en fria servett och trimmade kanterna lite. Du kan hitta din egen på: iStockPhoto eller andra gratis webbplatser.
Jag lade till en droppskugga för att det skulle visa sig att servetten satt över allt annat:
Jag använde en lagertextur av en kaffefläcka (för att ge lite mer äkthet till vår kaffesal och servett). Du kan behöva tinker med opacitet tills det ser rätt ut. Du kan också försöka ställa in blandningsläge för fläcken till Multiplicera så att den sticker ut lite mer.
När det gäller resten av logotypen valde jag ett teckensnitt och snabbt ritade en kaffekopp. Inget för knepigt här.
Nu ska vi skapa den genomskinliga sökrutan. Skapa en ny lagergrupp, under "Yellow Bar" -lagren (eftersom vi vill att sökfältet ska visas som en flik som ligger under rubriken). Din lagerstack borde vara något enligt följande:
Vi börjar med att skapa den rundade rektangeln som har sökfältet i den. Ta det runda rektangelverktyget och skapa en rektangel som är 300px bred och ca 70px lång. Se till att rektangeln passar in i vår "högra kolonnkanten" med de guider som vi skapat i det första steget i denna handledning.
Resultatet ska se ut så här:
Därefter skapar vi inmatningsrutan med verktyget rundad rektangel. Skapa en rektangel med Radius 5px, Bredd: 280px, Höjd: 30px. Centrera den här nya rektangeln i rektangeln "behållare" som du tidigare skapat. Byt namn på det här lagret "input"
Ta tag i textverktyget och lägg till lite text med # af8753 som din färg. Välj din favorit lagerikon (jag rekommenderar att du använder IconFinder för ikoner).
Nu när vi har hela rubriken skapad, kan vi nu komma in i det verkliga innehållet. Vi skapar de 3 huvudhinkarna av innehåll först. Återigen, tag det runda rektangelverktyget med en radie av 20px och skapa 3 rundade rektanglar i de 3 kolumnerna som vi skapat tidigare.
För att få dessa lådor att se ut som vad jag just visade på skärmdumpen, använd följande lagerformat:
Jag hittade några bra kaffeikoner på webben som passar perfekt, vilket jag använde på dessa 3 avsnitt. Återigen använder vi bara våra resurser - och ingen mening att återskapa hjulet här.
Sedan lade jag till en rubrik med samma teckensnitt Georgien, och en del punktrubrik, och det här avsnittet är gjort.
Eftersom designen använder insyn i hela designen, kände jag att tabellstilarna inte borde vara annorlunda. Bordet är rent och enkelt vilket gör att det passar perfekt in i designen.
Ta tag i markeringsverktyget och skapa ett kvadratiskt val där du vill att ditt bord ska vara. Min tabell är 700px bred (enligt de riktlinjer som vi ställde tidigare) och 220px lång.
Skapa ett nytt lager och fyll det här skiktet (Shift + F5) med en mörkare brun (jag valde # 3c2014). Byt namn på det här skiktet till "bord bg" och ställ in opaciteten till 70%. Nu använder vi verktyget för val av en rad, vi skapar separationen mellan kolumner och rader. När du har valt var du vill att dina divisioner ska vara, klicka på Ta bort och ta bort de fyllda pixlarna från "tabell bg" -laget.
Du borde nu ha ett bra bordsladd så här:
Jag använder Georgien för att fylla i cellerna med text, och jag lämnar det upp till dig att välja färger / storlekar. Se till att du lägger till huvudrubriken och tabellrubrikerna.
Nu ska vi skapa betygsymbolerna. För "pris" betyg valde jag ett teckensnitt med ett tjockt dollartecken och tillämpade några lagerformat på den. När du hittar din typsnitt skriver du in 4 dollar tecken. Duplicera det här skiktet, skift sedan det till höger och skriv in 1 dollar tecken (de kommer att ha separata lagerformat applicerade på dem). För de "aktiva" gula dollartecknen applicerar vi följande lagerstilar:
Och för de inaktiva dollarn tecknen vill vi att de ska se inset (som om de inte fylls). Vi tillämpar olika lagerformat här:
För stjärnklasseringen använde jag verktyget Photoshop Custom Shape och valde stjärnan. Samma teknik som vi använde för dollarns tecken (helt enkelt kopiera / klistra in Layer-stilar ovanifrån) till dessa stjärnor.
Ditt resultat borde vara enligt följande:
Gruppera den här enkla raden du skapade och Kopiera gruppen två gånger, flytta raden nedåt för att passa in i det rutnät du skapade tidigare. Slutresultatet ska se ut så här:
Vårt sista huvudavsnitt är den mest aktiva användarlistan. Vi fortsätter vår användning av Georgien, men lägger till en fin touch för de användare som inte har avatarer. Du kommer att se mönstret är faktiskt från ikonen i "Bläddra" rutan nära toppen - ångan kommer från kruset. En annan fin detalj att knyta konstruktören tillsammans. Så här skapar du det.
Lägg till rubriken (återanvänd vad du skapat för "Nya recensioner") och fyll i ett rektangelområde med 40% opacitet (färg spelar ingen roll här). Namn det här lagret "behållare", och sedan lägger vi till några lagstilar (färgöverlagring och streck) till det:
Resultatet ska vara en ogenomskinlig låda med en fin ytterkant som är mörkare än den inre bakgrunden:
För avataren, använd markeringsverktyget för att skapa ett 50px med 50px-val. Skapa ett nytt lager och fyll ditt val med vilken färg som helst (Shift + F5).
Nu lägger vi till några lagstilar för att få denna avatar att se lite bättre ut för de användare som inte har en avataruppsättning.
Lägg till lite text för användarens namn och land, och ångvirvlarna från kaffekoppen och duplicera raden några gånger för att fylla utrymmet.
Slutligen, sidfoten. För att ge en liten separation, finns det en mörkbrun till transparent gradient från topp till botten för att ge en visuell linje för att bryta upp de två sektionerna. För att skapa denna separation, använd markeringsverktyget för att göra ett urval och fyll i valet med en lutning (brun till transparent). Justera gradientens opacitet tills du kan se mönstren från bakgrunden skina igenom.
Återigen använder vi Georgien här för att skapa några kompletterande länkar om webbplatsen. Jag använde 18px för länkarna och 14px för upphovsrättsmeddelandet nedan. Se till att vänster sida är i linje med de riktlinjer som vi skapade tidigare.
Den slutliga touchen återanvändar kaffekoppikonen från rutan "Bläddra" ovanför i nedre högra hörnet. återigen justera höger sida med riktlinjerna.
Inte så svårt? Det är ganska enkelt när du kan bryta det i bit, återanvända några av samma stilar och tekniker du har gjort om och om igen. De skivade filerna ingår också, så du kan se hur detta kodades. Mycket har ändrats sedan jag designade och kodade det här, och många av bilderna kunde förmodligen återskapas med CSS3 och gradienter, men för nästan 3 år sedan så har jag gjort det. Du har kanske sett denna design på www.coffeenatic.com; nu när webbplatsen är borta, tyckte jag att det skulle vara en bra idé att dela den med alla när jag fick en sådan positiv feedback om det. Hoppas du gillade det!
Accentsconagua