- Under: Tutorials,
Design A Slick Reflective Header
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!
Want More Articles?
-
24 Perfect Photoshop Vectors
As graphic artists, we always feel the need for vectors to truly bring our designs to life. Sometimes, these vectors can be easy to find. Other times, it can be quite a daunting ta...
-
You Know You’re Addicted To Web Design If…
As the internet has come to dominate the way we as humans obtain information, connect with friends, and establish international relationships, the world of web design has bee...
-
Three Most Common Ways Web Designers Lose The Client
When Brian approached me about writing for Elite By Design, I immediately accepted. I've kept up with Elite By Design for awhile now, and it's an honor to be here as a gu...
-
Design A Smooth Web 2.0 Navigation
I know that this is my third navigation bar Photoshop tutorial, but I just couldn't help this one. The final product just looks too...smooth. This tutorial uses a lot of the same e...
-
21 Best Photoshop Text Effects
With modern web design and the growing art of graphic design, text is becoming a larger and larger focus for more and more artists. Text effects can portray a brand, a style, and a...
Share the love:
- Website: http://elitebydesign.com
- About: Brian is a blogger and web designer at Elite By Design. He has been blogging for over a year providing quality design-related articles for the community.
I have wanted one of these forever! THANKS for the great work
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.
It is a really good look. That will really enhance my designs. I need to put the shadow down too. Thanks.
thank you
keep up the good work
It’s so good, but have a problem with the shadow of Y and G. Thanks bro.
this is stunning thnx alot
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
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.
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
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.
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
wow… i think i’m gonna do this in my website.
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.
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!
i couldnt add the gradents to the texts like you said to could have been a little more explanitory
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…
Thanks for the tutorial, I actually built my blog around your design template, thanks for the inspiration:
http://wisestartupblog.com
[...] Design a slick reflective Header Ein Tutorial das reflektiv spielerein und 3 Dimensionalitäten demonstriert. [...]
[...] Design A Slick Reflective Header :: Elite By Design – [...]