Tool bar

Tool bar:


The design above only requires basic knowledge of the tools below. We can cover others if there is time/interest but these will get you through.

Getting Started

Getting Started:


Click on the “File” menu in the upper-left corner.

Select “New” from the options.

This menu appears:
 

Since we are designing for 800 x 600 pixels make sure that the Width and Height are correct and that they are measured in Pixels not Inches or other measurements. Leave all of the other settings alone. That is, the resolution is 72 pixels per inch, RGB color with a White background.

Rulers

Rulers:


When your new page loads the Rulers around the boarder of the page may or may not be showing as in the partial screenshot below:

If they are NOT showing, click on the “View” menu and select “Rulers.”


After you have turned the Rulers on or if the rulers are already showing make sure that the rulers are measuring in Pixels. To activate the “Preferences” for the Rulers double-click anywhere on one of the rulers and you will see:

Be certain that the “Units” for “Rulers” reads “pixels” and you will be all set.

Guides

Guides:

The light blue lines mention on page 1 are guides that we can manually put in place to make certain that we are precise with our layout.

Place your cursor over the top or horizontal ruler and click-hold-and-drag downward. A dotted back line should appear that you can place anywhere on your new page. Line-up the guide with the 100 pixel mark on the vertical ruler and release.

Repeat the process with the vertical ruler but this time line-up the guide with the 150 pixel mark from the horizontal ruler. The final product should look like:
 

Layer Palette

Layer Palette:

The layer palette on the left (below) is what you see after you create a “new” page in Photoshop. There is only one layer and it is labeled as “Background”. The layer palette on the right is a screen shot from the final product seen on page 1. Each layer contains a different graphical element from the design. Think of the layers as individual sheets of transparent paper stacked on top of one another. Photoshop lets you control each design element separately so we can make modifications to the design as we go. Type or text layers are automatically created for us when we use the Type Tool. Other design elements such as the “square,” and the horizontal and vertical lines need to be created manually. Let’s choose a color for our text and then use the Type Tool.

Color Palette/Swatches

Color Palette/Swatches


Click on your Foreground color swatch in the Tool Bar and you will see the Color Picker as below:Manually move the arrows up and down the color bar (middle) to find the color you want. Click OK.

Add Layer

Add Layer:

Before using the marquee tool, (next step) manually create a new layer for the square you are about to fill-in. From menu options at the top of the screen use, “Layer” – “New”- “Layer” to accomplish this. Name the layer “square” or something else you will remember.
 

Paint Bucket Tool

Paint Bucket Tool:


Select the Paint Bucket Tool from the Tool bar. It may be that the Gradient Tool is showing in its place. Simply click and hold on the Gradient Tool to toggle between the two tools. Gradient tool is shown below:

Once the paint bucket tool is selected, place your cursor (which now looks like a bucket) into the marquee area and click. The area will change color to the color that is your foreground color selection.

Add Monogram Letter

Add Monogram Letter

Once again select the Type Tool and place the cursor over the red square. Click to activate the cursor and type your initial. If your type is still set to the same color as the color of the square (in this case red) you will need to highlight the initial and change the color and possibly the font and size. To change the font color, simply click on the color swatch at the top of the screen:
 

Add Menus and Guides for Menus

Add Menus and Guides for Menus


Once again activate the Type Tool. Place the cursor underneath the monogram initial and click. Type in the menu items you wish to have in your web site and after each hit the “Return” key. Use the type tool configurations to make proper adjustments to font style and color:

Once you have the buttons in place, drag guides between all of the buttons. You do not have to worry about the exact height of the guides.

Adding Horizontal and Vertical Lines

Adding Horizontal and Vertical Lines

Click and hold on the Marquee tool in the Tool bar and select “Single Row Marquee Tool.” Before using the tool, manually add a new layer by selecting “Layer” – “New” – “Layer” and name the layer “Horizontal Line.” Place the marquee tool anywhere on the horizontal guide that lines up with your 100 pixel mark and click. You should see the “marching ants” or dashed line running along the guide.
 

Stroke or Paint the Marquee Line

Stroke or Paint the Marquee Line


Under the “Edit” menu at the top of the screen select “Stroke” and you will see this window:
 

The width represents how thick the line will be and the color shows the color of the line after it is painted. You can leave the Location set to “Outside.”

Horizontal Line

After hitting “OK” the line should appear as below:

Vertical Line

Vertical Line

Repeat the same process to add the vertical line. First, add a new layer and title the layer “Vertical Line.” Next, select the “Single Column Marquee Tool” and place the cross-hairs on the vertical guide at the 150 pixel mark and click. After the “marching ants” appear, select “Stroke” from the “Edit” menu as above. Result:

Adjustments to the Vertical and Horizontal Lines

Adjustments to the Vertical and Horizontal Lines


The vertical and horizontal lines are drawn right over the top of the guides and we need to make sure that the vertical line is to the left of the guide and that the horizontal line is on top of or just above the horizontal guide.

So, the easiest way to de-select the single column marquee tool which is still showing on your image is to select the rectangular marquee tool again and click anywhere outside of the image. This will clear the “marching ants.”

Now select the “Move Tool.” Next, select either the vertical or horizontal line in the layer palette. Using the arrow keys on your keyboard you can now make pixel-by-pixel adjustments to the placement of the lines. So, with the horizontal line selected, use the “up arrow” key to move the line above the guide. Select the vertical line and use the “left arrow” key to move the vertical guide sideways. It may help to Zoom-in (use magnifying glass from the tool bar or “Shift” plus the “+” or “–” keys) on the lines to be certain as below:

Eraser Tool

Eraser Tool


Use the eraser tool to create the faded or feathered effects at the end of both the vertical and horizontal lines.

There are 3 options to choose from for the eraser tool but you will only need the first setting which is “Eraser Tool.” After selecting the tool, new menus appear at the top of the application that are seen in the screen-shot below:

First, make sure that your “Mode” is set to “Brush” and not “Pencil” or “Block.” By “Brush” Photoshop means “airbrush-like” and your next step is to select the nozzle-type for the brush. So, next to “Brush” pull down the menu until you find this setting:

Select the “200” setting with the “soft edge” shown above. There will be many choices but scroll until you locate this one.

Using the Erase Tool

Using the Erase Tool


The erase tool will now appear as a large circle on the page. With the vertical guide selected, click and hold the mouse to begin erasing the line from the bottom up. The eraser will only work on the layer that is selected. Remember that Photoshop has an “undo” feature under the “Edit” menu if you are not happy with how things are going.

Repeat the process for the horizontal line.
 

Save!

Save!


It is always a good idea to save your work as you go. Select the “File” menu and then “Save.” Decide on the folder or directory where you want to build your website. You may want to create a new directory for this. As with most file types for the web, your life will be much easier if you do NOT use spaces when naming any folder or file. Alternate suggestions include: myFolder, my-folder, my.folder. In Photoshop - you will be asked to name the file so pick something intuitive. Notice that the file format says “.psd” which is Photoshop Document for short. Leave this setting. The .psd format preserves the layers. Other formats, jpg, tif, gif, will flatten and compress the image and you will not be able to make edits to the layers.

Cropping and Saving

Cropping and Saving


Now we must take the image apart and save individual pieces as compressed GIFs. We will then put those images back together in Dreamweaver (next tutotrial).

Using the Rectangular Marquee Tool, select the red square and your name by starting outside the image in the upper-left corner. You will be capturing the top portion of the graphic that is 800 pixels wide and 100 pixels high. Use the guides and the “snap to” function to make certain you have that area selected as below:

Select the “Image” menu and then find the “Crop” selection. Your graphic will now be reduced to the 800 by 100 area you selected. (Don’t worry, we can get the rest of the graphic to return.)


Now you are ready to Save. Under the “File” menu select “Save for Web.” A new screen appears with your image showing. There are tabs at the top of the screen and one is labeled “4-up.” Select this tab to show different compressed versions of your image and file sizes. Do not pick the “original image” which is the .psd but choose one of the other three based on image quality. The file sizes should not vary too much. In this example the largest is 18k and the smallest 15k.

The History and Actions Palette

The History and Actions Palette


While Photoshop does have an “undo” feature available under the “Edit” menu, it also has a more advanced “History” palette that keeps track of your actions and edits. The History and Actions palette usually opens by default along with the layers palette in the right-hand corner of the application. If it is not showing, select the “Window” menu and check “History” for it to appear. It will look like:

Select the “Rectangular Marquee” action and the image will change back to its state prior to cropping. Use the “Trash Can” icon in the lower right corner of the History palette to delete that action and all that come after it. So, the image will appear as if you’ve never cropped it or even selected the top portion.

Cropping the Buttons

Cropping the Buttons

Next we have to select and crop out each of our buttons. (Please note again that this is only one way to make links or buttons for web pages. We are making “roll-over buttons that require a little bit more work. There is nothing wrong with using plain HTML text to make links in Dreamweaver.) So, using the marquee tool, line up with the 100 pixel guide to the left of the graphic just on the outside of the button and select and crop as below:Once again we are going to use the File and Save for Web function. Select one of the four images and hit save. Since we are making roll-over images we need to save two versions of each button. This is where good naming conventions are very important. I would call this button something like “resume.red.gif” to make sure I can tell the two apart.


Rather than jumping to use the undo or history palette, create your other version of the resume button now. Since you can still make changes via the layer palette, double-click the “T” (text) for the buttons and you will be able to change the color of the word resume to black or another roll over color. Once you do this, repeat the Save for Web process and name this button “resume.black.gif” Now you can use the History palette to revert.

Crop out all of the buttons and the bottom of the Vertical Line

Crop out all of the buttons and the bottom of the Vertical Line

Repeat this process for each of your buttons. When you are finished you will need to capture that tail end of the vertical line. Make sure you have a guide just below the point where your line finishes with its fade. In this example there is a guide at the 400 pixel mark:
Crop out this portion of the image by once again selecting the “image” menu and then the “crop” selection. Use the Save for Web function and name the image something intuitive.


Now that we have all of these pieces, it is time to reassemble them in Dreamweaver.

Now open Photoshop

Now open Photoshop


Open your photo from the File menu (tip: double click anywhere in the grey background area when you first open

Photoshop to open a file. This only works when nothing is open in Photoshop.)

First things first, get familiar with the Photoshop interface. You have the File Menu on top, Tools on the left, Tool

Options right below the File Menu, and Panels (windows) on the right.

Keyboard Shortcuts (similar to most programs): Ctrl Z = Undo (if you push this again, the second time it will redo. SeeHistory panel below to undo multiple operations); Ctrl O = Open; Ctrl N = New document; Ctrl X = Cut; Ctrl C = Copy; Ctrl


V = Paste; Ctrl S = Save; Ctrl+Shift+Alt S = Save for Web (explained below).

Some useful tips:

· The panels on the right side of the screen can be added, closed, expanded/collapsed and reorganized. They can

also be docked and undocked. Play around with them so you get comfortable organizing your screen.

· There are a number of different panels you can add to the right side of your screen. Go to Window on the File

Menu and add the History panel. This panel shows every thing you have done to your image and makes it easy

to back a few steps or to compare before and after you do something.

· Another useful panel is the Navigator. This panel lets you easily zoom in and out while showing you the part of

the image you a working on. You can use the slider, the zoom buttons on each side of the slider and drag the red

box around to navigate.

· The hand tool lets you drag the document around the screen. You can momentarily use this tool by holding

down the Space Bar as you click and drag the image.

OK, lets get started.

You might need to rotate your image: go to Image
Image Rotation

Next, you might want to make some adjustments to the Brightness or Contrast. This option has a dynamic preview


window so you see what your changes will look like. Get comfortable with these options.

In the Adjustments window you have a number of options. Experiment with some of these different tools.


In the Image window, select the option Image Size. This allows you to change the size two way: 1) by changing the Pixel

Dimensions. You can do this by Pixel size or by Percent change; 2) you can change the dimensions of the document by

inch, cm, percent, etc.

Another option when you are mosaicking multiple images is to use the Canvas Size option, right below Image Size. This

will change the canvas size, not the image size. So, if you make the canvas smaller than the image, it will crop the image.

If you make it larger than the image you will get empty space around you image. I rarely use this option unless I am

working with multiple photos on the same canvas.

Now is a good time to save what you have done. Always save your file first as a .psd (Photoshop Document) if you plan

on coming back and editing it further. This will give you more options than you have when you save it as a .png or .jpg.

Save for Web

Save for Web


This is an important step for publishing your image on the web. Photoshop has very good optimization options that

allow you to balance photo quality and file size.

Go to File
Save for Web and Devices

If you get this message,

you might want to make the file smaller using the Image Size option before you Save for Web. Consider that many

laptop screens are only 1024 pixels wide. Most websites are around 800 pixels wide. So, make the image the exact size

you want it to be on you website before saving it for the web. This will minimize your file size and make images load very

quickly when people view you site. Note: you can do this in the Save for Web window but it is slower and if the image is

really big, the dialog box might freeze up. If you get the warning above and continue, it will probably freeze up.

In the Save for Web and Devices window, first choose your file type. JPEG and PNG-8 are the best options for the web.

JPEG tend to be smaller in file size, Photoshop also has a nice option to change the quality of a JPEG to make the file

smaller. PNGs are larger but do preserve the quality more; PNGs are particularly good for images that have a lot of text,

like maps. I prefer JPEGs for photos.

In the bottom left side of this window you will see a preview of the file size.

Say you want to crop your image a little. Use this tool from the toolbar on the left side. Push Enter when you have

selected the area you want to crop, push Esc if you want to clear the selection and start over.

There are a few options for setting the cropping tool. 1) you can simply drag a box around what you want to crop. 2) if

you hold down Shift while you drag the mouse, it will maintain a square selection. 3) on the crop toolbar (right below

the main File Menu) you can select the width and height of the selection you want to crop. In these two fields right click

and choose the units you want (pixels, inches, points, etc.).

Advanced editing, Actions and Batching

1. Tools. First let’s go over the toolbar: Each tool has its own options; these are located in the Options panel that usually


appears right below the file menu. Take some time experimenting with each tool and its options.

(V) Move tool. With this tool you can move the objects in the layer you have selected in the layers panel.

Use Ctrl click or Shirt click to select multiple layers and move them together.

(M) Marquee Select tool. Click and drag a rectangular selection. This tool will select what is visible, not only

from the selected layer. Turn off layers if you don’t want to select from them. You can then copy, paste, etc.

(L) Lasso tool. This is a selection tool that allows you to draw a shape around what you want to select.

(W) Magic Wand tool. This tool might be one of the most useful. You can select pixels with similar values

(color). Important options are the Tolerance and the Contiguous check box. The Tolerance sets the level of

similarity the selected pixel. Tolerance level ranges from 0-255; 0 is for the same values, and 255 selects a

broad range of values similar to the target pixel’s value. With Contiguous unchecked, you can select from

the entire layer, or you can restrict it to only pixels that are neighbors.

(C) Crop tool. Refer to part 1 for a full description of the Options.

(I) Eyedropper tool. Use this tool to select the color value from any pixel. It will be sampled into the color

panel.

(J) Spot Healing Brush tool. This tool will resample the area inside the cursor window one of two ways. In the

Options panel there are two options: Proximity Match will sample from the edge of the window, Create

Texture will resample from a texture generated from within the cursor window. This tool can be used to

correct imperfections in an image.

(B) Pencil tool. Use this tool to draw lines; lines will be draw in raster (pixels, not vector paths)

(S) Clone Stamp tool. This tool can be used to remove parts of an image by replacing those pixels with values

from other pixels. To use this tool, first hold Alt and select the area of pixels you want to clone, then simply

click on an area to clone it. You can click individual actions or hold down the mouse button to clone

continually. In the options you can sample from other layers.

(Y) History Brush tool. This tool can be used to make a photo look like a painting.

(E) Eraser tool. This tool erases pixel values in the cursor window (makes pixels transparent). If you use this

tool on the Background layer it will erase pixels to the color selected in the color panel.

(G) Paint Bucket tool. This tool will fill areas in the image with the selected color. In the Options window, use

the Tolerance to adjust how the tool defines an area that can be filled. Also notice the Contiguous option.

The last two icons are filters that can be applied locally (in the cursor window). Play around with these their

names describe what they do: Blur will blur transitions between changes in pixel values; Sharpen will try to

do the opposite creating contrast between neighboring pixels; Smudge will smudge pixels as if the image

was wet paint; (the last three names are not so intuitive) Dodge and Burn can be used to lighten or darken

areas of an image respectively; the Sponge tool changes the saturation level of the selection (choose

Desaturate or Saturate in the Options panel).2. Actions. In Photoshop you can record a sequence of actions that you do on an image. This allows you to save time


when repeating a process on multiple images. Sets of these actions can be saved and reloaded later.

First, open the Actions panel (Window
Actions). You will notice a number of preloaded actions available in Photoshop.

On the bottom of the panel you have the following icons: Stop, Record, Play, Create new set, Create new action and

Delete. Let’s create a new set; then create a new action in that set. The set is just a folder that contains actions. You

don’t have to create a set to create an action, but you can only save sets, not actions alone.

When you create a new action, it automatically starts recording. Actions are simply a recorded list of tasks you did in


Photoshop (they record in a chronological manner, not a temporal manner). When you are done recording, you push

Stop. Actions are made up of these individual tasks; they are called steps. Steps can be edited; if you want to change a

step, you need to have an image open in Photoshop. Double click on the step to edit it. The order of steps in an action

can be rearranged; so you can delete a bad step, start recording, redo that step, stop recording and then move the step

to the place you want it. Make sure that the chronological order of your steps is logical (i.e. don’t export before all

editing has be conducted).

3. Batching. Once you have created an action, you can batch the action for a set of images (i.e. repeat the action

systematically on multiple images). Go to File
Automate
Batch. In the following window you can set up the batch to

open files from one directory and save them in another. You can also have the edited version overwrite the original.

The way you set up the batch will depend on what you need done and what actions you are running. Notice that you can


choose a source folder and a destination folder. Use this set up when you want to keep your originals. Use the override

“Open” and override “Save As” only when your action includes those operations. The File Naming helps you keep your

edited images identifiable from the originals. However, the File Naming option is ignored when using the Save for Web

option in your action. The File Naming only works for Save As, and therefore you can’t take advantage of the file

compression of Save for Web option. The way around this is to, first create an action that will do a Save As and rename

the files; then create a second action that will do a Save for Web and overwrite the renamed files from the Save As. Then

batch the first action; when it finishes, batch the second action. You can actually create an action that includes batching.

So you could automate this entire process. Remember, an action will record any task conducted in the Photoshop

program.

Popular Format Choices, Explained

Photoshop PDF —PDFs have gotten a bad reputation here in the Mac Lab, mostly be-


cause we don’t print them. However, PDF was developed by Adobe for file-sharing

purposes, which makes it an excellent choice for e-mailing a document to someone else

(particularly someone who doesn’t have the same version of Adobe Photoshop that

you do).

TIFF —Tagged Image File Format, another format that is pretty universally readable.

2.3

File → Save For Web

Photoshop has a special Save For Web feature that allows you to choose between GIF, JPEG,

PNG and WBMP formats. It also allows you to choose between “High,” “Medium,” and

“Low” quality resolution.

3

Size Issues

Even the steadiest hands make small mistakes with a mouse. The best way to minimize the

visibility of these mistakes is to zoom in sufficiently far on your project so that any mistakes

that you make are not apparent once the project is restored to normal size.

4

Simple Photo Re-Touching

Say we want to edit Lime Cat:

Maybe we don’t like the brown spot on LimeCat’s lime. We want to find a way to fill in an

appropriate texture and color to match the rest of the lime. Using the rubber stamp tool,

we can do just that.

4.1

Using the Rubber Stamp Tool

To use the rubber stamp tool, first select a “brush” size that looks appropriate for the error

that you’re correcting. The rubber stamp is a cloning tool, and you don’t want your cloning

area to be too large.

Next, select the area that you wish to clone by holding down the option key while you click

the mouse over that area.

Now, “dab” the mouse in short strokes over the area that you wanted to cover up (ie. The

brown spot on the lime)

File → New

Select the size of the blank document that you want to create. Pay special attention to your


choice of resolution. If you’re creating an image for the web, 72 pixels per inch will suffice.

If you’re creating a detailed art project, you want at least 300 pixels per inch, but obviously

the more the bettter.

1.2

A Few Words About Color

Computers recognized many different color formats. Some common choices include:

RGB color — lists a value between 0 and 255 for each of the Red, Green, Blue components

of a color. (0, 0, 0), the absence of color, is completely black. (255, 255, 255), the

presence of all colors, is completely white. Most Photoshop artists work in RGB.

CMYK color —lists a percentage of each of the colors (Cyan, Magenta, Yellow, blacK).

CMYK can best be thought of as the “color printer cartridge colors.” Some graphics

designers choose to convert their work (after it has been done in RGB) to CMYK so

that they have a better sense of how it’s going to look after it is printed.

Grayscale —this is exactly what it sounds like. It’s a color mode that operates entirely in

black and white. Usually in order to convert an image to grayscale, you will first need

to flatten it. (More about this later)

Bitmap —Only allows for black and white dots (pixels); I wouldn’t recommend using this

in most cases

Lab color — Represents color with 3 components: (Lightness, color value from red to

green, color value from blue to yellow). This is another non-standard color channel.

2

Saving Your File

2.1

File → Save As . . .

The default format for Photoshop files is aptly named “Photoshop Format.” Keeping your

document in Photoshop format is a good idea if you’re planning to go back and edit it later.

However, if you want to e-mail it or put it on a website, you will want to change the format

to something more universal.