• filters and layers
• manipulating text
• working with gradients
• creating page layouts with photoshop

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, open the Filte Gallery... and do the following:
   1. from the Artistic, options select Cutout. Experiment with the number of Levels, the Edge Simplicity, and the Edge Fidelity, then click on OK.
   2. from the Brush Strokes, options select Spatter. Experiment with the Spray Radius and Smoothness, then click on OK.
   3. from the Distort, options select Diffuse Glow. Experiment with the Graininess, the Glow Amount, and the Clear Amount, then click on OK.
   4. from the Distort, options select Glass. Experiment with the Distortion, the Smoothness, and the Texture, then click on OK.
   5. from the Sketch, options select Stamp. Experiment with the Light/Dark Balance and Smoothness, then click on OK.
   6. from the Filter menu, drag down to Stylize, and select Extrude. Experiment with the Size, Depth, Shape and other settings, 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
• 10 Photoshop Filters You Should Definitely Know

advanced exercise:

Filter Exercise using Widget Works mockup.

Open the file called widget_layout_start.psd from your week08 materials and follow these steps:

1. Open each of the three images in the widget_images folder from your week08 materials.
2. Position each icon image on the background as part of menu to select the page.
3. Ensure each icon is on a separate layer.
4. Apply a different filter to each icon
5. Use guides and shapes to re-design the widget works page
6. Use Text Tool in Photoshop to label each icon with the filter you used.
7. Use "Save for the Web" to create a flattened image of the work in PNG or JPG format

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 a fake page title (e.g., Welcome to my site! etc.).
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

advanced exercise:

Text manipulation exercise. Creating banners etc. using text.

1. Start with the orginal Widget Works file (widget_layout_start.psd) or a new PSD file of the same size
2. Save the working file to safe name to avoid over-writing your starter file.
3. It is up to you whether you wish to use any of the other images
4. Create a fancy heading for the WidgetWerks homepage.
5. Menu can be text, only, or graphical.
6. 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.
7. 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. Rename the layer button 1.
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. Hold down Control and click on the thumbnail icon in the button 1 layer to load the selection.
12. Go to the Image menu and select Crop.
13. Click on Select and drag down to Deselect.
14. Click on Image and drag down to Image Size.
    1. Set the width to 175 pixels; the height should automatically adjust.
    2. Click on OK.
15. Use the Text tool to create text layers over top of the button.
16. 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.
17. 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
• Other web buttons

advanced exercise:

Add buttons to your mockup.

Create a set of buttons for the Widget Works layout.

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

1. Open How to Design a Clean Business Website with Photoshop by Chris Creed in a new browser tab.
2. Walk through the steps at your own pace to create the Photoshop layout shown. Your instructor will be available to help you as needed.
3. When you have finished the layout, save the file to your personal space (H:\) or to your webspace. Note that you can also download the finished PSD file for comparison.
4. Next, convert the finished layout to valid XHTML and CSS files. Start by opening PSD/HTML Conversion: Code a Clean Business Website Design in a new browser tab.
5. Use your editor of choice to create the XHTML and CSS as described in the tutorial.
6. You can also download the completed XHTML/CSS files for comparison.

more on creating websites from photoshop files:

Here are some additional resources on Photoshop, XHTML, CSS and layout

• Creating a CSS Layout From Scratch
• Create a Clean and Classy Web Design in Photoshop
• 43 PSD to CSS tutorials
• 350+ Great CSS Tools and Techniques
• Layout-palooza : Top CSS Layout Download Sites, Hacks, Galleries and Tricks
• 40+ Greatest Web Interface Design Photoshop Tutorials, Part I
• 24 ways to Impress Your Friends