:: Adventskalender till webben ::

Förra året behövde en kompis en adventskalender till sin hemsida och kunde inte hitta någon så jag skrev ihop några enkla rader om hur man gör. Till i år har jag skrivit om det litegran och det har blivit den här lektionen. Lektionen är skriven för PSP 7 men kan lätt göras i tidigare versioner.

Har du frågor eller kommentarer till lektionen så skicka ett brev till designsbybeatrice@hotmail.com.

För att följa denna lektion behöver du:

PSP 7 från JASC.
Ett foto eller annan bild du vill ha på som bakgrund.

Ok, då startar vi. Vi börjar med att fixa till fotot som vi vill ha på bilden. Jag kommer här visa med en bild på min son Vincent.

Välj den storlek du vill ha på bilden, jag valde 600x450. Du ändrar storleken på bilden genom att välja Image->Resize och sätt Width eller Height till devärden du vill ha. Resterande inställningar skall vara:
Resize type: Smart Resize
Resize all layers: ikryssad
Maintain aspect ratio of: ikryssad

Vill du inte ha en bild med luckorna i rad utan ha dina luckor oregelbundna så gå till image map lektionen.
För att underlätta arbetet så är det bra att slå på Grids, View->Grids och sen välja View->Change Grid and Guide Properties med följande inställning

om du har en bild som är 600x450, har du andra mått så sätt Horisontal spacing till bredden/4 och Vertical spacing till höjden/6:
Nu borde du ha 24 rutor på din bild. Skapa ett nytt lager Layers->New Raster Layer.
Sätt Foreground till valfri färg/mönster och Background till valfri färg/mönster. Själv har jag valt att sätta ett guldglittermönster som förgrundsfärg (egentligen Style) och en mörk röd färg (##891F27) som bakgrundsfärg.
Välj Text Tool och klicka i bilden så du får upp inställningarna för verktyget. Ställ in det enligt följande: Valfri font, storlek och stil. Det viktiga är att du väljer att kryssa i Antialias och sätter Create as som Floting. Jag valde att använda typsnittet Ravie i storlek 60 och Bold. Jag valde även att ändra Width under Tool Options för textverktyget till 3, se:

Skriv nu siffra för siffra och placera ut dem så som du vill ha dem. För enkelhetens skull så har jag här satt dem i nummerordning.
Applicera sedan en skugga. Effects->3D Effects->Drop Shadow med följande inställningar:
Nu ser min bild ut så här:
Nu skall bilden delas upp i mindre bitar genom att använda File > Export > Image Slicer.
Klicka på ikonen för Grid och klicka sen i bilden till vänster. Fyll i enligt följande:

Nu skall du ha fått ett rutnät på bilden till vänster och den första rutan längst upp är grönmarkerad. Om du inte ser rutan längst upp till vänster så klicka på det lilla korset under Zoom 1:1 eller välj att klicka på minusförstorningsglaset tills du ser det du vill se.
Dags att skapa länkar till det som skall visas när man öppnar luckorna. För att medföljande script skall fungera måste du döpa de dokumenten till dec1.html, dec2.html och så vidare och det är de vi nu skall länka till. Växla till Arrow tool innan du sätter igång. Du skall skriva in följande:
URL: javascript:openPopUpWin('1','200','200')
Alt text: december 1
Klicka sen på rutan med 2:an i och skriv in samma sak fast byt 1:an i openPopUpWin('1','200','200') mot en 2:a och alttexten till december 2. Forstsätt så tills du gjort hela kalendern.
Klicka på Save.
Välj var du vill lägga html-filen som kommer att skapas ochj skriv in kalender2002.html som filnamn.
I nästa dialog skriver du in lucka.
Om du vill göra fler kalendrar i samma storlek och inte vill hålla på att mata in allt detta igen så kan du klicka på Save Settings... och spara undan en Sliceinfofil på valfrit ställe. Jag döpte min till kalender_600_450.

Nu är du färdig i PSP och måste gå över till att koda lite html så öppna valfri html-editor, jag kommer att göra det i Anteckningar för att visa hur det kan se ut. Gå vidare till steg 2 i denna lektion.