THE SHINY FLOOR EFFECT so fresh and so clean web2.0 – yummy

Here is another photoshop web 2.0 style graphic tutorial.

the finished Product

This is what we will be doing …now that is a clean floor. This one I tried something new – I dont always like the way tutorials are written out – they can get boring and not easy to follow. So I am not going to talk much…

here is the process:

the process

so how is it going? shall we move along?

The continuation

and now the finally.

Teh finalle


And how can i forget the free psd with all layers intact…and free for use and reuse … until you cant stand it no more!
Now how was that tutorial.? I hope to hear some feedback on that one…. was it clear and easy to follow? did you get the job done? Photoshop tutorials can sometimes be a real pain when there is too much text to read – So I guess I am trying to minimize the text and go more visual. Since it is not video this is what we got.

Add to Technorati Favorites


SELECTED TUTORIALS

glossy text tutorial

CLICK HERE TO VIEW GLOSSY TEXT EFFECT

Glass Badge

CLICK HERE TO VIEW THE GLASS BADGE TUT

Related Posts with Thumbnails

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

Yes Yes yes more please, ;’)
Though I allready managed to figure this one out myself..
still liked it.

Cheers
Btw, check out my company at http://www.snowbylgf.be

Wow, ive always wanted to know how to do this. I really think that you have alot of tallent to offer -You da shiznit!!!

I like it. There could be one or two more pics from the last action. But beside of this it is very good.

what font did you use?

I used TRAJAN PRO. BOLD . CAPS

Twitter: photoshopcandy

Beautiful job, well described. Thanks!

How do you get a negative h coordinate. I get an error saying its out of the range.

Seems nice, but that effects been done quite a bit lately.

Genius. Pure genius. :-)

smart bos :)

thank you very much

Well done tutorial,I love it and it was easy to fallow,thanks for making it easy! very nice tut man.

tanx a lot bro, real easy to follow and good results. again, tanx a lot

holy cannoli, i wish i had this blog’s address when i was at my old job, where my task was essentially “learn photoshop.” i failed miserably due in part to the fact that no one stopped me if i decided to just up and leave for an hour. anyway the point is. i bookmarked you. :)

[...] This is not a tutorial: For this one I used a small tight diagnal patter as the background floor. Instead of my usual thick ones. I used impact as the font and I gave it the used up – shiny floor effect. (shiny floor tutorial can be found here). To make the rays of light i used the polygon selection marquee tool and drew out two trangles and filled them with a gradient white to transparent. You can pick up the free psd here. [...]

Nice job!
The tip are ok while the way you draw down tutorial really rocks! Keep on the line :)

Great tutorial, easy to follow, clear to read and not boring as you have kept it simple and to the point. good job.

thank you very much! i’m happy to have found my new online tutorial. so easy and entertaining!

its cool…

Yeah, when i change the coordinate to -100 it wont let me do it!, PLZ HELP!

thedude352 – if that doesnt work than you are probably using an older version of photoshop -but you are not lost… you can do it another way: simply go to EDIT>TRANSFORM>FLIP VERTICAL this will do the exact same thing.

Twitter: photoshopcandy

Me too have the same problem

How do you get a negative 100% in the coordinate. I get an error saying its out of the range must be between Zero and 320% !!!???

EDIT>TRANSFORM>FLIP VERTICAL : as mentioned above this should flip the text also.

Twitter: photoshopcandy

I did do one thing. When against a dark background, I change the floor from Normal to Overlay, moved the layer to between the original and the reflection and dropped the opacity from 100% to around 30 or 33% depending on what I am going for.

By the way, this tutorial technique is going a long way to helping me when I “reboot” my portfolio website.

DUDE thats pretty awesome. its all…shiny and stuff. w00t!

Hiya, a friend of mine gave me the good tutorials website and here I am having a good old browse and loved the look of your tutorial – I’m a beginner (just had my first photoshop lesson at night school!) so I’m printing off to practice at a later date, but wanted you to know your work’s appreciated!!

you bet it’s appreciated!

lots of thanks. enjoy

Twitter: photoshopcandy

[...] En Photoshopit » The Shiny Floor Effect so fresh and so clean web2.0 – yummy (en ingles) nos explican como hacer un titulo para la web2.0 , el resultado sería algo así: [...]

having problems at step 11. When I go to the stage and drag it nothing happens in my mask box so i can’t proceed from there

[...] If you liked this http://photoshopit.wordpress.com/2006/09/06/the-shiny-floor-effect-or-the-very-cool-reflection-effect/ Than You will probably enjoy this. It may  be a little hard to follow if you arent familiar with photoshop. This is an older tutorial I did – which was uploaded to youtube and totally lost quality – There is no voice the end result is great.http://www.youtube.com/watch?v=LAePEdePP0Y [...]

This was rediculously helpful and easy to follow. THANK YOU!!!

BML

I always transforn the reflection. (Menu>transform>perspective)
Brings a way better reflection effect. But well done, nice tutorial

[...] 28. THE SHINY FLOOR EFFECT so fresh and so clean web2.0 [...]

[...] 28. THE SHINY FLOOR EFFECT so fresh and so clean web2.0 [...]

[...] 28. THE SHINY FLOOR EFFECT so fresh and so clean web2.0 [...]

you are in my favorite

[...] 28. THE SHINY FLOOR EFFECT so fresh and so clean web2.0 [...]

Thanks very much, its a good tutorial, target achieved.
Its quick and to the point and no filibusting which is great. :D j.

[...] 29. The Shiny Floor Effect [...]

mmmmmm………….shiny

man oh man great tutorial… thnks

Perfect. Thank you very much!

[...] 28. THE SHINY FLOOR EFFECT so fresh and so clean web2.0 [...]

hey iam rayan from lebanon

does any one now a website about an action backgrounds (shiny..)

[...] you liked this tutorial:  http://photoshopit.wordpress.com/2006/09/06/the-shiny-floor-effect-or-the-very-cool-reflection-effec…  Than You will probably enjoy this one below… It may  be a little hard to follow if you arent [...]

[...] 29. The Shiny Floor Effect [...]

[...] THE SHINY FLOOR EFFECT so fresh and so clean web2.0 por photoshopit [...]

[...] month ago, I posted about using inline SVG to simulate the Web 2.0 “shiny floor technique” (SFT) for a mirrored reflection effect on page headings. I have not had time to perfect it, but I [...]

Nice tutorial I’ll use it to refresh some my graphics at makitra.net website.
btw: Effects such this can be obtained by using layer masks. I think it’s much more effective than reflection use

[...] efektleri ile ilgili çeÅŸitli kaynak ve tutorial’lara buradan, buradan, ve buradan [...]

very nice!!! thank you!! ^_^

[...] 29. The Shiny Floor Effect [...]

[...] las fotos y el de correo. Los podeis ver en el propio blog a la derecha. Los he realizado siguiendo este tutorial de photoshop para realizar reflejos “a lo web2.0″. Todas ellas las podeis ver tambien en las galerias de Picasa y [...]

[...] 28. THE SHINY FLOOR EFFECT so fresh and so clean web2.0 [...]

thank you very much

This effect looks great, I can’t wait to get home and have a real play with it

Really a well made tutorial. thanks

Thanks for this useful tutorial.

I’m really impressed! Thanks a lot for this much helpful tutorial :)

well done!

[...] Shiny Floor Effect Make it look like your text is being reflected from a shiny floor. [...]

I’m a bit lost in step 11??? Some help please…

I love it and will be looking for more! Thank you! Sometimes pictures really do say more!

[...] Shiny Floor Effect. Texto vertical reflejando de un suelo brillante. [...]

[...] only took me about an hour to finish the new banner, thank to Photoshopit. Very short tutorial, right away to the point, and you’ve got yourself Web 2.0 effect! Well [...]

[...] was definitely popularized by Apple and has become “the norm” for most web2.0 logos. View the tutorial here Posted by jeremy Filed in Web design, Web2.0, [...]

[...] Shiny Floor Effect Make it look like your text is being reflected from a shiny floor. [...]

If you don’t mind my asking, which version of Photoshop are you actually using?

Thanks so much, you’re greatly helping me out in my Graphic Communications class! This is the easiest on-web guide I’ve read so far, and I’ve been looking for them for a while! Thanks again

Trying to do this with lower case g’s and getting alot of grief – the loop stick out above the font instead of making a nice reflection. Any suggestions?

[...] Link: THE SHINY FLOOR EFFECT so fresh and so clean web2.0 – yummy (en inglés) [...]

[...] Shiny Floor Effect Make it look like your text is being reflected from a shiny floor. [...]

[...] Shiny Floor Effect Make it look like your text is being reflected from a shiny floor. [...]

[...] Shiny Floor Effect Make it look like your text is being reflected from a shiny floor. [...]

[...] THE SHINY FLOOR EFFECT so fresh and so clean web2.0 por PhotoshopCandy [...]

thanx very mush what i can say
وربنا أنته راجل جدع
that’s mean in english
I swear by my GOD you are so respectable man

peace(salam)
bye

I always wanted to know how to do this. I really think that you have alot of tallent…. Nice job!
What font did you use???

Hugs!

Thiago Alexandre
http://www.britescade.com

[...] PhotoshopCandy » Blog Archive » THE SHINY FLOOR EFFECT so fresh and so clean web2.0 – yummy that reflection thing (tags: photoshop tutorial) [...]

[...] Shiny Floor Effect [...]

Thank you. So simple and direct! You’re wonderful and I’ll visit this site often.

wow, for know i think i won’t buy some photshop books. thanx for this tutorial. i will see other tutorial

I’m self-taught, and had seen that effect on so many sites and never could do it via other tutorials in other programs.

This tutorial, for PhotoShop (that I’m more familiar with) was easy! I did it, first time, even with the obvious differences in my version of PS compared to what was used here.

Thanks so much!

Oh, and one more thing … it’s editable. No layer was required to be rasterized, so you can change the text, the color … everything, instead of having to go through step by step all over again with what text you want.

That’s cool!

Thank you again!

[...] Shiny Floor Effect Make it look like your text is being reflected from a shiny floor. [...]

Could anybody tell me, how can I obtain such an effect in Keynote?

What a pretty good job. Thanks for this useful article.

Your comment contains very useful information about all thank you ispanyolca tercüman

[...] THE SHINY FLOOR EFFECT so fresh and so clean web2.0 por PhotoshopCandy [...]

Why do you need the mask layer? That is the only part i dont understand?

You don’t really need the layer mask – you can just use a white gradient to transparent and it will give the same effect.
I got used to using a mask..
its like an eraser without really erasing anything.
Twitter: photoshopcandy

A great thanks for this tutorial, can it be done with a photo too?
Claudio

[...] • Shiny Floor Effect [...]

[...] Tutorial “How to create a header  such a header – the shiny floor effect.” [...]

Great tutorial AND thanks for allowing us to “play” with the .psd file!

Peter

Fantastic very easy to follow.
great work

[...] Shiny Floor Effect Make it look like your text is being reflected from a shiny floor. [...]

Thank you very much! This my favorite effect.

Thankss

[...] Shiny Floor Effect Make it look like your text is being reflected from a shiny floor. [...]

[...] to create a reflective logo. Reflective Liquid Type Create text that looks like reflective water. Shiny Floor Effect Make it look like your text is being reflected from a shiny floor. Water Text This tutorial shows [...]

thx for the free psd, i’m lazy a bit:-)

[...] Shiny Floor Effect Make it look like your text is being reflected from a shiny floor. [...]

awesome dude !!!!!!!

awesome dude !!!!!!!!!!

Great tutorial, but what did you mean by ‘go to stage’?

What’s this stage? I’m sorry, I’m a newb.

thanks ;)

excellent tutorial. this effect is a classic but if you have adobe/macromedia fireworks, this same effect can be done in 5 steps. if you’re interested, check my guide here.

Thanks for this one It looks great on my project

[...] yazıya yansıma efekti aslında gayet basit. Burdaki bağlantıyı takip ederek sizde rahatça yapabilirsiniz. yansıma, yazı [...]

[...] THE SHINY FLOOR EFFECT so fresh and so clean web2.0 – yummy Waarom van buiten leren? Als het nodig is vind ik het wel… (tags: photoshop webdesign web2.0 shiny text tutorial) [...]

[...] Websites these days are full of shiny reflective floor effects, you know the sort of thing where the text is reflected on the surface. There is a good tutorial on how to achieve this effect over at Photoshopcandy. [...]

Thank you very much !! : )

[...] shiny floor example is a great example of a web 2.0 style technique. bookmark [...]

thanks!

[...] Shiny Floor Effect Make it look like your text is being reflected from a shiny floor. [...]

[...] • Shiny Floor Effect [...]

Thanks for the very great tut…!

AWESOME!
I didnt knew the trick with the gradient in the middle to simulate the horizon! WOOOOO! I love it!!!!

I’ve only taken one class in Photoshop and I’m still so green it’s pathetic. But this tutorial is terrific and I managed to work my way through it and end up with a gorgeous header for the website I’m working on. Thank you so very much!

Great tutorial! Very clear and easy to follow. The only suggestion I have is to explain how you adjusted the text gradient for us newbies. :)

Awesome tutorial I really enjoyed it. I was able to get the job done.

Totally going to use this for my logo redesign.

Thank you for this tutorial, a very handy effect to know how to do!

Nice tutorial, thanks!

I don’t get it – I got as far as creating the mask but applying the gradient didn’t work – the text just stayed the same color, and the mask box in the layer area stayed white :-(

thanks a lot …very easy to follow the steps…as good as video tutorial…thanks a lot

Note: @Jody Florian: select the background layer then apply gradient..

thanks!

thank s ton. very-very easy and useful for me. i have decide to choose this way for my site.

Thanks,
Rakesh Kumar

[...] Shiny Floor Effect Make it look like your text is being reflected from a shiny floor. [...]

DIS WAZ DA EASIEST ONE I DID .I DID OTHER ONES AND THEY WORENT AS EASY

Cool way to handle this.

Great Tutorial, I prefer text / photo tutorials to video, it’s a lot easier to follow along with text instead of having to pause the video and hope you don’t miss a step.

I had been taking an extra 2-3 steps for the reflections on my designs, this will save me several steps and it looks better overall. Thanks!

what if the reflection dont look like that ? cause mine wont change :S

Thanks for the tips Borganic They worked

Nice tutorial. But too web 2.0eee

thanx to explain everything so clearly

Simple but very artistic. Thanks for your tutor.

I don’t understand the last step – with the gradient and the box – could someone please explain it? Nothing happens on my text.
Thanks

My Feedback ->

So easy to understand!

Great work and tutorial :D

Love it man :D

here’s mine … http://i34.tinypic.com/10dcz08.png

Thanks a lot, You have explained it quite simple and well. I was looking for this to learn for a long.

This is easy ;)

love them .Need more designs

Old trick but it still looks so amazing!

[...] Shiny Floor Effect Make it look like your text is being reflected from a shiny floor. [...]

looks amazing, thanks for the tut

perfect. so easy to understand. thank you!!!!

Leave a comment

(required)

(required)


CommentLuv Enabled