06. Skapa bildsegment

Transkript

1 1/8 06. Skapa bildsegment Två mycket goda vänner, hunden Toya och katten Lisa. För att kunna länka från bilden till Toyas och Lisas egna hemsidor väljer vi att dela in bilden i segment. Till varje segment kopplar vi en rollover-effekt och en länk till respektive webbsida. Läs mer om segment i kapitlet Bilder för Internet och multimedia. Steg 1. Starta Paint Shop Pro Öppna bilden Toya_Lisa.JPG och spara den i PSPs eget format som Toya_Lisa.pspimage. Kom ihåg att välja rätt filformat i dialogrutan Save As. OBS! Din bild får inte innehålla lager när du gör om den till webbgrafik. 2. Välj menyn File Export Image slicer. 3. Förstora fönstret Image Slicer så att hela bilden ryms. Alterativt kan du zoom ut bilden med hjälp av förminskningsglaset.

2 2/8 Steg 2. Rita segmenten Välj skalpellen i fältet Tools. Rita två horizontella segmentlinjer, en precis ovanför kattens öron och en nedanför texten Norske. Rita fyra vertikala linjer mellan de två horizontella linjerna så att djurens ansikten blir inramade. Steg 3. Justera segmentens placering Välj pekpilen i fältet Tools och dra i en segmentlinje om du behöver justera linjens placering Steg 4. Skriv in länkinfo för segmenten Välj pekpilen i fältet Tools och markera hundens segment. Ett markerat segment får en grön kontur. Skriv URL och ALT-text i fältet Cell Properties. Välj om webbsidan du länkar till skall öppnas i ett nytt fönster.

3 3/8 Steg 5. Lägg till länkinfo för katten Markera kattens segment och lägg till information om URL och ALT-text (text som bl.a. läsas upp av talsyntes för blinda). Bestäm om webbsidan du länkar till skall öppnas i ett eget fönster (_blank). Steg 6. Spara dina inställningar Klicka på knappen Save Settings för att spara dina segment under arbetets gång. Klicka på Load Settings för att återuppta arbetet med segment från ett tidigare arbetspass.

4 4/8 Steg 7. Optimera segmenten för webben Markera ett segment med pekverktyget från fältet Tools. Bestäm om segmentet skall sparas i GIF- eller JPEG-format. Klicka på knappen Opitmize Cell. Dra ut fönstret GIF Optimizer eller fönstret JPEG Optimizer tills hela segmentet ryms. JPEG Optimizer Fliken Quality: Välj grad av komprimering. Studera resultatet i fönstret till höger och jämför med originalet till vänster. Mindre viktiga delar av bilden kan komprimeras hårdare. Nedanför segmentet visas segmentets storlek i kilobytes. Fliken Format: Välj standard eller progressiv nerladdning. Progressiv nerladdning innebär att bilden (segmentet) växer fram gradvis. Fliken Download Times: Fliken visar några vanligt förekommande uppkopplingar och ungefärliga nerladdningstider optimerade segmentet. Upprepa proceduren för övriga segment.

5 5/8 Steg 8. Förhandsgranska webbsida Klicka på knappen med ögat för att förhandsgranska hela bilden på en webbsida. I exemplet nedan är hundens segment sparat i JPEG-format. Resten av bilden är i GIF-format (bör ändras till JPEG). Kattens ALT-text visas vid muspekaren. Steg 9. Spara som webbsida Klicka på knappen Save i fönstret GIF Optimizer eller JPEG Optimizer för att spara dina segment som bilder i en tabell på en webbsida i HTML-format. Välj filformatet Hypertext Markup Language. Forts...

6 6/8 Forts... När du har sparat webbsidan och bilderna visas alla segment som separata delbilder i utforskaren. Steg 9. Skapa rollover-effekter För att skapa rollover-effekter måste du skapa alternativa bilder som kan laddas när användaren för muspekaren över ett segment. Öppna i Paint Shop Pro den sparade delbild som motsvarar det segment du vill ge en rollover-effekt. OBS! Spara delbilden under ett annat filnamn så du inte av misstag ändrar i original-segmentet. I exemplet till vänster har jag kopierat bakgrundslagret, ändrat blandningsläge till Screen och suddat runt kanten så att det övre lagret får en ojämn kant. Till sist har jag lagt på text.

7 7/8 Steg 10. Gör den nya delbilden till ett lager Om du använt lager när du skapat din rollover-bild måste du slå ihop lagren till ett innan du spara bilden för webben. Steg 11. Spara rollover-bilden för webben Välj menyn File Export JPEG Optimizer (alt. GIF Optimizer). Välj samma filformat som det ursprungliga segmentet. Bearbeta bilden på samma sätt som när du optimerade de olika segmenten. GIF Optimizer

8 8/8 Steg 12. Skapa rollover-effekten Öppna Image Slicer och ladda om nödvändig de inställningar du gjort tidigare. Markera det segment som skall ha en rollover-effekt. Klicka på knappen Rollover Creator. Välj i fältet Mouse over vilken bild som skall visas när användaren för muspekaren över segmentet. Välj i fältet Mouse out vilken bild som skall visas när muspekaren lämnar segmentet. Normalt bör detta vara det ursprungliga segmentet.