As designers we are often lured into the temptations of bad photoshop practices. We’re designing in the moment and don’t think about the consequences. But the reality is your clients’ requests to make a design more ‘edgy’ will lead to many extra hours of theming if not done right. The seemingly endless rounds of revisions caused by “I know it when I see it” type feedback, will take so much longer when you’re using the wrong tools. Following ‘The 10 Commandments of Photoshop Mockups’ will get you well on your way to eternal designer bliss.
Welcome to “The 10 Commandments of Photoshop Mockups”
Having a good solid workflow is all about efficiency. Thes commandments come from years of working with Photooshop and making thousands of revisions. How many of you get the design right the first time. I'm not just talking about client revisions. I'm talking about personal revisions. It's much like molding clay. A lot of the time I'm just throwing up on the page and then moving things around until it all looks right. The colors compiment the logo and photography and design hierarchy takes shape. The following commandments are the dos and don'ts of a fast and efficient workflow. The goal is to deliver the best product in the shortest period of time.
Having a good solid workflow is all about efficiency. Thes commandments come from years of working with Photooshop and making thousands of revisions. How many of you get the design right the first time. I'm not just talking about client revisions. I'm talking about personal revisions. It's much like molding clay. A lot of the time I'm just throwing up on the page and then moving things around until it all looks right. The colors compiment the logo and photography and design hierarchy takes shape. The following commandments are the dos and don'ts of a fast and efficient workflow. The goal is to deliver the best product in the shortest period of time.
Why Photoshop? How many of you were in Mason's session yesterday? I think his technique is great, but I have a hard time working that way. I'm a mouse jockey. Working in Photoshop is second nature for me. Fireworks is an excellent tool also. It's made great strides in the last couple versions.
Why Photoshop? How many of you were in Mason's session yesterday? I think his technique is great, but I have a hard time working that way. I'm a mouse jockey. Working in Photoshop is second nature for me. Fireworks is an excellent tool also. It's made great strides in the last couple versions.
Read this aloud.
Read this aloud.
Why Photoshop? How many of you were in Mason's session yesterday? I think his technique is great, but I have a hard time working that way. I'm a mouse jockey. Working in Photoshop is second nature for me. Fireworks is an excellent tool also. It's made great strides in the last couple versions.
Organizing helps you design more efficiently. It keeps frustration levels low because you don't have to spend as much time looking for elements. It will keep your themer from taking your name in vain when they open your file. It makes it easier for other team members to understand your file and your intentions.
Organizing your file has almost everything to do with your layers palette. Point out why one is better than the other.
SWITCH to PS Show BAD File show the layers Show GOOD File collapsed Demo Toggling Groups Demo Moving Groups Point out order and hiearchy and how it mimics HTML Switch to PP
Switch to PS Navigate to Layers > Panel Options Uncheck Add 'copy' to copied Layers and Groups Switch to PP
Mention these Frameworks. Using these can make the theming process go a lot faster. All the hard work is done for you.
SWITCH to PS Create a new grid template by going to Files > Scripts > Grid Layout Generator Col: 24 Width: 30 Gutter: 10 Margin: 100 Height: 800 Show How to toggle Guides. Emphasis on not clearing guides
Talk about the differences between partial and whole pixels. Crisp images look more professional one pixel can make a huge difference. Partial pixels won't slice cleanly and cancreate noticable artifacts on the final websites. You may think it's your css and curse IE, but it's your own fault.
SWITCH to PS Show Snap to Pixels in the Shape Layers Tool Turn on Snap to Grid Turn on Snap to Guides Right Click on the Ruler and set the Units to Pixels Go to Edit > Preferences Units and set to Pixels SWITCH to PP
SWITCH to PS Show Snap to Pixels in the Shape Layers Tool Turn on Snap to Grid Turn on Snap to Guides Right Click on the Ruler and set the Units to Pixels Go to Edit > Preferences Units and set to Pixels SWITCH to PP
SWITCH to PS Show Snap to Pixels in the Shape Layers Tool Turn on Snap to Grid Turn on Snap to Guides Right Click on the Ruler and set the Units to Pixels Go to Edit > Preferences Units and set to Pixels SWITCH to PP
This is an area where Photoshop is clearly lacking. SWITCH to PS Transform the Commandments Box. Zoom in and show off the BS Manually type in pixel values Switch to PP
Regular photoshop layers are great for photography. Most of what we design is not photography. It's buttons, containers, gradients, borders etc. Shape layers are Photoshop's answer to the vector. If it wasn't for shape layers I probably wouldn't be using Photoshop to design websites.
Why? They are Scalable They are Flexible (Compound Shapes) They are Reusable A normal layer is great for photogrphy, but most of what we're designing is not photogrpahy. It's buttons, frames, form fields and containers. SWITCH to PS Demo Body Double Shape Layer. Two layers for a fluid layout Show what other elements are shape layers
Why Photoshop? How many of you were in Mason's session yesterday? I think his technique is great, but I have a hard time working that way. I'm a mouse jockey. Working in Photoshop is second nature for me. Fireworks is an excellent tool also. It's made great strides in the last couple versions.
Talk about smart objects Smart objects are Photoshop's version of symbols. They allow you to import external assets and manipulate them in a nondestructive fashion.
Switch to PS Show the
Think about what you're trying to achieve when using type tools. Photoshop doesn't render type just like a browser, but when you use the proper tools, you can get close.
Talk about the difference between Paragraph and Point Type. This seems like a no-brainer, but I've incountered this enough times that it warrants mention. Paragraph type is contained and flows properly. Point type runs on until you force return. Point type should be avoided except for special circumstances SWITCH to PS Show Paragraph type example. Adjust the size.