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!
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 effect (Blur Radius: 4). Nudge it 10px down (Shift+↓) so our shadow coincides with the position of our light source.
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.
Great tutorial! I will definitely give this a spin.
Might even try to turn it into a open glossy magazine style.
Very nice - very very nice tutorial !
Can’t wait to see #2
Excellent writeup!
Great tutorial ! Thanks for sharing , i hope you’ll make some more ;)
Rob: Great idea! Hmmm… that gives me a concept for a possible sequel to this tutorial… unless of course you beat me to it. :)
Thanks for the tutorial! I actually just finished a few web ads to be submitted later on today. I’ll fine tune these ads using this technique!
Fantastic tutorial - It’s great to finally see someone making real, usable Fireworks tutorials as opposed to ‘dezine-kiddies’ making m4d eff3cts and stuff…Thanks :)
great tutorial. easy. clean. and simple to follow. [grab rss]
Great! This is exactly what I was looking for. Many thanks dude.
Now you can also combine it with some color masking and a few patterns to produce an aged picture… mmm… got some ideas about it…
THANX!!!
Fenomenal!
Nice and clear instructions, will try it out tonight!
This is awesome. I will try it tonight as well!!
very intresting tutorial. the Bézier effect makes it stand out even more..cool!
this is really cool i cant wait to try this out
Excellent…this is a nice little tutorial. Very polished.
You have been ‘digged‘!!!
Out-freakin-Standing
Is there a way to do this with photoshop? (I can’t seem to do the corner lifting step)
Thanks!
Hi. Nice tutorial. I did it and everything works fine. In my Opinion it looks more realistic with a little bit less effects.
I hate to sound like the rest of the group, but great job! Tested it out myself and the step by step instructions are perfect!
Excellent tutorial - I particularly like your technique for realistic shadows. The question is, do I dust off Fireworks or adapt your walk-through to Photoshop :)
Great article. I will be checking it out and using this technique :)
Thanks a lot
-a5
Andy: People have been asking for a Photoshop version of this tutorial, so if you’re up for it, an adaptation would be appreciated by many. ;)
Any chance of someone providing a tutorial for doing this in Inkscape?
I love it, this nicely tutorial, thanks
@andrew, I had the same problem, in my case I had to ungroup the shadow rectangle before adding bezier points (stupid me). great tutorial, it worked fine in fireworks 6 as well, except for the gradient blending mode, but that was easily solved by making the gradient more transparant. thanx a lot brownspank!
This was pretty easy to do in photoshop as well. You just have to do it in a little bit different order. When you get to making the drop shadow just trace your box with the pen tool, tweak it, then you rasterize the vector layer and make it transparent and gausian blur.
It would be cool if you could turn this into an imagemagick script so that when ever you uploaded an image to your site a thumbnail would simply be made like this.
Nice work.
I’ve roughed up a Photoshop tutorial
Yeah, the “Average” blending mode in Fireworks 8 is simply Normal mode with opacity set to 50%.
I could use this A LOT. Unfortunatly I only have CS2. Any help on adapting this technique for CS2 would be great. Looks very real.
Muy bonito, exelente tutorial. Saludos. Thanks for all.
ASTIG!
Very very good - I will be using that one for years I’m sure! Keep up the good work. Matt
Very Very cool! :)
Great tutorial. I always wonder how Maxim get those nice looking “photos” done on their spread.
you don’t even need fireworks- you can do it in photoshop 7. all the effects can be done exactly as described in the tut in 7 up to the shadows and glare.
for the top, create the gradient on the same size of the base, apply the gradient. For the shadow, set the layer to multiply. for the reflection/glare set the layer to screen.
for the bottom shadows, create the one as the tut described, then dont make the pen stuff. Duplicate the shadow layer twice more, (so you have 3), rotate them, move them to match the light source, and dodge/burn/erase where appropriate. it makes as nice as an effect.
:)
Wonderful t00t.
I followed it and make a really cool looking image.
I bragged about it on my own blawg.
http://www.jammo.net/text/article/123/my-realistic-fireworks-photo
2-Thumbs way Up!
you think there is anyway in the world you could do a magazine tutorial?!?!?!? i’m joking…Great Tutorial!!! I wish i had the time do do some myself…
Before, trying to show someone a mockup of some nicely done stationery required me to have some trouble in 3DS Max just to give that 3D life-like effect. I am also a fan of Fireworks so this works great.
Extremly useful tutorial that has earnt its place on my del.icio.us
Thank you very much.
This tutorial was really useful. I learned a lot from it and I appreciate the fact that it’s not on a paid-membership site like community MX. Thank you for sharing your expertise.
Very nicely done! I like how the gradients were used to give a sense of reflectance and depth. Great job.
I really enjoyed it as a novice “Fireworker”, made one and posted on my blog.
Thank you for teaching!
It was a good realistic effect. It seems that the photocopy has been placed on any object.
I like this reality effect and I will also use this effect in other object also to give a more realistic shape.
extra special comments astonashing:)!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
thanks!!!11
Do you know any other cool tricks like this? I would keep coming back to your site if you keep updating it with nice effects like this.
Hi everyone! The Lesson simply super !! Thank you big! Regard from Belarus
nice..
@Brownspank:
You said:
Would you consider creating a mailing list? For those that followed these tutorials and express interest in future works?
That would be a superb idea.
:D
Jammo: you can always make use of the RSS feeds to track any updates on my blog. Speaking of updates, I’ll be posting another tutorial real soon. ;)
Great tutorial. Just wanted to let you know I’ve done an inkscape adaption of it, which you can find at http://simarilius.wordpress.com/2006/07/03/inkscapification/
cheers
Sim
Cool tutorial!
Will try it out sometime!
bro, ang galeng mo ! r u a fireworks user too? thats great, hows philweavers ?
Great tutorial Thanks
Excellent one
great tutorial !
Nice.
Couldn’t get some of it to work in Fireworks 4 (specifically the Bezier stuff and the white highlight) but that might have been my n00bness rather than the program lacking features.
Thanks
Marty: Wow! It’s interesting to hear people still using Fireworks 4!
I’m not familiar with its feature set, so I don’t know if gradients (which the highlights basically are) have been introduced in that version. I do know that it has vector capabilities (which you could create bezier curves with), and if I remember correctly, it has a blur effect (for the soft shadow effect), but not as a Live Effect. Anyway, let me know how it turns out. :)
From a Fireworks beginner–Thanks. This tutorial is well written and I plan to try it soon.
hi, nice to see this, actually i did this long time ago and i was really impressed when i got a very close result to yours.
also you can make a paper flip with the half transparency gradient and feather fill to the picture.
http://img330.imageshack.us/img330/8772/nonameka6.gif
oh my god , great work ! many thanks for tip
Have to agree that the tutorial was very nicely put… Thanks for it..
Jim
Don Lapre James
webmaster@donlaprejones.com
http://www.donlaprejones.com
this tutorial is simply on of the best thanks !
Thanks, great start and also a great tutorial!
Thanks for this! It’s great..
HI, ‘t was my first experience with fireworks and I enjoy the result - thank you for your great tutorial!
Hey, Nice tut, will be using it for my new photosharing website.
ta!
good tutorial!
Is there a way to do this with photoshop? (I can’t seem to do the corner lifting step)
Thanks!
I wish i could do that! Nice work. Bape Clothing
Wow. That’s a really great tutorial!!!
That is very realistic, I have never been able to master this.
Thanks for sharing this tutorial. i was asked in an interview to give a nautural shadow effect of a shoe according to the lights in the image. next time i can do that much better.
great tutorial , thanks for sharing !
Great tutorial.I will try this now.
Wonderful tutorial. Thanks!
Great tutorial, it’s very useful.
Great Technique, just what I have been looking for I will be using it for my own website
Nice tutorial dude. sweet looking stuff and pretty nice.
Bape Clothing
Thank you very much for that! A great tut for beginners like me!
great tutorial! will be using it on my website for sure!
Very impressed. As a web designer I think Fireworks is far superior to Photoshop. This tutorial just goes to prove it. Good job.
Great! Nice tut for FW! Thanks…
Yes, it is good tutorial.
But it has some missing point, if u add layer box dialog then It is easily understandable.
but thanks for tutorial…
great tutorial. But hard to implement at dynamic web gallery.
That of the shadow path it’s a great idea, very useful, thank you for sharing.
Bacán el tutorial, a practicar. Yo hice un tutorial sobre un Lp de vinilo pueden visitarlo, a ver si puede competir con estos maestros, pueden verla en: neocomics.galeon.com/tutorial.htm
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.
Awesome - this is one of the most satisfying tutorials I’ve done in a while. I’ve been using some rudimentary photo effects on a few sites, but this is so going to replace them all. Thanks for sharing!
Thank you! This was so helpful in my tranisitioning from print to web design :)
thanks, Brasil.
How can I install the Plugin under Wordpress 2.5
Oh .Thank you very much.
ellerine sağlık çok güsel anlatım açıklayıcı… nice tutorial…
I just did this tutorial. I had some issues with my base rectangle needing to be converted to bitmap from vector before applying the gaussion blur so I did that last.
If I wanted to use this as a template and just swap out pictures, how can this be done easily? There is a mask on the image so I’m not sure how to substitute the image.
Lauren: I’ve been trying to figure out how to go about doing that without the need for server-side processing (like ImageMagick), but sadly I don’t have any ideas.
You might want to look into creating a generic bottom shadow and some semi-transparent PNG overlays; that might work.
Can you explain to me what you meant by
“Now your photograph is ready for use as a template for photos on your swanky blog or as part of an edgy digital collage”?
You say it is for use as a template but I’m not sure how. Is there any way of changing the photo only?
Sorry about that, my wording was a bit confusing. What I meant was, you could use the same Fireworks PNG you just made, and swap out the image with another one, since we turned it into a symbol in the early steps.
To do this, edit the image symbol (through the Assets panel, Library tab). Once “inside” the symbol, place a new image over the old one. Note that this will work only if the new image has the exact same dimensions as the old image. Otherwise, you would need to do the whole thing over.
Hope that clears things up. :)
Thanks for the share.Will come in handy:)
Beautiful! This one is simpler than PhotoShop but the quality is almost the same. Thanks for sharing this to us.
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 :]