• photoshop filters
• manipulating text
• creating buttons
• slicing and saving web images

1. download a head shot image of your favorite politician or celebrity.
2. launch Photoshop and open the image you downloaded; save it with a different name, so you don't have to worry about wrecking the original, which you might need later
3. before applying each of the following filters, copy the original image onto a new layer. The end rsult should be a PSD file with six layers showing 6 different filter effects.
4. in the Filter menu, apply the following filters:
   1. drag down to Artistic, and select Cutout. Experiment with the number of Levels, the Edge Simplicity, and the Edge Fidelity, then click on OK.
   2. drag down to Artistic, and select Sponge. Experiment with the Brush Size, the Definition, and the Smoothness, then click on OK.
   3. drag down to Brush Strokes, and select Sprayed Strokes. Experiment with the Stroke Length, the Spray Radius, and the Stroke Direction, then click on OK.
   4. drag down to Distort, and select Glass. Experiment with the Distortion, the Smoothness, and the Texture, then click on OK.
   5. drag down to Sketch, and select Chrome. Experiment with the Detail and the Smoothness, and then click on OK.
   6. drag down to Stylize, and select Emboss. Experiment with the Angle, the Height, and the Amount, then click on OK.
5. once you have explored these filters, make another copy of the original image on a new layer and:
   1. experiment with some of the other filters.
   2. experiment with applying multiple filters to one image.
   3. experiment with selecting part of an image and filtering just the selection.
6. Save your image.

more on filters:

• Intro to Photoshop filters at Webmonkey
• PhotoshopFilters.com

extra credit:

Start creating a webpage mockup. Open the file called widget_layout_start.psd from your week08 materials and follow these steps:

1. From the materials for week08, open the file navimage.psd.
2. Apply a filter or series of filters to the home layer file.
3. Copy the home image into the widget_layout.psd file and position somewhere on the page.

1. Click on File and select New to create a new image:
   1. The image should be about 400 pixels in width by 200 pixels in height.
   2. The resolution should be 72 pixels/inch.
   3. The mode should be set at RGB colour.
   4. The Contents should be White.
2. Using the Color Picker, select a foreground colour and fill in the image with that colour.
3. Using the Color Picker, select a foreground colour for your text.
4. Click on the Text tool in the tool palette. In the Options bar at the top of the Photoshop window do the following:
   1. Choose the font face you wish to use.
   2. Choose the font size you wish to use.
5. Click in your image and type your name.
6. If you're unhappy with the font face, size or colour, make sure you still have the Text tool selected, and you should be able to highlight the text and then change the settings in the Options bar.
7. Once you are satisfied with the text, make sure the Text tool is still selected in the tool palette and right-click once on the image. Select Warp Text... from the menu that appears.
   1. Select one of the Warp Text styles from the Style feature. You should be able to see a preview of your image on screen.
   2. Once you have selected a Warp Text style, play with the Bend and Distortion options.
   3. Once you are satisfied with the style, bend, and distortion you want to apply to your image, click on OK.
8. Make sure the Text tool is selected in the tool palette.
   1. Right-click once on the Text layer in the Layers box.
   2. Select Blending Options from the menu that appears.
   3. Experiment with different text-manipulation options in the Styles menu within the Blending Options box. To select a style and apply it to your image, click in the box to the left of the style. You should be able to preview the changes to the text on screen.
   4. Experiment with different General Blending and Advanced Blending options.
   5. Once you like the way the text looks, click on OK to set the changes. You should be returned to your image.
9. Crop the image to a reasonable size - don't leave too much dead space around your name unless it looks really cool.
10. Save your image.

more on typography:

• Typography on the Web
• Cool Text Effects

extra credit:

Add text and headings to your mockup.

1. Create a fancy heading for the WidgetWerks homepage.
2. Create two separate areas for text content in your mockup: one for main content, one for news items. Type in fake news content or use this dummy text generator.
3. Create separate text for a footer and style it differently (size, colour, etc.) than the main content.

1. Click on File and select New to create a new image:
   1. The image should be about 400 pixels in width by 100 pixels in height.
   2. The resolution should be 72 pixels/inch.
   3. The mode should be set at RGB colour.
   4. The Contents should be White.
2. In the Layers palette, click on the Create a new layer icon.
3. In the new layer, use the Marquee tool and draw a rectangle.
4. Use the Color Picker to choose a dark foreground color and a light background color.
5. Select the Gradient Tool from the tool palette. Click in the top left corner of your image and drag to the bottom right.
6. Click on Select, drag down to Modify and select Contract. In the dialog box that appears, enter 6 and click on OK.
7. Select the Gradient Tool again from the tool palette. This time, click in the bottom right corner and drag to the upper left.
8. Click on Select, drag down to Modify and select Contract. In the dialog box that appears, enter 3 and click on OK.
9. Click on Select drag down to select Feather. In the dialog box that appears, enter 2 and click on OK.
10. Select the Gradient Tool for the last time. Click in the top left corner of your image and drag to the bottom right.
11. Click on Select and drag down to Deselect.
12. Click on Image and drag down to Image Size.
    1. Set the width to 200 pixels; the height should automatically adjust.
    2. Click on OK.
13. Use the Crop tool to crop out out dead space around your button.
14. Use the Text tool to create text layers over top of the button.
15. You can also experiment with Layer Styles:
    1. Create a new layer and fill it with your colour of preference.
    2. Click on Layer and drag down to Layer Style and then choose Bevel and Emboss.
    3. Experiment with the Structure and Shading settings and pay attention to the Preview to get a sense of how they will affect the button. Click OK.
    4. Note that you now have an effects layer in the Layers palette.
16. Save your image.

more on buttons:

Buttons are increasingly being implemented with CSS techniques. Here are some cool Photoshop and CSS resources:

• WebsiteTips.com - CSS Menus
• Fancy buttons from Sitepoint
• Other web buttons

extra credit:

Add buttons to your mockup.

1. Use the shape tool or marquee tool to create a coloured rectangle or rounded rectangle on a new layer.
2. Add text on a new layer.
3. Use blending options or filters to create an interesting effect for your button.
4. Group the button layers into a set. Copy the set, and rename it to a new button name (e.g., home, partners, etc.).
5. Change the text layer in the new set to reflect the new button set.
6. Repeat these steps until you have multiple buttons for the WidgetWerks site. Arrange the buttons to form a navigation bar.

You may follow these steps exactly, or continue to mockup your own version of the WidgetWerks site, using the steps below as a guideline for processing the pieces.

1. Open the widget_layout_finish.psd file you downloaded from the week08 folder on the class server.
2. If Guides are not currently visible, press Ctrl+; to show the guides.
3. Hold down the Ctrl key and, in the Layers palette, click on the layer named top bar.
   1. Note that there is now a marquee around the top bar.
   2. Click in the Ruler in the top of the document and drag a new guide to the bottom of the top bar until it "snaps" in to place.
   3. Press Ctrl+D to deselect the top bar.
4. Create a JPG file for the navigation picture:
   1. Make sure that Guides are still visible and select the rectangular Marquee Tool. Click and drag a marquee around the picture above the navigation. If the marquee does not snap to the guides, choose the Snap to Guides option in the View menu.
   2. Click on Image and drag down to Crop.
   3. Click on File and drag down to Save for Web...
   4. In the Save for Web... options screen, alter the image settings in the Settings area on the right side. Select JPEG from the dropdown menu and experiment with the quality options.
   5. When you are satisfied with the image, click OK in the top right corner.
   6. Save your image in a new folder named images. Name the image "home.jpg" or something else that will mean something to you when it comes time to insert it in a web page.
5. Click on File and drag down to Revert.
6. Create a GIF file for the partner button picture:
   1. Make sure that Guides are still visible and select the rectangular Marquee Tool. Click and drag a marquee around the "partners" button in the navigation bar.
   2. Click on Image and drag down to Crop.
   3. Click on File and drag down to Save for Web...
   4. In the Save for Web... options screen, alter the image settings in the Settings area on the right side. Select GIF from the dropdown menu and experiment with various settings.
   5. When you are satisfied with the image, click OK in the top right corner.
   6. Save your image the images folder you created earlier. Name the image "partners.gif" or something else that will mean something to you when it comes time to insert it in a web page.
7. Save your image.
8. Click on File and drag down to Revert.
9. Repeat the above steps for each of the image "slices" defined by the guides.

more on creating websites from Photoshop files:

To be honest, you want to avoid using tables for layout. Here are some tutorials that show you how to go from PSD file to XHTML and CSS:

• Create a Web 2.0 layout
• 43 PSD to CSS tutorials
• CSS slicing