How to design an admin skin/control panel in Photoshop

Oct 29th, 2010View Comments

Hello and welcome to another tutorial here on trendyTUTS.com. In this tutorial I will show you how to create an admin skin or a control panel template. I’m more than sure that this tutorial it will come in handy for web developers (hard coding programmers) :)

Here is my final result:

Admin Skin/Control Panel Template and PSD Tutorial

To create this template I will use the following vector icon sets:

Let’s start the tutorial
Open Photoshop and create a new document (1020 by 1150px)

Step 1

With Rectangle Tool create this 3 shapes

Step 2

I will select Ellipse Tool and I will make this shape on the top

Then I will go to Filter>Blur>Gaussian Blur here I will choose a radius of about 44px. I will lower the opacity for this shape as well. Here is my result

Step 3

I will select Type Tool and using Tahoma Font I will write this: “Admin Skin”
For Admin I have applied this layer styles:






My result

For “Skin” I have applied this layer styles:




As a tagline I will add “a design by trendyTUTS”
Here is my result for logo

Step 4

Next I will select Rounded Rectangle Tool with a radius of 10px I will create a shape and I will apply this layer styles:




My result

Step 5

Having Rounded Rectangle Tool selected I will create a smaller shape inside of the shape created on Step 4 and I will apply the same layer styles


Then from People chatting/Speech bubbles I will add an icon. Using Type Tool I will add some text also
Here’s my result:

Step 6

I will select Pen Tool and I will create this shape. I have created it in red to see how you need to create it. Normally it should be black #000000

Once you have something like this apply a Gaussian Blur (Filter>Blur>Gaussian Blur) of about 15px. You can lower the opacity to 40%.
Here’s my result

Step 7

Now we will create the navigation bar. Select Rounded Rectangle Tool (with a radius of 10px) and create the navigation over the shape created on Step 6. For the navigation bar I will apply this layer styles:




My result:

Step 8

I will select Type Tool and I will create the links for the navigation. For each link I have applied this layer styles:



My result

Step 9

From Premium Files, I will add some vector icons to my navigation bar

For the first icon (home icon), I will apply this layer styles:



For the rest of the icon, I will apply this layer styles:



My result for navigation:

Step 10

Next I will select Rectangle Tool and I will create a shape and I will apply this layer styles:



Then I will add some text with Type Tool and a vector icons, showing an iMac from Universal Vector Icons 1.

Step 11

I will duplicate Step 10 for about 13 times but I will use various icons from our Premium Files. I have used this packs:

Here’s my result:

Step 12

Next I will add an image showing a chart and on the left side of the chart I will create a table with stats. To create this table I have used Rectangle Tool and Line Tool.
Here’s my result:

Step 13

Under the chart I will create a big table. To create it I will use Rectangle Tool,Type Tool and Line Tool. Here is my result:

And here is my result for the entire layout:

Admin Skin/Control Panel Template and PSD Tutorial

Want to Download the Source File?

In order to download the source file you will need to become a Premium Member.

Already a premium member? When you click on the download link please make sure that you are logged in.

The tutorial is finished now. I hope your result is the same with mine, if not better! If you’d like to know when we post a new tutorial, you can follow trendyTUTS.com on twitter.

  • Ikreknin

    Wow! Very interesting! Thanks a lot!

  • http://trendytuts.com admin

    Your welcome, hopefully this admin skin it will help you on your ongoing project :)

  • Mor Shemesh

    I really liked the top sinew bar :)

  • http://pulse.yahoo.com/_3VBXVSUS7AUVMIVL3RQ4A66AE4 Ferocious

    Brilliant

blog comments powered by Disqus