Now that you’ve been introduced to the Photoshop workspace and have a basic idea of where everything is, let’ s start getting our hands dirty .
Creating New Documents
You can create a new document by selecting File > New… from the menu bar , or pressing the keyboard shortcut Command-N (Ctrl-N on Windows). The New dialog box will appear , as shown in Figure 1.3, where you can specify the document size and other setting.
Figure 1.3. The New dialog box
If you’re designing for a website, be sure to set the resolution at 72 Pixels/Inch to reflect the actual screen resolution. If you’re designing for a minimum screen size, such as 1024×768, be sure to take into account scrollbars and menus, and set your initial document size at a smaller dimension for your actual working area. 1000×650, for example, will give you a better estimate of your actual screen size.
If you want easy access to these dimensions for other new documents, it’ s probably a good idea to click Save Preset… and give the settings a name like “Web Page.” The next time you create a new document, you’ll be able to load your “Web Page” settings from the Preset list.
Open files by selecting File > Open… from the menu bar, or pressing Command–O (Ctrl–O on Windows). You can select and open multiple files by holding down Command (Ctrl) and clicking on all the files you require in the Open dialog box.
Save a file by selecting File > Save or pressing Command–S (Ctrl–S on Windows). For a newly created document, this will save your work in Photoshop Document (PSD) format. If you’d prefer to save an additional copy of the document, you can use File > Save As… or press Command-Shift-S (Ctrl-Shift-S) instead. T o the great delight of Photoshop users everywhere, Photoshop CS6 introduces a backup save, where a recovery file is saved every ten minutes. You can change the time in between saves by going to Photoshop’ s preferences (Mac: Photoshop > Preferences > File Handling…, PC: Edit > Preferences > File Handling…), and choosing from 5, 10, 15, or 30 minutes, or 1 hour. If Photoshop crashes on you, the recovery file will open automatically the next time you start up Photoshop.
■ holding down Ctrl and double-clicking the work area to create new documents
■ double-clicking the work area to pull up the Open dialog box to open files
■ holding down Alt and double-clicking the work area to open existing files as new documents
■ holding down Ctrl-Shift and double-clicking the work area to save documents
■ holding down Shift and double-clicking the work area to access Adobe Bridge: Adobe’ s “control center” and file browser
The work area is the dark gray area behind the document windows. If your shortcuts fail, check that you’re clicking on an empty spot on the work area, and not in one of the document windows or Photoshop tools.
Alas, on a Mac, Photoshop only allows for double-clicking the work area to open a document. Even then, you must have Window > Application Frame ticked in order for it to function.
Saving Files for the Web
Photoshop files themselves are unable to be embedded into a web page. You’ll need to export your file and save it in a web-friendly format. There are three formats for web graphics: GIFs, JPEGs, and PNGs.
GIF: The GIF format (pronounced “giff”) can have a maximum of 256 colors. GIF files support transparency and animation, and work best with graphics that have large areas of the same color, as shown in the logo in Figure 1.4.
Figure 1.4. An image that should be saved as GIF
JPEG: The JPEG format (pronounced “jay-peg”) works best with photographic images, or images that have more than 256 colors and gradients, such as the flower in Figure 1.5. Images saved in JPEG format are compressed, which means that image information is lost, causing the image to degrade in quality .
Figure 1.5. An image that should be saved as JPEG
PNG: The PNG format (sometimes pronounced “ping”) is similar to the GIF format in that it sup-ports transparency and works best with solid-color images like the logo shown previously; however, it’ s superior to the GIF format as it has the ability to support true levels of trans-parency for colored areas. PNGs can produce a better quality image at a smaller file size than can GIFs. Photoshop allows you to save an image as a PNG–8 file (which works the same way as a GIF would with 256 colors) or a PNG–24 file (allowing for millions of colors as well as variable transparency).
To save for the Web in Photoshop, select File > Save for Web… or press Command-Option-Shift-S (Ctrl-Alt-Shift-S on Windows). This will bring up the Save for Web dialog box shown in Figure 1.6, which will show you a preview of the image to be exported, with its optimized size in the bottom left-hand corner . You can adjust the settings for the image using the options in the pane on the right. Choose whether you want to save the file as a GIF , JPEG, PNG-8, or PNG-24, and have a play with the other settings, keeping an eye on the optimized file size. T ry to strike a balance between the quality and file size of the image. When you’re happy with the result, click Save… and give your image a filename.
Figure 1.6. Save for Web dialog box
If you tried this exercise, you’re probably quite pleased with yourself for saving an image of reason-able quality at a file size significantly smaller than the original. You managed this by altering the settings in the right-hand pane, but what do these settings actually do?
Adjusting this setting reduces the number of colors used in the image. This will usually have the biggest effect on the final image.
Dither amount and type (such as No Dither, Diffusion, Pattern, Noise)
This setting has nothing to do with being nervous or agitated. Dither refers to a compression technique in which the pattern of dots is varied to give the illusion of a color gradient. Changing the dither will result in a more noticeable degradation for images that involve a large number of colors blended together .
If you want transparent areas in your graphic, check this box. We’ll look more closely at trans-parency in Chapter 2.
For transparent images, the matte color is used to blend the edges of your image into the back-ground of the web page. For opaque images, the matte color defines the background color of the image. Using matte color with transparent images is covered in more detail in Chapter 2.
Quality: Changing the value in the compression quality drop-down box or Quality input field alters the level of compression for the image. Reducing the quality may result in blurring or pixelation, but too high a setting will produce a large file that will take users too long to download. A good approach is to decrease the quality value gradually until you notice the degradation of your image becoming unacceptable. A reasonable compromise will be somewhere around this point.