Vector Masking using Adobe Fireworks.

Wow fireworks make's vector masking a child's play, first of all I have to tell you what is vector mask "vector mask is a gradient mask which used to hide a portion of image with some solid color, this solid color have two transparency points in first point the opacity is 100 % and in second point the opacity level is on O% percent, the revealed area of the image is under 0% opacity”. Vector mask are usually used to merge more than two images in a single image.
Now we start this tutorial.

Step 1:

Select an image


Step 2:

Place a rectangle block using Rectangle Tool (or press U) behind the image, which is equal to the desired banner width.

Step 3:

Toggle image and rectangle block position, by using layer palette or Ctrl + keys

Step 4:

• Use Marquee tool to select area of the image and crop it, we used ruler to make sure that we select required height.
• Under properties panel we have all properties of a Marquee, which we can adjust as per our requirement.

After Cropping we have this result.

Step 5

Go to command select creative option then select Auto Vector mask.

After selecting Auto vector mask a panel open with following mask options

Select your desired mask option and press Apply button.
OK below image I have done few steps together but below image help you to find out what all I have done.
These two handles visible on image (we also pointed one of them a circle) are used to control mask position and opacity level.
Under the properties panel we have all vector mask options.
Vector mask layer is also highlighted in Layer Palette.

Step 6:

After final adjustment of Vector mask, we put some text on Banner.
Good Luck, I hope that you will learn Vector mask with this simple Tutorial. Please give your feedback to help me to make things better.




At the end of this tutorial i am thank full to Makeup Forever for their image contribution and Dafont.com for their fonts.

Making a Shinny and Glossy Button using Adobe Fireworks

Hi everybody, working in Adobe Fireworks is a joyful task, especially in case of web prototyping. Today we learn how to design a glossy and shiny button in Adobe Fireworks, so let’s start this simple tutorial. I explain this tutorial in steps.

Step 1: Creating a rectangular shape

1. Select the shape tool and draw a rectangle



Step 2: Selecting color and making edges round

1. Select a color from the color palette and make the rectangle edges round if it required



Step 3: Process for Intersection

1. Now, we’ll draw three shapes, as shown in image below, two of them are rectangle (clone of first shape) and a one is ellipse shape by using the same circle tool present in shape tool, (If we press shift key during using circle shape tool we find a perfect circle)



2. Then click on Modify > Combine Path > Intersect



3. After using intersection option the shape becomes as under image



Step 4: Adjusting Opacity

To produce a glossy and shiny effect we do following two steps
1. Change Color of intersected object to white
2. Change its opacity setting, which is present in properties panel
3. We decrease opacity up to 37



Step 5: Adding Drop Shadow

Adding shadow produces depth in our button. The procedure is simple:
1. The drop shadow settings are in properties panel
2. We used following settings to produce a shadow under the button. [See image below]



Step 6: Adding Text on Button

1. Write the text with the text tool, I highlighted text tool in tool bar, as shown in image.
2. Then we write the text and duplicate it.
3. Using color palette, we select color of the top text to white
4. To create shadow under the text, we change the below text to a dark color like grey and then move it slightly to down and left position with our keyboard arrow keys.
5. The text layers are visible in layer panel.
6. After that we group both the text layers by pressing Ctrl + G (for Win users) and Comd + G (for Mac users)



Step 7: Final Output

After making groups of the object, our nice glossy button is ready to use.