Photoshop CS6 Table of Contents Image Formats! 3 GIF (Graphics Interchange Format)! 3 JPEG or JPG (Joint Photographic Experts Group)! 3 PNG (Portable Network Graphics)! 3 Pixels! 3 Resolution! 3 Creating an Image! 4 Opening an Image! 4 Layers! 5 The Layers Window! 5 Creating a New Layer! 5 Duplicating a Layer! 5 Grouping Layers! 5 Deleting a Layer! 6 Naming a Layer! 6 Re-arranging Layers! 6 Editing Objects in a Layers! 6! Center for Innovation in Teaching and Research! 1
Layer Styles! 7 Tools Palette! 8 Options Window! 9 Saving an Image! 9 Save for Web! 10 Resources! 11 Photoshop Tools Gallery! 11 Photoshop CS6 Help and Tutorials! 11! Center for Innovation in Teaching and Research! 2
Image Formats GIF (Graphics Interchange Format) GIF is the file format commonly used for graphics or logos with solid areas of color. GIF is an LZWcompressed format designed to minimize file size and load time. Due to the color limitations, GIF s are unsuitable for reproducing color photographs and other images with continuous color. JPEG or JPG (Joint Photographic Experts Group) JPEG format is commonly used to display photographs and other continuous-tone images used in web pages. JPEG compresses file size by selectively discarding data. A JPEG image is automatically decompressed when opened. A higher level of compression results in lower image quality, and a lower level of compression results in better image quality but larger files. In most cases, the maximum quality option produces a result indistinguishable from the original. PNG (Portable Network Graphics) PNG was created as an improved,replacement for GIF images, and is the most used lossless image compression format on the Internet. PNG files support transparency. Pixels Pixel, short for Picture Element, is a single dot or square in an image. Pixel based images are simply a collections of these dots to form the image. Resolution The resolution of an image is the number of pixels per unit of measurement usually the number of pixels per inch (ppi) or pixels per centimeter (ppcm). If your image is 72 pixels wide and you tell it to be 72 pixels per inch, then it's an inch wide.! Center for Innovation in Teaching and Research! 3
Creating an Image To create an image do the following: Click File in the main menu and choose New. You will see the following window: Type a name in the Name text box. Type in the dimensions in the Width and Height tex boxes. A good size for a web or Western Online banner is 960 Pixels wide by 140 Pixels high. For images that will be used online set the resolution to 72 Pixels/Inch in the Resolution text box. If you want the background to be transparent, choose Transparent from the Background Contents drop down menu. Click OK. Opening an Image If you have a photograph or graphic you want to work on simply click File in the main menu and choose Open.! Center for Innovation in Teaching and Research! 4
Layers Layers in Photoshop are used to keep different items in your image separate from one another. You can make a change to one item in a layer without affecting any of the others. You can arrange the different items in respect to the foreground and background. For example, if you have a text layer above an image layer in the Layers window, then the text will be in the foreground and the image will be in the background. In this case, the text will be stacked on top of the image. The Layers Window To open the Layers window choose Window from the main menu and select Layers. If there is a check mark next to Layers then the window is already open. Creating a New Layer To create a new layer, simply click on the Create a new layer icon located at the bottom of the Layers window. Duplicating a Layer To duplicate an existing layer: Click and hold on the layer you want to duplicate. Drag the layer to the Create new layer icon located at the bottom of the Layers window. Grouping Layers To help better organize your layer you can put them into groups. To create a group:! Center for Innovation in Teaching and Research! 5
Click on the Create a new group icon. The group will appear in the Layers windows with a folder icon. To put a layer or layers in the group: - Click and hold on the layer or layers that you want in the group to select them. Deleting a Layer There are two ways to delete a layer: Option One - Click the layer you want to delete to select it. - Click the Delete layer icon located at the bottom of the Layers window. - Click Yes if you want to delete the layer. Option Two Naming a Layer - Click and hold on the layer you want to delete. - Drag the layer to the Delete layer icon located at the bottom of the Layers window. - Drag the layer or layers to the group folder. A black outline will appear around the group To give a layer a new name: as you drag over it. Let go of the mouse to drop the layers into the group. Right click on the layer and choose Layer Properties. Type a name in the Name text box. Click OK. You can also double click on the layers name to highlight it and type a new name in its place. If you accidentally delete a layer, you can always Undo to get it back. To undo go to Edit in the main menu and choose Undo. Re-arranging Layers To move a layer in the Layers window: Simply click and hold on the layer you want to move. Drag the layer up or down (depending on where you want to move the layer). When you see a black line appear above or below the layer you want to move to, let go of the mouse. This will drop the layer in that position. Editing Objects in a Layers To edit objects in a layer, you first need to make sure the layer is selected in the Layers window. To select a layer, simply click on it in the Layers window and it will change to a blue color.! Center for Innovation in Teaching and Research! 6
Layer Styles Layer styles allow you to add non-destructive effects to images in a layer. Meaning, if you change your mind, you can adjust or remove the effect. To add a layer style do the following: Click the Add a layer style button at the bottom of the Layers window (see image on page 5) and choose the effect you want to add. This bring up the the Layers Styles window. On the left you can can check off the effects you want to use. The main area of the window will show the options for the effect that is selected. Click OK when you are done. The layer will show the effect in the Layers window. Click the eye icon to hide the effect, double click the effect title to bring up the Layer Styles window again.! Center for Innovation in Teaching and Research! 7
Tools Palette The first time you start Photoshop, the tools palette appears at the left side of the screen. You can move the tools palette by clicking and dragging its title bar (as with any of the windows). You can also show or hide the tools palette by clicking Window in the main menu and choosing Tools. Below is a diagram of the Photoshop CS6 Tools palette. Some tools have a small black arrow in the bottom right corner of the tool icon. This indicates that there are more tools associated with that tool set. To view the list of tools in a set, click and hold on the tool icon until the window appears, then click on the tool in the set you would like to use. A gray square indicates which tool in the set is currently active. You can view information about any tool by hovering your mouse over it. The name of the tool appears in a tool tip window.! Center for Innovation in Teaching and Research! 8
Options Window When a tool is selected it has a set of options that appear in the Options window along the top. This changes depending on what tool you have selected. Saving an Image Click File on the menu and choose Save or Save As. Choose the file format that you want to save as. To save the workable Photoshop file choose Photoshop from the format drop down menu. Click Save.! Center for Innovation in Teaching and Research! 9
Save for Web Using the Save for Web... option gives you more control over how your image is saved. Click File on the menu and choose Save for Web... You will see the following window: You can play with the settings to see how different options change your file size. Make sure to choose the PNG option for images with transparency and JPEG for photographs. Choose PNG-24 for less artifacts (fuzziness) in the image if you will be using a darker background.! Center for Innovation in Teaching and Research! 10
Resources Use your mobile device to scan the following QR codes for some extra resources. Photoshop Tools Gallery Photoshop CS6 Help and Tutorials! Center for Innovation in Teaching and Research! 11