1. Inledning

Segmentering innebär att man delar in en bild i olika segment eller skivor (slices). Dessa delar går sedan att använda till olika saker:

• En stor bild kan delas upp i mindre delar för att laddas snabbare
• En bild kan segmenteras för att skapa klickbara områden och sedan importeras i GoLive för att skapa klickbara områden, t.ex bildkartor
• Man kan använda olika segment för att skapa rollover-effekter
• Olika segment av en bild går att optimera utifrån olika inställningar

På den här sidan tänker jag visa grunderna i hur man skapar segmenterade bilder. På de eterföljande sidorna får du lära dig mer om den praktiska nyttan av segmentering. Du kan också läsa mer om hur sådana bilder anpassas, t.ex på sidorna om GoLive >

2. Segmentverktygen

Som jag nämnde i introduktionen, finns det några verktyg i ImageReady som inte finns i Photoshop. Du ser dem i verktygspaletten här till höger.

För att skapa ett segment aktiverar man först verktyget Segmentera. Det ser ut som en kniv och är i stort sett samma som i liknande program, t.ex Fireworks. Sedan drar man en ram runt det område man vill segmentera.

Tips!
Vill man att segmentet skall vara kvadratiskt håller man nere Shift-tangenten samtidigt. Man kan göra andra fiffiga saker med de andra tangenterna. Pröva dig fram!

Jag har använt filen familjesidan.psd, som du hittar under följande sökadress: programkunskap/imageready/bilder/ eller under följande länkar: familjesidan.psd, för filen i Photoshop-format, eller familjesidan.gif för motsvarande fil i GIF-format. (Teckensnitten skiljer sig en aning åt.)

När man skapat ett segment fyller programmet ut resten av bilden med utfyllnadssegment, s.k autosegment. Detta är för att varje segment senare kommer att utgöra innehållet i en tabellcell och Html-koden måste därför bli korrekt.

Bilden visar hur bilden fått flera olika segment. Det jag gjort själv kallas för användarsegment. Det har fått nummer 3, enligt ImageReadys numreringssystem, med start längst upp till vänster. Med hjälp av detta kan man alltid utläsa hur många segment bilden innehåller.

Alla segment får en viss färg, där autosegmenten är ljusare i färgen, icke-aktiverade användarsegment något mörkare och aktiverade dito mörkast.

Varje segment har också symboler för om segmentet skall bli en bild eller inte. Om man väljer alternativet Ingen bild i segmentpaletten, skapar programmet ingen GIF-bild av det, utan endast en tom tabellcell. Denna egenskap skall vi titta lite närmare på en kommande sida.

Det finns även en länksymbol, om segmentet delar egenskaper med andra segment. Det kan t.ex vara samma inställningar för optimering.

Segmentpaletten (se bilden nedan) visar egenskaperna för varje markerat segment. Bilden visar hur paletten ser ut när jag markerat mitt första segment. Här har jag även skrivit in namnet på segmentet (familjesidan_start), adressen dit man skall komma när man klickar på det, samt en alternativtext, om bilden inte laddas ordentligt.

Eftersom programmet fyller i alla andra uppgifter, framförallt alla sökvägar till bildfiler och värden för bredd och höjd, sparar man mycket tid. Dock har programmet en egenskap, nämligen att ange absoluta sökvägar till filerna. Detta måste man ha lite koll på, eftersom det är lätt att det blir fel.

På Internet kan man ju inte ha en sökväg till en bild på C:\, alltså hårddisken på Windows-datorer. Se alltså upp med sökvägarna och kontrollera alla sidor noggrant innan ni publicerar dem!

I menyn som heter Segment (längst upp på skärmen) hittar du olika verktyg för att ta bort, duplicera, ordna och liknande. Ta dig en titt på dem och försök förstå vad de innebär!

Det mesta är självförklarande och det man inte direkt förstår hittar man gott om uppgifter om i hjälpfilerna.

Länka segment och Bryt alla länkar gör det möjligt att koppla samman respektive bryta loss ett segment, för att skapa en individuell optimering av en bild.

Genom att markera ett autosegment och välja alternativet Höj upp till användarsegment kan man skapa just sådana. Ordna och Justera tillämpar olika regler på markerade segment. Man kan även skapa överlappande användarsegment om man vill.

Om två eller flera segment överlappar varandra kommer det översta att utgöras av en enda bild, medan alla underliggande segment, kommer att delas upp utifrån hur det övre segmentet ser ut.

Man kan alltid titta på hur segmenten kommer att omvandlas till bilder i tabellceller, genom att välja Arkiv - Förhandsvisa i... och lämplig webbläsare. Först ser man den uppdelade bilden och under den Html-koden.

Känner man sig nöjd väljer man att spara alltihop. Arkiv - Spara optimerad som... är valet, eftersom man vill att programmet skall optimera alla bildfiler. När man har valt var alla filer skall placeras på datorn, skapas dels en mapp med alla bilder och dels en Html-fil.

Tänk dock på att inte använda för många segment, om det går att undvika. Annars blir det så förfärligt många filer, som bilden här bredvid visar.

3. En enkel bildkarta

Eftersom varje segment exporteras som en bild och varje bild placeras i en tabellcell, går det ganska enkelt att skapa enkla bildkartor. Det är visserligen inga "riktiga" bildkartor, men funktionen kan ändå vara användbar.

Man kan också spara bilden (utan optimering, via Spara som...) med alla segment intakta. Sedan kan man importera den i t.ex GoLive och skapa en "äkta" bildkarta. Det är dock inget vi skall göra här.

Först och främst segmenterar jag resten av bilden jag arbetade med i förra avsnittet. Alla segment bör ligga kant i kant för att undvika autosegmentering.

Varje segment får en URL och en alternativtext. Man kan också skriva in var länken skall öppnas, om man t.ex använder frames.

För att vara säker på att jag inte fått med några autosegment, kontrollerade jag numreringen ordentligt. Hade det funnits oönskade segment, hade siffrorna inte stämt. Då hade jag fått ta tag i segmenten och anpassat dem, så att de hamnade kant i kant.

När jag var klar sparade jag på vanligt sätt, via Spara optimerad som... och placerade alltihop på ett bra ställe.

Man kan alltid gå in och göra ändringar och tillägg av Html-koden i något lämpligt program!