If you've been working with image editing for any amount of time, you probably know that Photoshop is a great tool. The downside is its complexity. You can easily get bogged down in tasks which can really hurt your productivity. In this article you'll learn how to make the most of your time with these tips I gleaned from years of experience.
- Standardization. Since this article focuses on using Photoshop for the web, I recommend that you go to the Preferences dialog box, shown below, and change the screen resolution to 96ppi (pixels per inch for the PC, 100ppi for the Macintosh) and change the Rulers to pixels.
- Start with high-quality images. Since images will be a large part of your workflow, it's important to use high quality images. You'll save on editing, color correction, and more. Also, it's important to be aware that while Photoshop is a great image editor, it can only do so much. It cannot fix blown out highlights in images, nor can it bring shadow detail back if it's faded to black or near black.
- The Rule of Thirds. A relatively simple method of working with photographs is the Rule of Thirds, where you create imaginary lines in your field of view, breaking up the image into thirds, both vertically and horizontally. The task is to place the key elements of your image where the lines intersect. This is useful in image placement for web page backgrounds, as shown below.
- Use Presets. Presets are a way of adding effects to images quickly. You have several options to choose from, including: Brushes, swatches, gradients, styles, patterns, contours and more. To access the Preset Manager, go to Edit: Preset Manager. In the Preset Manager, shown below, you can change the current items and create new libraries of effects.
- Use Actions. Actions are one of the most powerful tools you can use in Photoshop and are excellent for tasks that are repetitious, such as opening a file, changing the image size, applying a color correction, then saving the finished image in a new folder. Photoshop comes with some pre-defined actions that you can use. To display the Actions panel, shown below, go to Window: Actions (Alt + F9). In this panel, you have access to a number of pre-installed actions. You can also record your own. For a deeper understand of Actions, visit Adobe's Actions page and for even more info, learn how to create your own actions.
- Use Keyboard Shortcuts. Here are some common keyboard shortcuts which you can use:
Zoom In: Ctrl + +
Zoom Out: Ctrl + -
Fit on Screen: Ctrl + 0
Actual Pixels: Ctrl + 1
Select All: Ctrl + A
Deselect: Ctrl + D
Copy: Ctrl + C
Paste: Ctrl + V
Cut: Ctrl + X
Fill: Shift + F5
Image Size: Alt + Ctrl + I
Canvas Size: Alt + Ctrl + C
Save for Web & Devices: Alt + Shift + Ctrl + S
Here's a list of keyboard shortcuts that you can use for Adobe Photoshop CS5.
- Use the 4-Up setting with Web Compression. (File: Save for Web & Devices - Alt + Shift + Ctrl + S): This allows you to experiment with different compression settings. It also gives you information about image loading times, for different modems, such as 56.6K, 128 ISDN and more. As you can see in the image below, this information will help you in determining what size image to use and the file compression that will compress the image without destroying the quality. Note that this will be different for every image.
- Choosing the Right Compression. If you're working with photographic images, JPEG is your best option. Don't use PNG as it will bloat your files by 5-10 times. If you're using text or line drawings (such as text or cartoons), GIF or the PNG-8 formats will give you the best results.
- Compression Tradeoffs. When compressing photographic images, here are some things to consider: Some images will compress better than others. This is largely due to the composition of the image. To elaborate, an image that's full of colors, patterns and textures won't compress as much as an image that contains large patches of a blue sky or solid colors.
- Don't Show Large Images at the Same Time. If you have a large number of images that you want to show on a web page, don't use them all at once. If you do, it will slow the loading of your page down to a crawl. Instead, create a web photo gallery which will display thumbnails which can then be expanded into a larger image on another page. For more information, have a look at my articles on how to create web galleries with Adobe Photoshop CS3.
Photoshop is an incredibly powerful image editor and design tool. As you work with it, you'll get more comfortable with the various tasks and you'll find ways to improve your workflow. These tips will give you the basis to get started.