Download Source Files
- Source files for this tutorial are available to Premium members.
Get a Premium Membership
In this tutorial, you’ll learn how to use Fireworks CS3 and Illustrator CS3 together. You’ll create some illustrative vector elements to add to the final composition. You’ll also mix in photos and light effects. Learn how to use a cool paper background and tips to improve your workflow.
Final Image Preview
First, let’s take a look at the image we’ll be creating. The source file for this tutorial is not currently available, though we are planning on releasing this in the future.
Step 1
Open Fireworks and create a new file 1400px by 1000px, or use the dimensions you prefer. Make a square the size of the file. Then select it, and change the color mode to Radial. Modify the color scheme, as shown in the image below. Make the center of the square white. Then set Overlay to 50%.
Step 2
OK, now we’ll use one paper texture image from sxc.hu. Get the image here. Import the image into Fireworks by going to File > Import. Then resize the image with the Scale Tool (Q). Then select it and go to Filters > Adjust Color > Hue/Saturation. Then modify the values, as shown in the image below.
Step 3
Next go to Filters > Adjust Color > Brightness/Contrast. Modify the values, as shown in the image below. Then select the image, and set it to Overlay. Copy and Place tree times to build up the texture. All right, background done!
Step 4
Next we’ll use another image from sxc.hu. Get the image here. Now go to File > Import.
Select the image you’ve imported and resize it with the Scale Tool (Q). Now crop the image using the Polygon Lasso Tool (L). Make the marquee selection all over the parts you want to use, and delete the rest using Anti-Alias edge mode.
Step 5
OK, now you have the images without backgrounds. Select them and go to Filters > Adjust Color > Hue/Saturation, and input the settings below. Then go to Filters > Adjust Color > Brightness/Contrast, and again input the values as shown in the image below.
Step 6
Let’s use another image from sxc.hu. Get the image here. Now go to File > Import. Resize the image as you prefer using the Scale Tool (Q). Tip: Be open to using different images. In this tutorial, the most important thing is to learn how to use layer effects to make awesome creations.
Step 7
This tip will be very useful in your next creations. Select the image you’ve imported. Then change the Layer Mode to Multiply. The Multiply Layer Mode hides all the white color areas making the white color transparent. Very useful! Now it’s best to resize the images you’ve made using the Scale Tool (Q). Also, compose the images, as shown below.
Step 8
Duplicate and resize the images you have. Be open to create new things and combinations. One tip is to use the Polygon Lasso Tool (L) to cut out some areas, as shown below.
Step 9
Get another image from sxc.hu. The image is located here. Then go to File > Import. Resize the image as you prefer using the Scale Tool (Q). Then apply the image to this composition. Be careful, as this image does have one unnecessary line. So, use the Polygon Lasso Tool (L) to remove this part.
Step 10
Select the image you’ve imported, and change its Layer Mode to Multiply. Then place the image layers, as shown in the image below.
Step 11
Copy and resize this image to make another combination. Then change the color using the effect shown in the image below. Do this by going to Filters > Adjust Color > Hue/Saturation.
Step 12
Now open Illustrator CS3. I’ve created a pack of vectors for this tutorial. Get this pack here. Now select the vector you’ll import to Fireworks.
Tip: In Fireworks some vectors are big when you import from Illustrator, so shrink the size before you import.
Step 13
Importing is simple. First, Copy (Ctrl+C) the vector you want in Illustrator. Then open the Fireworks file again, and then Paste (Ctrl+V) the artwork. Select the vector and resize to your preference using the Scale Tool (Q). Now repeat this steps with all the vector artwork you want to use from Illustrator. Resize and combine based on your creativity. Take a look at the image below to see where I’ve placed the vectors.
Step 13
Now for the final touch! It’s a simple effect. I like to use it to add some light effects. Create a new white circle. Then go to Filters > Blur > Gaussian Blur. Input the settings, as shown below.
Step 14
Now for the big secret! Following is how the magic happens. Select the circle, and put it in Overlay Layer Mode. Then put the circle inside the area you want to clear and make a light effect.
Tip: Use opacity and different levels of blur effects. For the areas you want lighter, copy and paste multiple times in the same place.
Conclusion
Always use your imagination, and use effects carefully to bring your ideas to life. When you know more about the program you are using your limitations open up! Hope you like it! More tutorials coming soon, so stay tuned!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
The Post Office - More
Vector Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Vectortuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Very nice tutorial, great work.
Nice image, just out of interest what was the point in introducing Illustrator into this tut? It could all of been done in FW just as easy as using 2 programs.
Rick
Awesome tutorial. I have been meaning to get into fireworks more often and it seems like it is an awesome tool for web designers, especially when it comes to .pngs.
Intresting.
Nice one fellas. Kind of hard to read with all that splatter though. Great first impression!
Forgive me, while the result is nice and cool looking… I fail to see how this is Vector. I might be fuzzy on my definitions, but I thought for something to be considered vector art, it has to able tobe blown up to any size (or shrank) without a loss of quality because it uses mathematical statements.
Am I wrong on that?
The final product here is a raster image.
no cutting age technique, but q good tutorial for beginners.
i’m not liking this tutorial
Very cool tutorial. Thanks for sharing.
Not sure why this is a vector tut, belongs on Photoshop tut site. But very beginner level even for Photoshop.
Yeah! interesting
Nice but agree with Rick.
Fireworks? Really?
Nice work. Can be done in Photoshop too. I can see this image on a poster for a large arts exhibition
Nice effect. I like to composition too.
Dj Caio Call my favorite designing, thanks for this nice tutorial.
Interesting tutorial as I’m not that familiar with Fireworks
don’t use fireworks.. half of it isn’t vector
good work anyway, I’m sure there are many fireworks users who appreciate more.
I like this collage, it’s very sleek
This one should be posted at psdtuts, not really a vector.
Hey, great tutorial. Very easy to follow.
By the way, thanks to VECTOR TUTS, I am starting my own website called PSD FREE
In this site, I will be offering free AI files, both originally created by me, and also, files based on the Vector tutorials I learned here from VECTOR TUTS.
Thanks VECTOR Tuts and Collis, and all the contributors to this site. By the way, EDEN is the next google.
Nice! I always love those splatter effects.
Nice tutorial…thanks for sharing
not so cool for me..
Yeah, to agree with some of the others… Just not feeling it, tutorial wise. Composition is good, don’t see the purpose of fireworks or illustrator other than to actually include some vectors in the tutorial. I agree this would have been a good crossover tutorial for PSDTUTS. Thats just me though.
hey there – thanks for posting.
Awesome,
It reminds me that website :
http://www.jaysalvat.com
Same kind of ideas.
Nice! Thanks for sharing!
David Carreira
Nice, nice. I’m doing this one and putting it on my website.
BTW I like the colors
Nice. Fireworks rocks!
Awesome!
thanks for helping me with the first steps in fireworks.
Nice tutorial. Well-written, easy to follow, and great final result.
Your tutorial is wow!
Fun tutorial, thank you.
very nice! i like this tutorial, thank million.
Yays
This Tutorial is just great!
Thank you
Dosto,
It’s really coool ! keep it up.
There`s too many imports on this stuff.
Better you show more substance next time!
impressive, ha ha
I’m not familiar with Fireworks, I liked the final effect with blur and overlay to make the light effect.
Thanks
woww, thx so much for good tuts.