Working with Your RAW and Layered Files

Let’s begin by opening Photoshop CC. I am working with the CC 2019 version. If you do not have Photoshop on your computer, but you do have the Creative Cloud application, click the Install button beside the Photoshop icon (see Figure 2-4), and follow the instructions on how to install the program.

If you already have Photoshop CC installed on your computer, double-click on the icon. Or, in the Creative Cloud application, click Open to launch the program, as shown in Figure 2-5.

Once Photoshop opens, set up your workspace so that yours is the same as mine.

I chose Graphic and Web in the Workspace icon (in the upper right), as seen in Figure 2-6.

If you have already used the Graphic and Web workspace, you can choose Reset Graphic and Web from the menu to return the workspace to its default settings.

Or, if you prefer, you could work with the Essentials workspace since it offers the full range of tools in the Tools panel, as seen in Figure 2-7.

Clicking the Edit Toolbar icon opens the Customize Toolbar dialog box so that you can drag tools from Extra Tools on the right to the left into the toolbar; as you do so, the toolbar updates. You can also group tools together by hovering an extra tool over a current tool in the toolbar when a blue line appears under the other tool, as seen in Figure 2-9.

You can also remove tools by dragging them back to the Extra Tools side. Or you can choose restore defaults to add all tools, or clear tools to remove all tools. Likewise, you can load presets that others created or save your own presets. When you have added the tools you require, click Done, or Cancel to exit without making any changes.

Your layout should now look something like Figure 2-10.

If you prefer another workspace for your web design, you can always choose a different one or create your own custom workspace (New Workspace) as seen in Figure 2-6.

Creating a New File

If you want to create a new file, choose File ➤ New, as seen in Figure 2-11.

Photoshop CC has organized many of its standard layouts as tabs so that you can easily choose a layout for your project, whether for photos, print, web, mobile or film and video. You can create your own custom sizes. You can use an artboard, where you have two or more layered layouts display (see the Layers panel when a file is open) within one .psd file. However, when you begin creating a file that you are planning to use for the web, make sure that the color mode is set to RGB Color, as seen in Figure 2-12. You’ll learn more about color in Chapter 3.

When you have the correct settings, click the Create button on the bottom right of the New Documents dialog box, as seen in Figure 2-13. Your new file will open.

At this point, you begin to add Layers via the Layers panel, as seen in Figure 2-14, and design your artwork using one or more of the tools in the Tools panel.

While you can always create your files directly in Photoshop CC, you may have collected or acquired your original images in other file formats. Here I have listed some of the ones you will likely encounter. In the main menu, go to File ➤ Open.

• Bitmap (.bmp): This file is often created when you scan a file with your office scanner. It is common in Windows-compatible computers. While it can be used on the web, the file size is often quite large, so it’s better to save a copy in a file format suited for the web.

• TIFF (.tif,.tiff): Often, graphic artists will save a final single layered piece of artwork as a TIFF file. These files are considered images that do not lose quality (lossless) as copies are saved from them. They retain their original size; no compression of data occurs.

• Photoshop PSD (.psd, .pdd, .pstd): While creating your graphics, you may save your files with multiple layers. Photoshop PSD files allow you to retain these layers, effects, and masks. After you save and close the file, you can always come back another day and continue to edit it until you are ready to export a flattened copy to the web.

• Large document format (.psb): Sometimes the file size of a layered file can become very large such as over 2GB. Layered files over this size are often saved as a .psb known as a Photoshop Big to preserve the file quality.

• Camera RAW or digital negative (.dng): A camera raw image file is in a camera-specific proprietary format that is essentially a “digital negative,” with no filtering, white balance adjustments, or other in-camera processing. You need the Camera Raw program plugin to install with Photoshop CC to view these files. Refer to Figure 2-15.

While these are all good file formats for your original files (except for the bitmap and JPEG files), you cannot display the other formats in most browsers.

Note that Photoshop can open many other file formats, including video (see Figure 2-16).

Or if you choose File ➤ Open As, you will see the Camera Raw option for opening the files shown in Figure 2-17.

For more information on other formats, visit https://helpx.adobe.com/photoshop/using/file-formats.html .

Image Files from Other Adobe Programs

Your image files might originally come from Adobe programs like Illustrator CC (.ai and .eps files), Lightroom CC (Camera Raw), Dimension CC to create 3D shapes (.png or .psd), Fuse CC to create 3D characters as (.obj and .png) files, and Adobe Acrobat PDFs. All of these files can be opened and saved as pixeled raster images within Photoshop.

For example, in Illustrator CC, you can File ➤ Open and save a copy as a pixilated image or as a smart object that can be in a layer and later scaled. You can choose File ➤ Open As Smart Object. Find an Illustrator (.ai) file in your open dialog box and click Open to see the dialog box, as seen in Figure 2-18.

Click OK and then choose Duplicate Image to create a copy, as seen in Figure 2-19.

Then save the new file as a PSD, or select the smart object layer and then drag it into your new file. Be careful not to edit the original smart object by double-clicking on the layer, which will open the smart object layer in a new window or in the Illustrator CC. Refer to Figure 2-20.

If you get a warning message from Illustrator CC, just click Cancel to prevent the file from opening, and return to Photoshop CC.

In Photoshop, you can make further outward adjustments to the Smart Object by using masks, layers, effects, blending modes, or tools to alter color and shape. You can also Edit ➤ Transform to resize the image without it losing quality because it is a Smart Object. As seen in Figure 2-21.

When you are done, you can save any open file by selecting File ➤ Save, and then File ➤ Exit exit to Photoshop CC or keep Photoshop open for the next chapter.

Summary

In this chapter, you looked at how to set up a workspace in Photoshop. You also looked at some of the different image file formats that you can open within the Photoshop program. You can either create your own files with Photoshop or work with images that come from another source, such as another Adobe program like Illustrator, or from a camera, scanner, or another client. In the next chapter, we explore the correct color choices for your web design projects.