Multimedia Art and Design

More on PSD Mock-ups for Website Design

Settings for PSD compchange your workspace to pixelsLayer Comps is found in the Window PanelSettings for Mobile, with margins. Aim for 320px wide.

Barry said to make the canvas bigger than the website. Plenty of margin. Same with mobile, and shooting for 320px wide isn’t a bad thing. For hover states in photoshop comp land, find an arrow from Google search and size it to actual size in relation to the photoshop document.

He talked about the layer comps feature in some detail. A good thing about that is the toggle. You can switch different states of the page (different pages within the site, hover states, etc.) with a use of a toggle vs. having to turn on and off each layer group.

For photoshop comps, design the desktop first then take those layers and put it into a new mobile sized document (see above) and resize/restructure the elements. Barry says that you don’t have to put everything on the mobile document (lest it be 5000px long) but if there’s a thing that needs to be expressed, like a login page, that’s a good strategy.

And, don’t forget to zoom out. PSDs save the way you’re looking at it, so when sending off files to clients, make sure that you are looking at the webpage mock-up in a normal way before saving and closing it.