Share
Det är ganska fantastiskt hur mycket färg och bakgrund som kan ändra utseendet på en webbplats. I denna handledning ska vi sammanställa en snabb, enkel men effektiv layout och sedan skapa variationer med bakgrund, foton och mönster. Vi tittar också på hur man gör sömlösa kaklade bakgrunder ur ett foto, metoder för att avsluta ett enda foto och enkla sätt att skapa pixelmönster. Kort sagt det är en jam-packad handledning!
Det här inlägget är dag 1 i vår webbdesignsession. Creative Sessions Session Day 2 "
Så vår första uppgift är att utforma en layout för vår sida. Vi kommer inte göra något för att ha det för att handledningen handlar om bakgrunder mer än layouter. Ändå bör det se bra ut och vara en verklig användbar layout. Så i bilden ovan kan du se min plan med grova komponenter på sidan. Jag har planerat i en meny och undermeny, en panel för att introducera sektionen och ett innehållsområde. Jag har också planerat att det borde vara mindre än 1000px så att när en person på en liten skärm tittar på webbplatsen ser de fortfarande bakgrunden ordentligt (eftersom det kommer att vara en stor egenskap av designen).
Nu ska jag påpeka i verkligheten att jag faktiskt inte tog ut denna uppsättning lådor ganska så här. Det var mer som att bara krossa tills jag trodde "oooh det är en fin layout". Men i den här handledningen är det bättre att förklara det på så sätt!
Så att layouten är våra ben, nu behöver vi krossa det med lite dummyinnehåll och ett färgschema.
Som du kan se har jag inte gjort något riktigt fantastiskt här, bara placerat elementen på sidan ganska snyggt och jämnt. Så notera det avståndet. I bilden har jag försökt visa hur olika element stämmer upp (gula linjer), hur stor avstånd är ungefär jämnt vertikalt och horisontellt såväl som ovan och under element.
Observera att dessa bara är grova guider och jag jobbar egentligen bara med ögat tills sakerna ser rätt ut. Men om du är osäker på avstånd, gör saker ganska jämnt inte ett dåligt ställe att börja. När du blir mer bekväm med avstånd kan du variera saker och spela med ojämn balans.
I bilden ovan kan du se att jag har valt en huvudvisningstyp som heter Rockwell som vi ska använda i rubrikpanelen för att ge sidan lite tecken. Om jag byggde den här webbplatsen som kan vara en bild eller infogad med sIFR. Resten av texten är Helvetica och Arial som naturligtvis passar för HTML-användning. Jag kastade också in en vektor illustration av ett pappersplan som jag ritade år sedan och säljer som lager. Naturligtvis i ett verkligt projekt, skulle den här bilden vara något att göra med webbplatsen istället för att slumpmässigt slängas som jag har här.
Till sist har jag använt en varm palett med färgstark färg. Jag är faktiskt lite fan av beige och jordfärger och du hittar att jag använder dem mycket. Jag tror att de går långt för att göra webbplatser ser vänligare och mer tillvägagångssätt.
Så sidan ser OK ut, men det finns inget mycket minnesvärt om det ännu och det är lite grundläggande. I nästa steg lägger vi till några polska.
OK så här kan du se exakt samma layout men jag har polerat upp det och lagt till två visuella element för att ge den lite stil. Det första elementet är pilen skärs ut från sidemenyn. Detta gör att mittpanelen ser ut som en typ av övervuxen talbubbla. Den andra visuella som du ser när du tittar nära är en typ av punkttema.
Så i alla har vi använt tre visuella element för att ge sidan en stil: en illustration, en intressant rutnätform och ett subtilt tema baserat på en enkel form. Senare lägger vi till ett fjärde visuellt element - en bakgrund - för att slutföra webbplatsens stil.
I bilden ovan har jag pekat på alla bitar av polering som jag lagt till. Det är alla bara små höjdpunkter och graderingar i färg, prickar och förstås den utskurna pilen. Du kanske också är intresserad av en tidigare artikel som jag skrev för ett år sedan om polering av webbdesign på Psdtuts+.
Så med det har vi vår grundläggande layout!
Så den första bakgrunden vi ska byta in är en sida vid sida. I det här fallet använder vi ett gräsfoto som jag använde på grästexthandledningen (en serie som jag ännu inte har klarat :-) Du kan få det ursprungliga gräsfotoet på Flickr.
Självklart om du försöker kakel det ursprungliga fotot kommer det inte att se bra ut och det är uppenbart att du bara repeterar samma bild om och om igen. I stället måste du ändra bilden så att den plattas sömlöst. Lyckligtvis lägger jag bara upp en handledning om det här ämnet, så gå över och läs:
Tillsammans med förändringen i bakgrunden har jag naturligtvis uppdaterat färgningen för att passa det nya utseendet. Observera att jag har undvikit att använda samma nyans av ljus, ljusgrön som gräset - det skulle ha varit överväldigande. Istället plockar nyanser av dullare gröna mörkare och lättare kompletterar bakgrunden.
Bakgrunder som detta är perfekt för att lägga till transparenta lager överst. Här har både Om-panelen och menyn viss transparens och det ser jättebra ut eftersom du kan se att gräset kommer igenom och det ger lite djup. Även om du bara kan dämpa opaciteten för det lämpliga lagret, är ett annat alternativ att lägga till ett par andra lager ovanpå - en med en liten gradient som bleknar till ingenting och den andra med en 1px-höjdpunkt.
I bilden ovan kan man till exempel se på menyn att jag har ett vitt block på 70% opacitet, förutom att det finns en lutning från vit till ingenting, och dessutom är en vit vit linje på nederkant. Dessa ytterligare skikt betonar insynen och ger bilddjupet.
Så all denna transparens är lätt att göra i Photoshop, men du kanske undrar hur genomförbar det är att bygga en sådan design.
Lyckligtvis är det möjligt tack vare .PNG-filformatet som låter dig använda insyn i dina bilder. En sak att vara medveten om är att medan du kan göra öppenhet (t ex 60% opacitet) kan du inte göra lagringsblandningar (t ex Multiplicera eller Överlägg). Eftersom i en Photoshop-design är det viktigt att inte göra någonting som inte kan byggas, allt jag har använt är opacitet. Det är mer begränsande men du kan fortfarande få bra effekter.
Så låt oss skapa ett snabbt HTML-test bara för att se till att allting verkligen fungerar hur vi tänker oss att det ska. För att skapa en transparent PNG först förstärker vi lagren för vår stora paneldesign till en. Eftersom alla lager har viss genomskinlighet är slutresultatet efter sammanslagning också halvtransparent.
Kopiera bara det till ett nytt Photoshop-dokument, stäng sedan av bakgrundsskiktet (se bilden ovan) och du bör se att insynen visas genom.
Gå nu till Arkiv> Spara för webb och enheter och välj PNG-24 från alternativen. Du bör se samma öppenhet i förhandsgranskningsfönstret.
Nästa gör jag samma sak för några fler bildelement, för i vårt test vill vi visa att det är möjligt att placera en genomskinlig PNG ovanpå en transparent PNG ovanpå en bakgrund.
Med alla våra bilder skapade, handlar det nu bara om att lägga lite HTML ihop:
Bakgrund / Transparentest
Så allt vi gör här ställer bakgrundsbilden till vår platta JPG. Placera sedan en
Det kommer att göra för att bevisa att denna design är byggbar. Egentligen skulle du behöva göra en viss fixering så att den fungerar i IE6, a Google-sökning avslöjar många artiklar om ämnet, men eftersom det här är Psdtuts + och inte NETTUTS, avslutar vi det här :-)
Det som enkelt görs med en hård konsistensbakgrund som gräs är ännu lättare att göra med enklare texturer som denna pappersstruktur från Bittbox. Eftersom källbilden är bättre kan du skapa mycket större plattor för bakgrunden som är mycket mindre benägna att se upprepade gånger.
Ett annat alternativ för bakgrunder är enkla pixelmönster som vid upprepning ger en bakgrund lite textur. Mönstret som visas i denna variation av layouten är den jag använde på Creattica Daily.
Du kan enkelt skapa mönster som detta. För att göra denna effekt, skapa bara en ny bild 4px bred vid 5px hög och zooma in så långt du kan, och dra sedan in dessa pixlar:
Tryck sedan på CTRL-A att välja allt och gå till Redigera> Definiera mönster, ge det ett namn då du kan tillämpa mönstret med a Mönsteröverläggning genom ett lager blandningsalternativ. Så tillbaka på din huvudsakliga PSD-fil högerklickar du på det lager du vill lägga till mönstret till och välj sedan Blandningsalternativ sedan Välj Mönsteröverläggning. I bilden ovan har jag satt mönstret till Multiplicera på en mörkgrå bakgrund.
Det är faktiskt ganska kul att spela med dessa typer av pixelmönster. Det pixelälskande folket på K10K har ett bibliotek med Pixel Patterns, du kan också kolla på mer avancerade mönster.
Den sista variationen vi tittar på använder ett enda, tillsatt foto. Här använder jag ett fint foto av West Bay Cliffs av Cristiano Betta som jag hittade på Flickr:
Det är ett trevligt stort foto och det gjorde ett fint färgschema. Så här är några snabba steg som jag tog för att placera bilden.
Här sitter det bara i bakgrunden av vår design. Med lite genomskinlighet ser det redan ganska snyggt ut, men vad händer i övre vänstra?
Flyttar fotot upp ca 50px skjuter de konstiga missfärgade delarna från sidan. Nästa problem är att vi inte kan få en oändlig fotobakgrund, så vi kommer att blekna den till en färg.
Plockar en mörkare färg från havet, vi skapar ett nytt lager och ritar en gradient som bleknar från färgen till transparent. Detta sitter ovanför havet bakgrunden snyggt och blandar ut det.
Nu ser bakgrunden faktiskt lite platt så det skulle vara trevligt att lysa upp färgerna lite. För att göra detta lägger vi över fotot med en gradient av färger som matchas av bilden.
I bilden ovan kan du se att jag har ritat en lutning med hjälp av purpur och apelsiner i originalbilden.
Inställning av gradientlagret till Täcka över och 70% verkligen lyser upp solnedgången och gör det ser mycket mer levande ut.
Nu är nästa problem att vi måste få bilden att blandas på sidorna. Det kommer att vara svårt eftersom vi på ett och ett har ett berg och å andra sidan är det bara himmel. Så förmodligen är den bästa lösningen att blanda sig i de mörka färgerna. För de flesta kommer de inte att se detta, det är bara för alla de som använder en jätte skärm och öppnar sina webbläsare direkt upp.
Så det första vi gör är att ta ett 1px vertikalt urval från varje yttersta kant på bilden och träffa CTRL-T att förvandla den över. Anledningen till att vi gör det här är så att om någon av bakgrunden visar genom den färg jag ska lägga till kommer det inte att se konstigt ut.
Så nästa lägger vi till ett nytt lager och ritar i en jätte ellips i bakgrunden, trycker du på Ctrl-Skift-I att vända om valet och fylla det med samma mörka färg som vi tidigare använde.
Nu avmarkerar vi skiktet och går till Filter> Blur> Gaussian Blur att suddas in i vår färg, med en radius av 80px. Kopiera sedan det här skiktet och torka det igen med en radie på 120px, sedan en tredje gång med en radius av 160px. Detta borde ge en fin mjuk examen.
Så vår sista design med en fotobakgrund för de flesta kommer att se ut som bilden ovan. Men vi kan vara säkra på att även ett stort webbläsarfönster inte avslöjar något dumt.
Du kan lära dig mer om att designa med stora bakgrundsbilder genom att läsa dessa tre stora artiklar:
Som du kan se har vi fått mycket körsträcka ut ur vår enkla layout och förhoppningsvis längs vägen har du fått något användbart ur processen!
Det här inlägget är dag 1 i vår webbdesignsession. Creative Sessions Session Day 2 "
Accentsconagua
