In this resurrection post for the Rapid Fire tutorial series, we make use of Adobe® Fireworks®’s Grid Fill Texture to apply a dot matrix effect to any vector element.
Begin with a vector or text element of your choice. For this tutorial, let’s download a world map vector EPS by Studio 7 Designs on Vecteezy and import it onto the canvas (Ctrl+R).
Be sure to uncheck the options under the Render as images section in the Vector File Options dialog (see Figure 1a), to make sure that the EPS is imported as a vector element, and not a bitmap.
Figure 1a. EPS import options.
The map vector we’re using is already filled black, but if your own vector element isn’t yet, set its fill color to a solid #000000.
(If you’re working with a text element, you can skip this step.) Ungroup the imported map vector (Ctrl+Shift+G) and join the paths together (Ctrl+Shift+J) to create one compound path of the whole map (see Figure 1b).
Figure 1b. Map vector on canvas.
With the map vector still selected, change the Fill Edge setting to Hard in the Properties Panel (see Figure 2).
Figure 2. Map vector with hard fill edge.
Change the Fill Texture to Grid 4: 100%, also in the Properties Panel (see Figure 3). Leave the Transparent option unchecked.
Figure 3. Map vector with grid fill texture.
We want the dots to be black, and the rest of the fill to be white (you’ll see why in the step after this), so we apply an Invert Live Filter to the map (see Figure 4).
Figure 4. Map vector with inverted texture color.
Next, apply a Convert to Alpha Live Filter to the map (see Figure 5). This will keep the now-black dots opaque, while making the white part transparent. From this point on, you can apply more elements and filters to customize your map vector. The next few steps provide some examples of what you can do.
Figure 5. Basic dot matrix effect.
Use the Rectangle Tool 
to create a background for our map. Send the rectangle to the back (Ctrl+Shift+↓) and give it an aqua-like gradient (see Figure 6).
Figure 6. Aqua background.
Select the map and set its Layer Blend Mode to Luminosity. Apply a Color Fill Live Filter (Blend mode: Normal; Color: #FFFFFF; Opacity: 100%) and a Drop Shadow Live Filter (Distance: 2; Color: #000000; Opacity: 100%; Softness: 0; Angle: 315) (see Figure 7).
Figure 7. Map vector recolored and shadowed.
And there you have it: a map vector with a dot matrix effect! If you want a bit of variation, go back to your map vector and try out a couple of other fill textures: Line-Horiz 4 (see Figure 8) and Line-Vert 2 (see Figure 9).
Figure 8. Map vector with horizontal line fill texture.
Figure 8. Map vector with vertical line fill texture.
Need a quick sample to study? Download the source PNG (tutorial11.zip, 414KB, Adobe® Fireworks® CS3) for this tutorial.
a meaningful articla ans plenty of knowledge
thanks.
I really enjoyed following your tutorials.
little by little, I am learning using fireworks.
Nice and simple tutorial, but can you tell me what steps should I use if I want to make similar in Photoshop, never used fireworks neither do I have one, so it’s a bit hard for me, even tough both are quite similar.
I’m not sure if there is an equivalent in Photoshop for the important steps, mainly the hard fill edge and the fill texture. If there are, you should be able to replicate this effect on Photoshop.
Nice effect
Hi, Thanks for the tutorial but there are some things missed out that makes this impossible for newbies. Where can I find the edge and filter selections on cs4? too much is assumed.
The Edge and Filter selections can both be found in the Properties panel (while the vector is still selected). Not much has changed in that panel since Fireworks 8 (except maybe for the unit selection for rounded rectangles), so it should apply down to that version, as well. I did tweak the text leading to Figure 3 to be explicit about that (like the text in Figure 2 already is). Thanks for pointing that out.
What an awesome tutorial. I’ve learned something new today. :)