Designing in Adobe Photoshop is a different experience compared to building websites right in the browser. It requires an understanding of the various tools, effects, and positioning techniques. One major difference is how you would create interactions such as hover and click events.
In this tutorial I want to demonstrate how you might go about designing interactive states with Photoshop Layer Comps. These behave like document states where you can rearrange elements and save a snapshot of each particular style. I’ve also released my PSD file for free which you can download and modify for your own needs.
Getting Started
I’m creating a new document 1000px wide by 550px high. The dimensions don’t really matter but this should give plenty of space for the elements. I’ll be creating 1 button along with a horizontal nav menu with a dropdown sub-menu.
If you press CTRL/CMD+R this brings up the document rulers. I’ve dragged one vertical and one horizontal ruler to align directly with the center of the document. This isn’t necessary but it helps to see where each item relates to the overall document size.
The first layer is filled with white to create a background instead of transparency. Next I’ll create a new layer and choose the Rounded Rectangle tool. This will make our button which can be duplicated later for the other button states.
Creating the Button Design
In Photoshop CS5 or earlier the interface looks slightly different, but all of the same button styles work between versions. I’m using CS6 which groups together the vector mask and button color into one shape layer. They layer icon looks very different but these are the exact same thing and will work perfectly between different versions of Photoshop.
Click to drag out your rectangle or click once to bring up the shape dialog box for a more precise design. I’ve made the button 200px by 50px with a fill color of #93c34d. To change this color after making the rectangle just double-click on the shape layer.
Once positioning the button you might want to hide any grids & guides which are active. Then with the shape layer selected move to the bottom of the layers panel and click the “fx” button for layer effects.
Add these settings to your shape:
The gradient overlay & inner shadow use white so the button color can be easily changed by updating the shape’s fill. However the stroke color would still need to be edited manually to match a new color scheme.
For the text I’m using Helvetica Neue with the color #526733. To get the button text aligned just hit CTRL/CMD+A to select the entire document, then CTRL/CMD+click on both the shape and text layers. In the option bar you’ll notice alignment buttons for aligning to vertical & horizontal centers. Click both and then reposition the button using rulers/grids as needed.
Also I’ve created a new group named “Green Button” which contains the text and shape layer.
Button States
Next we should duplicate this button group to create a new group called “Green Button Hover”. Double-click on this new shape and change the fill color to #a8cd71. I’m also lightening the new text layer’s color to #637943.
This next green button will have a fill of #8baf57 along with a darker stroke of #70863f. The Inner Shadow has also been changed to remove the 1px glossy border and replace it with a darker shadow for the “sunken in” look. Just copy my settings below:
I’ll hide this active group so the original button is displayed. With both of these states complete we just need to create the navigation menu before moving onto layer comps.
Horizontal Nav Menu
I’m creating a new group called “Nav Bar” and drawing a regular Rectangle(not rounded) at 800px wide by 50px high. The fill color is #003663 and I’ve positioned this close to the top of the document.
I’ll create five new text layers with Helvetica to add links onto the menu. Press CTRL/CMD+’(apostrophe) to display grids for an easier text alignment. The links can say anything you like but try to use the following text settings:
So the nav bar itself is created and the links seem fine. Now we need another group inside the “Nav Bar” group called “Dropdown”. Be sure to drag this group above the text & rectangle layer, but still kept inside the parent group. Then create a selection around one of the links – in my example “portfolio” – and fill a new layer with white.
I’ll duplicate the original portfolio link and move this into the “Dropdown” group, then change the text color to #103350. Now we can hide the dropdown group to get the original menu or re-display it and still get the hover effect. Underneath this link item drag out another rectangle shape layer at 180px wide by 200px high.
This will contain the actual dropdown sub-menu links that appear when hovering. While still selecting this sub-menu rectangle apply the following Drop Shadow settings with a layer effect:
Using your grid type some menu text into the sub-nav rectangle. There is no perfect method of spacing so use your best judgement based on text size and how much space should appear between links. I’m using the same font styles from the menu except with a color of #697276.
Now toggle the “Dropdown” group closed and create another group inside “Nav Bar”. This will be called “Dropdown Hover” and only needs 2 layers. I’ll duplicate the very first sub-menu item in the list and move this duplicate into the “Hover Dropdown” group. Then I’ll draw a rectangle behind this text and fill with #253b4d.
How these layers are ordered on top of each other will be essential to get the design working properly. Each hover effect should be stacked on top of the lower element so that layers can be easily turned on & off without any editing.
Creating Layer Comps
If your layers and groups are structured properly we can now create the final layer comps. These are most important to developers who may not know how to use Photoshop and would prefer direct access to each individual state of the user interface.
In the Photoshop menu select Window -> Layer Comps and you’ll see one comp with the italicized text “Last Document State”. This will usually be selected as you make changes and toy around with the document. To create a new Layer Comp just click on the notepad icon at the bottom of this window pane. If you hover your mouse for a few seconds it should say “Create New Layer Comp”. But before creating the comps we need to hide/show the proper layers first.
I’ll start by hiding everything except the nav bar and the original button groups. This is how the page would look without any user interaction. Create a new layer comp with the name “Default”.
Then hide the original button and display the hover button group. This comp should be named “Button Hover”. Hide the hover group and then show the active button with a comp named “Button Clicked” or “Button Active”. Once this is done hide the active button to re-display our original button design. Now we just need 2 more comps for the navigation menu.
With the Nav Bar group open re-display the “Dropdown” group. This will show what it looks like when a user hovers onto the nav menu without hovering the sub-nav menu. Create a new comp named “Dropdown Menu”. Then show the sub menu hover group and create the final comp named “Dropdown Menu Hover”.
Now anyone can open this document and quickly switch between states without needing to manually show/hide individual layers or layer groups. This is a fantastic technique for web designers who often need to create various UI states for the same page elements.
Be sure to grab a copy of the free PSD file!
Source: http://ift.tt/1ANcNHv
No comments:
Post a Comment