Photoshop Primer

Note: There are lots and lots of image programs..beware becoming too dependent on any one program, if you're planning on doing this professionally...learn some PhotoShop, but realize that Photoshop is a tool for artists/graphic designers

Note2: It's always a good idea to save your original .psd or .pdd image for editing later
Note3: If you're new (or not) I suggest you use Photoshop's SaveForWeb & Devices (Alt+Shift+Ctrl+S) to preview/optimize an image and export it from the original
Note4: If you're not artistic, Photoshop, Fireworks, Paint Shop Pro, etc. won't make you an artist...focus on the little things. If you're not artistic, I would suggest steering clear of regular Photoshop...PS Elements would be the way to go.

1. Open Photoshop General Review

Toolbars, Tools, Panels...

2. General Image Optimization

Smaller images help your site download faster (most people are still on 56k)
Save as the "right" type (know when gif, jpg, png is appropriate...)
Crop/resize when you can
Reduce colors
In Photoshop try the SaveForWeb & Devices (Alt+Shift+Ctrl+S) and click on the 4up tab (up top) to Optimize
Brainbell has a nice optimization tutorial

3. Create a totally transparent single pixel shim

File-New (Ctrl+N)
Set Height1/Width1 (In Pixels), Resolution=72, and Transparent Background Contents
Click on File-SaveForWeb (Alt+Shift+Ctrl+S) and save as clear.gif
Make sure the image is a gif and the transparency box is checked
Click on Save... and save file as clear.gif

4. Creating a simple transparent image [Transparency/Aliasing example]

File-New
Set Height200/Width200 (In Pixels), Resolution=72, and White Background
Choose the Ellipse tool (click and hold over shape tool) from the Tools area (Window-Tools if it's not there)
Edit-FreeTransform (Ctrl+T) and while holding Shift, click and drag to draw a circle (using shift will make a perfect circle, perfect square...)
In the Options Window (Window-Options) (up top) set W: 150px and H: 150px
In the Layers Window (Window-Layers or F7) (to the right) double click the Layer Thumbnail (the box inbetween the circle shape and the eyeball) and select a bright yellow
Press V on the keyboard to select to the Move tool and reposition the circle to the "middle" of the box using the mouse or arrow keys (remember that all images on the web are boxes)
File-SaveForWeb&Devices (Alt+Shift+Ctrl+S) transparentyellow.gif
Make sure image is a gif and index transparency is chosen
Click Matte and select the color/approximate color of the matte that the image will have for a background
Click on Save... and save file as transparentyellow.gif
Add it to a page with the background color you indicated on the matte
I used a matte of purple...see how it looks on white, purple and black

5. Photo fix [Photo] (Right-Click...Save Target as...Save it to the desktop)

This image needs to be fixed - it's a .bmp file (Microsoft format) and huge
Navigate to the Desktop
On Desktop Right click on codybed.bmp and view Properties (@909kb)
File-Open-codybed.bmp
Image-RotateCanvas 90cw
Crop Area around Cody & View-Magnification 100%
Image-ImageSize (Alt+Ctrl+I) set width to 300px (Use Constrain Proportions)
File-SaveForWeb&Devices (Alt+Shift+Ctrl+S) to save image as codybed.jpg
View properties below image to see new file size
The combination of resizing, cropping and proper filetype should greatly reduce the file size of the image...on the web you want as small as you can get.

6. Making a Screen Capture with Annotation [image when finished]

Decide whether you want the full Screen (PrintScreen) or just the active Window (Alt+PrintScreen)
Let's go to the scils page at scils.rutgers.edu
Use Alt+PrintScreen to capture what's in the active window (this will just copy to the clipboard)
Switch to Photoshop
File-New (Ctrl+N)
Leave height/width, set resolution: 72 with a white background
After the new image has been created Ctrl+V to paste the screen capture from the clipboard onto the new image
File-FreeTransform (Ctrl+T) while holding shift use the handle in the lower right corner to "scale" the image smaller by clicking and dragging up to the left (using the shift key constrains proportions). Scale to about 3/4 of the original size.
Crop (C) the image so the background no longer shows
Use the Custom Shape tool (In with the Rectangle/Ellipse tool) and in the Options Window (Window-Options if it's not there) under the shape options select and create a solid thin black arrow somewhere on the white of the image
Use File-FreeTransform (Ctrl+T) and move the cursor outside of the box and clickhold and rotate accordingly
Once you've made it choose the move tool (cursor with compass or V) if not already chosen and move the arrow close to the "Library and Information Science" header on the page
Use the Skew Transformation (Edit-Transform-Skew) and grab the middle vertical point to rotate the arrow so it points at an angle towards the heading (Note: you looking for the cursor to appear as a vertical double sided arrow before you click and drag)
Use the Move tool (V) to get the arrow in close
Next click on the Text Tool (T) (Big T in Tools Menu) and click and drag somewhere on the white part of the screen.
Use the Options Window (Window-Options if it's not there) (Up top) to change the text style to: Century Gothic, size 24, red and bold
Type the words "Look Here"
Use the Move Tool (V) to position if necessary
File-SaveForWeb&Devices (Alt+Shift+Ctrl+S) and save image as scilscapture.jpg

7. Creating a Background Image(2) [image1 when finished] [image2 when finished]

1st Image

File-New (Ctrl+N)
Set Width 1024/Height 2, Resolution=72, and White Background
Zoom (Ctrl++) to 600 and scroll all the way to the left
Choose the Line tool (u) (may have to hold and click the Shape tool) and in the Options area set the color to Black, size to 10
Make sure the ruler is viewable (if not click View-Rulers on the menubar or Ctrl+R)
Position the cursor so it's about 10px from the left, click and drag down to draw the line (it'll look big, but remember we're zoomed to 600%)
Position the cursor so it's about 30px from the left, click and drag down to draw the line (hold Shift to make it straight)
Let's change the color of this line...In the Options area change the color to a light pink (may have to select the shape path in the Path window (Window-Path if hidden))
Let's make one more line...Position the cursor so it's about 50px from the left, click and drag (hold Shift to make it straight) to draw the line, change the color back to black.
File-SaveForWeb&Devices (Alt+Shift+Ctrl+S) and save image as background1.gif
(To see this work you have to add this to a page in the body tag using css)

2nd Image

File-New (Ctrl+N)
Set Width 20/Height 20 (in pixels), Resolution=72, and White Background
Zoom to 800% (Ctrl++)
Choose the Line tool (u) (may have to hold and click the Shape tool) and in the Options area set the color to Black, size to 1
Make sure the ruler is viewable (if not click View-Rulers on the menubar or Ctrl+R)
Position the cursor so it's about 4px from the top, click and drag (hold Shift to make a straight line) to the right to draw the line
Once drawn, in the Layers window (Window-Layers or F7 if hidden) click the shape layer and decrease the opacity to 40%
Position the cursor so it's about 12px from the top, click and drag to the right to draw the line (hold Shift to make it straight)
Once drawn, change the color to a light pink in the Options window (may have to select the shape path in the Path window (Window-Path if hidden))
File-SaveForWeb&Devices (Alt+Shift+Ctrl+S) and save image background2.gif
(To see this work you have to add this to a page in the body tag using css)

8. Create a simple Banner (feel free to play around with color/font) [image when finished]

File-New (Ctrl+N)
Set Width 468/Height 60 (standard ad size)(In Pixels), Resolution=72, and White Background
Use the text tool (T) to add "YourFirstName's Resume" (e.g. Steve's Resume) (Century Gothic, 36,#0033FF )
(Hint - set everything first)
Use Move tool (V) to reposition it
Use the Shape tool (hold and click and select line) to draw a 2px line below it (color #663300) Note: Holding Shift will make a straight line
Use the Shape (Line) tool (U) to draw a 1px line below that (color #CC3366)
Try Ctrl++ to zoom and Ctrl+- to zoom out
File-SaveForWeb&Devices (Alt+Shift+Ctrl+S) and save as banner.gif

9. Text to a Path [image when finished]

File-New (Ctrl+N)
Set Width 728/Height 90, Resolution=72, and White Background
Choose the Shape tool and click and hold to select Ellipse and create an Ellipse that takes up about 3/4 of the image size (make sure the fill color is something other than white so you can see it) Note: See Step 4 bullet 6 to see how to do this
Choose the Move (Arrow and Compass) tool (V) and move the ellipse so that only the top 1/2 is on the canvas
Choose the Text Tool (T) and change properties to size 24, color (some kind of orange), Kristen ITC
While the shape layer is still selected (on the right) (Windows-Layers or F7 if hidden) and the path is selected (click on paths in the same window as the layers window or Window-Paths if hidden), hover the Text tool over the path until it turns into an I shape with a / going through it
Click and type "Here comes the sun, it's gonna be a groovy day" on the image
You can play with the left, right, and center alignments
In the Layers window (to the right) click the eyeball on the shape layer and in the Paths window, deslect the elllipse path, to hide the shape layer
Layer-New-Layer (Shift+Ctrl+N) and in the Layers window (to the right) (Window-Layers or F7 if hidden) click and drag the new window over the first layer labeled background
Select the Paint Bucket Tool (g) (located next to the Eraser tool) (may have to hold and click the gradient tool) and double click the Foreground tool (located on the bottom of the Tools area) (The higher of the overlapping boxes) and choose a light yellow
File-SaveForWeb&Devices (Alt+Shift+Ctrl+S) and save image as sunny.gif

10. A Simple Mask effect (dl this image to work with: mooseface.jpg) (this is just one way to do this)

"Example 1 "

File-Open (Ctrl+O) mooseface.jpg
On the lower left hand corner of the image choose 100% or (Ctrl++ or Ctrl+-)
On the right hand side of the screen make sure you see the layers panel (if not Window-Layers or F7)
Duplicate the image by Layer-DuplicateLayer... (Ctrl+J) because the original image is locked and a mask cannot be added
With the new layer selected, choose the Elliptical Marquee tool (M) (may have to hold and click Rectangular Marquee tool) and set Feather to 40 in the Options window (Window-Options if hidden)
Draw an oval around Moose's face
In the Layers Panel on the bottom click the Add Layer Mask icon (box with a circle in it)
In the Layers Panel click on the eyeball next to the original layer labeled Background
Scale, Crop, Filter, etc. to your heart's content
File-SaveForWeb&Devices (Alt+Shift+Ctrl+S) and save image as moosemask.jpg
(Mine looks like this)

"Example 2"

Reopen (File-Open or Ctrl+O) mooseface.jpg
Duplicate the image by Layer-DuplicateLayer... (Ctrl+J) because the original image is locked and a mask cannot be added
Choose the Text tool (T) and set properties to Berlin Sans FB, 350, Bold
Type BAD (all caps)
In Options Area click the Toggle the Character and Paragraph palletes (looks like a bulleted document) set the Kern (hover over the icon or edit box to see what it is) to -10 to bring the text closer together
Use Move Tool (V) to position text over the eyes as best you can
In the Layers window (Window-Layers or F7 if hidden) drag the text layer below the duplicated moose layer, but above the original moose layer labeled Background
In the Layer window select the duplicated moose layer, which should be above the text layer, and in the menubar click Layer-CreateClippingMask or Alt+Ctrl+G)
In the Layers Panel click on the eyeball next to the original layer labeled Background
Right now the image is really too "light"
With the text layer selected, select the Pencil or Brush tool (B) select a funky brush and select a black color
Start dabbing around the words BAD (click ok on popup to rasterize layer)
File-SaveForWeb&Devices (Alt+Shift+Ctrl+S) and save image as moosebad.jpg
(Mine looks like this)