:: 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å en gran.

Välj den storlek du vill ha på bilden, jag valde 500x4600. 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 ha en bild med luckorna i rad så gå till image slice lektionen, kika även på den för att få mer tips om fonter, skuggningar mm, den här lektinen visar egentligen bara hur man göra uppdelningen av bilden.
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 Verdana i storlek 12 och Bold.

Skriv nu siffra för siffra och placera ut dem så som du vill ha dem.
Nu ser min bild ut så här:
Nu skall det bli luckor vid siffrorna genom att använda File > Export > Image Mapper.
Nu kan du välja om du vill ha oregelbundna luckor, fyrkanter eller cirklar. Välj verktyg efter vad du vill ha:

Jag valde oregelbundna.
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. När du gjort markeringen kring siffran så fyll i följande:
URL: javascript:openPopUpWin('1','200','200')
Alt text: december 1
markera sedna runt 2:an 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 och skriv in kalender2002.html som filnamn.
I nästa dialog väljer du samma katalog som den du nyss lade html filen i och skriver in kalender_bild som namn på image mappen.

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.