Jun
3
Hur man gör en 3D känsla i Photoshop och CSS
Det var egentligen meningen att vi skulle fortsätta med webbdesign trenderna idag men det kommer ett litet mellanstick här. Fredrik Forsmo är en ung programmerare som skickade mig en tutorial på hur man skapar 3D känsla i Photoshop och sedan hur man inplanterar det in i CSS och HTML. Glöm inte besök Fredrik på hans blogg där han pratar om ämnet C# och .NET.
Steg 1 – Skapa en bakgrunds bild i Adobe Photoshop
Först så skapar vi en ny bild i Photoshop som är 1021×115. Glöm inte att välja transparant bakgrund. Sedan behöver vi skapa en till bild som är 900×50. Den ska vi använda som mall för att veta vad 900px är på våran andra bild.
På den första bilden så tar vi och makerar ungefär 3/4 av bilden på längden som vi sedan fyller med en färg, i guiden så väljer vi en blå nyans. Vi använder även ‘Gardient Overlay’ för våran blå färg, dvs att vi använder två olika blå färger. En där uppe som är lite ljusare och en där nere som är lite mörkare. Men det är inget måste.
Sen så tar vi och skapar två vita linjer som är 1px stor som vi placerar uppe och nere på den rektangen vi just färlagt. Se bild nedan.
Nu så ska vi ta våran andra bild och göra helt vit, som vi sedan kopierar in till våran första bild. Notera att den blir placerad i mitten, så allt vi behöver göra är att dra ner den till kanten mot den blåa. Lägg gärna det vita lagret under det blåa lagret.
Vi använder svart bakgrundsfärg för att visa det vita. Sen ska vi göra våra hörn, som skapar 3D känslan. Utrymmet på sidan av den vita rekangen ska vi göra två trianglar, en på vardera sida.
Vi använder ‘Polygonal Lasso Tool’ verktyget till detta.
Vi drar en linje bredvid den vita kanten sedan vidare vid den blåa linjen sen snett imellan den vita och den blåa kanten vi just dragigt. Se bild nedan. Glömt inte att göra detta på båda sidorna, sedan kan du placera lagrena under både den vita och den blåa. Det blir lättare att färglägga triangeln.
Steg 2 – Används bild med css
När bilden slutligen är klar, så sparar vi den som png som vi ska använda med css. Nu kan vi skapa index.html och style.css. Glöm inte att länka in style.css till våran html fil. Nedan kan du hela stylesheeten via använder.
Öppna ett nytt css document och kopiera följande kod..
body{background:#555;}
#wrapper{margin:0 auto; width:1022px;}
#content{width:940px; background:#ece9e9;margin:18px 0px 0px 31px; float:left; height:500px;}
#content{color:#222222; padding:10px;}
#content h2{color:#222}
#bg{background:url('bgd2.png') no-repeat scroll 0 0; float:left; width: 1022px; height:115px;}
#bg h1{color:#fff; font-size:20px; font-family:Verdana; font-weight:normal; padding:10px;}
Sedan har vi HTML koden som ska in i ett nytt HTML document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hur man gör en 3D känsla i 2D av Fredrik Forsmo</title> </head> <body> <div id="wrapper"> <div id="bg"> <h1>Rubrik</h1> <div id="content"> <h2>Rubrik 2</h2> <p>Din text här</p> </div> </div> </div> </body> </html>
Sammanfattning
Visar hur man skapar en enkel bandrolls effekt i din webbdesign. Du kan även experimentera och göra olika typer av banderoller. Guiden är mest för att visa ett sätt att skapa just den här typen av effekt.
Johan jobbar som Interaktiondesigner på Cypoint där han får syssla med interaktionsdesign, webbdesign och visuell kommunikation som är riktat till E-handel, webb och mobila lösningar. Se mer om Johan Pettersson.
Johan (June 15, 2009 at 12:45)
Tack för denna Fredrik!
Bra jobbat
Caroline (September 4, 2011 at 15:44)
Jag hänger inte med i detta!: Vi drar en linje bredvid den vita kanten sedan vidare vid den blåa linjen sen snett imellan den vita och den blåa kanten vi just dragigt.
Johan (September 4, 2011 at 17:20)
Vad är det du vill göra? Jag personligen har inte gjort den här guiden men kan säkert hjälpa ändå.