Have questions? Call (877) 353-1337

If you’re a web professional such as a designer, developer, or marketer, Adobe Photoshop is one of the most powerful pieces of software in your arsenal. There are so many tools, layer options, and settings, that many go overlooked. This post will go over three quick tips to improve your Photoshop workflow.

1. Organize Your Layers

Organizing your Adobe Photoshop layers is a vital step to keeping a neat and tidy document. It also has the added bonus of helping you save time so you are not searching for a needle in a haystack(or a 1px divider line in a 300 layer document). There are many key components to keeping an organized document. I will talk about a few techniques I use to maintain an orderly and easily distinguishable layer panels.

Accurate and descriptive names. This is easier said than done. Before you know it, you could easily have 100+ unnamed layers floating around. The best way to tackle this is to name them immediately after creating them. Photoshop gives you plenty of space to add a descriptive name. If you are creating a blue call to action button in the navigation, you might call that layer, “BTN blue non-active”. It would also be wise to place that layer in a group with everything else in the navigation. More on groups below.

Utilize groups. Unless you are a mind reader, you will likely forget what “Group 3” is containing. Use groups to organize multiple layers in a section. Instead of having 100 separate layers, why not create five groups? Lets say you’re designing a website. You would likely have groups called header, navigation, body, content, and footer. Inside of those groups, you would probably have even more groups. The key is to nest them in a logical way that anybody could understand.

Order them logically. Just like a website file structure, or semantic HTML markup, layers should be ordered in a way that makes logical sense. If you’re designing a website for example, you would likely have the layers organized by hierarchy. The top most layer or group might be Header and the bottom most layer might be Footer. In between those two you would have your head, body, and content layers. This is not only great for your own personal organization, but also helps anyone else who has to use the document.

Color coding. If you’re a visual person like I am, color coded groups and layers will help you astronomically. There are many reasons to use color coding in the layers panel. One good reason is for quick visual identification. You can easily do this by control-clicking(or if you’re using a PC, right-click) the Eye icon next to the layer. A contextual menu of colors will appear that you can choose from.

Clean up. You wouldn’t leave the refrigerator door open would you? How about letting trash just sit on your desk? I didn’t think so. Take this real life example and apply it to your Photoshop document. Delete unnecessary layers or groups you no longer need. Collapse groups after you are done using them and hide any of the layer effects you do not need to see. If you share your document, you shouldn’t leave your trash for somebody else to clean up.

Photoshop Tip: Organize your layers

Photoshop Tip: Organize your layers

 

If you apply these layer techniques to your next Photoshop creation, you will definitely have a much more organized document. You may even get some brownie points from a designer. Do this every time and it’ll be a good habit before you know it.

2. Utilize ‘Save for Web’

As any good web professional should know, page load time is probably the single most important metric when it comes to development performance. Page load time typically consists of two major factors. Server response time and browser render time. Our goal here is improve the network/server response time by optimizing our images in Photoshop.

As we learned in a previous blog post, if your website has poorly optimized images, even a 20% reduction in filesize per image can have a dramatic impact in decreasing page load time. Adobe Photoshop has an alternate save interface known as ‘Save for Web’. ‘Save for Web’ provides a variety of options the user can tweak to get the optimal settings and file size for each specific image.

Photoshop tips: Save for Web

Photoshop tips: Save for Web

If you don’t already know, the optimal image file format for photographs is JPEG. JPEG uses lossy compression to save file size, but in return you lose detail and clarity. For website graphics and and logos, the optimal image format is PNG. PNG is typically 5%-25% more compressed than a GIF file of the same image. It also allows you to incorporate transparency. This alternate and often overlooked saving method is great because it reduces filesize by limiting the number of colors, applying aggressive JPEG algorithms, and stripping unnecessary metadata.

In addition to decreasing file size, it allows you to preview the original image and the one you are about to save. This is great because there is no guesswork involved in what the image will look like in its new format. If you’re going to be uploading your images to the web, the benefits offered by ‘Save for Web’ are well worth the extra configuration.

3. Design in RGB

RGB stands for red, green, and blue. On a screen, the three channels are added together in various ways to create a broad spectrum of colors. So, you might ask why this is relevant. Well, this is relevant because RGB is not the only color mode available to you in Adobe Photoshop. When creating a new document, you’ll also have the option of using four other color modes.

  • Bitmap contains only one color channel. Unlike the grayscale color mode it has only two possible levels of 0 or 255. Bitmap consists of black and white images without color and does not even include shades of grey. The image usually results in a pattern of black dots on a white background. This is especially good for black and white laser printers.
  • Grayscale also contains only one color channel. Unlike the bitmap color mode it has levels of intensity ranging from 0 to 255. This is especially useful if you are outputting the image to a printer that does not print in color.
  • CMYK is similar to RGB in that it uses multiple color channels. The main difference is that instead of red green and blue, CMYK consists of cyan, yellow, magenta, and black. The black channel is necessary because when you add all of the other colors together, you get brown. If you want the printer to print true black, you must have a separate black channel.
  • Lab is very different from RGB and CMYK. Like RGB, Lab has 3 channels. The difference is that only two channels are dedicated to color, a and b. The third, L, is reserved for luminosity.
Photoshop Tips: Color Mode RGB

Photoshop Tips: Color Mode RGB

If you select anything but RGB your design will render completely different than what you see in Photoshop. Each color mode has its own purpose and is meant for different applications. If you are a web professional and are designing graphics for the web, RGB should be your choice.

Bonus: Photoshop Keyboard Shortcuts Cheat-Sheet

Here is a great cheat-sheet for Photoshop keyboard shortcuts for both Mac and PC courtesy of PhotoshopTrainingChannel.com

Photoshop Tips: Keyboard Shortcuts

Photoshop Tips: Keyboard Shortcuts

In Conclusion

Whether you’re mocking up websites or designing graphics for social media as a marketing professional, these quick tips will help you master Photoshop.

Have any questions? Reach out to us on Twitter, Facebook, or LinkedIn and we’ll be happy to help!

(877) 353-1337

Marlborough, Massachusetts

contact@codecrater.com

Get your free consultation