Ontwerp een muismat in Fireworks

Door Erikotten  |  Fireworks, Tutorial  |  Geen reacties

In deze tutorial leg ik uit hoe je in Fireworks een ontwerp voor een muismat kunt maken. In deze tutorial worden verschillende onderdelen van het programma Fireworks behandeld. Ik heb de tutorial gemaakt in Fireworks versie 3, hetzelfde kan uiteraard ook gemaakt worden jouw versie, maar waarschijnlijk zitten sommige knoppen wel op een andere plek.

Het eindresultaat:

Beginnen

Ok ‘Let`s get started’ allereerst gaan we ons ‘werkveld’ maken, dit doen we door FILE > NEW te kiezen, een nieuw venster komt te voorschijn. Vul bij Width en Heigth allebei 500 pixels in, en maak de achtergrond kleur (canvas color) wit (white) de rest van de opties kunnen zo blijven staan.

We hebben nu een leeg wit vlak voor ons op het scherm, laten we eerst aangeven waar we het groene vlak willen hebben. Kies met de muis uit de toolbox het vierkante vak, selecteer nu met de muis van boven aan het witte vak tot ongeveer 65% naar onderen van het witte vak. Door de optie VIEW > RULERS, in de menubalk kun je ‘linealen’ gebruiken. Selecteer dan het vierkant tot ongeveer 350 pixels.

Geef het vak een groene kleur, dit doe je door het vak te selecteren, door er een keer op te klikken, er verschijnt nu een blauwe lijn omheen.

Ga nu met je muis naar de toolbox, daar zie je onderaan, de mogelijkheid om kleuren te geven, de bovenste kleurenkiezer zijn voor lijnen, en de onderste voor vullingen.

Klik op het pijltje van de onderste kleurkiezer. Kies een groene kleur.

Onder het groene vak komt een donkergroene lijn. Kies de lijntool uit de toolbox (naast het pennetje) Selecteer van links naar rechts een lange lijn aan de onderkant van het groene vak, het hoeft nog niet precies tegen de groene kant aan te staan, je kunt de lijn makkelijk recht maken, door gelijktijdig de SHIFT knop in te drukken.

Als de lijn goed is laat je je muisknop los, je kunt nu de lijn precies tegen het groene vak aan plaatsen, door of met de muis de lijn te bewegen of het de pijltjes knoppen van je toetsenbord. Je moet wel eerst de lijn selecteren, dit doe je door er een keer op te klikken.

De afbeelding

Nu gaan we de muis erin plakken. Ik heb een muis genomen van de website www.logitec.com, maar het kan ook een andere muis of afbeelding zijn. Open de afbeelding eerst in een nieuw venster, dit kan heel gemakkelijk door FILE > OPEN te kiezen. Zorg dat je bij de afbeelding eerst alles er om heen weghaalt met bijv. de lasso, over dit gedeelte ga ik verder geen uitleg geven, omdat dit in meerdere editors kan, bijv. ook in Photoshop, Fireworks kan PSD bestanden met lagen en al importeren!

Wanneer de afbeelding van de muis goed is kun je hem naar het werkveld met het groene vak slepen, of je kopieert de afbeelding via EDIT > COPY en plakt hem in het werkveld met het groene vak EDIT > PAST (ctrl+c/ctrl+v).

Selecteer de muis. En plaats de muis ongeveer op het midden van de lijn, dus dat de bovenkant het groene vak staat en de onderkant in het witte vak. Selecteer nu via het window:

OBJECT (als je hem niet ziet kijk dan in de menubalk onder WINDOW > OBJECT (CTR+I) En selecteer uit het dropdown menu MULTIPLY

Tekst als decoratie

Maak nu een tekstvak, door in de toolbox op het A-icoon te klikken, typ in het nieuwe scherm: ? ; En selecteer als lettertype TIMES NEW ROMAN, in lettergrote: 300 en maak de tekst ook nog even VET. Zet de 100% bij LEADING op 55% (zie ook de afbeelding hieronder)

Selecteer als kleur dezelfde groene kleur als het groene vak, ook weer via de kleurenkiezer. Selecteer de letters en draai de letters via: MODIFY > TRANSFORM > ROTATE 90 CW en daarna nog eens: MODIFY > TRANSFORM > FLIP VERTICAL

Selecteer de tekst en zet in het OBJECT window, de transparantie op 30% Klik in dat zelfde window, nu op het tabblad: EFFECT, en selecteer uit het dropdown menu SHADOW and GLOW klik op DROP SHADOW er verschijnt een klein nieuw menu-tje.

Geef daarin deze specificaties op: kleur ZWART, en grote 7, normaal gesproken staat dit direct al goed, zet de transparantie op 65% en de hoek op 315.

Move deze tekst naar achteren via MODIFY > ARANGE > MOVE > SEND TO BACK. Doe dit ook nog een keer met het groene vak. Zet het tekstvak daarna op de juiste plaats.

Tekstvakken

Maak een nieuw tekst vak, ook dit keer is het lettertype TIMES NEW ROMAN, en maak je van de lettergrote 12pt., maak de tekst VET en ITALIC (cursief) Typ de tekst: ‘what can you do with your mouse?’ erin, en klik op OK, doe precies hetzelfde als hierboven nogmaals, maar dan met de tekst  ‘move, rotate, scroll, click, doubleclick’

Zet deze twee teksten op de juiste plaats, dus tekstvak 1 onder de lijn, en het 2e vak erboven.

Nu komt het 3e tekstvak, ook ditmaal dezelfde specificaties als hierboven, alleen is de grootte van de tekst dit keer 9pt. De tekst is: ‘{muis v (m): 3 aan een

computer gekoppeld bedieningsapparaatje’ En zet dit tekstvak rechts onder de lijn. Door het tekstvak kleiner te maken krijg je de tekst netjes onder elkaar, je kunt de LEADING dan op 100% zetten, zodat de tekst niet door elkaar staat.

‘We maken weer een nieuw tekstvak, met deze specificaties: lettertype: TIMES NEW ROMAN, lettergrote 96pt. en de tekst VET en ITALIC (cursief) Typ de letter ‘M’ .Zet ook deze tekst op de juiste plaats.

Nu nog het allerlaatste tekstvak, deze is voor de pijl rechtsonder, je kunt zelf de pijl tekenen, maar een andere handige manier is het maken met het lettertype: WINGDINGS 3 dat bijna iedereen wel heeft. Specificaties: lettergrote 40pt en typ de letter: ‘l’.

Zet deze tekst in spiegelbeeld door voor MODIFY > TRANSFORM > FLIP HORIZONTAL in de menubalk te kiezen. En zet deze tekst ook op de juiste plaats.

Blokjes

Als laaste maken we de blokjes, doe dit door weer het vierkant uit de toolbox te kiezen, en maak een vierkant, dit gaat makkelijk door ondertussen ook de SHIFT knop ingedrukt te houden, kies zelf ongeveer de juiste maat van het vierkant.

Nu kun je deze blokjes meerdere malen kopieren en plakken (CTRL+C / CTRL+V) en zet deze blokjes op de juiste plaats. Selecteer alle blokjes en kies in het OBJECT window, voor een transparantie van: 15%

Tot slot

Nu kun je alles nog een beetje bij werken, of alles nog net even iets beter op de plek zetten. Als je de tutorial een beetje hebt kunnen volgen dan moet je ongeveer tot dit eindresultaat hebben kunnen komen: