Make your digital images more convincing and lifelike with just a handful of gradients and custom shadows. Once you’re done, your pictures will look like real photo prints, you’d swear they popped out of the screen.
Note 1: This is the first issue of Rapid Fire, a series of tutorials aimed at intermediate and advanced users of Macromedia Adobe® Fireworks®. I’ll be demonstrating some tips and tricks that take advantage of Macromedia Adobe® Fireworks®’ vector tools and Live Effects. No schedules are planned for subsequent releases, so I’ll just post my tutorials as I finish them.
Note 2: This tutorial was done in Macromedia Adobe® Fireworks® 8, and requires knowledge of gradient fills and Pen Tool usage.
Update 2006-03-10: Thanks to simonline and Greg for pointing out that the Average blend mode can be substituted with a decrease in opacity. Not only would this make the tutorial applicable to Macromedia® Fireworks® MX (and MX 2004), it also creates further flexibility in adjusting the darkness of the corner shadow afterwards. For those of you looking for an Adobe® Photoshop® version of this tutorial, Chris has “roughed up” an adaptation.
Update 2006-09-20: Thanks to Uriel, this tutorial is now available en español!
Update 2009-02-02: Blog Angel did a fantastic job adapting the tutorial for GIMP users. Thanks!
Setting Up The Photo
First, we create the base photograph. Use the Rectangle Tool 
to draw a rectangle with (more or less) the proportions of a standard 4R print, then fill it with a gradient going across the diagonal, from dirty white to pure white. This will serve as your base rectangle.
Follow it up with another rectangle, this time colored solid, slightly smaller than and centered on top of the base rectangle. This will serve as your image mask, and creates a nice “white border” around the image. Nobody likes fingerprints on their glossies, y’know.
Next, import your image (Ctrl+R) into the current document, and set it’s opacity to 30%. Doing this will make it easy for you to fit and align your image over the mask. Make sure that your image subject is properly cropped inside the mask, and that no part of the mask is “peeking” outside the image.
Tip: Before transforming an imported image, convert it first into a symbol (F8) to retain the original image information that you normally lose when resizing or rotating an image as is.
Once you’re satisfied with the adjustments, bring the image’s opacity back to 100% and cut it (Ctrl+X). Select your image mask and paste your image inside of it (Ctrl+Shift+V). Now you have a complete base photograph! Give yourself half-a-pat on the back.
Highlights & Lowlights
Here is where the realism starts to fill in. Select and copy your base rectangle (Ctrl+C) into the topmost layer. Change its gradient, going from black (100%) to black (0%), and set its opacity to 50%. Adjust the gradient so that it covers only the upper corner of the base photograph. Decrease the rectangle’s width and height by 2px each, and center it on the base rectangle; this gives the appearance of a highlighted edge contrasted against a gradient shadow.
Clone the rectangle you just made (Ctrl+Shift+D) and rotate the new copy 180° (Modify > Transform > Rotate 180°). Then, change its gradient, going from white (100%) to white (0%); this produces the effect of a gradient highlight and a shadowed edge.
Nothing Like A Good Shadow
Select all the objects on your canvas and to rotate them (Ctrl+Shift+T, Rotate) 12-15° clockwise. This will give your photograph a more natural and spontaneous placement. Also, this tops off the highlight effect with the earlier gradient fills, as it aligns their directions with our light source situated directly above.
And now for the final element: lets add our shadow. But instead of using the built-in Drop Shadow Live Effect, we make use of a more flexible technique.
Natural Shadow Mini-Tutorial
Start off by cloning your base rectangle and moving the copy to the bottommost layer (Ctrl+↓). Give it some shadow-like characteristics with a solid black fill, 60% opacity, and a Gaussian Blur Live Filter (Blur Radius: 4). Nudge it 10px down (Shift+↓) so our shadow coincides with the position of our light source.
Note: make sure to access the Gaussian Blur filter from the Properties Panel. If you use the menu for this filter (Filters > Blur > Gaussian Blur…), you’ll be warned that “This operation will convert vectors to bitmaps,” and you won’t be able to adjust the shape of your shadow afterwards, which we’ll be doing in the next couple of steps. Thanks for the tip, Richard!
Ungroup your “shadow rectangle” (Ctrl+Shift+G) to turn it into an editable path. Use the Pen Tool 
to add some Bézier points to it, one on each side. This will help remove the stiffness that digital images usually suffer from, and allow you to produce more natural-looking shadows.
Now, arrange the points of your shadow such that the Bézier points are lined up with the edges of your base rectangle. Pull each of the corner points down a little further to emphasize “lift” on the corners of the photograph.
Select everything on your canvas and group them together (Ctrl+G). Now your photograph is ready for use as a template for photos on your swanky blog or as part of an edgy digital collage! Life is great, isn’t it?
Finishing Touches
After you’ve set a backdrop for your photograph, you’ll need to make some minor adjustments to the opacity of your shadows and highlights. Also, if you change your mind about the position of your light source, you’ll have to make the direction of your gradients and the shape of your custom shadow conform to it. In my example, I gave the base rectangle a slightly rounded edge to make it look dented.
I hope you enjoyed reading my first tutorial as much as I did working on it. Drop me a note if you get to use it in one of your projects.
Need a quick sample to study? Download the source PNG (tutorial01.zip, 677KB) for this tutorial.
Thanks very good
realy a very fine and good tutoiral i appreciate u for donaton and expect in future more
Great Tutorial!!!!!!!
So gona Finish all the tutorial you posted! :)
Accurate and useful effect! Good tutorial.
Amazing tutorial.
Greatly written. Do not think you could of made it clearer.
Been using fireworks for years and never thought of doing shadowing in that way. I feel like a begginner again :)
Learn something new every day I guess :]
Well written !
Excellent, this will really add to my skills. I encourage you to do more.
THANK YOU ! :)
We’ve used this technique a few times in designs and it has really made the site ‘pop.’ Thanks for the great tutorial – it saved a lot of time.
Very nice. I’ve been looking for this kind of information for a while, and it’s hard to find.
Congratulations!
I love hoe the image looks like it just pops up! Glad I came across this tutorial. Definitely going to try this out for several of my web sites. Thanks for putting this together. Really helpful stuff.
Great tutorial!
I learned so many things trough your steps. Especially the “Convert to symbol”-hint was priceless!!
Could you perhaps give us a tut showing how to work with layermasks (or symbols) more effectively? For instance if you need to use the same mask on other images like a gallery mock-up or such? ;-)
But really helpful anyway, thanks!!
i didnt understand it too complicated but thx!!:)
I like this reality effect and I will also use this effect in other object also to give a more realistic shape.
Hey There, I really enjoyed this tutorial, but am a dyed-in-the-wool Gimp user, so I adapted this technique for that app. I would like to publish a Gimp tutorial on my Blogs With Wings site and share the technique with other Gimpers, but only with your permission. I would also give you credit for the original tutorial and link back to it. Thank you for sharing your talent and know-how.
Hey, 1 problem I found was that I could not apply a Gaussian Blur to a vector object. Fireworks warned me that it was going to convert the vector object to a bitmap graphic. Which is fine, except you cannot add bezier curves to a bitmap graphic – only to vector objects. I changed the instructions to: apply the bezier handles to your vector rectangle, approx where you like them, then apply the Gaussian blur effect. If you dont like the position or radius of blur, undo and adjust, then repeat. Worked for me.
Richard: I put in a note that clarifies to use the Live Filter version of Gaussian Blur to retain the vector information of the shadow (and not turn it into a bitmap object). Thanks for the observation!
Dude you rock!
That was awesome!
i just did it wiyh a picture i had and it looks wonderful!!
Thank you very much!
my best wishes
Siet
Thanks for a great tutorial… easy to follow and a fantastic looking end product.
Lets have more fireworks and less photoshop.
Keith D
thanks
i read every single of your post sometimes i read it over and over again ..you really inspired many people here..wish you a good luck in everything you do..
Couldn’t agree more Gina.
I’ve produced some great effects for my own website by simply following this tutorial.
Can’t praise it enough.
Keith
awesome! awesome! awesome! i am so happy to find this tutorial. so many designers completely ignore fireworks, but it’s the only app i use for images on the sites i work on.
Well written, excellent, this will really add to my skills.
THANK YOU ! :)
good site
Man,this is great tutorial.I looking for something like this.My pics now look much better.
looks great
thx
Very impressed. As a web designer I think Fireworks is far superior to Photoshop. This tutorial just goes to prove it. Good job.
Great article and beautiful effects, give us more methods about superior photoshop, nice.
Well done!
Some steps on how to make camera photos look more realistic and it is a useful article,,
great tutorial. It’s not very hard to do it.
thank you man
good thankx
very nice info…let me add my 2 cents to this blog by sharing a really good resource of 3ds max tutorials at http://appslog.com/blog/1-blog/796-huge-list-of-3ds-max-tutorials.html
they really have a huge list of tutorials.
I got stuck on Highlights & Lowlights (copy base rectangle to top most layer, i don’t know what my base rectangle is and do you meen with top most layer make it a new layer and place it on top, or copy it into the top layer
The base rectangle is the very first rectangle you draw at the start of this tutorial (in “Setting Up The Photo”). Copy that onto the top of everything else you have so far (Fireworks will automatically create a layer for it when you paste the copied object, and will create that layer on the very top if you have no objects selected). Hope this helps.
(Looking back on this, I have no idea why i said “Lowlights”. What the heck was I thinking? LOL)
Hello, would you mind if I translate your tutorial and place it on our website?
We’ll give the link to the original of your tutorial in our translation. Thanks!
Sure, no problem! Let me know when you’re done with the translation, so that I may link back to it, as well.
I got stuck when it says “arrange the points of your shadow such that the Bézier points are lined up with the edges of your base rectangle”. How to do that? If I click on one of the corners and try to move it, another curve appears…
My bad. You should switch to the Subselection tool (shortcut: A) before attempting to move the Bézier points.
whta ama thanks
awesome! awesome! awesome! i am so happy to find this tutorial. so many designers completely ignore fireworks, but it’s the only app i use for images on the sites i work on.