Introduction and Changing Views
Making Selections

PHOTOSHOP INTRODUCTION AND CHANGING VIEWS

PhotoShop is cool.

PhotoShop is the premier image-editing tool.

The way your web pages look really matters, and PhotoShop can help you make sure they look their best.

You can use PhotoShop to totally remove objects from an image, like they were never there! You can insert objects into other pictures and add natural looking shadows.

Maybe you want to use an image, but it doesnt match your web page colors Presto! You can use PhotoShop to change an images colors. You can even fix old, cracked, green or yellowed photos and make them look brand new.

PhotoShop is really great at helping you make buttons and graphics look their best. Youll also use PhotoShop to make transparent GIFs and to save in web formats.

PhotoShop is a resume program. Not everyone knows it to its fullest. Youll take advantage of the fact that you will.

Practice Files

Were going to use a couple of files to practice on. Ive continently zipped them together for you. Theyre about 2MB, you should probably get them now at:

web design course

 

How PhotoShop Works

 

Pixel Based Images

PhotoShop creates every image with tiny little dots called "pixels". A pixel is simply an electronic dot. 

The main power of PhotoShop is its ability to keep track of all the pixels and to change them in relationship to each other.

When working with PhotoShop, your whole image is covered with dots, even the white space. White space is covered with white dots. You never remove or add dots. Whenever you make a change in PhotoShop, all youre really doing is changing pixel colors.

Resolution

Resolution, or DPI (dots per inch), refers to the number of dots, or pixels, that make up one linear inch on a picture. On the web, all images are 72 dpi, because thats how many dots per inch a standard monitor can show.  PhotoShop is a very powerful program, originally designed to manipulate images for much higher professional print work resolution.

Important Configuration Stuff You Have to Do First

There are some basic configuration changes youll want to make to PhotoShop. The changes will allow you to work easier, and will set PhotoShop to do a better job with web based images.

 

Dont Save Image Previews

  1. Open PhotoShop and click EDIT-> PREFERENCES-> GENERAL

Notice that "Ctrl+ K" (CMD+K, Mac) is the shortcut to open the properties. Its one of the shortcuts youll use often.

You should see the Preferences Window:

There are a number of settings that work better for web design. For example, whenever PhotoShop saves an image, it saves a preview thumbnail in the image file so you can see what the image is before you open it. This is great, except that the preview thumbnail is a totally separate image hidden in your original image file. That means you could have twice the file size for a small button. You want your pages to download quickly, no?

  1. In Preferences, choose Saving Files from the top pull-down menu

  1. Under Image Previews, choose Never Save

Set PhotoShop to Measure in Pixels

PhotoShop was originally designed to work for print publishers. Consequently, many of the measurements in PhotoShop are designed to display in inches. When working for the web, youll want to measure in pixels. Remember that a pixel is an electronic dot.

To set pixels as your main measurement:

  1. Click EDIT-> PREFERENCES-> UNITS & RULERS
  2. Under Rulers, choose pixels.

  1. Click OK

Set PhotoShop To Correctly Display Colors

Different monitors are set up in different ways. An image that looks dark on your monitor might look light on someone elses. You dont want to work on images all day long only to have them look junky because youve got your monitor set just the way you like it.

PhotoShop can help you calibrate your monitor to match the standard user. There are two things youll need to do:

  1. Set PhotoShop to display web graphics correctly by clicking EDIT-> COLOR SETTINGS, and choose Web Graphics Default from the Settings menu.
  2. Use the Adobe Gamma Wizard. The Adobe Gamma Wizard will adjust your monitors color settings. It can be found by clicking:
    PC: START-> SETTINGS-> CONTROL PANEL->  ADOBE GAMMA
    MAC: APPLE MENU-> CONTROL PANELS-> ADOBE GAMMA

Memory Considerations

Computers think in zeros and ones. A zero or a one is called a "bit", short for binary digit. In PhotoShop, the exact color of each pixel is determined by a group of zeros and ones.

You may have heard the term "16 bit color". If you havent, now you have.

16 bit color.

A bit is a zero or one, right?

16 bit color means that sixteen zeros and ones are used to determine each of the three colors in the visual light spectrum, Red, Green, and Blue. Each pixel is made of red, green, and blue. Because each color is made of sixteen zeros and ones, each pixel is made up of 48 zeros and ones (3 x 16).

A bit, which stands for "binary digit", is a zero or a one.

PhotoShop is a big ol memory hog. It has to think about every little pixel, and all the zeros and ones that make up each pixel. An one square inch image with a dpi setting of 72 dots per linear inch would be made up of 1,327,104 zeros and ones. Thats for only one inch square PhotoShop has to remember all those zeros and ones, but it also has to change them every time you do anything to the image. The more information PhotoShop can keep in memory, the faster it can work.

When you turn PhotoShop on, it analyzes the available memory (RAM) and claims 75% of whatevers left. This is a good thing, as PhotoShop will need way more memory than anything else youre running. Without enough memory, PhotoShop might crash if you ask it to do anything complicated.

Okay, heres what all of this boils down to:

If youre going to be primarily using PhotoShop, open it before any other programs!
            If youre only using PhotoShop for a short while, open it after other programs.

Let PhotoShop grab all the RAM it can. Your other programs will work fine on whats left. PhotoShop requires 32MB of RAM to even open. You should have at least 64MB of RAM to practically use PhotoShop, though. Youre better off with 128MB, though

If PhotoShop runs out of RAM, it will use your hard drive instead, which it calls your "scratch disk". You will only have to set your scratch disk if you have more than one hard drive, or if your drive is partitioned. You should use the fastest or most empty disk or partition as your scratch disk.

To set your scratch disk:

  1. Click EDIT-> PREFERENCES-> PLUG-INS AND SCRATCH DISKS

"Second", refers to the disk PhotoShop should use if the first one is filled

Okay, enough of this "getting ready" stuff. Lets play with PhotoShop!

Palettes

PhotoShop controls most things with little floating boxes called palettes.

*         Notice that the palettes have different tabs in the top row. Click the different tabs to select different palettes.

  

*         Many palettes have hidden options. In the upper right corner of a palette, click the "palette arrow", to check out some of the options available. Its easy to forget about this little palette arrow, but youll use it an awful lot later on. Dont click anything right now, just look around

*         Grab one of the palettes by the blue bar at the top (gray on a mac), and move it around. You can move pallettes wherever you want!

Closing and Opening Palettes

  1. Close the "Navigator" palette by clicking on the "x" in the upper right corner

  1. Open the palette again by clicking:
    Window-> Show Navigator

All of the palettes can be found in the "Window" pull-down menu.

Cleaning up Messy Palettes

In the course of things, youre going to move palettes all over the place. Youll close some and move others into inconvenient places. PhotoShop Move a bunch of palettes around. Close one or two by clicking on the "x" in the corner of the palette. Can you see how you could easily make a big mess of things? PhotoShop will magically clean up your screen. Heres how:

Click: WINDOW-> RESET PALETTE LOCATIONS

Viola! The palettes are back in place!

I wish I had a button like this for my kitchen sink

Zoom In, Zoom Out

One of the joys of PhotoShop is its ability to zoom way in on a picture. Zooming in allows you to edit an image on a pixel-by-pixel basis. You can control changes on such a small level that youll be able to change images and photographs in such a way, that people wont know you changed them! Using the power of zoom, even people with no artistic talent can remove dark circles from under peoples eyes. Anone can fix messed up hair, or add a sparkle to a childs eye. Zoom in every chance you get when working in PhotoShop, itll make your whole life easier!

You downloaded and unzipped the images files from:

www.awdsf.com/exercises/images.zip

Right?

Good, because were going to open one now.

  1. Open "RGB Balloons"

Using the View Menu

If you wanted to edit the yellow balloon in the sky, you wouldnt want to have to do it like this The balloon is too freakin small. Were going to change the way we are looking at this image by zooming in.

  1. Click the VIEW pull-down menu

The View Menu controls the way you display the picture.

  1. Click "Zoom In" and "Zoom Out" a couple of times.
    Notice that the shortcut to zoom in is: CTRL+"+"
    Zoom out is, of course: CTRL+"-"

**NOTE: When zooming in and out you are not changing the size of an image. Youre only changing how closely youre looking at it. Well change the image size later.

Super Important Keyboard Shortcut

Im not going to stuff a million keyboard shortcuts down your throat. If you want to learn shortcuts, most of them are listed right next to their menu pull down item:

There are a couple of really important shortcuts, though, and Im going to tell you one right now. The important shortcuts are the ones that youll use over and over and over, you might as well know them.

You should know:

            CTRL+0

            CMD +0 (Mac)

Control/Command plus zero zooms the image to fit as large on the screen as it can get without being covered up by any palettes.

Try it:

  1. Zoom way in
  2. Hit Ctrl+0

Try it a bunch of times!

Try this:

  1. Hit "Tab" on your keyboard
    Tab hides all of the palettes!
  2. CTRL/CMD + 0
  3. Hit Tab again
  4. CTRL/CMD + 0 (again)

Viewing Your Images in Actual Size

Youre going to want to see what your images exact size will be when displayed on the Internet, right? This can easily be accomplished by clicking:

          VIEW-> ACTUAL PIXELS

Actual Pixels just shows you where the pixels will actually be when spread out to 72dpi.

Zooming With the Magnifying Glass Zoom Tool

Zooming in sure is fun. It can be a little hard to zoom in on exactly what you want, though Luckily for you there us a handy tool thatll make your zoom dreams a reality.

Make sure all of your palettes are up. If youre not sure, go to WINDOW and click: Reset Palette Locations.

  1. On the left side of the screen youll see a box with a bunch of buttons on it.
    This is your "tool box"
  2. Look around. Which tool looks good for zooming in on things?
  3. Click the  button. It is the zoom tool.
  4. Notice that your cursor is now a magnifying glass.
  5. Click inside the image.
    Clicking in the image with the zoom tool magnifies.

6.     Click again.

7.     Go crazy. Click till you cant click no more.

8.     Hit CTRL/CMD+0

Many of the tools in PhotoShop do something different if you hold down a special key on the keyboard. For example, when you hold Alt on your keyboard, the Zoom Tool can zoom out as well as in. Usually the special keyboard keys are either CTRL/CMD, ALT, or SHIFT. Dont bother memorizing which key does what. There are only three keys. When you need one you can try them all until you get your desired result. After a while your brain will remember.

  1. Make sure you have the zoom tool (magnifying glass) selected.
  2. Place your cursor in the image and hold down "ALT"
    Notice how your magnifying glass has a minus sign in it?
  3. Click
    Who Hoo! Youre zooming out!

Magnify By Dragging

You can also zoom in to a precise area by dragging over it with the zoom tool.

  1. Simply click and drag diagonally across the area you wish to zoom in on.

Tool Options

Every tool has a number of options that can affect the way the tool works. The "Options Bar" is found at the top of the PhotoShop window. It is specially designed to control available options for each tool. The available options will change depending on what tool you have selected.

The Options for the zoom tool are displayed below.

***IMPORTANT: The options will not reset themselves. Theyll stay just the way you left them. If a tool is acting screwy, check the options to make sure theyre not set in an undesirable way. You can reset a tools options by clicking the Reset Options button on the Options Bar.

Continue to selections |