Interface Design Tutorial – Design a Beautiful Dashboard Template in Photoshop

- - Tutorials

Hey there, in this web interface design tutorial, I will walk you step by step through the process of designing a beautiful and professional dashboard template using adobe photoshop from scratch, we are going to use different techniques to get pixel perfect shapes and crisp look, i will also show you how to keep your layers and groups well organised.

Final Result

Final Result

Resources :

– icons.
– font.

Setting up The Document :

As always before we start a new project, we need to changes some default settings which are global lighting, snap to pixels option and change type unit from points to pixels.

Global Lighting :

Go to “Layer > Layer Style > Global Light” .

Change the Angle to 90° then click OK.

global-lighting2

Snap To pixels :

If you are using photoshop CS5, press “U” to Activate the “Rectangle Tool”, then click the “Geometry Options” arrow in the option bar as shown below, then check “Snap To Pixels”.

If you are using photoshop CS6, go to “Edit > Preferences > General”, then check “Snap Vector Tools and Transforms to Pixel Grid”.

Type Unit :

Go to “Edit > Preferences > Units & Rulers…” and change the type unit from points to pixels.

Tutorial :

Hit Ctrl + N to create a new photoshop file or go to “file > New”.

Set the width to 1340px, the height to 935px, Resolution to 72 and the Color Mode to RGB.

Double click on the background layer in the layers panel then click “OK”.

Change the background color to #f6f6f6.

Header :


Next we will create the header, to keep our document well-organized, create a new group by clicking the “Create a New Group” icon.

Double click on the group, a new window will open, change the name to “Header” and the color to red.

Select the “Header” group in the layers panel, activate the “Rectangle tool”, draw a 1340x80px rectangular shape and fill it with the color #353535.

To keep our elements well aligned we need to add guides to our canvas, for that go to “View > New Guide”, set the Orientation to Vertical and Position to 120px.

Logo :

Now we will create a the logo for our dashboard, we are going to use a polygon shape to create the logo. Create a new group in the layers panel inside the “Header” group and name it “Logo”.

Select the “Rectangle Tool” from the toolbar, draw a 120x80px rectangle , fill it with the color #282828.

Activate the “Polygon Tool”, set the sides to 8, draw a 52x52px polygon and fill it with the color #353535.

Activate the “Direct Selection Tool”, select the top anchor point of the polygon, using the “Top Arrow” key, move the top anchor point 10px to the top and align it vertically and horizontally as the image below.

Top Menu :

Let’s add another guide to our canvas, go to “view > New Guide”, set the Orientation to Vertical and the position to 1320px.

Create a new group inside the “Header” Group and name it “Top Navigation”.

With the “Top Navigation” group selected, press “T” key to activate the “Horizontal Type Tool”, write the navigation menu items, and set the character settings as fallowing :

– Font : Open Sans
– Size : 14pt
– Font Weight : Bold
– Anti-aliasing : Sharp
– align : Left
– Color : #e7e7e7

Now we will create a small arrow for the profile information, for that select the “Rectangle Tool” from the toolbar, hold down the “Shift” key, then draw a 10x10px rectangle and fill it with the color #e7e7e7.

Select the rectangular shape layer we just created.

Press Ctrl + T, set the Rotation value to 45° then hit Enter Key.

Activate the “Direct Selection Tool” in the toolbar or press “A”, select the top anchor point of the rectangle.

Activate the “Pen Tool” from the toolbar or press “P”, delete the top anchor point and align the arrow vertically and horizontally.

Next we will add the profile image holder, select the “Ellipse Tool” and draw a 35x35px, make sure to align it.

Go to “File > Place”, choose a picture and place in the ellipse shape.

Right click the picture layer and select “Create Clipping Mask”.

Now we are going to separate each navigation menu item with a separator, Create a new group inside the “Top Navigation” group and name it “Separators”.

With the “Separators” group selected, activate the “Rectangle tool”, draw a 1x15px rectangular shape, fill it with the color #232323 and align it horizontally and vertically with the first two navigation menu items.

Double click the separator layer in the layers panel or right click and select “Blending Options” from the menu that appears.

Apply a “Drop Shadow” style with the setting in the following image.

Select the separator layer and hit Ctrl + J to duplicate the layer and align it as shown in the image below.

Left Menu :

Next we will create the left navigation menu, Create a new group, name it “Left menu” and change it’s color to orange.

With the “Left Menu” group layer selected, activate the “Rectangle Tool” by pressing “U”, draw a 120x855px rectangle, fill it with the color #353535 and align it to the left as the image below.

Inside the the “Left Menu” group create new four groups and name each group as following “Dashboard”, “Messages”, “Analytics” and “Settings”.

Using the “Rectangle Tool” draw four 3x121px rectangular shapes, fill each shape with a color from your choice, place each one in it’s own group layer and align them as shown in the image below.

We need separators to separate each navigation menu item, activate the “Rectangle Tool”, draw four 1201px rectangular shape, fill them with the color #232323 and align each one like the image below.

Next we will create the nice engraved effect on the four separators. Duplicate the four separators we created previously, fill them with the color #3f3f3f, move them 1px to the bottom and place the layers to the end of the groups, as show in the image below.

Place your favorite icons inside each menu item and change the icons color to #5d5d5d.

Write the title for each menu item, place the titles 10px below the icons, and apply fallowing settings to the characters:

– Font : Open Sans
– Size : 14pt
– Font Weight : Bold
– Anti-aliasing : Sharp
– align : center
– Color : #5d5d5d

Now we are going to create the hover effect for the navigation menu, activate the “Rectangle Tool” by pressing “U”, draw a 120x120px rectangle, fill it with the color #3f3f3f, and place the layer at the end of the group.

Change the icon and the menu title color to white(#ffffff).

Hit U to select “Rectangle Tool”, draw a 10x10px rectangle, press Ctrl + T and rotate the shape 45°, fill it with the color #f6f6f6 and align it as shown in the image below.

Time to add the little notification bubble to message menu item, create a new group inside the “Messages” group and name it “Notification” .

Select the “Ellipse Tool” from the toolbar, draw a 25x25px circle, fill it with the color #e64343, align to the top left corner of the message icon.

Using the “Horizontal Type Tool” write a number inside the circle and apply the following setting to the text number:

– Font : Open Sans
– Size : 16pt
– Font Weight : Bold
– Anti-aliasing : Sharp
– align : center
– Color : #ffffff

Main section Design :

Time to create the main section, but before we need to add some guides to our canvas, for this section we need eight guides, go to “View > New Guide” and set the following guidelines :

1 – Orientation : “Vertical” & Position : “140px”
2 – Orientation : “Vertical” & Position : “720px”
3 – Orientation : “Vertical” & Position : “740px”
4 – Orientation : “Horizontal” & Position : “80px”
5 – Orientation : “Horizontal” & Position : “100px”
6 – Orientation : “Horizontal” & Position : “528px”
7 – Orientation : “Horizontal” & Position : “548px”
8 – Orientation : “Horizontal” & Position : “915px”

Create a new group name it “Main” and give it a yellow color.

Visitors section Design :

Create again another group named “Visitors Graph” inside the the “Main” group.

With the “Visitors Graph” group selected in the layers panel, pick the “Rectangle Tool” by pressing “U”, set the color to white (#ffffff) and draw a 580x428px rectangle, align the rectangle with the guides we added previously.

Hit “T” key to activate the “Horizontal Type Tool” and add the title e.g “VISITORS”(all caps), place it 20px from the top and 20px from the left of the guides, apply the following settings to the title characters:

– Font : Open Sans
– Size : 18pt
– Font Weight : Regular
– Anti-aliasing : Sharp
– align : Left
– Color : #7d7d7d

Now let’s create the graph, create a new group inside the “Visitors Graph” group and name it “Values”.

With the “Values” group selected, press “U” key, select the “Line Tool” from the option bar and set the weight to 1px.

Change the color to a light gray(#edecec), draw a 505px horizontal line, place it 45px below the title and 20px from the right of the white shape.

Duplicate the gray line and move it 60px to the bottom, duplicate again the line 4 more times and repeat the same process with a horizontal space of 60px between each line.

With the “Values” group still selected, Press “T” to activate the “Horizontal Type Tool”, add the values to horizontal line, place the value 10px to the right of the horizontal lines, then apply the following setting to the characters :

– Font : Open Sans
– Size : 14pt
– Font Weight : Bold
– Anti-aliasing : Sharp
– align : right
– Color : #a5a5a5

Now let’s create the horizontal lines for our graph which represent days of the week, but first create a new group named “Days” inside “Visitors Graph” group.

Selected the “Days” group, hit “U” and select the “Line Tool” from the option bar, set the weight to 1px and the color to #edecec, draw a 10px vertical line and place it 65px from the left side of the last horizontal line(starting from the top first line).

Duplicate the vertical line six times, align the lines vertically with a space of 65px between each line, as shown in the image below.

Activate the “Horizontal Type Tool” by pressing “T” key, write the days of the week Abbreviations, align and center them horizontally with the vertical lines we added in the previous step, then place them 10px below the x axis(last horizontal line starting from the top) as shown in the image below.

Let’s the graph line to the graph, first create a new group named “Graph Line”, place it inside “Visitors Graph” group.

With the “Graph Line” group selected, press “U” to activate the “Line Tool”, set the weight to 1px, color to #d2d2d2 and draw the graph line as shown below.

Press “U” and select the “Ellipse Tool” from the option bar and set the fill color to #2bc191.

Draw a 12x12px ellipse shape and place it on the graph line as shown in the screenshot below.

Double click the ellipse shape layer, select “Stroke” style and apply the following settings.

Duplicate the ellipse five more times and place them on graph line as below.

Time to add the tooltip to our graph line point for the hover state, first create a new group named “Tooltip” and place it inside the “Graph Line” Group.

Activate the “Ellipse Tool” by pressing “U”, set the fill color to #1c8866, and draw a 20x20px ellipse shape and place in the graph line as below.

Double click the ellipse shape layer in the layers panel, select “Stroke” and apply the following setting(we used a white color #fffff for the fill).

Press “U” key, select the “Rectangle Tool” from the option bar, set the color to white (#ffffff) and draw a 90x30px rectangular shape.

Select the vector mask of the rectangular shape we just created in the layers panel.

Activate the “Rectangle Tool” by pressing “U”, set the fill color to white(#ffffff) and draw a 13x13px rectangle, center the small rectangle with the big rectangle we created previously as show below.

Select the small rectangle with the “Path Selection Tool”, press Ctrl + “T” and rotate it 45° and place 3px below the big rectangle.

Right click the tooltip shape layer and choose “Blending option…”.

Select “Stroke” and apply the following setting(the color used for the fill type is #e8e7e7).

Select the “Horizontal Type Tool”, write some text inside the tooltip e.g. “Wed – 275”, place 10px from the top and 10 from the left side of the tooltip then apply the following settings for characters:

For “Wed -” part :
– Font : Open Sans
– Size : 12pt
– Font Weight : Regular
– Anti-aliasing : Sharp
– Algin : left
– Color : #9f9f9f

And for “275” part :
– Font : Open Sans
– Size : 12pt
– Font Weight : Bold
– Anti-aliasing : Sharp
– Algin : left
– Color : #18dc4a

Press “U” key then select the “Custom Shape Tool” from the option bar, choose the arrow shape for the shape and draw a small arrow, fill it with a green color(#18dc4a), align it with the tooltip then place it 10px from the right as shown in the image below.

Next we will create the filter field for our graph, create a new group rename it to “Filter” and place it inside “Visitors Graph” group.

With the “Filter” group selected, activate the “Rounded Rectangle Tool”, set the fill color to white(#ffffff), draw a 60x25px rectangle, place it 20px from the top right side and 20px from the right side as shown in the screenshot below.

Right click the rounded shape layer and select “Blending Option…” from the menu that appears, check “Stroke” and apply the following settings(the color used for the fill type is #d0d0d0).

Select the “Horizontal Type Tool” by pressing “T” key, Write the word “Days”, align it vertically with the shape and place it 10px from the left, apply the following settings to the characters :

– Font : Open Sans
– Size : 12pt
– Font Weight : Regular
– Anti-aliasing : Sharp
– Algin : left
– Color : #b7b7b7

Let’s add a little arrow to our filter field, Press “U” key and select the “Line Tool” from the option bar, set the weight to 1px and the fill color to #d0d0d0, draw a line as shown in the image below.

Duplicate the shape layer, press Ctrl + “T”, click right and select “Flip Horizontal” from the menu that appears, move the duplicated shape to right until you get a complete arrow.

Select the line shape layer we just duplicated and press Ctrl + “C” to copy the shape layer.

Delete the line shape layer we just copied, then Select the vector mask of the original line shape layer(left part of the arrow layer) and press Ctrl + “V” to past the right part of the arrow.

Align the arrow vertically with the filter field and place it 8px from the right side.

Subscriptions section Design :

In this step we are going to create the “Subscriptions” graph, go to the layers panel, right click on the “Visitors Graph” group and select “Duplicate Group…”, change the name to “Subscriptions Graph” then hit OK.

Align the “Subscriptions Graph” with the guides we created previously.

Change the title to “SUBSCRIPTIONS”(all caps), rewrite the days Abbreviations(x axis) to the months Abbreviations, rename the filter to “Months”, then create a new group named “Graph” inside the “Subscriptions Graph” and delete the “Graph line” group.

Now let’s create the graph bars, first select the “Graph” group in the layers panel.

Activate the “Rectangle Tool” by pressing “U”, set the fill color to #2bc191, draw a 31x190px rectangle(the height of the bars doesn’t matter in this step), and align it vertically with the first month in the x axis.

Create six more rectangular shape with a width of 31px and different height, then align each bar vertically with each month in the x axis, with a space of 35px between each bar.

Messages section Design :

Now let’s move to the messages section, create a new group called “Messages” inside the “Main” group.

With the “Messages” group selected, press “U” to activate the “Rectangle Tool”, set the fill color to white(#ffffff), draw a 580x376px rectangle and align it with the guides we created earlier as shown in the screenshot below.

Activate the “Horizontal Type Tool” by pressing “T” key, add the title “MESSAGES”(all caps), place it 20px from the top and 20px from the left, apply the following settings to the title characters:

– Font : Open Sans
– Size : 18pt
– Font Weight : Regular
– Anti-aliasing : Sharp
– align : Left
– Color : #7d7d7d

Now create a new group named “M1” inside the “Messages” group.

Press “U” key then select the “Ellipse Tool” from the option bar, set the fill color to a gray color(#d3d3d3), draw a 40x40px ellipse shape and place it 40px below the title and 20px from the left side.

Double click the ellipse shape layer, select stroke then set the fill type color to white(#ffffff) and apply the settings shown in the image below.

Let’s add the avatar image, go to “File > Place…”, choose a picture you like, using the move tool place the image in the center of the ellipse(image holder) we created in the previous step.

Right click the image layer in the layers panel then select “Create Clipping Mask”.

Select the “Horizontal Type Tool” by pressing “T”, write the author name e.g.”Jane Doe” and place it 20px from the Right side of the author image, use the settings below for the characters.

– Font : Open Sans
– Size : 14pt
– Font Weight : Bold
– Anti-aliasing : Sharp
– align : Left
– Color : #4f4f4f

Now add the setting icon, and place it 10px from the right side of the author name.

Press “U” to select the “Horizontal Type Tool”, add a small paragraph of dummy text, place it 20px below the author name and apply the following settings to the paragraph characters.

– Font : Open Sans
– Size : 13pt
– Font Weight : Regular
– Anti-aliasing : Sharp
– align : Left
– Color : #7a7a7a

Duplicate the “M1” group two times, align the two message elements as shown in the image below and leave a space of 40px below each message element.

Rename the groups in the layers panel to “M2” and “M3”, change the names and the avatars.

Select the “Line Tool”, set the weight to 1px, change the fill color to #d3d3d3, and draw a 1x200px vertical line, align it horizontally with the authors images and place it’s layer below the three messages groups(“M1”, “M2” and “M3”) we created in previously.

Next we will ad the navigation to navigate through the messages, create a new group named “Navigation” inside the “Messages” group.

Create another new group called “Next” inside the “Navigation” group.

With the “Next” group selected, press “U” key and select the “Rounded Rectangle Tool” from the option bar, set the radius to 2px, change the color to white(#ffffff), draw a 20x20px rounded rectangle and place it 20px from the top and 20px from the right of the messages section.

Double click the rounded rectangle shape layer, select “Stroke” style, change the fill type color to #d0d0d0 and use the setting shown in the image below.

Duplicate the small arrow we created previously for the filters in the “Visitors” section, place it in the center of the rounded shape and change it’s color to #d0d0d0.

Duplicate the “Next” group in the layers panel, and rename it to “Previous”.

Select the “Previous” group in the layers panel, then press Ctrl + “T”, right click anywhere in the canvas and select “Flip Vertical”, place the previous button 5px from the right of the next button.

To make the previous navigation button look inactive, change the arrow fill color to #f0efef, then double on rounded rectangle shape layer in the layers panel, select “Stroke” and change the fill type color to #f0efef.

Overview section Design :

Next step is to create the overview section, go to the layers panel and duplicate the “Messages” group and rename it to “Overview”, align it with the guides we add previously as shown in the image below.

Delete the following groups “Navigation”, “M1”, “M2”, “M3” and the vertical gray line layer, then change the section title “Overview”.

Create a new group named “Followers” inside the “Overview” group.

Now let’s create 4 circle graphs for our overview section, select the “Ellipse Tool” by pressing “U” key, set the color to white(#ffffff), draw a 126x126px ellipse and place it 36px below the title and 70px from the left side.

Double click the ellipse shape layer, check “Stroke” then change the fill type color to #f1f1f1 and apply the setting shown in the following image.

Select the “Ellipse Tool”, set the color to blue(#1ad2d2), draw a 130x130px ellipse shape and center it with the ellipse we created in the previous step.

Again create a new white(#ffffff) 110x110px ellipse shape and place it in the center of the blue ellipse we created in the previous step.

Go to the layers panel and select the vector mask of the white ellipse we just created, press Ctrl + “C” to copy the vector mask.

Delete the white ellipse shape layer, then select the blue ellipse shape vector mask in the layers panel.

Press Ctrl + “V” to past the vector mask to the blue ellipse shape vector mask.

Select the “Path Selection Tool” then select “Subtract from shape area(-)” icon from the option bar.

Now select the blue circle vector mask in the layers panel, activate the “Pen Tool” and press the “Intersect shape area” icon in the option bar.

With the “Pen Tool” and the blue circle vector mask select, draw a shape as shown below.

Activate the “Horizontal Type Tool”, set the text color to #4f4f4f, write “followers 34%” and apply the setting following to the text characters:

For “followers” text part :
– Font : Open Sans
– Size : 12pt
– Font Weight : Regular
– Anti-aliasing : Sharp
– align : Center

And for “34%” text part:
– Font : Open Sans
– Size : 30pt
– Font Weight : Semibold
– Anti-aliasing : Sharp
– align : Left

Duplicate the “Followers” group, place it 70px from the right guide as show below and rename the group to “Shares”.

Change the text to “Shares 60%”, use the “Pen Tool” tool to expand the Intersected shape by adding more anchor points and change the color of the circle from blue color to pink(#ed556e).

Repeat this same process to create two more graph circles to get the same result as the image bellow.

We’re done, you just learned new techniques on how to create a pixel perfect and beautiful user interface dashboard.

Your comments means a lot to us, please take time to write your feedback or questions(if you have any) in the comments section below, so we can keep making awesome tutorials.

Get Free Update !

Join our mailing list today and receive exclusive web design tutorials and high quality free web resources.

  • Marina Yak

    thank you so much !! it help me learn something new

  • Parijat Das

    Hi mate, nice tutorial. I just wanna know you have changed the global light at the start of tutorial to 90 deg. Any specific reason?