College of Computer Studies CS 19

What

Photoshop, now up to version 7.0, is the leading professional image-editing program, released by Adobe. Photoshop is useful for both creating and editing images to be used in print or online. Easy to use, but full of high-quality features, Photoshop is the best choice for any image manipulation ob.

is

Adobe

Photoshop

7.0?:

Opening Adobe Photoshop 7.0:

!lic" the #$tart# menu and go to the #Programs# folder. %ou will see an #Adobe# folder with #Photoshop 7.0# inside& clic" this icon.

Photoshop will initially open with a tool panel and a variety of windows, all of which loo" incredibly intimidating at first. %ou can ignore the right-most set of windows for now. 'irst, let(s familiari)e ourselves with the main menu.

File - create new images, open pre-e*isting images, print, e*it the program, etc. Edit - undo, copy, paste, cut, preferences, basic image manipulation, etc. Image - change the image or canvas si)e, rotate, ad ust brightness + contrast, etc. Layer - !reate , delete layers, merge layers together, layer effects, etc. Select - Ad ust the selected area of your image Filter - Apply filters and effects to your images View - -oom in and out of your images Window - .pen or close different windows within Photoshop

Creating a New Canvas / Image:

/o to the #'ile# menu and select #0ew# 1or press !trl203.

Page 1

College of Computer Studies CS 19

A window will appear as"ing you how large you would li"e your canvas 1or wor"ing area3 to be. Pic" a si)e large enough to wor" with& you can always #crop# your image later, so it(s better to have too large an area than too small an area. 'or comparisons sa"e, your monitor(s total space is probably 4056 * 778. 9a"e your decision, and clic" #.:.#

%our canvas will open as a blan", white window. ;he top of it will say #<ntitled# 1until you save it3, and will be at 400= 1unless it is too large to fit on the screen at once, in which case it may appear at 77.7= or smaller3.

Opening a Pre-e isting Image:

/o to the #'ile# menu and select #.pen# 1or press !trl2.3.

'ind the image on your computer that you wish to edit, and clic" #.pen.# %our image will open in a new window within Photoshop.

Page 2

College of Computer Studies CS 19

!diting an Image:
Once you have an image created or opened, you can edit or draw on top of it with Photoshop's "Tools" window, which is the long, thin window that is automatically open on the left side. Here is a rea! down of all the tools contained on this ar"
1. Marquee Tool - used for selecting areas of an image 2. Move Tool - used for moving an image to a different area of the canvas 3. Lasso Tool - used for selecting areas of an image that may not necessarily be comprised of straight lines 4. Magic Wand Tool - used for auto-selecting large areas of an image that are similar in color 5. Crop Tool - used for reducing the image to a certain area 1#cropping#3 6. Slice Tool - used to #slice# an image into different sections& generally used for the creation of images for a web page design 7. Healing rus! Tool - used to fi* imperfections in an image by copying other pi*els from the image. ;he >ealing ?rush tool will also match the te*ture, lighting, and shading to perfectly match the are you are fi*ing ". rus! Tool - used with the mouse to simply draw lines on your image

#. Clone S$a%p Tool - used to #clone# or copy one area of an image to another& first hold #Alt# and clic" an area of the image to copy, then clic" on a different area to copy it there

Page #

College of Computer Studies CS 19 1&. His$or' rus! Tool - used to copy and draw a pre-e*isting image in different artistic styles

11. (raser Tool - used to erase certain areas of an image 11. )radien$ Tool - used to create gradient fills for an image, of any color 12. lur Tool - used to blur or blend areas of an image

13. *odge Tool - used to uniquely ad ust the brightness and contrast of an image 14. +a$! Selec$ion Tool - used merge overlapping components into a single component 15. T'pe Tool - used to place te*t on an image 16. +en Tool - used to draw lines and curves with better precision 17. ,ec$angle Tool - used to draw rectangles and other polygons 1". -o$es Tool - used to leave notes for yourself on your image 1#. ('edropper Tool - used to select and match specific colors 2&. Hand Tool - used to quic"ly view different areas of an image 21. .oo% Tool - used to )oom in and out of an image 22. Se$ /oreground 0 ac1ground Color - used to set the foreground 1front3 and bac"ground 1bac"3 colors of an image& can also be used to change the colors of te*t, etc. !lic" on the bo*es to change the colors 1a new window will appear3. 23. (di$ Modes - used to switch bac" and forth between modes 24. S2i$c! Screen Modes - used to switch between full screen and standard screen modes 25. 3u%p $o 4%age,ead' - used to easily launch the @mageAeady program

"nderstanding

#a$ers:

.ne of Photoshop(s most powerful features is the ability to create and use multiple layers within the same image. A layer is literally what it sounds li"eB one layer on top of another, all of which can be edited independently of each other and laid on top of or beneath one another, and then later combined to form a single, flat image. Chen you first create an image, you will be wor"ing with the #?ac"ground# layer. %ou cannot always use all effects on a bac"ground layer, so you may wish to start wor"ing directly with normal layers. ;o create a new layer, clic" the #Dayer# menu, and pic" #Dayer# from the #0ew# menu 1or clic" $hift2!trl203.

Page $

College of Computer Studies CS 19

@n the new window that pops up, clic" #.:.# 0ow loo" down in the bottom-right of the screen to the lower-most window, which we haven(t loo"ed at yet. @t will have three tabs on itB Dayers, !hannels, and Paths. Ce(ll be staying on the main #Dayers# tab, for now. @t should loo" something li"e thisB

%ou will notice that #Dayer 4# is above #?ac"ground# in the window. ;his means that anything that(s on Dayer 4 will ta"e priority over anything in the ?ac"ground layer. ;hings in the ?ac"ground layer will be obscured by things in Dayer 4. Chy would you want to do thisE %ou can switch bac" and forth between layers to move items independently of items in other layers, allowing you to lay things out e*actly as you want. $o what are all these options in the layers windowE

Page %

College of Computer Studies CS 19

1. +ain$5rus! S'%5ol - ;his symbol 1and the blue shading of the layer3 notes the currently active layer 2. S!o2 0 Hide La'er - Chen the eye icon is visible, the layer is displayed in your pro ect. @f the eye is clic"ed, then the layer is hidden but not deleted. 3. Lin1 4con - @ndicates if the layer is currently lin"ed to another layer. Chen lin"ed, layers act #loc"ed# together 1and will move with each other, accordingly3, but still remain separate layers. Dayers can be lin"ed together by selecting one layer, and then clic"ing the bo*es in the other layers to display the #Din"# icon 1number three on the above list and image3. 4. ac1ground - ;he ?ac"ground is technically not a layer, however, it can be edited. @t is the bottom-most portion of the image. 5. La'er - Each layer has its own name 1default is by numbering3. !lic" a layer(s name to edit on that layer. 6. Te6$ La'er - Adding te*t creates a new te*t-specific layer. 7. (77ec$s - Chen you add effects to a layer, a sub-menu appears with that layer listing the effect applied to it. Fouble-clic" an effect(s name to bring up that effect(s menu to ma"e ad ustments. ". 8dd a La'er S$'le - ?y pic"ing an option from this menu 1such as Frop $hadow, @nner /low, or ?evel and Emboss3, you can apply special effects to a layer. #. 8dd a Mas1 - 9as"s are used to hide pi*els on a layer in order to view the rest of the image. Dayer mas"s are either a blac" or white bac"ground color. ;he default color is white, which lets pi*els be seen, while blac" hides pi*els. 1&. Crea$e a -e2 Se$ - ?y ma"ing a new set, you can create a separate folder for layer storage.

Page &

College of Computer Studies CS 19 11. Crea$e -e2 /ill or 8d9us$%en$ La'er - ;he options in this menu allow you to change the color properties and dimensions of a layer. 'or e*ample, you can ma"e a layer lighter or dar"er, add a gradient 1a blending of two colors3, or invert the entire layer. 12. Crea$e a -e2 La'er - !lic"ing on this icon creates a new layer. %ou can name your layer in the te*t bo* that appears and position it in the palette. 13. *ele$e a La'er - Feletes the currently selected layer. %ou can also drag a layer to the trash. 14. :paci$' - <se this to ad ust a layer(s opacity 1its transparency3. Some notes about layers: Dayers can be repositioned in different orders in the Dayers palette by clic"ing on a layer and dragging it to a new position in the palette. ;o ma"e a layer appear on the top-most part of the image, drag it higher up on the list. Fo the opposite to position a layer at the bottom-most area of an image. .nly a selected layer can be edited. ;o select a layer, clic" on the layer name in the palette. %ou can only wor" with layers in a G.psd file 1Photoshop(s native format3. @f you want to modify a G.gif or G. pg file 1or any other type of image file3 with layers, copy and paste that image into a new, blan" Photoshop canvas.

%wit&hing 'a&( and )orth 'etween #a$ers:

;he layer that(s selected under the #Dayers# tab will be the one changes are made to when wor"ing on the canvas. @f you wish to wor" on a different layer, clic" the name of that layer. Aemember, if you want to bring a different layer to the front of the image, clic" and drag it above or below to where you want it.

Cropping an Image:

@f an image is too large and you would li"e to cut it to ust focus on one section of the image, you can #crop# it to that si)e and area. $elect the #!rop# tool, and clic" and drag around the area you want.

Page '

College of Computer Studies CS 19

%ou can resi)e the area 1or rotate it3 with the mouse by clic"ing any of the corners. Chen you(re done, ust clic" over to any other tool and a window will appear as"ing you if you(d li"e to crop the image. !lic" yes, and the image will be reduced to the area you(ve specified.

*esi+ing an Image:
@f you don(t want to crop your image 1meaning you want the E0;@AE image, ust at a smaller si)e3, you can resi)e your image to any dimensions you wish. $elect #@mage $i)e# from the #@mage# menu.

;he default in Photoshop is to "eep image resi)ing at #!onstrain Proportions.# ;his means that if the height is changed, the width will be changed at the same ratio. ;his "eeps your image loo"ing appro*imately the same, only at different si)es. @f you wish to change this, ust un-clic" the #!onstrain Proportions# chec" bo* at the bottom of the #@mage $i)e# window.

Page (

College of Computer Studies CS 19

%ou can change the image si)e either by pi*els or percentages. <se either you wish to either enlarge or reduce the si)e of your image 1"eep in mind that enlarging images will reduce the quality3.

,oving an Image:
%ou can move an image to any area of the canvas you wish. $elect the #9ove# tool, and clic" and drag the image to any area of the canvas you wish.

%e-e&ting / .e-eting a Part o/ an Image:

!hoose the #9arquee# tool, and clic" and drag around a part of an image. A rotating, dotted line will surround that area. ;o delete this section that you(ve selected, hit the #Felete# "ey on your "eyboard.

Page )

College of Computer Studies CS 19

;he #9agic Cand# can select a larger area of an image by grabbing similar loo"ing pi*els and grouping them together. $elect the 9agic Cand tool and clic" an area of an image. @t will select a large portion of the area which you can move, delete, etc.

Adding 0e t:
!lic" the #;e*t# tool on the tool bar and clic" in your image where you(d li"e to add te*t.

Page 1*

College of Computer Studies CS 19

;he te*t will appear on top of the image, and it will be on its own new layer. %ou can change the font, style, si)e, anti-aliasing, and color of your te*t on the menu directly below the main Photoshop menu.

A-tering 1o2r Images:

Photoshop(s most powerful aspect is its ability to edit and manipulate images easily and with professional quality. ;he second section of the tool menu contains tools that specifically help you to edit your images. Chen you clic" any of these tools, Photoshop(s sub-main menu will change to reflect new options available to you. 9ost will loo" something li"e this, or very similarB

1. -a%e - ;he name of the tool you(re using. 2. rus! +ic1er - >ere you can select the diameter, hardness, and spacing of the brush , tool you are using. 3. Mode - Effect mode 4. :paci$' - ;he transparency of the tool(s effects. 5. /lo2 - ;he flow rate of the stro"e. 6. 8ir5rus! - !lic" to enable airbrush capabilities with the tool. Brush / Pencil Tool

Page 11

College of Computer Studies CS 19 ;he ?rush tool can be right-clic"ed to also show the Pencil tool as an option. ?oth are very simple tools that allow you to directly draw on top of an image. $elect a color with the 'oreground !olor option on the tool bar, and select a brush si)e from the tool(s sub-main menu, above. !lic" and drag across an image to draw on top of it.

!lone ;ool ;he !lone tool will copy pi*els from one part of an image and copy them to a new part of the image. ;he !lone tool is most useful in situations such as removing blemishes from a face in a photograph, clearing a few clouds out of a bright blue s"y, etc. !hoose the !lone tool. >old the #Alt# button on your "eyboard, and clic" in an area of the image that you(d li"e to copy. 0ow clic" elsewhere in the image, and move the cursor around. ;he image will #clone# itself to that second area.

Page 12

College of Computer Studies CS 19

Eraser ;ool ;he eraser simply deletes sections of an image. !lic" the Eraser tool, and clic" and drag around your image. ;he eraser will #erase# the image to what(s set as the ?ac"ground color.

/radient , Paint ?uc"et ;ool ;he /radient tool can be used on its own, or right-clic"ed to also select the Paint ?uc"et tool.

Page 1#

College of Computer Studies CS 19

A gradient is a hori)ontal fading of colors, most commonly used in the creation of banners for web pages. $elect the /radient tool, and go to the sub-main menu for a drop-down of available gradients. ;he default is the most common.

.nce you(ve selected which gradient you wish 1and a color in the 'oreground color tool3, ust clic" and drag across your image. ;he direction you drag 1left to right, right to left, etc.3 determines the flow of the gradient.

;he Paint ?uc"et lets you fill in a large section with the same color. $elect the Paint ?uc"et by rightclic"ing the /radient tool, and clic" in an area of your image. @t will fill with the color selected as the 'oreground color.

Page 1$

College of Computer Studies CS 19

?lur ;ool ;he ?lur tool is useful for covering up small distortions in an image by blending the surrounding pi*els together. ;o blur something, select the ?lur tool, and clic" and drag around the area you wish to blur.

*otating an Image:

%ou can rotate and flip your image in any direction you wish. @n the #Aotate !anvas# list under the #@mage# menu, there(s a wide variety of options to choose from.

Page 1%

College of Computer Studies CS 19

@f you select #Arbitrary# for a rotation, a new window will appear as"ing you for the direction 1cloc"wise or counter-cloc"wise3 and the degree of the rotation.

.rawing %hapes:

Chile Photoshop(s main power is in manipulation of images, it(s also possible to draw your own 1as seen with the pencil and pen tools3. ;he Aectangle tool 1and all of its sub-tools3 allows you to draw shapes on a canvas. ;o draw a simple rectangle, pic" a 'oreground color 1which will be the fill color for the shape3, select the Aectangle tool, and clic" and drag on the canvas until it(s the si)e you wish.

0ote that drawing a shape will create a new layer. %ou can draw a wide variety of shapes with the Aectangle tool and its sub-tools, including the !ustom $hape ;ool, which gives you even more options. $elect the !ustom $hapes ;ool 1by right-clic"ing the Aectangle tool3, and loo" through your options in the drop-down bo* from the sub-main menu.

Page 1&

College of Computer Studies CS 19

%our choices include word bubbles, arrows, and even shapes that don(t fill themselves in with a color.

!$edropper 0oo-:
Chen wor"ing with images, you may find that you want to reselect a color you(ve used, but aren(t sure e*actly what color it is. %ou can use the Eyedropper tool to reselect that e*act color for you. $elect the Eyedropper tool, and clic" anywhere on an image that has the color you want to select.

;he 'oreground color will change itself to the color you(ve selected.

3oom 0oo-:
@f you find that you need to )oom in or out of your image for any reason 1for e*ample, to be more precise in deleting areas3, you can use the -oom tool. !lic" the -oom tool 1it loo"s li"e a magnifying glass3. @f you clic" once on your image, it will )oom to double its si)e 1400= to 500=, and so on3.

Page 1'

College of Computer Studies CS 19 @f you right-clic", you can select the #-oom .ut,# which will reduce its si)e. 0ote that this doesn(t actually change the si)e of the image. @t simply changes your view of the image on the canvas.

4istor$:

.ne of Photoshop(s most powerful and useful abilities is the option to go bac" in the #history# of your image. ;his means that at any point, you can go bac" to a previous version of your image. ;his is particularly useful if you find you(ve made a mista"e several steps bac". %ou(ll notice that the >istory window 1which can be opened via the #Cindows# HH #>istory# menu if it(s not already open3 lists all of the steps you(ve made in your image.

'rightness 5 Contrast:
$ometimes when wor"ing with images, you may need to ad ust the brightness and,or contrast 1especially with scanned images3. Photoshop ma"es this very easy. $elect #?rightness,!ontrast# from the #Ad ustments# HH #@mage# menu.

A new window will appear allowing you to slide the brightness and contrast any way you wish.

Page 1(

College of Computer Studies CS 19

;he ?rightness,!ontrast command lets you ma"e ad ustments to the overall tonal range of an image. Ad ustments made in here will affect every pi*el in your image, unless a selection is made beforehand.

#a$er %t$-es:
%ou can do much more with layers other than piling images on top of each other. .nce you have added images or te*t to a layer, you can add distinctive styles to them, ma"ing them stand out even more. .nce you(ve added an item to a layer 1such as te*t3, clic" the #Add a layer style# button in the #Dayers# window. A list of styles will appear which you can add to your layer.

;he most common layer style you will see and use is the traditional #Frop $hadow.# !lic" #Frop $hadow# to bring up the #Dayer $tyle# window, which will automatically open to the #Frop $hadow# section.

Page 1)

College of Computer Studies CS 19 #.pacity# refers to the transparency of the shadow 1how well can you see it , see through it3. ;he #Angle# is the angle at which the imaginary light is coming from to create the shadow. #Fistance# is the amount of space near or away from the ob ect or te*t the shadow appears. #$pread# refers to the thic"ness or solidity of the shadow. #$i)e# is, simply, how big the shadow is. E*periment with the different settings. %ou(ll notice that as you ad ust these settings, your image on the canvas will ta"e on the changes. ;his is ust a preview& none of the changes will actually ta"e effect until you clic" #.:.#

;here are a wide variety of layer styles. E*periment with the different layer styles to find one 1or a combination of some3 that suit your needs. 'or e*ample, #@nner /low# will create te*tures and colors within your te*t or ob ects, while #.uter /low# will do the same outside your ob ects 1similar to a Frop $hadow3.

)i-ters:

Photoshop has a wide variety of filters you can apply to your images. ;hey include obvious ones such as blurring and sharpening, but also very advanced ones such as ripples, distortions, and rendering clouds. %ou can browse through the available filters by selecting the 'ilters menu.

Play around with the available filters, and remember that you can undo your actions at any time with the >istory window.

Page 2*

College of Computer Studies CS 19

%aving Images - P%. )ormat:

@f you are wor"ing with a very comple* image 1lots of layers, filters, etc.3, you may want to thin" about saving it. $aving as a P$F file 1Photoshop(s native format3 allows you to open it up again with all the layers and such intact. @f you save it as another type of image, Photoshop will #flatten# the image. ;o save your image as a P$F, ust select #$ave# from the #'ile# menu, and select a place on your hard drive or dis" to save it.

%aving Images - )or the Web:

.n the @nternet, there are two file types for images on websites that are the most predominantB /@' 1G.gif3 and IPE/ 1G. pg3. ;he /@' format is geared towards images that do not need to be viewed with a large amount of colors. ;he standard /@' file will be of 5J7 colors or less. ;his is perfect for the @nternet, and more specifically, images that will appear directly on a web page. ;he IPE/ format is geared toward aimages of a #real world# or #natural# sense, such as photographs. IPE/ images are generally of thousands of colors or grayscale. IPE/ can hold up to 47 million colors. >igh quality, larger images stored in a website(s #@mage /allery# may be saved as IPE/s. Photoshop comes with features specifically geared to optimi)e pictures for the web. $elect #$ave for the Ceb# from the #'ile# menu.

Sa ing as a !IF File <nderneath #$ettings,# select #/@'# from the drop-down menu. .ne of the most important features in this menu is the #!olors# setting. ;he more colors your image has, the more colors you should allow your /@' to have. >owever, since you want to create optimi)ed images for the web, it is best to use as little possible color as possible, while still saving a clear image. @f your image has very few colors, you

Page 21

College of Computer Studies CS 19 should change the color setting to reflect the small number of colors. ;he small the number of colors, the small the file si)e the /@' will have. @f you want, your image can have a solid outline color. %ou can choose this by going to the #9atte# selection, and pic"ing a color. .ther options in this menu need not be changed. ;hese are standard defaults for saving /@'s. Chen you are ready, clic" #$ave# and save the image by giving it a file name.

Sa ing as a "PE! File <nderneath #$ettings,# select #IPE/# from the drop-down menu. /o to the drop-down menu with #IPE/ >igh# displayed. ;here you can determine the quality of the image for the web. 0aturally, higher quality images will have a larger file si)e. @t is not necessary that images be e*tremely high quality. <sually, #9edium# is a good setting to choose. ;o refine the quality of the image, use the #Kuality# setting. >ere, you can save the IPE/ as a percentage of the original image(s quality. 'or e*ample, J0= would be half the quality of the original image. Chen you are ready, clic" #$ave# and save the image by giving it a file name.

Page 22