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

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

6 09 2006

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 have tried something which people really love… you can see by the comments.

The shiny floor tutorial can be found at our new domain: PhotoshopCandy.com - Shiny Floor Effect

Actions

Information

Date : 6 September 2006
Categories : Free PSDS, text effects, tutorials

89 responses to “THE SHINY FLOOR EFFECT so fresh and so clean web2.0 - yummy”

7 09 2006: Grapplica (09:32:09) :

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
7 09 2006: Max (17:55:00) :

Wow, ive always wanted to know how to do this. I really think that you have alot of tallent to offer -You da shiznit!!!
21 09 2006: Jan (09:13:33) :

I like it. There could be one or two more pics from the last action. But beside of this it is very good.
22 09 2006: nothingnormal (08:41:28) :

what font did you use?
22 09 2006: aaron (09:04:54) :

I used TRAJAN PRO. BOLD . CAPS
22 09 2006: davidbdale (14:58:45) :

Beautiful job, well described. Thanks!
22 09 2006: rowell (19:16:13) :

How do you get a negative h coordinate. I get an error saying its out of the range.
23 09 2006: gamehawk (02:38:17) :

Seems nice, but that effects been done quite a bit lately.
23 09 2006: pickleshane (12:10:57) :

Genius. Pure genius.
28 09 2006: wingoke (03:44:51) :

smart bos
29 09 2006: leo (14:40:37) :

thank you very much
29 09 2006: Chronic (23:26:01) :

Well done tutorial,I love it and it was easy to fallow,thanks for making it easy! very nice tut man.
4 10 2006: josey (03:57:21) :

tanx a lot bro, real easy to follow and good results. again, tanx a lot
5 10 2006: januarys (17:04:51) :

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.
5 10 2006: Psd of the day - Hot text with rays of light. « photoshopit (22:26:09) :

[...] 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. [...]
7 10 2006: mik (15:49:13) :

Nice job!
The tip are ok while the way you draw down tutorial really rocks! Keep on the line
7 10 2006: Ollie (16:55:53) :

Great tutorial, easy to follow, clear to read and not boring as you have kept it simple and to the point. good job.
8 10 2006: caca26 (00:12:54) :

thank you very much! i’m happy to have found my new online tutorial. so easy and entertaining!
8 10 2006: whihathac (09:28:13) :

its cool…
9 10 2006: thedude352 (00:26:37) :

Yeah, when i change the coordinate to -100 it wont let me do it!, PLZ HELP!
9 10 2006: aaron (05:03:32) :

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.
10 10 2006: Emad (03:37:38) :

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% !!!???
10 10 2006: aaron (05:47:15) :

EDIT>TRANSFORM>FLIP VERTICAL : as mentioned above this should flip the text also.
12 10 2006: Fran C (18:10:34) :

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.
19 10 2006: $$$-Justin-$$$ (14:05:22) :

DUDE thats pretty awesome. its all…shiny and stuff. w00t!
19 10 2006: Corinne (22:27:05) :

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!!
20 10 2006: $$$-Justin-$$$ (14:11:35) :

you bet it’s appreciated!
21 10 2006: aaron (18:32:42) :

lots of thanks. enjoy
15 11 2006: S Dot (06:28:13) :

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
15 11 2006: Tropiezos en la red » Blog Archive » Sencillo tutorial de Photoshop para hacer titulos 2.0 (II) (12:00:41) :

[...] 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�: [...]
12 12 2006: Web 20 Shiny Floor Effect - video tutorial « photoshopit (22:42:57) :

[...] 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 [...]
25 01 2007: Bernie (22:29:36) :

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

BML
16 02 2007: René (07:28:41) :

I always transforn the reflection. (Menu>transform>perspective)
Brings a way better reflection effect. But well done, nice tutorial
19 02 2007: Web 2.0 Webdesign-Tutorials | Dr. Web Weblog (07:52:40) :

[...] 28. THE SHINY FLOOR EFFECT so fresh and so clean web2.0 [...]
19 02 2007: Whitesquid (18:44:24) :

[...] 28. THE SHINY FLOOR EFFECT so fresh and so clean web2.0 [...]
20 02 2007: PsalmDesignArea » Blog Archive » Web 2.0 Webdesign-Tutorials (16:03:59) :

[...] 28. THE SHINY FLOOR EFFECT so fresh and so clean web2.0 [...]
23 02 2007: Saad (07:58:13) :

you are in my favorite
24 02 2007: Web 2.0 Webdesign-Tutorials at comatags (08:57:12) :

[...] 28. THE SHINY FLOOR EFFECT so fresh and so clean web2.0 [...]
5 03 2007: jaminnit (12:07:12) :

Thanks very much, its a good tutorial, target achieved.
Its quick and to the point and no filibusting which is great. j.
9 03 2007: Web 2.0 Tutorials Round-Up | Smashing Magazine (16:42:01) :

[...] 29. The Shiny Floor Effect [...]
12 03 2007: Vster (11:53:44) :

mmmmmm………….shiny
16 03 2007: Amppy (22:15:35) :

man oh man great tutorial… thnks
18 03 2007: Gabi (11:50:05) :

Perfect. Thank you very much!
20 03 2007: MerT UraL Blog » Web 2.0 Tasarım Tutorial’ları (19:53:30) :

[...] 28. THE SHINY FLOOR EFFECT so fresh and so clean web2.0 [...]
21 03 2007: rayan (18:49:47) :

hey iam rayan from lebanon
21 03 2007: rayan (18:51:14) :

does any one now a website about an action backgrounds (shiny..)
22 03 2007: Digital Photo Tips and Techniques » Web 20 Shiny Floor Effect - video tutorial (01:04:21) :

[...] 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 [...]
21 04 2007: 68 Web 2.0 design tutorials » A blog you can use! (22:36:09) :

[...] 29. The Shiny Floor Effect [...]
22 04 2007: » Blog Archive » Recopilacion de Tutoriales photoshop para web 2.0 (19:14:15) :

[...] THE SHINY FLOOR EFFECT so fresh and so clean web2.0 por photoshopit [...]
25 04 2007: It’s Only Software » Blog Archive » Inline SVG Shiny Floor Technique v1.0 (14:18:57) :

[...] 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 [...]
7 05 2007: Yury (15:02:55) :

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
10 05 2007: Web 2.0 Tasarım Rehberi - Yansıma, İkon ve Flaşlar (07:35:57) :

[...] efektleri ile ilgili çeşitli kaynak ve tutorial’lara buradan, buradan, ve buradan [...]
22 05 2007: Daria (19:33:01) :

very nice!!! thank you!! ^_^
30 05 2007: Web 2.0 Tutorials | Tekjuice.com (03:04:59) :

[...] 29. The Shiny Floor Effect [...]
1 06 2007: Breves: Cambio de cabecera y algunos logos >> k40s (10:16:49) :

[...] 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 [...]
3 06 2007: Conception Web » Blog Archive » Web 2.0. Design (11:27:00) :

[...] 28. THE SHINY FLOOR EFFECT so fresh and so clean web2.0 [...]
7 06 2007: Pályázat (09:04:41) :

thank you very much
14 06 2007: Sarah (09:58:38) :

This effect looks great, I can’t wait to get home and have a real play with it
28 06 2007: UizL » Blog Archive » Tutorial WEB 2.0 (15:03:39) :

[...] THE SHINY FLOOR EFFECT so fresh and so clean web2.0 por photoshopit [...]
4 07 2007: Zaiaku (18:10:35) :

You couldn’t have made it more simpler. Thanks.
6 07 2007: ChrisJones (10:50:55) :

I love this effect, nice easy to follow tutorial too. well done mate!
10 07 2007: gnumax (00:05:06) :

Me ha gustado, senillo y rapidito.
22 07 2007: Jeff Adams (22:02:06) :

awesome tutorial, i used this on my own website design and some advertising.
29 08 2007: Izrul (18:29:12) :

I’ve learned a lot from this tutorial. Very resourceful.
29 08 2007: Bertrand (19:53:13) :

Thank you for this great tutorial.

Bertrand [From France]
7 09 2007: Blogatelier » Blog Archiv » Blitzblank Wordpress-Theme (23:27:31) :

[...] Links: * Yaml-Projektseite * WordPress-Buch-Projektseite (samt Leertheme) * Tutorial Spiegeleffekt mit Photoshop * Tutorial Spiegeleffekt mit Gimp * [...]
28 09 2007: Adobe photoshop uygulamaları - Grafik Tasarım , Photoshop Dersleri , Flash Dersleri (14:01:21) :

[...] parlayan zemin [...]
9 10 2007: So a funny thing happened on the way to 2.0…. - eMoms at Home - The Internet Home Business Blog for Moms & Dads (08:07:40) :

[...] empowering user-driven content, apparently all I had to do to make my blog web2.0 compliant was use glossy fonts, some glass badges, and call it beta, and I’d be all [...]
13 10 2007: links for 2007-10-13 » Graham English Social Networking (05:32:18) :

[...] THE SHINY FLOOR EFFECT so fresh and so clean web2.0 - yummy « photoshopit Here is another photoshop web 2.0 style graphic tutorial. (tags: design effect graphics HowTo images logos photoshop reference techniques tips tutorials Web2.0 WebDev webmaster) [...]
18 10 2007: musicalecards (06:54:56) :

This was rediculously helpful and easy to follow.
19 10 2007: Web 2.0 Tutorials Round-Up | Ayiva (07:22:47) :

[...] 29. The Shiny Floor Effect [...]
21 10 2007: alonon[at]alonon[nokta]net » Blog Archive » Web 2.0 Tasarım Rehberi-Sitemizi Tasarlıyoruz (21:06:19) :

[...] efektleri ile ilgili çeşitli kaynak ve tutorial’lara buradan, buradan, ve buradan [...]
23 10 2007: Web 2.0 Tasarım Rehberi - Yansıma, İkon ve Flaşlar | Rasim Coşkun | Web Tasarım | Web Design (07:59:37) :

[...] efektleri ile ilgili çeşitli kaynak ve tutorial’lara buradan, buradan, ve buradan [...]
23 10 2007: svend (21:29:24) :

This is crab
5 11 2007: No Name (15:45:41) :

Wow, ive always wanted to know how to do this. I really think that you have alot of tallent to offer -You da shiznit!!!
12 11 2007: Web 2.0 Tutorials Round-Up - Article Save (20:49:53) :

[...] 29. The Shiny Floor Effect [...]
21 11 2007: Pinkboy (20:53:28) :

this is great and all…I knew how to do it…I creeate it using vectors. but I was wondering the exact ideas behind the lowercase g, j, p, & q? I usually shorten the bottom part in the reflection to make it right on the baseline. and in your opinion, what would be the perfect floor opacity…I use 42%.
3 12 2007: Recopilacion de Tutoriales photoshop para web 2.0 | [Pragmatic Blog] (20:26:38) :

[...] THE SHINY FLOOR EFFECT so fresh and so clean web2.0 por photoshopit [...]
24 12 2007: Blogging for SEO » Blog Archive » You want glossy? (21:21:00) :

[...] They had references to a couple styles that I used and you can check out the tutorials if you want. Tutorial one>Tutorial one (glossy floor effect), [...]
9 01 2008: How to Create Web 2.0 Reflection in 1 minute | Firewalker (02:23:22) :

[...] post to this tutorial: Shiny Floor Effect Share this post: These icons link to social bookmarking sites where readers can share and [...]
17 01 2008: » links for 2007-03-31 « marksdigital (21:44:35) :

[...] THE SHINY FLOOR EFFECT so fresh and so clean web2.0 - yummy « photoshopit (tags: web2.0 effects howto) [...]
19 01 2008: perryp (23:48:15) :

For those of us who don’t use Photoshop a lot, this graphic is an amazing reminder of the software’s versatility. Especially in the hands of passionate and creative developers, like you guys. I’m excited about seeing this clean, streamlined Web 2.0 look begin to spread.
23 01 2008: Hot pic » Blog Archive » Web 2.0 - The Shiny Floor Effect! So Fresh and so clean . (06:55:19) :

[...] hottest web 2.0 tutorials around - including free photoshop psds with the layers intact. I Digg it.read more | digg [...]
28 01 2008: Web 2.0 Tutorials | Pxdev.com (23:29:22) :

[...] 29. The Shiny Floor Effect [...]
16 02 2008: Clean Tm » Blog Archive » Web 2.0 Tutorials Round-Up (04:30:37) :

[...] 29. The Shiny Floor Effect [...]
20 02 2008: George Marcell (13:39:33) :

The graphics is very good it is great to see people showing what is achievable if they try.
3 05 2008: 2008 | Yerles.com » Adobe Photoshop Uygulamaları (22:11:23) :

[...] parlayan zemin [...]
15 05 2008: Adobe Photoshop Uygulamaları « com10 - Hayatızı Com’layın (10:26:37) :

[...] parlayan zemin [...]