For everyone into reflective, glossy, and shiny websites, this tutorial is for you. I will show you how to create a neat table-like header that is shiny, sleek, and of course, reflective. Let me know what you think!
Difficulty
1 2 3 4 5 6 7 8 9 10
Estimated Time
6-10 Minutes
Tools/Techniques Learned
Layer Styles
Shapes
Layer Masks
Opacity and Gradients
Alright lets start with a 500×250 document.
Using the shape tool, draw a rectangle across the canvas. Fill it in with any color you would like. Rasterize this shape and then using the perspective transform (Cmd+T > Right Click > Perspective) drag in the top corners to get the below image:
Next, lets add a layer mask. In the layers palette, click the icon at the bottom that has a white circle inside of a gray square. Then, with your gradient tool and your colors set to black and white, drag your gradient from the top of the box to somewhere in the middle.
Then add the following layer styles.
This next step has a few parts. First, take this “table” layer, and with the “move” tool selected (V), hit Alt+Down. This will duplicate this table on a new layer and move it one pixel down. Repeat this step 7 times.On each duplicated table except the original, remove the drop shadow.
On the top table layer, add the following bevel:
The next step we will make is to add in our text. I used Myriad Pro – a standard Mac font. I’m not sure if this font is available on Windows, so if not, choose a font that you like.
Add the following gradient overlay:
Make a selection on top of your text like so:
Press Cmd+Option+Shift and click on your text layer thumbnail. This will automatically cut the selection so that only the text remains inside the crawling ants.
With the gradient tool, select a white to transparent gradient. Drag the gradient from the bottom of the text to the top. Your result should look like this:
Lower the opacity of this gradient to 33%.
Next, lets duplicate the text layer. Go Edit>Transform>Flip Vertical. Go ahead and align this flipped text up with your original text. Add a layer mask to the flipped text. With a black to white gradient, drag from the middle of the text to the top. Lower the opacity of this text to your desired level. Mine looks like this:
For this next step, open up a picture of your personal logo or icon and place it behind your text. I chose a nifty ‘e’ I created a while back.
This step has the same process that you used to make your reflective text.
Duplicate your icon, flip it vertically. Add a layer mask and with a black to white gradient drag from the middle of the icon to the top. Lower the opacity to your taste.
For this next step, select black as your foreground color. Using the ellipse tool, draw a very thin ellipse at the base of your icon. This will be the shadow.
Next, go to Filters>Blur>Gaussian Blur. Set this to your own desired level. Mine was set at 2.1 pixels. Lower the opacity to around 70%.
I wanted to add an RSS icon to this header, so I opened up this glossy RSS icon.
Use the same techniques that we used on the logo to create the reflective effect.
Duplicate your logo’s shadow and position it underneath the RSS icon.
We are now going to put in some text. This text is the exact same as the other, so use the same gradient overlay, font, etc. For mine, I lowered the font size.
Go ahead and reflect this text using the same techniques as before:
And then add your gloss.
Next, lets create our navigation tabs that are going to come out from underneath the table.
Using the shape tool, create this rounded rectangle. My radius was 7 pixels.
Add the following layer styles:
Cmd+Click on the thumbnail for this tab layer in your layers palette. This will select the tab. Then, using the gradient tool and a black to transparent gradient, drag from the top of the tab to somewhere around the middle. Lower the opacity to your preference.
Duplicate the tabs and shadows and spread them out underneath your table. Mine looks like this – almost done!
Last step – add in some text. I used Myriad Pro again and used some medium gray colors. Here is what my finished product looks like:
If you followed each step correctly, you should have a finished product looking something like the image above. If you are confused on any of the steps or techniques, please let me know!
For more Photoshop tutorials check out the new tutorial site, The Tutorialist.
robojiannis
February 25, 2008 at 5:10 pm
I have wanted one of these forever! THANKS for the great work
Graham Smith
March 2, 2008 at 2:28 am
Your tutorials are simply blinding Brian. You clearly put some effort into these step-by-steps, good for you.
Im going to adapt it slightly for my own uses. The main part will be lot longer and shorter in length, with more tab’s running underneath. Gonna look pretty good I’m sure.
Your tutorials are appreciated
ImJustCreative.comRamblings from ‘My’Gutter.
Timous
March 10, 2008 at 4:18 pm
It is a really good look. That will really enhance my designs. I need to put the shadow down too. Thanks.
abdullaah
March 10, 2008 at 8:52 pm
thank you
keep up the good work
B_J
March 17, 2008 at 8:07 am
It’s so good, but have a problem with the shadow of Y and G. Thanks bro.
Kyprulez
March 17, 2008 at 4:21 pm
this is stunning thnx alot
Jan
March 24, 2008 at 3:56 am
Well its pretty nice but how would it looks if i put it in the header of a website? i mean it doesn’t fit in a website :\ because its perpective or something my content etc… should be perpective too ? right..
Thnx for this tut
donald
March 25, 2008 at 11:36 am
Dude,
This is inspiring in itself, thank you and please continue helping spread the mental creative mind.
Do you do Action Scripting? That would be a good effect to have on the buttons.
Brian
March 25, 2008 at 7:42 pm
Donald – thank you. Its always nice to have my stuff appreciated. And I’ve never heard of Action Scripting – what is it?
@Jan – I think it really depends on the kind of website you’re running. But yes, I personally think that you could use this effectively on a website if you work the rest of the design elements just right
Donald
March 26, 2008 at 9:19 am
Action Scripting is used in flash design >one of my weak areas< but I’m hoping to get better. I think your designs are great I will be a regular to your site.
Keep up the Fab work.
Flatliner
April 1, 2008 at 8:21 am
Nice tut, although I sorta got abit lost through it as I only a photoshop beginner, I have used other programs before and they very different. Could you give a link to download the psd file of this? Would be a great help or maybe I am blind and havent noticed there is an link to download it??
Thanks
Deathstryke
April 3, 2008 at 8:54 am
wow… i think i’m gonna do this in my website.
Ray
April 26, 2008 at 8:38 am
What did you do in the first Gradient Editor window? Mine doesn’t look like that. The stripe at the bottom of my GE window goes from black to grey, while yours goes from grey to grey. I know its a noob question but its just that you went from a black box to a grey box with a picture of a gradient editor in between and if you or anyone could explain what u did there it would be appreciated. Thanks.
Rafael
May 18, 2008 at 11:16 am
It’s a very cool design, but I think that there may be a missing step right after the first layer styles. I’m definitely new to PS but this tutorial seem simple enough even for me. After I followed your instructions to the letter, my header was still much darker than your sample after adding the first layer styles. I tried it over and over for hours and I got the same result every time. Maybe I’m doing something wrong. Great design though!
bapae
September 9, 2008 at 10:04 am
i couldnt add the gradents to the texts like you said to could have been a little more explanitory
Ram
December 14, 2008 at 11:59 am
this is a very great tutorial. Im using CS4 now. I can’t proceed after 4 steps after applying the perspective transform step. When I apply the gradient tool on the shape, nothing happens. Help me please. I love this design so much…
Andrew Wise
February 13, 2009 at 8:58 am
Thanks for the tutorial, I actually built my blog around your design template, thanks for the inspiration:
http://wisestartupblog.com
keidi
July 22, 2009 at 3:57 am
After reading your post. I can do my own effects now. Thank you.
elektrische step kopen
April 5, 2012 at 4:03 am
I arrived listed here to learn about a little something entirely different than the things I could. I adore in order to digest as a lot brand-new information as practical, it becomes the best aspect about life. People include a web site likewise, click on the connection to come on by way of as well as see exactly what you are embracing.
home page
April 6, 2012 at 10:22 am
My spouse and i felt now satisfied that Jordan could do his preliminary research through the precious recommendations he discovered using your web site. It is now and again perplexing to just possibly be offering tips and tricks that many some other people could have been making money from. And we discover we have the website owner to appreciate because of that. The most important illustrations you’ve made, the easy website navigation, the relationships you will help foster – it’s got all astounding, and it’s assisting our son in addition to our family consider that that subject matter is awesome, and that is unbelievably indispensable. Many thanks for all!
Eloise Bendas
April 9, 2012 at 4:04 pm
Internet marketing thankful for your blog post. Truly thank you! Awesome.