Glossy Black Panel With Photoshop
In this photoshop tutorial, we’re gonna draw a Glossy Black Panel! It’s a nice and simple technique and of course very useful in order to get used to glossy perceptions! You will also learn in this tutorial some nice selection techniques and shortcuts. As usual, I will show you the final result in the beginning:
Let’s Start:
1. Create a new photoshop blank image with a white background (Recommended dimension: 400×250). Then select the Rounded Rectangle Tool and set the foreground color to Black. Make a shape similar to the following:
2. Now, select the Elliptical Marquee Tool and create a selection similar to the following:
3. Invert the selection by pressing CTRL + SHIFT + I. The selection will look like the following:
4. Now, we will use the most useful shortcut in photoshop (at least for me): We want to select the intersection between the current selection and the rounded rectangle black shape that we drew in step 1. Hold CTRL + SHIFT + ALT and Click on the Preview Icon of the shape in the Layers panel. The selection should look like the following:
5. Press CTRL + SHIFT + N to create a new layer. On this new layer we will draw the glossy part of the panel. So, select the Gradient Tool, set the foreground color to White and drag the mouse from down to up:
6. You should get something similar to this:
7. Press CTRL + D to remove the selection:
8. Now, we will set the transparency of this layer to 20%. You can do that by editing the transparency of this layer from the Layers panel and here’s what you should see:
9. Let’s type some text with a font you choose and a white color:
10. In order to do a clean vector based reflection, we will duplicated the layer (Right Click on the Text layer in the layers menu and press Duplicate Layer). Now press CTRL + T to make some transformation with the new duplication. Drag the top of the selection down to get something simillar to this:
11. Move the selection up using the Up Arrow Key in your keyboard to reach this state:
12. Press Enter to validate the transformation. Then set the transparency level of this duplication to 20% the same way we did to the gradient layer to have something simllar to this:
13. Now, go the the menu Layer > Layer Style > Blending Options… and select the Gradient Overlay option. You should have the following settings:
14. And press OK to get this result:
15. And here’s the final result after I’ve added some shadow to the Rounded Black Shape (Specs: Distance=0, Size=5):
The purpose of this tutorial is to show you some useful shortcuts you can use frequently!
Stay Tuned 
on 2007-03-29 18:22:42
Very nice tutorial Mr Fusion !
Thank you
on 2007-03-29 21:25:17
Great tutorial , very useful … we want more & more tutorials
on 2007-04-01 10:14:56
[…] if you are into making your own computer graphics then Elie Khoury has a step by step illustrated lesson for you to draw a glossy black panel, using Photoshop, that […]
on 2007-05-05 01:56:48
Hi
You are The Best!!!
G’night
on 2007-05-06 14:02:14
man.. u’re our mentor!
all respect to You! ;):P
on 2007-06-20 14:15:58
rawa2?
that’s good..i like..
keep walking..
cheers..
on 2007-06-24 16:12:14
You are missing steps..
Good idea, bad explanation
on 2007-06-30 03:22:14
THIS TUTORIAL WAS A IG HELP IN MAKING THE GRAPHICS I WANTED FOR THE SITE CONCEPT I HAD IN MY MIND. THANX ALOT
on 2007-07-09 03:00:14
[…] last tutorial I wrote was “How to draw a glossy black panel with photoshop”. Now, we’re gonna do something a bit similar but more useful for websites and GUI designers. […]
on 2007-07-10 16:48:38
Hello
Very interesting information! Thanks!
G’night
on 2007-07-13 15:02:29
What was the Font and size you used for your text? =]
on 2007-07-13 15:09:19
I used Century Gothic!
on 2007-10-07 10:14:44
I’ve seen ‘em all - and this is the best and easiest - thanks so much! Where do I find more of your ’stuff’?
on 2007-10-07 11:47:00
thank you! check out http://www.ekhoury.com/category/photoshop/ for more tutorials of mine
on 2007-12-12 20:05:42
Great tutorial, thanks a lot
on 2007-12-15 08:49:49
Thanks a lot!
Great tutorial, well explained and easy steps to follow.
Merci beaucoup!
on 2007-12-24 08:29:38
Great Articles!
Please add the following Wordpress plugin so we can easily view your blog posts in a printable format.
http://downloads.wordpress.org/plugin/wp-print.2.20.zip
Thanks
on 2008-01-17 18:33:08
Cheers Mr Fusion, much appreciated.
on 2008-04-13 10:54:15
The coolest photoshop tutorial on the web! Thanks for sharing!
on 2008-04-26 18:10:50
Very nice and handy ty
in step 10 i also found anotehr way after pressing ctrl+t right click on ur text and flip vertical
on 2008-05-11 03:14:33
Detailed steps (Photoshop CS3):
1. Create a new blank image with a white background. Dimension: 400×250. Choose a black background color.
1.1. Press Ctrl + Shift + N to create a New Layer.
1.2. Select Rounded Rectangle Tool and make the rectangle black shape.
2. Select the Elliptical Marquee Tool to create a selection.
3. Invert the selection by pressing CTRL + SHIFT + I.
4. Hold CTRL + SHIFT + ALT and Click on the Preview Icon of the NEW LAYER in the Layers panel to select the intersection between the current selection and the rounded rectangle black shape.
5. Switch Foreground and Background colors (use X or mouse). Select the Gradient Tool. Press Ctrl + Shift + N to create another New Layer. Hold SHIFT and drag the mouse from down to up.
7. Press CTRL + D to remove the selection.
8. Set Opacity from the Layers panel to 20%.
9. Choose Type Tool and write some text. Select Move Tool to resize and move the text. Press Enter. Right Click on the text layer in the layers menu and press Duplicate Layer.
10. Press CTRL + T and drag the top of the selection down => the reflexion.
11. Move the selection (the reflexion) up using the Up Arrow Key in your keyboard.
12. Press Enter to validate the transformation. Then set the transparency level of this duplication to 20%.
13. Right click on the layer of the reflexion in the layers panel. Choose Blending Options. Select the Gradient Overlay option.
on 2008-06-13 22:58:36
Wow - fantastic tutorial! Very easy to follow, and great results.
My only lingering question is what is the font you use in this example?
on 2008-06-14 01:37:39
Thank you! I used the Century Gothic font.