Proffsig startsida

1. Inledning

Adobe har i GoLive 5 försökt införa nya sätt att arbeta på. Några av dem har jag visat tidigare, men här skall jag visa arbetsgången från de första skisserna i Photoshop via segmentering i ImageReady till finjusteringen i GoLive. Detta är det jag kallar för det nya, proffsigare sättet att göra en snygg startsida på.

Sidan kräver vissa grundläggande förkunskaper i Photoshop och GoLive, samt kunskaper om segmentering i ImageReady.

2. Startsidan i Photoshop

Det nya sättet att göra snygga startsidor på innebär att man först jobbar med en skiss i något bra bildbehandlingsprogram. Photoshop, ImageReady, Illustrator, Freehand, Fireworks och Paintshop Pro är några tänkbara kandidater.

Fördelen med att använda ett program från Adobe är givetvis att man enkelt kan föra över bilden till ImageReady. Men man kan också arbeta med GIF- eller JPEG-filer, om man skulle vilja. Arbetsgången är dock ungefär densamma i alla program.

Jag börjar med att skapa ett nytt dokument i Photoshop. Eftersom min startsida skall kunna visas i skärmupplösningen 800 gånger 600 pixlar, väljer jag att göra en ny bild med detta format. Detta betyder i sin tur att man måste använda en något större skärmupplösning på sin egen skärm, annars får man inte plats med alla paletter och liknande. 1.024x768 är alltså ett minimum.

Var och en får hitta en layout som fungerar. Jag gjorde några enkla skisser på papper först, men hade även alternativ i Photoshop. De fick mogna fram under några dagar och sedan valde jag ut den jag tyckte fungerade bäst.

Jag har gjort en mycket enkel skiss, som du kan titta på för att se hur det kan se ut:

3. Segmenteringen i ImageReady

När Photoshop-bilden är klar, lyfter man in den i ImageReady. Här segmenterar man bilden och bestämmer vad som skall göras till bilder och vad som skall bli tomma tabellceller.

Jag har gjort en mycket enkel skiss, som du kan titta på för att se hur segmenteringen kan se ut:

Man kan segmentera på många olika sätt. Jag har valt att göra det enkelt för mig och skapa ett fåtal segment. Självklart är detta också bara en skiss som visar hur man arbetar med en bild.

När alla segment är på plats är det dags att spara alltsammans som optimerade GIF-bilder och en Html-fil.

Om man vill arbeta i frames föreslår jag att man skapar koden för detta redan här. Man delar då in bilden i de segment man vill ha i en frame och exporterar den. Därefter åstadkommer man innehållet i nästa frame och exporterar det som ett separat dokument, osv.

4. Gör klart sidan i GoLive

Man öppnar Html-filen som ImageReady har skapat. På så vis får man med bilderna och andra saker man lagt in. Det som återstår nu är att ställa in text- och bildjusteringar, lägga in en stilmall, titel och andra HEAD-element, osv.

Om man upptäcker att man har valt en felaktig segmentering är det enklast att gå tillbaka till originalfilen och redigera den i ImageReady. Arbeta därför bara med kopior av bilderna och de olika dokumenten!

5. Tracing image-funktionen

I inledningen berättade jag om det "gamla" sättet att göra snygga startsidor på. Jag nämnde också att Adobe lagt in några specialfunktioner för att skapa nya arbetssätt. Tracing image är ett exempel på detta.

Tracing image skulle kunna översättas med "skissteckning" eller "kalkering". Man lägger helt enkelt in en bild i bakgrunden på den sida man arbetar och använder sedan denna för att skapa tabeller och placera rubriker och liknande.

Man gör alltså enklast en skiss av den tänkta startsidan i något bra ritprogram och sparar den i t.ex GIF- eller JPEG-format. Filformatet är dock mindre viktigt, eftersom GoLive klarar av de flesta. Dock kommer man inte att kunna se olika lager eller liknande i bilden.

Det som syns i koden är att GoLive i BODY lägger till attributet tracinsrc, för den fil man valt att skissa på, samt tracingopacity för graden av opacitet.

För att lägga in en sådan här bild tar man enklast fram rätt palett. Gå in under Window och välj Tracing. Bilden visar hur den ser ut.

Bocka för rutan där det står Source och bläddra fram den bild du vill använda som skissunderlag.

När filen kommer fram som en bakgrundsbild i dokumentet, går det att lägga in olika objekt över den och anpassa dem efter objekten i bilden. Bilden här nedanför visar ett sådant påbörjat arbete.

Det går att positionera bakgrundsbilden med positiva eller negativa värden. Vill du göra dokumentfönstret lika stort som din bild, klickar du enklast i rutan längst nere till höger och väljer Tracing Image.

Tips!
Du kan med fördel använda tabellverktyget när du arbetar med tracing image. Jag berättar mer om detta på nästa sida >

Man kan även positionera skissbilden för fri hand. Använd handverktyget i Tracing-paletten. Skulle du göra fel klickar du bara på den svarta pilen längst uppe till höger i paletten och väljer Reset Position.

Det går också att omvandla bakgrundsbilden till riktiga bilder. Aktivera bara beskärningsverktyget /Cut Out Tool) i paletten. Markera det område du vill använda och tryck på knappen "Klipp ut" (Cut out). Du hamnar då i Spara för webben-menyn och kan optimera och spara som vanligt.

Tips!
Under knappen output Settings i menyn Spara för webben, som du hittar under knapparna för OK och Cancel, längst uppe till höger, får du fram olika inställningar av Html-koden för bilden.