Web Designers Guide to Adobe Photoshop (Wordware Applications Library)

Introduction

Figure 1: The exponential growth of the internet

Chapter 1: The World of Web Design

Figure 1-1: An example of an early web page

Figure 1-2: An example of the graphical nature of the World Wide Web

Figure 1-3: Hyperlinks on a web page

Figure 1-4: Viewing the same web page at different monitor settings Courtesy of www.disney.com

Figure 1-5: Viewing a pixelated image

Figure 1-6: A web button

Figure 1-7: Resizing a vector image with no loss in quality

Chapter 2: Getting Started with Photoshop

Figure 2-1: The Photoshop work area

Figure 2-2: Creating a new image

Figure 2-3: Changing the default measurement units to display pixels

Figure 2-4: Creating a new layer with the Layers palette

Figure 2-5: Renaming a layer

Figure 2-6: Familiarizing yourself with Photoshop’s toolbox

Figure 2-7: Defining text settings in the Character palette

Figure 2-8: Creating and formatting text

Figure 2-9: Adding subtext to your logo

Figure 2-10: Changing a pencil mark’s diameter

Figure 2-11: Creating and transforming a line

Figure 2-12: Selecting a shape from the Custom Shape tool’s options bar

Figure 2-13: Adding a graphical element from the shapes menu to your logo

Chapter 3: Working with Layers

Figure 3-1: Exploring the Layers palette

Figure 3-2: Exploring the Layer Modification options of the Layers palette

Figure 3-3: Exploring the Layer Lock options of the Layers palette

Figure 3-4: A locked Background layer

Figure 3-5: Unlocking a locked layer with the New Layer dialog box

Figure 3-6: Selecting styles for your layers

Figure 3-7: The Layer Style dialog box

Figure 3-8: Changing settings of the Bevel and Emboss blending option

Figure 3-9: Changing the color overlay in the Color Picker dialog box

Figure 3-10: Copying layer styles from one layer to another

Figure 3-11: Adding blending options to your logo

Figure 3-12: Accessing preset patterns

Figure 3-13: Spicing up your logo with a light marble pattern

Figure 3-14: Changing the layer order

Figure 3-15: Organizing layers with layer sets

Chapter 4: Creating Shapes with Selections

Figure 4-1: Finding Photoshop’s Selection tools

Figure 4-2: Exploring the Marquee tools

Figure 4-3: Creating an elliptical selection

Figure 4-4: Selecting a foreground color

Figure 4-5: Selecting a single column of pixels from an image

Figure 4-6: Moving an isolated area of an image

Figure 4-7: Free Transforming a one-pixel column

Figure 4-8: Adding blending effects to your web button

Figure 4-9: Changing the text options from the Character palette

Figure 4-10: Adding text to your web button

Figure 4-11: Accessing Photoshop’s preset styles

Figure 4-12: Selecting a preset style for your web button

Figure 4-13: Adding a dark red bevel style to your web button

Figure 4-14: Accepting your duplicate layers

Figure 4-15: Changing the pattern overlay

Figure 4-16: Selecting the Blue Crepe pattern

Figure 4-17: Selecting the Blue Crepe pattern

Figure 4-18: The pushed-down effect of your Home mouseover button

Chapter 5: Combining Images

Figure 5-1: Opening existing files in Photoshop

Figure 5-2: Exploring the Marquee tool options

Figure 5-3: Exploring the Tool Preset option

Figure 5-4: Exploring selection options

Figure 5-5: The Feather option

Figure 5-6: Normal versus anti-aliased curves

Figure 5-7: Checking the Anti-alias check box

Figure 5-8: Setting the Style option to Normal

Figure 5-9: Creating a new selection

Figure 5-10: Dragging a selection onto another image

Figure 5-11: Defining an area to crop from an image

Figure 5-12: Cropping an image

Figure 5-13: Viewing the Crop tool options (available before cropping)

Figure 5-14: Viewing the Crop tool options (available after cropping)

Figure 5-15: Changing the perspective of a crop selection

Figure 5-16: Adjusting the perspective of an image

Figure 5-17: Combining multiple images

Figure 5-18: Exploring the Lasso tools

Figure 5-19: Using the Magnetic Lasso tool

Figure 5-20: Exploring the Magnetic Lasso tool’s options

Figure 5-21: Adding the Mr: Bing selection to your combined images

Chapter 6: Creating Web Headers

Figure 6-1: Viewing the Pen tools from the toolbox

Figure 6-2: Exploring options of the Pen tool

Figure 6-3: Creating a point with the Pen tool

Figure 6-4: Creating a curve with the Pen tool

Figure 6-5: Continuing a path with the Pen tool

Figure 6-6: Creating straight lines with the Pen tool

Figure 6-7: Closing your path

Figure 6-8: Exploring the Path Selection tools

Figure 6-9: Moving a path with the Path Selection tool

Figure 6-10: Working with the Direct Selection tool

Figure 6-11: Dragging an anchor point

Figure 6-12: Dragging a direction line with the Direct Selection tool

Figure 6-13: Changing the curvature of a path with the Convert Point tool

Figure 6-14: Filling your web header path with color

Figure 6-15: Spicing up the Jonathan Bing web header

Chapter 7: Pulling a Web Page Together

Figure 7-1: Using some of your images for the Bing website

Figure 7-2: Defining a web page for 800x600 screen resolution

Figure 7-3: Defining the Bing home page

Figure 7-4: Defining the character for your watermark

Figure 7-5: Creating a watermark

Figure 7-6: Changing the layer’s blending mode from Normal to Overlay

Figure 7-7: Transforming and rotating your watermark

Figure 7-8: Selecting an area within your layer

Figure 7-9: Selecting the inverse of a selection

Figure 7-10: Finishing up your watermarked web header

Figure 7-11: Defining your duotone layer

Figure 7-12: Changing the blending mode for your duotone tinting

Figure 7-13: Adding duotone tinting to your image

Figure 7-14: Lessening duotone tinting through desaturation

Figure 7-15: Creating a selection around your duotone image

Figure 7-16: Deleting unwanted areas from your image

Figure 7-17: Combining the web header and logo

Figure 7-18: Resizing the title bar image

Figure 7-19: Dragging the title bar image below the web header

Figure 7-20: Selecting an image with the Slice tool

Figure 7-21: Slicing an image further with the Slice tool

Figure 7-22: Adding another slice as a place for more content

Figure 7-23: Saving your Photoshop image for the World Wide Web

Figure 7-24: Using the Save Optimized As dialog box

Figure 7-25: Viewing your web page in a web browser

Chapter 8: Creating Web Backgrounds

Figure 8-1: Using busy backgrounds for web pages is a no-no

Figure 8-2: Small images that make up a web page background

Figure 8-3: Selecting the Gradient tool

Figure 8-4: Defining a gradient with the Gradient tool

Figure 8-5: Viewing the gradient background image

Figure 8-6: Viewing a tiled web page background

Figure 8-7: Creating a 1-pixel high sliver

Chapter 9: Working with Dreamweaver

Figure 9-1: Viewing the Dreamweaver main menu

Figure 9-2: Looking at the Dreamweaver environment

Figure 9-3: Working with the Document toolbar

Figure 9-4: Exploring the Standard toolbar

Figure 9-5: Working with the Insert bar

Figure 9-6: Working with the Properties inspector

Figure 9-7: Deleting images from your web page

Figure 9-8: Defining a background image

Figure 9-9: Accessing images from the Select Image Source dialog box

Figure 9-10: Defining background images in a web page

Figure 9-11: Changing all graphics to background images

Figure 9-12: Changing the vertical alignment of a table cell

Figure 9-13: Inserting a rollover image

Figure 9-14: Defining the Home rollover button

Figure 9-15: Adding rollover buttons to your web page

Figure 9-16: Adding text to your web page

Figure 9-17: Viewing your web page in a web browser

Chapter 10: Creating a “Professional” Web Page Style

Figure 10-1: Creating a navigation bar

Figure 10-2: Defining your selection

Figure 10-3: Defining the bevel and emboss options to create a metallic effect

Figure 10-4: Defining a metallic gradient overlay

Figure 10-5: Adding a black gradient arrow to the gradient bar

Figure 10-6: Creating an alternating black-white gradient

Figure 10-7: Creating a navigation bar with a metallic gradient

Figure 10-8: Defining the Jackson Steel Company logo

Figure 10-9: Creating the Jackson Steel Company logo

Figure 10-10: Selecting the Text Effects 2 style

Figure 10-11: Creating a metallic logo

Figure 10-12: Creating a steel plate graphic

Figure 10-13: Adding noise to your steel plate graphic

Figure 10-14: Defining a motion blur

Figure 10-15: Adding effects to your steel plate graphic

Figure 10-16: Adding text to the steel plate

Figure 10-17: Finishing your steel plate graphic

Figure 10-18: Creating a gradient with the Gradient tool

Figure 10-19: Filling your contents window with a light gray gradient

Figure 10-20: Creating a contents window for your website

Figure 10-21: Slicing your image

Figure 10-22: Opening the Jackson Steel web page in Dreamweaver

Figure 10-23: Defining a table inDreamweaver

Figure 10-24: Setting up tables (without borders) for your web page content

Figure 10-25: Viewing the Jackson Steel web page in a web browser

Chapter 11: Designing a “Modern” Web Page Style

Figure 11-1: Defining the San Simeon Software logo

Figure 11-2: Typing the San Simeon logo

Figure 11-3: Coloring a portion of your logo

Figure 11-4: Drawing a navigational menu bar

Figure 11-5: Drawing an oval watermark

Figure 11-6: Adding to your watermark shape

Figure 11-7: Transforming the watermark to fit the navigational bar

Figure 11-8: Creating a duplicate layer for your watermark

Figure 11-9: Defining the navigational menu text

Figure 11-10: Adding a menu to your navigational bar

Figure 11-11: Adding a Services menu to your navigational bar

Figure 11-12: Adding a Site Index menu to your navigational bar

Figure 11-13: Creating a colored menu section

Figure 11-14: Adding text to the Company colored menu

Figure 11-15: Adding the Solutions text to your Solutions colored menu

Figure 11-16: Selecting images to use in the San Simeon Software website

Figure 11-17: Selecting the photo filters

Figure 11-18: Selecting the Cooling Filter (82) lens filter

Figure 11-19: Adding a software image to the San Simeon Software website

Figure 11-20: Creating a new layer from the Layers palette

Figure 11-21: Defining your new layer

Figure 11-22: Selecting a soft-edged brush

Figure 11-23: Using a dodge effect to lighten up dark areas

Figure 11-24: Using a burn effect to darken light areas

Figure 11-25: Adding a customer service photo to the San Simeon Software website

Figure 11-26: Slicing your image in Photoshop

Figure 11-27: Opening the San Simeon web page in Dreamweaver

Figure 11-28: Adding a background image to your web page

Figure 11-29: Selecting the Layout mode from the Insert bar

Figure 11-30: Adding a table cell with the Draw Layout Cell option

Figure 11-31: Viewing the results of adding cells to your web page

Figure 11-32: Merging table cells

Figure 11-33: Adding background and sliver images

Figure 11-34: Adding content to your web page

Chapter 12: Going Live with Your Website

Figure 12-1: Accessing the Manage Sites dialog box

Figure 12-2: Selecting the FTP & RDS Server option

Figure 12-3: The ConFigure Server dialog box