Så gjordes loggan i Fireworks MX 2004

1. Inledning

På den här sidan kommer du att få följa ett arbetsflöde. Jag kommer att gå igenom hur jag gjorde logotypen för min krönika om Azorerna i Fireworks MX 2004. Sidan bygger vidare på de tidigare sidorna om Fireworks, som du hittade i innehållsförteckningen.

På nästa sida visar jag hur logotypen länkas och sätts samman i Dreamweaver. Läs mer >

Klicka på bilden för att se logotypen med länkar!

2. Skapa grundläggande bild

Uppgift 1
Jag ville göra en bild som var max 540 pixlar bred. Därför skapade jag ett nytt dokument om 550x500 pixlar. På det viset fick jag lite arbetsyta.

Tips!
När man startar Fireworks får man upp en meny med flera olika alternativ. Men man kan enklast skapa en ny sida via snabbkommandot Ctrl+N.

Uppgift 2
Jag skrev sedan in texten. På det viset fick jag ett hum om hur stor bilden kunde vara:

Obs!
När jag gjorde bilden arbetade jag på en Mac och använde då teckensnittet Apple Chancery.

Jag använde färgen "333333", eftersom jag tycker att svart ger för stark kontrast. Du ser i bilden hur jag gjorde inställningarna.

Texten kan antingen markeras med textverktyget eller genom att klicka på textrutan med pekverktyget. Båda markeringarna skiljer sig lite åt, men i båda fallen kan man ändra teckensnitt, m.m.

Uppgift 3
Nästa steg blev att placera texten på lagom avstånd från översta vänstra hörnet. Detta gjorde jag med pekverktyget.

Uppgift 4
Därefter skrev jag in texten med datumen. Jag använde samma teckensnitt, men storlekarna 16 respektive 35:

(Den svarta ramen har jag ännu inte gjort. Här har jag den bara för att avgränsa bilden.)

Tips!
För att kunna placera texterna på rätt avstånd och med rätt justering kan man ta fram de stödlinjer som finns inbyggda i programmet. Detta görs under menyn Visa - Stödraster (View - Grid).

Jag väljer dock ett annat alternativ, nämligen att placera en enda linje manuellt där jag vill att texten skall justeras i underkant.

Uppgift 5
Jag klickar på linjeverktyget bland vektorverktygen och ritar upp en lagom lång linje. Samtidigt håller jag Shift-tangenten nertryckt så att linjen blir helt rak.

Bilden visar hur jag lagt linjen. De båda textrutorna anpassade jag sedan individuellt genom att markera dem med pekaren och flytta med piltangenterna (som ger bäst precision).

Jag valde att göra linjen ljusgrå och 1 pixel tjock.

Tips!
Vill man flytta flera objekt samtidigt kan man markera dem genom att klicka på dem samtidigt som man håller nere Shift-tangenten.

Uppgift 6
Jag valde att behålla linjen, men flyttade den 10 pixlar nedanför texten. Detta går att göra genom att använda piltangenten (flyttar objektet 1 pixel åt gången), eller Shift+piltangenterna (flyttar 10 pixlar i taget).

3. Dekorationsbilderna

Uppgift 7
Nu var det dags att skapa de bilder som skulle bli dekorationen. jag använde bilder jag tyckte passade bra i färg.

Först öppnade jag den första bilden i naturlig storlek. Jag ändrade storleken via menyn Modifiera - Duk - Bildstorlek (Modify - Canvas - Image size).

Storleken prövade jag mig fram till. Jag tyckte att 50x33 pixlar var ganska ok. Genom att hänglåset låste proportionerna ställde höjden in sig automatiskt då jag ändrade bredden.

Uppgift 8
När bilden är ändrad skall den kopieras och klistras in på logotypen.

Kopieringen sker enklast via Ctrl+C, men man hittar också samma kommandon under menyn Redigera (Edit).

Kortkommandot för att klistra in är Ctrl+V.

Tips!
Längst upp i din arbetsyta hittar du flikar för de olika dokumenten.

Placera miniatyren i logotypen på lämpligt ställe med hjälp av pekverktyget och piltangenterna. Bilden ovan visar hur det såg ut då jag gjorde det.

Obs!
Originalbilden till miniatyren kan du stänga utan att spara, för att behålla den ursprungliga storleken på bilden.

Uppgift 9
Jag gjorde sedan likadant med de andra miniatyrerna tills dess att raden var tillräckligt lång.

4. Länktexter, ram och beskärning

Nu återstår några småsaker innan den grundläggande bilden är färdig:

Uppgift 10
Textraden som skall bli menyerna gjorde jag på så enkelt sätt som möjligt. Jag skrev alla texter i samma textruta och skiljde dem åt med ett par blanksteg.

Teckensnittet var Verdana och storleken 14 pixlar. Med pekverktyget placerade jag sedan hela textrutan så att den låg bra:

Uppgift 11
Jag gjorde också en ram runt ett lämpligt område. Ramen skapar en avgränsning, vilket ser trevligt ut. Ramen gjordes med rektangelverktyget, utan fyllning och med en lagom tjock och mörkgrå linjefärg.

Uppgift 12
Utanför linjen fanns sedan en del "skräp", som jag tog bort genom att använda beskärningsverktyget. Jag markerade ytan så att inga pixlar utanför ramen kom med. Sedan beskar jag bilden via Redigera - Beskär.

Uppgift 13
Jag sparade bilden på lämpligt ställe och med ett bra namn. Kolla gärna en extra gång så att alla detaljer ligger rätt. Kontrollera eventuella stavfel.

5. Skivverktyget

Det som stod näst på tur var att dela upp logotypen i flera mindre delar. Jag använde här skivverktyget (slice tool):

Uppgift 14
Jag ritar skivorna på samma sätt som när jag gör rektanglar. Jag har här valt att skapa tre rader med olika segment: ett för texten "Azorerna" och datumen, dels ett för miniatyrbilderna och dels ett för varje del av textraden.

Varje segment som skapas kommer så småningom att bli en egen bild, som går att länka. Det visar jag på nästa sida då jag hämtar in bilden i Dreamweaver.

Tips!
När man använder skivverktyget måste man också förstora upp bilden för att kontrollera att inga tomrum bildats mellan segmenten eller att de går om lott.

Här har en del av bilden inte täckts av något segment. Fireworks skapar då ett extra segment som täcker denna yta, vilket ger fler bilder och mer kod.

Här går två segment om lott, vilket Fireworks måste kompensera för.

Här har ett segment hamnat utanför bilden och kommer att beskäras av Fireworks.

Tips!
Varje segment har också en egenskapspalett. Om man inte vill att där skall finnas någon bild kan man välja att exportera en helt tom yta. I mitt exempel blir dock alla segment bilder. Länkarna skapar jag dessutom i Dreamweaver, som har bättre kontroller för det.

Uppgift 15
När alla segment ligger rätt så sparade jag bilden. Segmenten finns då kvar som en del av bilden. Man kan ta fram dem och dölja dem via kontrollerna under skivverktyget.

6. Exportera bilden

Det är nu dags att exportera bilden. Fireworks sparar då dels de olika segmenten som enskilda filer och skapar sedan också en Html-fil med den kod som krävs för att återskapa helhetsbilden.

Uppgift 16
Exporten sker via Fil - Exportera (File - Export):

I rutan för att spara väljer man plats, som vanligt. Man döper Html-filen till valfritt namn. Fireworks döper sedan själv de olika bilderna.

Mbehöver inte exportera någon Html-fil. Det bestämmer man här.

Ytterligare inställningar för den Html-fil som sparas hittar man här.

Man kan även påverka hur segmenten skall sparas. I kryssrutorna under siffrorna kan man också välja hur bilderna skall sparas. Jag ändrar ingenting här utan sparar.

Läs vidare om hur de exporterade filerna används i Dreamweaver på nästa sida!

Nästa sida >