Advertisement
Interface

Use New Features in Photoshop CS6 to Create an Administrator Dashboard Interface

by

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!


Tutorial Assets

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.


Step 2

Click black and white circle icon to add new Adjustment Layer. Select Solid Color and choose white on the next dialog box.


Step 3

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.


Step 4

Tone down the layer Opacity to 4%.


Step 5

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.


Step 6

We don't need Background layer, so delete it by dragging it onto delete icon.


Step 7

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.


Step 9

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.


Step 10

Make new layer above the shape. Activate soft brush and paint shadow on its upper side.


Step 11

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.


Step 12

Repeat the process a few times. You can add more layers if needed. Paint highlight on its lower side.


Step 13

Make new layer under the logo. Command/Ctrl - click shape to make new selection based on its shape. Fill selection with black.


Step 14

Apply Gaussian Blur filter. Click Filter > Blur > Gaussian Blur.


Step 15

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.


Step 16

Draw smaller rounded rectangle shape. From the Option Bar, set its Fill to none and Stroke to white with size 1 pt.


Step 17

Open the Stroke Options and then select dashed preset. Click More Options to edit the dashed line settings.


Step 18

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.


Step 19

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.


Step 20

Click its Fill box in the Option Bar. Select Gradient and set its color from #dfdfdf to #ffffff.


Step 21

Draw another rectangle path inside the logo. Double click its layer in the Layers panel and then activate Drop Shadow.


Step 22

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.


Step 23

Add text inside the logo. We can add contrast onto the text by simply change some of the character to bold.


Step 24

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.


Step 26

Add Outer Glow with following settings.


Step 27

Add a triangle shape and a rounded rectangle. Set their path mode to Combine Shapes.


Step 28

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.


Step 30

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.


Step 31

Draw a rounded rectangle. Set Fill to White without stroke. Use same Outer Glow and place it behind previous shape.


Step 32

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.


Step 33

Activate Type tool. Add section title.


Step 34

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.


Step 36

Select dashed Stroke type from the Option Bar. Click More Options and set Dash and Gap to 4 and 2.


Step 37

Draw 1 px horizontal line with Stroke #cccccc. Select dashed stroke.


Step 38

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.


Step 39

Keep repeating the process until the rectangle is filled with columns.


Step 40

Reduce layer's Opacity to 30%.


Step 41

Repeat previous steps but this time with horizontal lines.

Below is the result. Now, we have subtle grid on the statistic background.


Step 42

Add values on both axis, x and y.


Step 43

Activate line tool and draw a 1 px line on the grid. Set its Stroke color to #f16424.


Step 44

Shift - drag to add more line. Keep adding more lines until we have a complete line chart.


Step 44

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.


Step 45

Double click the circle shape layer and activate Layer Style Stroke. Set its color to White and Position to Outside.


Step 46

Select the circle path using Path Direction tool and then Alt - drag it to duplicate it.


Step 47

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.


Step 48

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.


Step 49

Draw a rounded rectangle. Set its Fill to #eeeeee and Stroke to #cbcbcb.

Add Layer Style Inner Shadow and Gradient Overlay.


Step 50

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.


Step 51

Draw 1 px line with color #cbcbcb on its left and right side.


Step 52

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.


Step 54

Let's apply this Character Style to the text. Activate Type tool, select the text and then click the Character Style to apply it.


Step 55

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.


Step 56

Double click character style to edit its Options. Change its name. Apply this Character Style to all value on both axis.


Step 57

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.


Step 59

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.


Step 60

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.


Step 61

Add layer Style Stroke and Gradient Overlay to the shape.


Step 62

Draw 1 px vertical line. Set its Fill color to black. Add Layer Styles Stroke. Reduce the layers Opacity to 8%.


Step 63

Add small title on the shape. Save the character property as a Character Styles. Add Layer Style Drop Shadow.


Step 64

Add another title on the other side. Use same Character Styles and same Drop Shadow.


Step 65

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.


Step 66

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.


Step 67

Add a small circle and another triangle shape - pointing downward this time. Use same color and Layer Style.


Step 68

Add percentage number. As usual, make sure to save its Character Style.


Step 67

The data is positive. So, let's emphasize it by activating the up arrow. Change its shape Fill color to #4ff25d.


Step 68

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.


Step 70

Draw a blue 1 px line inside the grid. Set its stroke options to dashed.


Step 71

As in the main graph, add circle on each point.


Step 72

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.

Add free pixel pattern from PSDfreemium.


Step 73

Tone down the Opacity to 50%.


Step 74

Add percentage on its side. In this smaller graph, we also want smaller text percentage size.


Step 75

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.


Step 76

Add a simple icon made from a circle with no Fill and Stroke: #646464 with an i inside it.


Step 77

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.


Step 79

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.


Step 80

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.


Step 81

Duplicate the first rounded rectangle to make more background for inactive menus.


Step 82

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.


Step 83

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.


Step 85

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.


Step 86

Return to the new shape, right click it and choose Paste Fill.


Step 87

Open Fill option from the Option Bar and click icon under the gradient preview to flip its gradient direction.


Step 88

Repeat same process to copy Stroke setting.


Step 89

Add Inner Shadow with following settings.


Step 90

Activate Type tool and white button label. Add Layer Style Drop Shadow.


Step 91

Add a small triangle pointing downward. Fill: #eeeeee and Stroke: None. Add same Drop Shadow as the button label.


Step 92

Add a 1 px line separating label and arrow. Set its color to #b04312 and then add a light Drop Shadow with angle 180°.


Step 93

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.


Step 94

Add a 2 point line next to circle with 45° angle.


Step 95

Again, add same Drop Shadow to the magnifier icon.


Step 96

Draw a rounded rectangle next to the button. Use Fill gradient from #ededed to white and 1 pt Stroke #c1c1c1.


Step 96

Add small text inside the shape. We want it to be subtle. So, we use a very light gray (#b0b0b0).


Step 97

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°


Final Image

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.

Related Posts