Preview

Create a Vibrant Digital Collage Mixing Buildings and Vector Shapes on Paper

Jun 27th in Designing by Caio Call

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.

Author: Caio Call

Brazilian Web Designer from Socorro, São Paulo. Working as a freelancer since 2004.

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.

Final Click

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!


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. Sean June 27th

    Very nice tutorial, great work.


  2. Rick June 27th

    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


  3. Manuel June 27th

    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.


  4. MONSTER June 27th

    Intresting.


  5. lawton chiles June 27th

    Nice one fellas. Kind of hard to read with all that splatter though. Great first impression!


  6. Randy June 27th

    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.


  7. Andrei Constantin June 27th

    no cutting age technique, but q good tutorial for beginners.


  8. Jeff June 27th

    i’m not liking this tutorial


  9. Nate June 27th

    Very cool tutorial. Thanks for sharing.


  10. Jamesr June 27th

    Not sure why this is a vector tut, belongs on Photoshop tut site. But very beginner level even for Photoshop.


  11. MD June 27th

    Yeah! interesting :)


  12. Tim June 27th

    Nice but agree with Rick.


  13. Jim June 27th

    Fireworks? Really?


  14. Gadgets Designer June 27th

    Nice work. Can be done in Photoshop too. I can see this image on a poster for a large arts exhibition


  15. Jonathan June 27th

    Nice effect. I like to composition too. :)


  16. alifaan June 27th

    Dj Caio Call my favorite designing, thanks for this nice tutorial.


  17. K3v June 27th

    Interesting tutorial as I’m not that familiar with Fireworks :)


  18. Qvectors June 27th

    don’t use fireworks.. half of it isn’t vector :D
    good work anyway, I’m sure there are many fireworks users who appreciate more.


  19. Danny June 27th

    I like this collage, it’s very sleek :P


  20. Johnoson June 27th

    This one should be posted at psdtuts, not really a vector.


  21. Jad Graphics June 27th

    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.


  22. Lee June 27th

    Nice! I always love those splatter effects.


  23. Ovais June 27th

    Nice tutorial…thanks for sharing


  24. Teejay June 28th

    not so cool for me..


  25. Dan June 28th

    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.


  26. Shane June 28th

    hey there - thanks for posting.


  27. John Farell June 29th

    Awesome,
    It reminds me that website :
    http://www.jaysalvat.com

    Same kind of ideas.


  28. D. Carreira June 30th

    Nice! Thanks for sharing! ;)

    David Carreira


  29. Braden Keith June 30th

    Nice, nice. I’m doing this one and putting it on my website.


  30. Braden Keith June 30th

    BTW I like the colors


  31. Matt Radel July 2nd

    Nice. Fireworks rocks!


  32. Sabino July 8th

    Awesome!


  33. jbcarey July 15th

    thanks for helping me with the first steps in fireworks.


  34. NatalieMac July 16th

    Nice tutorial. Well-written, easy to follow, and great final result.


  35. Nelly August 29th

    Your tutorial is wow!


  36. Ariel Jakobovits September 18th

    Fun tutorial, thank you.


  37. NN October 4th

    very nice! i like this tutorial, thank million.


  38. amber December 27th

    Yays :)
    This Tutorial is just great!
    Thank you


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name January 6th

Arrow