PSD Mock-up Etiquette

named-layersToday, Chris Sullivan blew my mind with the Photoshop tricks I didn’t know. Barry of Camp Doug is one of our new teachers, schooling his alma mater in website design. But, the school is schoolin’ right back. Chris went over one of Camp Doug’s projects’ files, volunteered for class dissection and said, “well, this could be done better.”

Reasons for good photoshop etiquette: when you’re on a team, or a big project, keeping organized and having consistent conventions makes everything easier. When you pass off your files to someone else, it’s great for them to be able to dive into it right away without having to ask you questions about where (and what) everything is.

Organize with Layers

Naming layers, organizing layers, layers, layers, layers. Chris’ mode of operation is if you can understand it by looking at it in the layers panel, you’re in good shape. Delete what you don’t need. Organize in the way you want to organize a web page. Header, nav, content, footer. Those should be your main folders if you’re designing a website. There are also different things you can do to layer folders that affect all of its contents, masks, and a blending option that is not available for layers themselves: pass through. The neat thing about that is that if you select that, adjustment layers become rays of light and seep through the folder group instead of being blocked by the folder structure. (Metaphor doesn’t work for you? The Pass Through Blending Mode | Photoshop Layer Sets | Peachpit.)

Be Smart

I didn’t know this: you can make smart objects out of layers you have in photoshop. That means that they are all linked to each other, so one change changes them all. This is great for things like buttons, things that need to be uniform across the site.

Scalable Vector Graphics

Chris says “scalable vector graphics” and the class goes dead silent. An awe blankets the crowd. Chris continues demonstrating an .svg button in the browser vs. a .png. With resizing the image in the browser, the .png reveals it’s pixels, but the gradients on the illustrator button says smooth. So smooth. The class applauds. The neatest trick we’ve seen all week. Use adobe Illustrator to make buttons. Save as .svg (Scalable Vector Graphics – Wikipedia, the free encyclopedia.).

That’s one thing about web design. You have to keep on top of knowing what the features of updated software can do for you. Chris is going to talk about how we’re going to use InDesign next week for the extra oomph. We can use Adobe digital publishing to create html! So excited.



  1. […] Vector Graphics (SVG). When they asked for help, I kind of shrugged, like what? Chris Sullivan mentioned it last year just once and we didn’t implement one or anything, we just ooohed and […]

Leave a Reply

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

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

Facebook photo

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

Connecting to %s