[tut] Reflection/web2.0 in fireworks[fireworks]

Printable View

15-02-2008, 06:26 AM
Hypertext

[tut] Reflection/web2.0 in fireworks[fireworks]

My second tut of the night, ok this focuses on alot more screenshots, as I cba with text ;))

Create new doc with below info.

http://img408.imageshack.us/img408/3491/49677557vv9.jpg
Type your favorite text with the below info, including text formatting.

http://img262.imageshack.us/img262/9500/31733997xa0.jpg

Use the below aligning info. make sure "To Canvas" is selected

http://img87.imageshack.us/img87/695/55819480zv7.jpg

Use the below gradients of your favorite choice, best to choose light blue/blue etc, eg red, light red or pink or w.e
http://img403.imageshack.us/img403/4845/14877852kd3.jpg

Use the below INNER SHADOW stats

http://img525.imageshack.us/img525/5200/23617760zv0.jpg

Use the below GLOW effects to create a solid "tube" around your text.

http://img209.imageshack.us/img209/1685/60697484xb8.jpg

Use the below DROP SHADOW to create a black aura around your glow. Now at this we have an *awesome* looking web 2.0 graphic.. Personally I like to leave it there, but sometimes you have to go that step farther, now you should probably head over to photoshop, as I will warn you this isn't going to look amazing in fireworks.. but heregoes note: this is still in fireworks but possible to follow these instructions using photoshop

http://img208.imageshack.us/img208/3816/29610737mu2.jpg

Select your text and hit CTRL+C, then Click Modify -> Transform -> Vertical Flip as shown below!

http://img525.imageshack.us/img525/3429/32067510xh2.jpg

Move your duplicate text down so the top is aligned with the bottom of your original text. Now click Commands -> Creative -> Fade Image

http://img185.imageshack.us/img185/6748/79710174zw6.jpg

Choose the highlighted option for your "Fade Image".

http://img408.imageshack.us/img408/4029/10fa9.jpg

The result.. is a not amazing piece of work.. but it looks not too bad.

Remember this isn't photo shop if you want web 2.0, photo shops yourr program.. but we all should show some adaptability.

http://img262.imageshack.us/img262/4229/11hu2.jpg

Thanks for reading my SECOND tut of the night (depending where you are)I hope this was usefull to you.

TOMORROW: Web 2.0 BADGE tutorial!!!!!!
15-02-2008, 10:31 AM
Pazza

Nice tut,

+rep
15-02-2008, 10:40 AM
e5

Nice tut :)!
15-02-2008, 11:50 AM
Chippiewill

That takes longer than the 5 commands that you would need for paint shop pro :P
15-02-2008, 11:57 AM
kk.

nice tut
although, you can make reflective text on ms word easier than that (I'm not at all saying ms word is better than fireworks or ps)
15-02-2008, 12:22 PM
theJOSH

Why Fireworks?
The majority of Web 2.0 gfx, is done in Photoshop.
A Microsoft Certified person, should know that.

Good tut anyway though.
15-02-2008, 12:34 PM
Chippiewill

he might not have ps :rolleyes:
15-02-2008, 12:55 PM
theJOSH

Quote:

Originally Posted by 00chips

he might not have ps :rolleyes:

So?
All I'm saying is the most used Web 2.0 graphic program is Photoshop.
And he does have it.
15-02-2008, 01:28 PM
Hypertext

I do have ps. - I did it for compatibility with editablility for slicing images etc.. either way works, I was just providign an alternative for the unfortunate users without ps :P.
15-02-2008, 01:47 PM
theJOSH

Quote:

Originally Posted by Reconix

I do have ps. - I did it for compatibility with editablility for slicing images etc.. either way works, I was just providign an alternative for the unfortunate users without ps :P.

I see, well good tut :)
(See, I'm not all negative.)
15-02-2008, 01:53 PM
kk.

its pretty much the same anyway for photoshop isnt it?
15-02-2008, 02:06 PM
theJOSH

Quote:

Originally Posted by JimboJosh

its pretty much the same anyway for photoshop isnt it?

Not really.
15-02-2008, 05:52 PM
Bojangles

Nice tut :)
15-02-2008, 05:58 PM
kk.

yeh it is.. i mean the tut not the programs.
you use the same features to do it on ps?
15-02-2008, 06:40 PM
theJOSH

Quote:

Originally Posted by JimboJosh

yeh it is.. i mean the tut not the programs.
you use the same features to do it on ps?

No, not at all,
Photoshop is much more advanced
15-02-2008, 09:56 PM
Hypertext

not good enough for tuts section again?? :rolleyes:
15-02-2008, 10:08 PM
theJOSH

Quote:

Originally Posted by Reconix

not good enough for tuts section again?? :rolleyes:

It's fine,
:)
15-02-2008, 10:39 PM
Hypertext

Maybe mods havn't seen it ;P
15-02-2008, 10:42 PM
jesus

Great tutorial - thanks!
15-02-2008, 10:45 PM
kk.

Quote:

Originally Posted by theJOSH

No, not at all,
Photoshop is much more advanced

once again, i didnt say the programs are the same, i said that you can pretty much use the tut on photoshop, you just need to know the different names for them.
15-02-2008, 10:53 PM
Invent

Quote:

once again, i didnt say the programs are the same, i said that you can pretty much use the tut on photoshop, you just need to know the different names for them.

Yeah I agree with you there.

By learning one method, you can use your knowledge and adapt it to another program. Sort of like learning a coding language like PHP then using some of your knowledge to help you if you start to learn another language like C#. In this situation you're knowledge will help you as the syntaxes are similar, sort of like in a PS program in a way that the techniques of doing things are similar.
15-02-2008, 11:06 PM
Hypertext

Congrats on platinum Simon.

Codings easier to transfer to different platforms/languages as mostly it's all procedural methods, until you get to things like PHP ad O.O.P., where you start to use Objects and classes. But overall ;)))) Check out my new tut!