Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.
Photoshop CS6 is packed with new features that will help you create better interface designs. In this tutorial we will utilize Photoshop's new vector editing and stroke capabilities to create an administrator dashboard interface. We will also take advantage of Photoshop's new snap to pixel grid feature to help create crisp and clean web graphics. Let's get started!
The following assets were used during the production of this tutorial.
Step 1: Preparing Canvas
We are going to use 960 grid with 12 column layout from 960.gs as framework for our design. Download the template file in zip format and then open 12 Columns Grid. Click eye icon on front of layer 12 Col Grid to hide it.
Click black and white circle icon to add new Adjustment Layer. Select Solid Color and choose white on the next dialog box.
Make new layer. Click Edit > Fill and select Use: Pattern. Use diagonal line pattern from PSDfreemium. Because this is CS6, let's try using its newest feature. Activate Scripted Patterns and select Symetry Fill.
Tone down the layer Opacity to 4%.
We want to sure that all the layers area organized carefully. So, let's start by grouping them in a logical order. Select both layers - background and pattern - and then hit Command/Ctrl + G to put them in group layer.
We don't need Background layer, so delete it by dragging it onto delete icon.
Select group layer. Hit F2 and then change its name. Hit Tab to automatically edit next layer. Change its name and then repeat this to next layer.
Step 8: Logo
Activate Rounded Rectangle tool. Draw a rounded rectangle shape with radius 10 px and width 2 columns. Place it on top right of the canvas. In the Option bar, set Fill color to #f16424 and Stroke to None.
Double click layer shape in the Layers Panel to Open Layer Style dialog box. Activate Pattern Overlay. Select pixel pattern from PSDfreemium. Reduce its scale and Opacity to give it a natural fabric texture appearance.
Make new layer above the shape. Activate soft brush and paint shadow on its upper side.
Alt - click between the logo base and its shadow. This will convert the layer into a Clipping Mask and place the shadow inside the logo.
Repeat the process a few times. You can add more layers if needed. Paint highlight on its lower side.
Make new layer under the logo. Command/Ctrl - click shape to make new selection based on its shape. Fill selection with black.
Apply Gaussian Blur filter. Click Filter > Blur > Gaussian Blur.
Hit Command/Ctrl + T to perform transformation. Right click and choose Warp. The transformation bounding box is divided into 3 x 3 boxes. Drag the lower box down. Hit Enter to accept the transformation result.
Draw smaller rounded rectangle shape. From the Option Bar, set its Fill to none and Stroke to white with size 1 pt.
Open the Stroke Options and then select dashed preset. Click More Options to edit the dashed line settings.
In the Layers panel, double click its layer to open Layer Style dialog box. Activate Drop Shadow, set its Angle to 90°, activate Use Global Light, set its size to 0 px and distance 1 px.
Activate Rectangle tool and click once on the canvas. On the dialog box, set its size to 6 x 30 px. Click OK to start making the shape.
Click its Fill box in the Option Bar. Select Gradient and set its color from #dfdfdf to #ffffff.
Draw another rectangle path inside the logo. Double click its layer in the Layers panel and then activate Drop Shadow.
Add Drop Shadow to the layer shape.
Below is the result at bigger magnification. As you can see that so far our vector shape is always crisp. There is no half pixel! This is thanks to the vector snapping feature in Photoshop CS6. You can deactivate this feature if you want to from the Preferences dialog box - still I have no idea why anyone would do that.
Add text inside the logo. We can add contrast onto the text by simply change some of the character to bold.
Add another Drop Shadow onto the text.
Step 25: Main Content Background
Activate Rectangle tool and then draw a rectangle as the main content background. Set its width to 800 px, Fill: #eeeeee, and Stroke: #cccccc, Size: 1 pt.
Add Outer Glow with following settings.
Add a triangle shape and a rounded rectangle. Set their path mode to Combine Shapes.
Add text on the tab to add its title. Add small statistic icon made from some small rectangles.
Step 29: Main Graphic Background
Draw a white rectangle shape as a base for our main graph. Set its width to 8 columns. Make sure to set its Stroke to None. Add Layer Style Outer Glow.
Hit Command/Ctrl + J to duplicate shape. Add a big rectangle shape on its lower part and set its mode to Subtract Front. Add Gradient Overlay.
Draw a rounded rectangle. Set Fill to White without stroke. Use same Outer Glow and place it behind previous shape.
Make new layer between those two shapes. Make an elliptical selection and then fill it with black. Deselect (Command/Ctrl + D) and then soften it by adding Gaussian Blur.
Activate Type tool. Add section title.
Activate line tool and then draw a 1 px line. Set its stroke color to #e4e4ee4.
Here's the difference before and after adding the line.
Step 35: Start Drawing Line Graph
Draw a rectangle. Set its Fill to None and Stroke to #cccccc.
Select dashed Stroke type from the Option Bar. Click More Options and set Dash and Gap to 4 and 2.
Draw 1 px horizontal line with Stroke #cccccc. Select dashed stroke.
Activate Path Selection tool and select line path we have just made earlier. Hit Command/Ctrl + Alt + T to duplicate and transform it. Hit Shift + Right Arrow twice to move it 20 px to the right. Repeat the transformation and duplication process by hitting Command/Ctrl + Shift + Alt + T.
Keep repeating the process until the rectangle is filled with columns.
Reduce layer's Opacity to 30%.
Repeat previous steps but this time with horizontal lines.
Below is the result. Now, we have subtle grid on the statistic background.
Add values on both axis, x and y.
Activate line tool and draw a 1 px line on the grid. Set its Stroke color to #f16424.
Shift - drag to add more line. Keep adding more lines until we have a complete line chart.
Draw a small circle shape and place it right on the line chart. Set its fill to white and same stroke to the line's fill color.
Double click the circle shape layer and activate Layer Style Stroke. Set its color to White and Position to Outside.
Select the circle path using Path Direction tool and then Alt - drag it to duplicate it.
Use same steps to draw another line chart. This time use different color and set its Stroke Options to dashed.
As in previous line chart, add circles on each line segment.
On top of the chart, add chart legend. You just simply add a short line using same properties as the line chart and add a short description.
Draw a rounded rectangle. Set its Fill to #eeeeee and Stroke to #cbcbcb.
Add Layer Style Inner Shadow and Gradient Overlay.
Draw a rectangle shape on center of the rounded rectangle shape. You can use any color for its Fill. Set its Stroke to None. Reduce its Fill to 0%. Add Layer Style Gradient Overlay.
Draw 1 px line with color #cbcbcb on its left and right side.
Add time range selection. You can see that the text with different background is now in active condition.
Step 53: Using Character Styles
Let's use Character Styles to define our default character. This feature is a simplied version of Character Style in Adobe InDesign. If you frequently use InDesign you will instantly recognized it.
Open Character Styles panel and then click new icon. In the dialog box, set its Font Type to Arial Regular, Size to 12 pt, and Color to #767676. We are going to use this character style in most of the text. That's why we will also name it as Default Character Style.
Let's apply this Character Style to the text. Activate Type tool, select the text and then click the Character Style to apply it.
What if we want to save properties from existing text as a Character Styles? Let's do this to values on the graph axis. Make new Character Styles. Select the text and click Redefine icon.
Double click character style to edit its Options. Change its name. Apply this Character Style to all value on both axis.
The nice thing about Character Style (and Paragraph Style too) is you can simply edit it to edit every text that uses that Style. Here's an example. Let's edit graph axis --a character style that we made earlier for every value on both axis. Double click it and change its font type and size.
Step 58: Tooltip
Activate Rounded Rectangle tool. Draw a rounded rectangle and add a small triangle on its left side. Set its Fill: #f1f2f2 and Stroke: None.
Double click the layer in Layers panel and add black Stroke. Maybe you're asking, why don't we use Stroke option straight from its property? The answer is in Layer Style Stroke you can change the Stroke's Opacity. That's something that you still can't do on Photoshop CS6. Also, add Outer Glow and Gradient Overlay.
Duplicate shape and change its Fill color to #f16424. Remove its Layer Style. Add rectangle path on its lower part and set its mode to Subtract Front Shape.
Add layer Style Stroke and Gradient Overlay to the shape.
Draw 1 px vertical line. Set its Fill color to black. Add Layer Styles Stroke. Reduce the layers Opacity to 8%.
Add small title on the shape. Save the character property as a Character Styles. Add Layer Style Drop Shadow.
Add another title on the other side. Use same Character Styles and same Drop Shadow.
Add some percentage inside it. It's always a good idea to save it as Character Styles. This way, you can easily edit its appearance from the Characters Styles panel.
Activate polygon tool and set its Side to 3 in the Option Bar. Draw a small triangle pointing upward. Set its Fill: #c1c1c1 and Stroke: None.
Add Layer Style Inner Shadow.
Add a small circle and another triangle shape - pointing downward this time. Use same color and Layer Style.
Add percentage number. As usual, make sure to save its Character Style.
The data is positive. So, let's emphasize it by activating the up arrow. Change its shape Fill color to #4ff25d.
Duplicate the number for another data.
Step 69: Smaller Graph
Draw similar section for smaller graph. You can use same techniques explained above. Make sure to use smaller text size on the title.
Draw a blue 1 px line inside the grid. Set its stroke options to dashed.
As in the main graph, add circle on each point.
Activate Pen tool. Draw a new shape covering the line connecting it to x axis. Use same color as the line. Place the shape behind the circles.
Tone down the Opacity to 50%.
Add percentage on its side. In this smaller graph, we also want smaller text percentage size.
Add another graph.
Step 75: Inactive Main Tab
Currently, we are working on Statistic Tab. Let's add another tab and put them in inactive condition. Duplicate Statistic tab background we made in Step 25 - 27. It will be helpful if you hide the Statistic Tab afterward. Change its Fill and Stroke color to #c1c1c1. Delete small rectangle on its left side. Move top rounded rectangle to the right.
Add a simple icon made from a circle with no Fill and Stroke: #646464 with an i inside it.
Bring back the Statistics tab. Draw another inactive tab if needed.
Step 78: Sidebar Menu
Activate Rectangle tool and draw a rectangle behind the main tab. Set its Fill to #eeeeee and Stroke to #cbcbcb.
Draw a rounded rectangle. Set its fill to a gradient from #d6d6d6d to #f3f3f3 and Stroke #c1c1c1. This is going to be background for an inactive menu.
Duplicate the rounded rectangle. Change its color to Fill gradient from #ef6526 to fa834d and Stroke: #f16424. This one is used for active menu. Make sure to place it under small triangle of the Statistics tab.
Duplicate the first rounded rectangle to make more background for inactive menus.
Add text on the button. Double click its layer to add Layer Style Drop Shadow. For inactive menu, use dark text and light drop shadow.
For active menu, use white text and dark Drop Shadow.
Step 84: Search Box
Draw a rounded rectangle. No need to worry about its Fill or Stroke.
For its Fill, let's use same gradient from previous sidebar menu. Activate Path Selection too and select the shape. Right click and choose Copy Fill.
Return to the new shape, right click it and choose Paste Fill.
Open Fill option from the Option Bar and click icon under the gradient preview to flip its gradient direction.
Repeat same process to copy Stroke setting.
Add Inner Shadow with following settings.
Activate Type tool and white button label. Add Layer Style Drop Shadow.
Add a small triangle pointing downward. Fill: #eeeeee and Stroke: None. Add same Drop Shadow as the button label.
Add a 1 px line separating label and arrow. Set its color to #b04312 and then add a light Drop Shadow with angle 180°.
Let's add a mini magnifier icon on the button. Start by drawing a circle path with size 10 x 10 px. Set its Stroke to White, with Size: 2 pt, and Fill to None.
Add a 2 point line next to circle with 45° angle.
Again, add same Drop Shadow to the magnifier icon.
Draw a rounded rectangle next to the button. Use Fill gradient from #ededed to white and 1 pt Stroke #c1c1c1.
Add small text inside the shape. We want it to be subtle. So, we use a very light gray (#b0b0b0).
Let's add another mini icon. Start by drawing a small circle shape and then add a plus sign made from two rounded rectangles. Set the plus sign mode to Subtract Front Shape. Select the sign shape using Path Selection tool and then rotate it 45°
Finally! We have drawn a vector graph completely in Photoshop. This was very difficult to do in previous versions of Photoshop but as you can see, Photoshop CS6 really helps streamline our workflow. I hope you enjoyed these new techniques and this tutorial. Thank you for reading.