More on PSD Mock-ups for Website Design

Screen Shot 2013-04-09 at 12.06.11 PM

Settings for PSD comp

Screen Shot 2013-04-09 at 12.07.17 PM

change your workspace to pixels

Screen Shot 2013-04-09 at 12.10.11 PM

Layer Comps is found in the Window Panel

Screen Shot 2013-04-09 at 12.33.01 PM

Settings 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.

(Export: File=> Scripts => Export Layer Comps)

Links:
Adobe Photoshop * Layer comps.
GuideGuide.
Ode to the Option Key: 30+ Cool Option Key Shortcuts in Photoshop | Design Shack. (The class oohed and ahh-ed a little when Barry resized an image using the shift and option key!)

(Earlier Post Relating to This Project)

Advertisements

About KC

I am Katarina Countiss, a multimedia designer. I like blogs, games, art and technology. I am curious about how things are made.
This entry was posted in software. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s