Unformatted text preview: Photoshop 5/25/10 2:51 PM Photoshop
PSD and Image Files Basic Photoshop Tools Creating a Header Image Creating a Navigation Image Crop an Image PSD and Image Files
Use Photoshop to create images for your website. Always save a PSD (PhotoShop Document) version of your image. To do this use Save or Save As... options under the File main menu. This version of your image has all of the layers that you created in Photoshop including the ones that are not visible. To have an image that you can use on your website, use the Save for Web & Devices option under the File main menu. Save the image as a GIF, JPG or PNG. All of these can be used on a website. GIF is good for simple icon images. JPG is the best choice for photographs. PNG is a format developed for the web, so it is great for everything else. For images with transparent backgrounds, you have to use GIF or PNG. When in doubt, PNG-24 is a good choice. Basic Photoshop Tools
Tool Function Use this tool to make selections on your image, in a rectangular shape. This changes the area of your image Rectangular that is affected by other tools or actions to be within the Marquee defined shape. Holding the [Shift] key while dragging Tool (M) your selection, restricts the shape to a perfect square. Holding the [Alt] key while dragging sets the center of the rectangle to where your cursor started. Move Tool (V) Use this tool to move things. Usually you use it to move a Layer around after it has been placed. Hold the [Shift] key to limit the movements to vertical/horizontal. Use this to select a color range. It will select the block of
http://www-rcf.usc.edu/~trinagre/itp104/lectures/Photoshop.html#crop Page 1 of 4 Photoshop 5/25/10 2:51 PM Magic Wand (W) color, or transparency, based on wherever you click. In the Options Bar at the top, you can change the Tolerance to make your selections more/less precise. The Crop Tool works similarly to the Rectangular Marquee tool (mentioned above). The difference is when you press the [Enter/Return] key, it crops your image to the size of the box. Any information that was on the outside of the box is now gone. Not permanently, you can still undo. This can be used repair scratches and specs and stuff like that on images. It works like the Brush tool. Choose your cursor size, then holding the [Alt] key, you select a nice/clean area of your image. Let go of the [Alt] key and paint over the bad area. It basically copies the info from the first area to the second, in the form of the Brush tool. Only, at the end, it averages the information, so it blends. It paints your image, in whatever color you have selected. This is the anti-Brush tool. It works like an eraser and erases whatever information wherever you click and drag it. If you are on a Layer, it will erase the information transparent. If you are on the background layer, it erases with whatever secondary color you have selected. It creates a blending of your foreground and background color when you click and drag it. It creates text. Click a single point, and start typing. You can also click and drag to make a bounding box of where you want your text to go. This tool works by changing your foreground color to whatever color you click on. Holding the [Alt] key will change your background color. Crop Tool (C) Healing Brush Tool (J) Brush Tool (B) Eraser Tool (E) Gradient Tool (G) Horizontal Type Tool (T) Eyedropper Tool (I) Creating a Header Image
From the top menu, select File → New... . In the New window, enter a name (such as header ). Select the Preset for different image sizes. Enter in a width and height. For the header image, I suggest something like 800 pixels for the width and 100 pixels for the height. Make sure the Color Mode is set to
http://www-rcf.usc.edu/~trinagre/itp104/lectures/Photoshop.html#crop Page 2 of 4 Photoshop 5/25/10 2:51 PM RGB. Make the window larger than the image. It makes it easier to select. Create a new layer by clicking on the New Layer icon (second image from the right at the bottom of the layers palette). Use the gradient tool to make the background. Select two different colors for the foreground and background. (Dark blue #181873 or rgb(24, 24, 115)) To make the gradient tool align to a 45 or 90 degree angle, hold down the Shift key while selecting the beginning and ending points of the gradient. To undo the previous action, use CTRL Z or the Edit menu option. Open another image to use in your image. Use can use the Quick Selection tool (or Magic Wand) to select part of the image. Copy and paste it into the header image. It will automatically put it on a new layer. Using the Move tool, position it. If you need to change the size, use Edit → Transform . Make sure to click the check mark displayed on the toolbar. Blend the image into the background by clicking on the Layer Mask icon (third image from the left at the bottom of the layer palette). Choose the paintbrush and select the soft brush (~32 pixel). Make grey the foreground color and begin to paint around the edges of the picture and watch it fade out. When you paint black on a mask, it hides the linked image. When you paint white, it shows the image. Shades of gray will effect the transparency. Add another layer for text. Add text using the Text tool. Select the font and size. Type the text. Use the Move tool to position it. To enhance the text, use the Layer → Layer Style option. For my example, I used Drop Shadow, Outer Glow, and Bevel and Emboss. Creating a Navigation Image
Create a new image (like above). You will want your image smaller than your header. I suggest something like 180 pixels for the width and 50 pixels for the height. If you want an image with a transparent background, then select Transparent for Background Contents. Select the Text tool to add text. You can change the font, font size, etc. in the Text toolbar under the main menu bar. To add effects to the text, select Layer → Layer Style →
http://www-rcf.usc.edu/~trinagre/itp104/lectures/Photoshop.html#crop Page 3 of 4 Photoshop 5/25/10 2:51 PM Blending Options . Then you can add several effects to your text. Save your image as a PSD file using File → Save . Then save a version of your file for your website by selecting File → Save for Web & Devices.... Save your image as a gif, jpg or png. If you want a transparent background, use gif or png. Crop an Image
Cropping is useful when you want a portion of an image. This could be used to resize an image to a specific dimension (4 in x 6 in) or to create a favicon. Open an image in Photoshop. Click on the Crop Tool icon. In the Crop Tool Option Panel, enter dimension in the width and height textfields. If you are creating a favicon , then enter 32 px in both textfields. If you want a square, enter 5 in in both textfields. If you want a 4x6 landscape photo, enter 6 in in the width textfield and 4 in in the height textfield. If you want a 4x6 portrait photo, enter 4 in in the width textfield and 6 in in the height textfield. Then can use your mouse to move around the box and resize it in order to select the image you want to keep. When you are done, click on the Checkmark icon in the options panel to commit changes. Save your new image. Updated May 2010 http://www-rcf.usc.edu/~trinagre/itp104/lectures/Photoshop.html#crop Page 4 of 4 ...
View Full Document
This document was uploaded on 05/25/2010.
- Spring '09