to do
DESCRIPTION
To Do. Quiz 2 Launch Internet Explorer Launch Photoshop Programs Dev Apps Adobe Adobe CS3 Photoshop CS 3. Download images. Browne to www.msu.edu/course/tsm/251 September 24 – photo gallery 2009, 2008 & 2007 October 1 – sample images - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/1.jpg)
To Do
• Quiz 2• Launch Internet Explorer• Launch Photoshop– Programs– Dev Apps– Adobe– Adobe CS3– Photoshop CS 3
![Page 2: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/2.jpg)
Download images• Browne to www.msu.edu/course/tsm/251– September 24 – photo gallery 2009, 2008 & 2007– October 1 – sample images
• Download an original image to your jump drive, P: drive or desktop– Move your cursor over the image– Right mouse click– Save Picture as– Specify location for saving
• Open the image in Photoshop
![Page 3: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/3.jpg)
![Page 4: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/4.jpg)
Window (turn on)
– Tools– Navigator– Color– Layers– Options
![Page 5: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/5.jpg)
Tools Palette Layers Palette
![Page 6: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/6.jpg)
Brightness and Contrast
• Use to improve image quality• Remember to use “Save As” to maintain your
original
![Page 7: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/7.jpg)
Image – Adjust – Brightness/Contrast
![Page 8: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/8.jpg)
![Page 9: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/9.jpg)
Brightness and Contrast
• Try it• Use “Save As” and name the file
“Filename”_bright• Close the file• Open the original again
![Page 10: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/10.jpg)
Image Size
• Use to reduce or enlarge image size to a specific size (resampled)
• Constrain proportion (aspect ratio)• Use to reduce file size• Remember to use “Save As” to maintain your
original
![Page 11: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/11.jpg)
Image – Image Size – Use to reduce physical size of image without cropping which reduces file size
![Page 12: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/12.jpg)
Input new dimensions – leave Constrain Proportions checked to maintain aspect ratio
![Page 13: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/13.jpg)
Note: Use Save As and new file name to retain original. Resized image will be a smaller file size
![Page 14: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/14.jpg)
Image size
• Try it – reduce the photo to a 320 pixel width• Use “Save As” and name the file
“Filename”_imagesize• Close the file• Open the original again
![Page 15: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/15.jpg)
Crop Tool
• Select area• Set specific dimensions (Fixed Size) to match
your output requirements• Right click on area to Crop or• Remember “Save As” to maintain your original
![Page 16: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/16.jpg)
Crop Tool
Define area to crop
![Page 17: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/17.jpg)
Right click - Crop
Accept
![Page 18: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/18.jpg)
Note: Use Save As and new file name to retain original. Cropped image will be a smaller file size
![Page 19: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/19.jpg)
Crop Tool
• Try it – Crop the photo• Use “Save As” and name the file
“Filename”_cropped• Close the file• Open the original again
![Page 20: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/20.jpg)
Duplicate a Layer
• Right mouse click on layer• Select duplicate layer• Note the active layer (highlighted)• Note the visible• Note the lock• Note the order
![Page 21: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/21.jpg)
Add a new layer
• Select “Create a new layer”• Note transparency• Note the active layer (highlighted)• Change visible• Change lock• Change active• Change order
![Page 22: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/22.jpg)
Clone Stamp Tool
• Alt click on source area• Move to area for duplication• Click and hold mouse button while moving
![Page 23: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/23.jpg)
![Page 24: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/24.jpg)
Clone Tool
• Try it – Clone an area of the image• Use “Save As” and name the file
“Filename”_cloned• Close the file• Open the original again
![Page 25: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/25.jpg)
Text tool and Layers
• Put all text on a separate layer• Remember the duplicate layer• Remember the active layer• Remember layer order• Remember visible layers
![Page 26: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/26.jpg)
23
4
1
2 - Draw text box3 - New layer is added
![Page 27: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/27.jpg)
Both layers visible – layer 1 active
![Page 28: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/28.jpg)
Right click – Blending Options– layer 1
![Page 29: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/29.jpg)
![Page 30: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/30.jpg)
Layer 1 - invisible
![Page 31: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/31.jpg)
Background layer - invisible
Layer 1 - visible
![Page 32: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/32.jpg)
Add additional layers as needed to create web buttons, various shades of backgrounds, various captions, etc. Save file in Photoshop Native format to retain layers. Then use selective layers and Save As to save images in jpg and gif format.
![Page 33: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/33.jpg)
Text Tool and Layers
• Try it – Add text to the image• Save the file in Photoshop native file format to
preserve layers• Use “Save As” to same the file in .jpg format
and name the file “Filename”_Text• Close the file• Open the original again
![Page 34: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/34.jpg)
Colors and Filters
• Foreground and Background colors• Double click to open Color picker and
eyedropper tool• Remember theme / purpose
![Page 35: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/35.jpg)
Colors and Eyedropper
![Page 36: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/36.jpg)
Colors and Eyedropper
![Page 37: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/37.jpg)
Color Libraries
![Page 38: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/38.jpg)
Filter
![Page 39: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/39.jpg)
![Page 40: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/40.jpg)
Colors and Filters
• Try it – select a different color or even try Pantone 341
• Use one of the filters• Use “Save As” and name the file
“Filename”_color• Close the file• Now compare the file sizes – which one is
smaller.
![Page 41: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/41.jpg)
Web Buttons• Create a brand new canvas 150 x 75 pixels, 96
ppi, 16 bit color• Duplicate the layer and name the layer “normal”• Select the normal layer, right mouse click on the
layer and select “Blending Options”• Select Color Overlay and chose the color you
desire• Select Bevel and Emboss to create the button
effect• Lock the layer
![Page 42: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/42.jpg)
![Page 43: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/43.jpg)
Web Buttons
• Duplicate the normal layer and call the new layer “light”
• Duplicate the normal layer again and call this one “dark”
![Page 44: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/44.jpg)
![Page 45: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/45.jpg)
Web Buttons
• Select the “dark layer”, unlock it, right click to open Blending options, choose the Color Overlay and set the color to a darker shade of the same color, and lock the layer.
• Select the “light layer”, unlock it, right click to open Blending options, choose the Color Overlay and set the color to a lighter shade of the same color, and lock the layer.
![Page 46: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/46.jpg)
![Page 47: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/47.jpg)
Web Buttons
• Use the text tool to add a new layer and type the word “Home”
• You may need to change the font, font size and font color
• Use the grid and move tool to align the text on your button
• You may need to use zoom• When satisfied, lock the layer
![Page 48: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/48.jpg)
![Page 49: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/49.jpg)
Web Buttons
• Duplicate the “Home” layer and call the new layer “Resume”
• Select the resume layer, unlock it, click on the text and replace “Home” with “Resume” without changing the alignment. Hint, you might want to make the “Home” layer invisible. Lock the layer
![Page 50: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/50.jpg)
![Page 51: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/51.jpg)
Web Buttons• Save this file in native Photoshop format .psd to maintain
the layers• Using the visible option, select the set of layers that will
produce a normal home button• Use Save for Web to make a .jpg image that you will call
homenormal.jpg• Using the visible option, select the set of layers that will
produce a dark home button• Use Save for Web to make a .jpg image that you will call
homedark.jpg• How do you make a homelight.jpg button?• Remember to always save the file in Photoshop native
format .psd as a final step.
![Page 52: To Do](https://reader035.vdocument.in/reader035/viewer/2022062322/56815145550346895dbf6763/html5/thumbnails/52.jpg)
Save, Save As or Save for Web
• Native Photoshop format - .psd
• Output bitmap format - .jpg, .gif, .tiff