Det är verkligen supermånga som frågar mig hur jag lärt mig göra designer och om jag kan tipsa om hur man kodar en design osv. Jag tänkte nu skriva hur jag gått till väga för att komma dit jag är idag samt göra en förklaring av kodmallen och stilmallen. Från första början hade jag ett grundtema (fashion) på min blogg och det är denna som blivit min utgångspunkt med kodningen. Under mina två år har jag hela tiden förändrat min design och därför ser min stilmall ganska annorlunda ut från hur den såg ut för två år sedan. För att göra en design måste du kunna arbeta i photoshop (eller liknande program) och ju mer man arbetar i programmet desto mer kommer du så småning om kunna göra med bloggdesignen. I Photoshop gör du de flesta element som finns på din blogg, till exempel header, wrapper (vita ytan under inläggen) och sidmenyn men vissa saker går såklart att lösa i ren kodning. I min utveckling har jag haft stor hjälp av designadinblogg.se, webdesignskolan.se och google där jag sökt på allt jag velat få reda på även om det krävts en hel del letande.

 

I stilmallen jobbar du med hur din blogg ska se ut, utseende, storlek, färg, placering osv.

# Denna symbol startar en sektion, efter står namnet på vad det är för en sektion (du kan själv skapa nya egna sektioner och döpa till vad du vill). 

{ Denna symbol ramar in själva koderna och det är viktigt att slutsymbolen } finns med.

 

I kodmallarna jobbar du med vart allt ska sitta. Om du har en #side i stilmallen finns det något som heter <div id="side"> i kodmallarna. I kodmallarna bestämmer du alltså vilken ordning allt ska sitta. Body (bakgrunden) ska till exempel sitta ganska högt upp i kodmallen. Det finns fyra olika kodmallar, start (indexsidan), inlägg (sidan du kommenterar på), kategori (om du klickar dig in på en kategori) och arkiv (om du klickar dig in på någon månad). 

 

Body: Bakgrunden på din blogg, det kan till exempel vara en färg eller en bild

Header: Den översta bilden i bloggen, före alla inlägg

Wrapper: Den vita ytan under alla dina inlägg

Content: Innehåll - det som håller ihop inläggen

Side: Sidmenyns bakgrund

Navheader: Titlar som finns i sidmenyn, till exempel "Kategorier", "Arkiv" och "Länkar"

Nav: Hur länkarna under dessa titlar ser ut, till exempel månaderna eller de olika kategorierna

(Entry headers) h3: Rubriken till varje inlägg

Entrybody: Din inläggstext

Entrymeta: Datum och klockslag då inlägget skrevs

Commentheader: Överdelen namn) av kommentaren

Commenttext: Texten som är skriven i kommentaren

Commentmeta: Datum/tid + blogg/hemsida av den som kommenterat

 

Det är väldigt lätt att blanda ihop margin och padding vilket är något jag fortfarande gör idag. Här kommer en bild med beskriving.

Tänkte tipsa er om idiwa.se som säljer mobilskal till både iPhone och Samsung! Jag kikade runt och de har väldigt många som jag skulle kunna tänka mig, plockade ut några stycken ovan som jag gillar extra mycket. Jag tycker verkligen om den lite retro känslan som tre av de ovan har, men föll även för enkelheten med cykelskalet. Jag fick ju ett liknande skal som kameraskalet till vänster men det var ju köpt i Thailand och ganska svår att få tag på gissar jag, därför var det kul att visa er detta som också ser väldigt fint ut! Skalet med flaggan på var jag nära att köpa när jag var i Skottland men det blev aldrig så, nu fick jag nästan lust igen. Skalen verkar vara väldigt prisvärda och med tanke på den billiga frakten (19 kr!!) känns verkligen värt pengarna! :)

Som ni ser just nu har jag en animerad header, eller ett bildspel i headern och det är väldigt många som frågat om den sedan jag skaffade en sådan i början av året. Detta är alltså ingen animation gjord i Photoshop utan en del koder som är inlagda i både stilmallen och kodmallen. Jag tänkte nu dela med mig av detta tips!

 

Följ de olika stegen: 

1. Lägg in denna koden i stilmallen under #header { avsnittet (alltså inte efter endast denna raden utan efter hela avsnittet).

 

2. Nu ska du däremot kolla i #header { avsnittet och se till så att den första bilden (BILD 1) i ditt bildspel finns inlagt här samt att bredden och höjden stämmer.

 

3. Lägg sedan in den långa koden i rutan nedan, den ska ligga i kodmallen precis ovanför </head>. Glöm inte att göra detta på alla de olika kodmallarna!

 

4. Sista koden ska också ligga i kodmallen men alldeles efter <div id="header">.

Jag har fått många frågor, inte bara om senaste inlägget utan även om tidigare foton på vattendroppar och till exempel den här bilden. Jag tänkte därför gå igenom hur jag själv går till väga när jag fotograferar vatten in action.

 

Du behöver ett glas som inte är särskilt ömtåligt, vatten, något att släppa i vattnet (exempelvis stenar) och såklart en kamera att fånga detta med. Det första viktiga att tänka på är miljön du väljer att fota i. Ljuset är a och o, för att fota vattendroppar krävs det mycket ljus, så mycket du bara kan få. Jag valde att ställa mitt glas i direkt solljus. Tänk också på att bakgrunden ska vara en bit ifrån ditt motiv för att få till det korta skärpedjupet där bakgrunden blir suddig. Nästa steg är att ställa in inställningarna på din kamera (jag fotar alltid manuellt eller halvmanuellt). I detta fall strävar jag efter att frysa vattendropparna, jag vill inte ha någon rörelseoskärpa, då krävs en snabb slutartid. Runt 1/2000 är den slutartid jag har använt. Jag vill också ha kort skärpedjup men här är det viktigt att inte få för kort eftersom du fortfarande vill att vattendropparna ska vara skarpa. Jag har då valt ett bländartal runt 4. Använd även ett så lågt ISO-tal som möjligt, i mitt fall har jag använt det lägsta, ISO100. En sista sak att tänka på är vad du vill ha för bildutsnitt. Ska hela glaset synas eller bara överdelen? Jag valde att fota diagonalt just för att "piffa upp" bilden lite grann och inte fota med det vanliga raka som man ofta gör. Sedan är det bara att sätta igång! Att släppa stenar 100 gånger eller mer är det jag gjort för att fånga det där snyggaste splashet. Det kräver att du har tålamod och tar många bilder om och om igen, det går inte att förvänta sig att allt ska sitta på första försöket.

 

Tänkte tipsa alla er som använder Google Chrome som webbläsare, man kan ju ladda ner program i Chrome Web Store och jag hittade ett litet roligt redigeringsprogram, Pixlr-o-matic. Där kan man lägga på olika filter, lite coola ljuseffekter samt ramar i "filmremsor"-stuk. Lite kul att leka med! :)