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.
0 comments:
Enregistrer un commentaire