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:

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

• Free Web Vector Icons
• People chatting/Speech bubbles
• Universal Vector Icons 1
• Planning Vector Icons

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:

• Free Web Vector Icons
• People chatting/Speech bubbles
• Universal Vector Icons 1
• Planning Vector Icons

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:

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.

blog comments powered by Disqus