Web Designer's Guide to Adobe Photoshop

While Adobe Photoshop is the standard application for editing images for print, its powerful features also make it useful for editing images placed on the Internet. Web Designer's Guide to Adobe Photoshop goes beyond an explanation of creating and editing images by focusing on the next step in web development: placing images and graphics into working web pages. Whether your goal is to expand your professional skills or simply handle your local club's website, this book will help you not only create web pages but also get them working properly on the World Wide Web.Learn how to work with layers, layer styles, and patterns; create shapes with selections; combine and crop images; create web buttons, headers, and backgrounds; add content to a web page using Macromedia Dreamweaver; design web pages of various styles.

Chris Tull is a writer and graphic designer in the Dallas/Fort Worth area

Acknowledgments

x

Introduction

xi

Part 1 Web Design Basics

Chapter 1 The World of Web Design

3

(12)

Information Every Web Designer Should Know

5

(2)

Navigating the Web

6

(1)

Exploring Digital Images

7

(3)

Understanding Digital Image Color

7

(1)

Digital Image Dimensions

8

(2)

Types of 2D Graphics

10

(4)

Bitmap Images

10

(3)

Web Image Resolution

11

(1)

GIFs or JPEGs: The Web Images of Choice

12

(1)

Vector Images

13

(1)

Where to Go from Here

14

(1)

Chapter 2 Getting Started with Photoshop

15

(18)

Style Requirements for Logos

16

(1)

Starting Photoshop

17

(1)

The Splash Screen

17

(1)

The Photoshop Work Area

18

(2)

Creating a New Image

20

(11)

Setting Preferences for Web Design

21

(1)

Changing the Unit of Measurement

21

(1)

Using Layers

22

(2)

Creating a New Layer

22

(1)

Selecting Layers

23

(1)

Naming Layers

23

(1)

Working with the Toolbox

24

(10)

Creating Text

25

(1)

Moving Image Elements

26

(1)

Creating Subtext for Your Logo

27

(1)

Drawing Lines

27

(2)

Adding a Graphical Element to your Logo

29

(2)

Where to Go from Here

31

(2)

Chapter 3 Working with Layers

33

(22)

What Are Layers?

34

(1)

The Layers Palette

34

(5)

The Layer Modification Options

36

(2)

The Layer Lock Options

38

(1)

The Background Layer

39

(1)

Unlocking Layers

39

(1)

Using Layer Styles

40

(8)

Accessing the Layer Styles

41

(3)

Using the Blending Options

44

(2)

Changing Blending Options Settings

44

(2)

Copying and Pasting Layer Styles

46

(2)

Adding Patterns to Your Layers

48

(2)

Managing Layers

50

(3)

Changing the Order of Layers

50

(1)

Creating Layer Sets

51

(2)

Where to Go from Here

53

(2)

Chapter 4 Creating Shapes with Selections

55

(22)

What Are Selections?

55

(1)

Style Requirements for Web Buttons

56

(1)

Creating a Web Button

56

(11)

Exploring Photoshop's Selection Tools

57

(2)

Creating Shapes with the Marquee Tools

59

(3)

Selecting Colors with the Toolbox

61

(1)

Creating a Selection from an Image

62

(2)

Adding Blending Effects

64

(1)

Adding Text to Your Web Button

65

(2)

Using Preset Styles with Your Web Button

67

(2)

Defining a Button (for a Rollover Effect)

69

(4)

Where to Go from Here

73

(4)

Part II Pulling It All Together

Chapter 5 Combining Images

77

(20)

Removing and Combining Parts of Images

78

(18)

Using the Marquee Selection Tools

79

(6)

The Marquee Tool Options

79

(1)

Tool Presets

80

(1)

Creating, Adding, Subtracting, and Intersecting Selections

81

(1)

Using the Feather Option

82

(1)

The Anti-alias Option

83

(1)

The Style Option

84

(1)

Separating a Part of an Image

85

(1)

Cropping an Image

86

(6)

Crop Tool Options

88

(4)

Creating Irregular Selections with the Lasso Tools

92

(4)

Where to Go from Here

96

(1)

Chapter 6 Creating Web Headers

97

(18)

Exploring the Pen Tool

98

(7)

Creating Curved Lines with the Pen Tool

101

(2)

Creating Straight Lines with the Pen Tool

103

(2)

Editing with the Path Selection Tools

105

(4)

Moving Closed Paths with the Path Selection Tool

106

(1)

Fine-Tuning a Closed Path with the Direct Selection Tool

107

(2)

Editing with the Point Tools

109

(2)

Fine-Tuning Paths with the Convert Point Tool

110

(1)

Changing Paths to Selections

111

(2)

Filling a Selection with Color

111

(1)

Adding Patterns to Your Selection

112

(1)

Where to Go from Here

113

(2)

Chapter 7 Pulling a Web Page Together

115

(22)

Defining the Web Page

116

(10)

Adding a Watermark to your Images

118

(5)

Adding Duotone Tinting to Images

123

(3)

Pulling Your Images Together onto One Web Page

126

(2)

Slicing Your Web Images

128

(7)

Planning for Slicing Layout

129

(1)

Using Photoshop's Slice Tool

130

(2)

Saving for the World Wide Web

132

(7)

Which Graphic Format Is Best for Web Pages?

132

(3)

Where to Go from Here

135

(2)

Chapter 8 Creating Web Backgrounds

137

(12)

Types of Web Backgrounds

138

(1)

How Backgrounds Work

139

(1)

Sizes for Background Images

140

(1)

Creating a Repeating Gradient

140

(5)

Creating a Sliver

143

(2)

Where to Go from Here

145

(4)

Part III Publishing to the World Wide Web

Chapter 9 Working with Dreamweaver

149

(18)

Finding a Copy of Dreamweaver

150

(1)

The Dreamweaver Environment

150

(16)

Exploring the Dreamweaver Environment

152

(4)

The Document Toolbar

153

(1)

The Standard Toolbar

154

(1)

The Insert Bar

155

(1)

Exploring the Properties Inspector

156

(4)

Creating Background Images

157

(3)

Creating Rollover Buttons

160

(4)

Adding Text to Your Web Page

164

(1)

Previewing Your Web Pages

165

(1)

Where to Go from Here

166

(1)

Chapter 10 Creating a "Professional" Web Page Style

167

(24)

The Navigation Bar/Title Bar Style

168

(22)

Creating a Metallic Navigation Bar

168

(6)

Creating a Logo

174

(3)

Adding a Steel Plate Graphic to Your Web Page

177

(5)

Adding Text to your Steel Plate Graphic

180

(2)

Creating a Contents Area

182

(3)

Creating Slices in Photoshop

185

(1)

Editing Your Web Page in Dreamweaver

186

(4)

Where to Go from Here

190

(1)

Chapter 11 Designing a "Modern" Web Page Style

191

(32)

The San Simeon Software Group

192

(23)

Creating a Modern Logo Layer

192

(2)

Creating the Navigation Bar Layer

194

(1)

Creating a Watermark Layer

195

(3)

Adding Menus to the Navigational Bar

198

(3)

Creating Colored Menu Sections

201

(3)

Adding Photos to Your Web Page

204

(8)

Replacing Traditional Photography Filters

205

(3)

Dodging and Burning Your Photos

208

(4)

Slicing Your Images in Photoshop

212

(2)

Editing Your Web Page in Dreamweaver

214

(1)

Creating Background Images

215

(6)

Slivers and Backgrounds

216

(1)

Drawing a Layout Table Cell

217

(1)

Merging Cells

218

(1)

Adding a Background and Sliver Image

219

(1)

Adding Content

220

(1)

Where to Go from Here

221

(2)

Chapter 12 Going Live with Your Website

223

(8)

What Kind of Website Are You Publishing?

223

(3)

Personal (or Hobby) Websites

224

(1)

Business Websites

225

(1)

E-commerce Websites

225

(1)

Publishing to the World Wide Web

226

(4)

Using Dreamweaver to Publish to the World Wide Web

227

(3)

If You Build It, They Will Come

230

(1)

Appendix A Top Ten Web Design Mistakes

231

(8)

Appendix B Recommended Books

239

(8)

Appendix C Web Designer's Glossary

247

(6)

Index

253

What is included with this book?

The New copy of this book will include any supplemental materials advertised. Please check the title of the book to determine if it should include any access cards, study guides, lab manuals, CDs, etc.

The Used, Rental and eBook copies of this book are not guaranteed to include any supplemental materials. Typically, only the book itself is included. This is true even if the title states it includes any access cards, study guides, lab manuals, CDs, etc.

FREE SHIPPING

Amazon no longer offers textbook rentals. We do!

Web Designer's Guide to Adobe Photoshop

Summary

Author Biography

Table of Contents

Supplemental Materials