ff

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?

arch

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.

1

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.

2

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.

3

5

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.

6

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

6

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.

7

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.

8

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

9

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.

10

So, we are done!

11

And hope you get it. Sorry if the explanation is not clear enough. This is my first graphical tutorial :D

This post has 14 comments.

  1. Gravatar
    nazirHF

    blog kau menjadi rujukan aku pasai it2 nih….ahaha truskan bro hu

    10 Jul 07 | 2:31 pm
  2. Gravatar
    mahendran

    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

    10 Jul 07 | 4:32 pm
  3. Gravatar
    flisterz

    @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 :)

    10 Jul 07 | 4:49 pm
  4. Gravatar
    ikram_zidane

    i believe its called polaroid..

    thanks anyway for the effort for the tutorial - though guna ps..

    10 Jul 07 | 6:06 pm
  5. Gravatar
    neutronics

    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.

    10 Jul 07 | 6:28 pm
  6. Gravatar
    flisterz

    @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 :)

    10 Jul 07 | 7:04 pm
  7. Gravatar
    aad_lfcfn

    yea, realized about it in adobe’s website, ….can you recommend good sites to search for firework’s tutorials..?

    10 Jul 07 | 11:28 pm
  8. Gravatar
    flisterz

    haha i have not stumbled into any fireworks’ tutorial website. none :)

    11 Jul 07 | 12:39 am
  9. Gravatar
    manchurr

    For PS expert.. utk tutorial mcm ni.. PS xleh wat ke?

    11 Jul 07 | 9:38 am
  10. Gravatar
    flisterz

    PS mmg confirm boleh buat ni. Byk tutorial kt internet ni. Rajin cari dan mencuba je :)

    11 Jul 07 | 6:47 pm
  11. Gravatar
    neutronics

    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. :)

    11 Jul 07 | 10:06 pm
  12. Gravatar
    draxter

    Yup. semestinay PS boleh buat benda ni. Aku tak familiar dengan fireworks lah, ni kena belajar ni.

    12 Jul 07 | 12:04 am
  13. Gravatar
    khai

    loll… nice la bro!! keep it up!! mekasih for the tutorial…

    psstt: mana nak cari firework nye cd yg pirate ni..huhuhuuuuu

    13 Jul 07 | 8:12 pm
  14. Gravatar
    Alan Musselman

    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/

    18 Aug 07 | 11:14 am

..and 2 pingbacks