HOME  â€¢  SYLLABUS/SCHEDULE  •  ASSIGNMENTS  â€¢   COURSE RESOURCES   •   YOUR PAGES   •   YOUR FEEDBACK

 

 

Tutorial Photoshop 1 - Review Workspace and Interface; Make a Background Graphic

 

 

In this tutorial, we’ll learn how to use the most important tools and functions in Photoshop, by making a background image for our web page.

 

Download and open the backgroundTest.jpg file  into Photoshop (don't just double click it - go to the File menu and select 'Open'). This is a fairly high-resolution image shot with a 2.3 megapixel camera, but it doesn’t have a lot of contrast (ratio of light to dark objects), and it doesn’t have any dominant visual element - - it’s just a texture, which makes it a good candidate for a background image.

 

Workspace

Locate these windows of the interface (if any of them are not visible, go to the Window menu and select them). These are the windows you’ll use most in photoshop.  

 

1. Tools

2. Layers

3. Navigator

4. History.

 

 

 

 

Create a workspace by arranging the windows around the main image window (the one that says ‘backgroundTest.jpg @ some percentage (RGB/8). Put the tool bar on the far left, alinged to the top of the main image. Move the ‘History’ tab into the same set of tabs that include the Navigator and the Layers (it will snap and become part of the tabs on the right).  There are a number of other tabs that usually open in Photoshop (Actions, Color, Swatches, Channels, Paths) - - these will be useful for other projects, but they’re not going to be used in this tutorial. Also, there’s a contextual submenu bar for the tools, right at the top of the screen - - this is the ‘Options’ bar, and it will change as you click on the tools in the toolbar to show you the options you have with that particular tool.

 

Save your workspace under the Window menu > Workspace > Save  Workspace. Since we didn't create any keyboard shortcuts or menus, leave those boxes unchecked:

 

 

When you want to return to this workspace, just reload it and all your windows will be where you’ve placed them.

 

(re-)Learning the Interface by Creating a Background Image

Double click the padlock icon on the right side of the background layer in the Layers window. Rename this layer ‘original’, and click ok.

 

 

Now, duplicate this layer by locating the sub-menu of the Layers tab (It's the down-pointing triangle and 3 lines icon) and selectng Duplicate Layer. Name this new layer Blur.

 

 

 

Select this new 'blur' layer (it will turn light blue), under the Filter menu, select Blur > Gaussian Blur.

 

 

When the Gaussian Blur window pops up, choose a blur radius of about 7.6 pixels. You should see how this affects the image if you have the Preview box checked:

Change the opacity (transparancy) of the 'blur' layer by changing the slider until it's about 78%. This will allow the sharp image in the original layer to show through a little.

 

 

Next, we need to change the image size so the background image will fill up most screens (up to about 24"). Under Document Size, change the unit to points for both the Width and Height. Uncheck the Constrain Proportions box.

 

 

Change the Width to 2200 points and the Height to 1600 points. Click OK.

 

 

You now have a master file that's 2200 X 1600 points in the .PSD format. This won't work in web browsers, and it's way too big (10 MB). So, under the File menu, select Save for Web & Devices . . ..

 

When the following window opens, make sure you click on the 4-up tab. This will show you four different file formats, along with a preview image, file size, and download time for each one. You can change the characteristics for each file type by selecting a preview image (you'll see a light blue box around the image), and changing the file properties on the right side of the window.

 

 

We are going to save a very blurry, low quality (0% quality) JPEG image for our background. Click Save at the top of the window, and name this file BG_plants.jpg, and save it to your GRAPHICS folder in your site root. This background image is a little hefty at 105 KB, but it will be a good place to start. After we build the site and test it in a number of browsers, connection speeds, screen sizes, and mobile devices, we may want to create a smaller or blurrier image, which will load faster.

 

You've saved the .jpeg file for use in your site. Now, select Save As under the File menu and save your work file as a photoshop format (backgroundTest.psd) file to your RESOURCES folder, so you'll be able to make other changes to the image in the future.