Krav för att kunna följa guiden:
• Tillgång till Photoshop
• Lite egna idéer
• Grundliga kunskaper inom HTML, CSS och Photoshop (Inte ett krav men det blir ju snyggare om du vet vad du håller på med!
Förord
Den här lilla guiden ska visa dig hur du mycket enkelt kan designa en hemsida eller blogg precis som du vill genom att använda några bra och enkla verktyg i Photoshop. Såklart varierar verktygen beroende på vad det är för något du vill göra. Och jag säger det nu så ni inte blir besvikna: Jag går INTE igenom hur man gör själva designen, utan bara hur man enkelt får den internetvänlig. Det finns också fortsättningar på denna guiden som hjälper dig att använda din nya layout på diverse platser (i exemplet används blogg.se). Platser som jag stött på där folk använt denna metod är bloggar, hemsidor och även MySpace.
Till att börja med så öppnar vi upp Photoshop och öppnar ett nytt dokument.
Eftersom dagens mest använda upplösning är 1024×768 så anpassar vi oss efter det.
Nu har vi alltså vårat fina dokument. Nu är det dags att göra våran design. Det som vi ska komma ihåg nu är att denna arbetsyta vi har gjort motsvarar en hel skärmyta. Vi måste då tänka på att höjden faktiskt kan variera. Vi kan gott och väl öka höjden om vi satsar på en hög design. Kom ihåg också att ibland kan det vara snyggare att ha lite tom yta mellan ytterkanterna. Alltså ni kan lämna lite tomrum både till höger och vänster.
Jippie! Nu har vi gjort en fin design!
Tycker du att designen ser tom och tråkig ut? Ja men kom ihåg då att detta är bara det som inte redan finns på bloggen som vi designar. Senare kommer vi att ha text och menyer. Då blir det mycket finare. (Obs! Tänkt på att du inte får stjäla bilder hur som helst på internet. Även fast jag kanske gjort det ibland så är det inte okey!)
Det vi har gjort nu är att vi har gjort designen efter en tanke, och det är att vi har en Header (1), en meny (2), en yta för innehålls ruta (3) och en footer (4).
Förstår du tanken? Viktigt att du också har en sån tanke, och det här kan vara en väldigt bra grundtanke. Så om du gjort en design men glömt att tänka, gå tillbaka till start och tänk till lite!
Nu när vi har gjort vår design så måste vi ju också göra den redo för internet. Photoshop har ett väldigt bra verktyg för att dela upp din bild i flera delar. Det kallas för ”Slice tool” och kan aktiveras om du klickar på ”K”.
Du delar nu upp bilderna precis som du vill. Här är ju det en fördel om du vet vad du ska göra med delarna senare, men det tar vi ju senare så tänk som mig just nu bara så löser sig allt!
Hur jag har tänkt här med uppdelningen är ju inte alls som med första tanken jag beskrev utan nu är det så att headern är ruta med namnet ”3”. Menyn och innehållsrutan får bli samma ruta (Detta för att höjden kommer att vara dynamisk efter innehållet, mer om det senare.) och det är delen med namnet ”6” som vi kommer att använda. Del nummer 5 är överflödig och kommer inte att användas. Och till sist en footer del med namn ”7”. Du kommer se om ett tag varför det blir såhär. Sen undrar du säkert varför siffrorna inte är 1-4, och det beror på att Photoshop gör uppdelningen själv.
När du delat upp din bild så ska vi spara den för webben. Save for web… Eller nått.
Se till att alla delar använder samma preset. Detta gör du lättast genom att använda snabbkommandot ”ctrl+a” för att markera alla. MEN KOM IHÅG! I exemplet här så har designen faktiskt runda hörn, vilket kräver att headern och footern måste vara .gif bilder så att de kan vara transparenta. Annars kommer bilden att var fyrkantig och då blir det inte som det är tänkt. Klicka sedan på Save.
När du har sparat i en mapp så får du upp dessa två där du sparade. Det är en .html fil och en mapp med dina bilder i.
I bildmappen så kan det komma delar som du inte ens har markerat. Det är för att Photoshop gör egna delar av det som är kvar utav bilden. Så det är ju viktigt att det blir tätt mellan dina delar så det inte blir ojämnt. Som ni kan se så har jag ett antal delar som inte kommer att användas. Observera också att det är en blandning mellan .jpg och .gif…
Om du går tillbaka och öppnar din .html fil med din webbläsare så borde det se ut som hela din bild du gjorde nyss.
Här har jag öppnat .html filen med dreamweaver (går lika bra med vilken texthanterare som helst).
Och det är ju lätt att se nu att Photoshop har gjort en kod som gör att bilderna sitter på rätt plats!
Det som fattas är väl bara en snygg bakgrund. Men det tar vi i nästa avsnitt.
Om ni inte vet om det här är rätt guide för er så kan vi väl säga att såhär blir slutresultatet:
Kommentarer
15 kommentarer till “Bloggdesign i Photoshop Del 1”
Skriv en kommentar!
Tips!
Adrecord är ett mycket bra affiliatenätverk som ger bra med ersättning för sina kampanjer. Värt att testa om du vill tjäna pengar på din hemsida!
Lnkjuice är ett enkelt sätt att dra in några extra kronor utan att behöva lyfta ett finger. Det skapas automatiska länkar utifrån din text som ger dig en liten inkomst, och det är smidigt, speciellt om du är ny som annonsör.
Jag använder Binero för samtliga mina domäner. Det är snabbt, smidigt och enkelt. Har aldrig haft några problem. Prisvärt!
Affelix är ett annat affiliatenätverk som är relativt nytt. Det finns ganska många kampanjer numera, men vid nystarten fanns det bara ett få, men jag lyckades ändå få min första utbetalning på kort tid. Ett bra val!
jättebra sida! har bara en fråga, skulle bli jätteglad om du skulle kunna svara på den, nämligen den bilden som du har skrivit: jippie! nu har vi gjort en fin design….
vad använder du för verktyg när du gör den ”svarta ramen” , skulle vara jättesnällt om du kunde svara
Evelina!
Verktyget, eller verktygen, som används för att göra en ram är först och främst markeringsverktyget. Du vet det som gör en streckad ruta/ring eller valbar form där du väljer att använda den. När du har något markerat så kan du enkelt skapa en linje efter denna markering via… Nu ska vi se, sitter på en dator utan photoshop… Jag tror du väljer ”Edit” i rullmenyn längst upp, och sedan ”Stroke”. Sedan väljer du storlek, position och färg.
aha okej, tack så mycket!
Hejsan!
När man är klar med ”bilden” vart ska man spara den då för att kunna använda den som design?
/Kajsa
Du sparar dem på din dator, valfri plats!
Sedan laddar du upp dem på din blogg!
när jag använder slice tool verktyget, så kommer siffrorna 1-5 upp typ, och det är jättesvårt att få de så som du visar på bilden, för det går inte att ta bort de andra siffrorna? är det något jag göra fel, eller vet du hur jag ska göra för att få det på ett annat sätt?
Om du har yta på bilden som INTE är markerad så gör programmet egna fält, därav de extra numren. Men detta gör ingenting, så länge som du markerat de delar jag nämner i guiden. Sedan om du klickar på verktyget slice så kan du få upp ett till verktyg, som istället för att skapa nya rutor helt enkelt ger dig möjligheten att redigera dem.
Hur laddar man upp den på bloggen ?
Laddar upp vad? Bilderna? Läs igenom Del 2 av guiden (Länk i nedre delen), om det inte hjälper så måste du först spara ner dina bilder, och sedan laddar du upp, om du använder blogg.se, i menyn där du laddar upp bilder i vanliga fall.
Hejsan!
Jag har skivat alla delar men när jag öppnar mappen där jag sparat finns det bara bilder men inte HTML hemsidan. Vad har jag gjort för fel?
Tack på förhand!
Det är viktigt att du väljer ”spara för webben”. Htm filen hamnar inte i samma mapp som bilderna, utan i mappen ovanför.
Man måste dessutom se till att man väljer att spara både bilder och .htm filen. Det gör man när man ska spara .
Sparar den för ”webb och devices” men när rutan där man markerar alla delar finns det ingen som säger hur man sparar HTML filen. Använder Mac om det gör skillnad.
Tack!
Jag använder inte mac, och har tyvärr inte möjlighet just nu att se efter hur det ser ut på en sådan. Men på en PC så kommer alternativet upp i samma stund som du kan döpa filerna.
http://corew.se/wp-content/uploads/2011/07/imgandhtml1.jpg
Så ser det ut för mig.
Hoppas du hittar det! Skriv gärna om/hur du löste det så jag lär mig något.
Haha du har precis rätt, det är jag som har missat det. Så om du sätter dig vid en Mac så kan du det redan;) tack för hjälpen, hade inte kunnat fixa detta annars!