Fireworks Quick Tips #1 - How to use QuickMaskListThumbs

Fireworks Quick Tips #1 - How to use QuickMask

January 14, 2009

One of the best functions we can use in Fireworks is Mask. It's a basic command that can make our life easiser when working with images or when we need to hide some part of an object. In this tutorial we will create a Polaroid photo using amazing and inspirational illustrations from Adhemas. We already talked about him, but if you don't know the work of this Brazilian artist yet, please check out his site after the tutorial!

But for now, let's take a look at how this command works.

STEP 1 - Open a new file

Open Fireworks and choose a 600x600 size for canvas.

Fireworks Quick Tips #1 - How to use Mask

STEP 2 - Creating the paper

Our first element will be a Rectangle with 400x500px and color #DDDDDD. After creating it apply some shadows and a texture like the image.

Fireworks Quick Tips #1 - How to use Mask

STEP 3 - Creating the canvas

Now you will create another rectangle. This will be the limit of our photo. So draw a white rectangle with 345x370px and place like the image. Apply some shadows to create depth in the paper.

Fireworks Quick Tips #1 - How to use Mask

STEP 4 - Choosing the image

As I said before, we choose work with Adhemas images (that is bringing a lot of value to the tutorial). Select the image you want and place inside the file. We will now use 2 techniques to make the mask. They both are very easy and will take us to the same result.

Fireworks Quick Tips #1 - How to use Mask

STEP 5A - Applying mask

In the first one, first select the image, place above the white rectangle, and Cut it (Ctrl+X or Command+X). Now select the white rectangle, and paste pressing Shift (Ctrl+Shift+V or Command+Shift+V). You will see the image inside the rectangle and at the same position that it was before.

Fireworks Quick Tips #1 - How to use Mask

STEP 5B - Applying mask

In this method, we will first place the image inside the file. After that, move the image layer above the white rectangle (just to see the rectangle to select it!). Now let's cut the rectangle (Ctrl+X or Command+X). With the rectangle in the clipboard, select the image, go to Modify > Mask > Paste as Mask. You will see that the rectangle made a mask in the image, the same way that we made it before.

Fireworks Quick Tips #1 - How to use Mask

STEP 6 - Playing with the mask

This step is mostly a Tip! If you look at your layers, note that the layer of the image has a mask. If you unlock this mask you can move the image and the mask separately. This way you could place your image with the exact focus you want.

Fireworks Quick Tips #1 - How to use Mask

FINAL RESULT

Now you can play with the mask. Use your imagination, explore backgrounds, textures and whatever else you want.

Fireworks Quick Tips #1 - How to use Mask



Fireworks Quick Tips #1 - How to use Mask

About the author

User picture

I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.

Sponsored Links:

More content from:

Help us to share this!

6 Comments

starlight8601/14/2009

nice..:) thx for sharing

JuliusBenedict01/14/2009

Thats really nice, I hope more Firework tutorials are released!

Mathieu01/15/2009

Thanks for sharing this! Let there be more Fireworks!

Dix-Huit01/15/2009

Hurrah for Fireworks!

I'm always on the look out for Fireworks tuts & tips. The web is swamped with Photoshop praise and not enough peeps seem to recognise the speed and convenience of Fireworks for prototyping and web graphics.

Bring it on.

shedders01/16/2009

yet another resource to abduct, thanks :)

stony02/11/2009

sooooooooooo nice really i love that :)

Post new comment

The content of this field is kept private and will not be shown publicly.

Icon Ads Wall

  • Openjobs - Oportunidades de Emprego para Profissionais de Talento
  • Zee - Irrezeestível Design Digital
  • Tradd.us - Contextual Translator
  • DesignFlavr, Inspirational Art and Design served daily
  • Signalnoise.com | The art of James White
  • Alberto Seveso - Illustrator
  • Description: Award Winning Portfolio and blog of Web Developer Anthony Woods

Do you want to advertise here?