
This tutorial will show you how to create a realistic photo effect using Adobe Fireworks. Yeah I know most people use Photoshop, but still there are people who are using this software. So, lets proceed. By the way, you can use the old Fireworks MX or Fireworks 8 for the tutorial because the tools are available on those version as well. This technique can also being applied with any graphic software as well, maybe some differences in terms etc.
What we are going to achieve?

As shown above, we are going to get a nice looking realistic photo effect with better shadow underneath it. Thats all
So, whats the steps?
First of all, create a basic shape of your photo whether its vertical or horizontal or wtv.

Copy the same shape/layer and put it underneath the first one. Change the color to black (#000000) and move it a few pixels to the right and a few pixels to the bottom. This black shape is going to be the shadow.

By using the Pen tool, insert/create several points around the black shape. Remember to use the Subselection Tool (keyboard shortcut: A) to free the shape first, if not you are unable to add any point on that particular shape.


Move the black shape around until you come out with a good position of your shadow. Select the Black shape – from the Properties box, choose Edge> Feather. Set the Feather value to any value around 10 to 15.

Then again in the Properties box, set the Opacity of the Black shape to any value around 65 to 70, as shown in the picture

So we are done with the shadow. Next, duplicate the white shape again and put it on top of it.From the Properties box, choose the Gradient style as Linear. Then from the color selector, select black color (#000000) for both side. Click the opacity selector and put the second color’s opacity to zero. Lower the opacity of the first color to any value as well so it is not too dark. Play around with the opacity value.

When you are done with that, move that top shape a few pixels to the right and to the bottom, as shown in the following picture. See,now you have a white ‘outline’ the top and on the left side of the previous shape. This actually triggers a 3d effect for the realistic photo.

But, theres no photo yet. Choose any photo and put it between the previous ‘linear gradient’ shape and the white shape. The arrangement of the layers will be Linear gradient shape > PHOTO > white shape > shadow

For that, we are done. But you can add a lighting effect on the bottom rigth corner of the photo for a more realistic effect.
Using the same method as the linear gradient shape just now, create another one with a white (#ffffff) color in it and place it on the bottom right corner of the photo.

So, we are done!

And hope you get it. Sorry if the explanation is not clear enough. This is my first graphical tutorial
Microsoft has launched a series of courses for its Windows XP Professional. Among the hottest today are 70-271 and 70-272 exams attracting more and more professionals. Many of the users are sharing their own experiences and helping others to take difficult exams Windows Server 70-298. Such information can be obtained from their blogs. Some even have their websites hosted by leading web hosting companies. Companies like hostmonster are providing marketing services as well keeping in mind the technique of link exchange that is common among many bloggers.
PreviousMoodmill – an Indonesian web app
blog kau menjadi rujukan aku pasai it2 nih….ahaha truskan bro hu
WWWWOooooo!! holy shit.
i just know ur here flisterz!! haha dah berdekad x jumpa nih hahaa.
soory,just gotta know. hows life.
wei..ur site is damn cun. thkx for the tips.
must learn from u ni
@nazirHF : ehe okeh bro! no prob
@mahendran : haha berdekad ke? lifes ok ok je kot. Will be back in UTP on 21st. heh r u still in the industrial training?
thnks for visiting dude
i believe its called polaroid..
thanks anyway for the effort for the tutorial – though guna ps..
i think this is not the polaroid effect, sebab polaroid part putih tu ada lebih kebawah.
firework cs3 is damn nice. Effect pun dah banyak skarang sebab dah bergabung dengan adobe, illustrator punya file pun boleh bukak.
Memang fireworks patut dijadikan first graphic program. Photoshop lebih sesuai kepada potographers.
@ikram : ur welcome.
@neutronics : yeah i hav 2 agree with that polaroid thing.
yeah fireworks cs3 bagus sbb boleh bukak .psd file. ramai org gune PS so dorg slalu ade .psd file. asyik2 aku je gune fireworks.
photoshop,as its name, adalah utk photo. but its already an international standard; guna utk photo and graphic design.
firework is put under cs3 web standard edition
PS pulak kat cs3 design standard edition
yea, realized about it in adobe’s website, ….can you recommend good sites to search for firework’s tutorials..?
haha i have not stumbled into any fireworks’ tutorial website. none
For PS expert.. utk tutorial mcm ni.. PS xleh wat ke?
PS mmg confirm boleh buat ni. Byk tutorial kt internet ni. Rajin cari dan mencuba je
u guys leh check out kat sini :
http://www.smashingmagazine.com/2007/03/10/web-20-tutorials-round-up/
http://tutorials20.com/
some good tutorial sites that changed my skills a lot.
Yup. semestinay PS boleh buat benda ni. Aku tak familiar dengan fireworks lah, ni kena belajar ni.
loll… nice la bro!! keep it up!! mekasih for the tutorial…
psstt: mana nak cari firework nye cd yg pirate ni..huhuhuuuuu
Here’s some Fireworks resources for ya:
Fireworks Developer Center:
http://www.adobe.com/devnet/fireworks/
Fw CS3 Downloads:
http://www.adobe.com/devnet/fireworks/?navID=downloads
Fw CS3 Samples:
http://www.adobe.com/devnet/fireworks/?navID=samples
And if you have a tutorial you want to see I’d suggest posting on FireworksGuru Forums (http://www.fireworksguruforum.com )
my Fireworks weblog:
http://weblogs.macromedia.com/amusselman/
Great!
Awesome tutorial!
Thanks a lot!