Wordware web designers guide to adobe photoshop dec 2005 ISBN 1598220012

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 workin

Appendix C - Web Designer’s Glossary

Index

List of Figures

List of Tables

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.

Design web pages of various styles.

About the Author

Chris Tull is a writer and graphic designer in the

Dallas/Fort Worth area, and the author of Mastering Business Analysis with Crystal Reports 9 He’s a

contributing member of many organizations, including the Society for Technical Communication (STC) When not writing, Mr Tull helps companies design and

develop marketing and technical materials and

solutions.

All other brand names and product names mentioned in this book aretrademarks or service marks of their respective companies Any omission

This book is sold as is, without warranty of any kind, either express orimplied, respecting the contents of this book and any disks or programsthat may accompany it, including but not limited to implied warranties forthe book’s quality, performance, merchantability, or fitness for any

particular purpose Neither Wordware Publishing, Inc nor its dealers ordistributors shall be liable to the purchaser or any other person or entitywith respect to any liability, loss, or damage caused or alleged to havebeen caused directly or indirectly by this book

All inquiries for volume purchases of this book should be addressed toWordware Publishing, Inc., at the above address Telephone inquiriesmay be made by calling:

(972) 423-0090

Be sure to check out our other books at www.wordware.com

For Niki, my beautiful wife Without her, nothing would be possible Andfor Abby, our little girl on the way We can’t wait to meet you!

Acknowledgments

Books are never the result of a single individual They’re the result ofdozens of people’s knowledge, effort, and enthusiasm So many peoplehelped with this title We should all have our names listed on the front

I want to thank Niki — my wife and inspiration for everything I do She’s aconstant miracle in my life, and makes each day better than the last Ialso want to thank my little daughter, Abby She’s taught me so manylessons in life The amazing thing is she’s taught me these things eventhough she’s still a month or so away from being born Image how muchmore I’ll learn once she’s actually here!

I must also give thanks to Tom and Carole Tull, my parents They’ve

no matter what

Thanks must also go out to my technical editor, Clark Allen Your advicehas made this book a million times better than it could have ever been onits own

Thank you, Wordware Publishing, especially Wes Beckwith and BethKohler I love Wordware books They’re the best in the industry I feellucky to have worked with you once again

Finally, I want to thank you…my readers You teach me much more thanyou’ll ever know

Introduction

Maybe you’ve been asked to take over your company’s website or

intranet Maybe you’re in charge of handling your family’s website, towhich you’d like to add some pizzazz Or maybe you’re already a

professional graphic designer and want to update your skills No matter

where you’re coming from, Web Designer’s Guide to Adobe Photoshop is

for you

You couldn’t have picked a better time to familiarize yourself with theInternet — it’s growing exponentially

Any way you figure it, the Internet is huge and continues to grow Theopportunities for a budding web designer are immense and will only

increase with time

Web design is a unique blend of technical know-how and creative artisticability You don’t need to be a computer programmer or Leonardo daVinci However, good web design requires knowing how to:

Present material in a pleasing and aesthetic way

Understand design practices related to images for the World

Wide Web

Ensure the web pages contain no computer errors, and presentmaterial exactly the way you intend

Create web pages that allow readers all across the world, usingdifferent computer models, operating systems, and connectivityspeeds, to view your pages easily

In Web Designer’s Guide to Adobe Photoshop, I’ll provide you with the

information you need to get up and running with Adobe Photoshop andMacromedia Dreamweaver I’ll give you some tricks and tips on creatingsome dazzling effects for your web pages Essentially, I’ll give you thescoop on everything you need to know to become an expert in web

design, whether your goal is to expand your professional skills or simplyhandle your local club’s website

You can use this book in a couple of ways:

If you want to know everything there is to know about web design, read this book from cover to cover You’ll learn how to

create digital images for the web, how to navigate through thecomplexities of Adobe Photoshop, what web editors (such asMacromedia Dreamweaver) are, and why you need them

Reading the entire book will start you from square one, and takeyou all the way to getting your web pages onto the World WideWeb

If you want to find out about a specific topic, flip to that

section and start reading For example, if you’re already familiarwith Adobe Photoshop and digital image issues, you might flip to

Part II of this book and start working your way through some ofthe examples Feel free to read any section in this book withoutreading what comes before or after

This book consists of three parts, each consisting of ideas necessary tounderstand Adobe Photoshop and web design We build on these ideasfrom chapter to chapter, learning as early as the second chapter how todesign your first web images

Part I: Web Design Basics

This portion of the book gets you into the driver’s seat quickly In this part,you learn what web design is and how Photoshop works You’ll learnabout the Photoshop environment, how to use this environment, and how

to define settings to tailor Photoshop to your preferences

In Part I you’ll also begin building web images applicable to real-worldweb pages, all the while familiarizing yourself with several key Photoshopfeatures

All image files and exercises presented in this book are available in thecompanion files at www.wordware.com/files/webdesign

In this book, you’ll find several cutesy pictures beside information that isdesigned to help you better understand the topic These notes, tips, andcautions are scattered throughout the book and are as follows:

Note Sometimes, you may thirst for a little more information about a

topic Notes present more details You can skip over these ifyou like without missing any of the core ideas Notes also showyou where you can download certain files and examples

presented in this book

This icon also points you to files and exercises presented in thebook These files and exercises are available as companionfiles at www.wordware.com/files/webdesign

Tip Tips present helpful hints or suggestions to help you find yourway through potentially tricky ideas

Caution Cautions help you avoid pitfalls These identify potential

trouble areas associated with a particular topic

As the reader of this book, you are my most important critic and

commentator I value your opinion and welcome your comments Let meknow what you did or didn’t like about the book — or maybe just sharesome words of wisdom you’re willing to pass on to me

When you write, please include your name as well as this book’s title inthe subject line I promise to review your comments and respond asquickly as possible Send e-mail to chrisandniki@yahoo.com

By the way — thanks for reading!

Part I: Web Design Basics

Chapter 1: The World of Web Design

Not to be overly dramatic, but the World Wide Web is one of modernsociety’s sterling achievements

It’s everywhere — from the home to the classroom We use it to

communicate at work or to waste some hours playing at night The WorldWide Web’s something that’s always there — accessible 24 hours a day,

7 days a week The World Wide Web never sleeps

The beginnings of this technological marvel are humbling A group ofbookish and serious engineers, wishing to exchange information moreeffectively, designed the World Wide Web in the late 1980s and early1990s

The concerns of these early engineers were about function — not

necessarily form On occasion, one of them might add a horizontal bar toseparate sections of a document However, these engineers mostly stuckwith simple white or gray web pages that used black text

Creative types and designers wanted more control over the format of webpages In a response to these demands, the web transformed from astale message board to a flowering communication entity unimagined bythose first architects

To design for the web effectively, you must bring to the table both creativeflair and technical savvy You must know how to make a page appealingwithout distracting from its message You must know how to provide

images that are interesting, and yet won’t take minutes to view Theseand other ideas are what you’ll discover in this book

Take a look at Figure 1-2 to see how far we’ve come in the past decade

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

Web

Michelangelo understood architecture and the human body Beethovenunderstood pianos and violins As a creative type, it’s important you

understand a little about the medium for which you’ll be designing —specifically, the World Wide Web

The World Wide Web is made up of a system of Internet servers thatsupports hypertext Hypertext objects (text, pictures, music, programs)are elements on web pages that link to other documents or files (such asother web pages)

connections among a huge number of documents, graphics, videos, andsounds

Web designers can create hypertext for the World Wide Web using acoding language called Hypertext Markup Language (or HTML) Figure 1-

3 displays a web page with multiple hyperlinks

Figure 1-3: Hyperlinks on a web page

Although it’s useful to know HTML, it’s not a necessity for web design.With the tools and software programs today (such as Macromedia

Dreamweaver, which you’ll learn about later in this book), you can create

a web page or add pictures and text to a page without typing a single line

of code

Digital images are a web designer’s stock-in-trade Yet, if the imagesrepulse or annoy people — no matter how informative the content of thesite — they’ll never give your web page the time of day Thus, beforejumping into your web design efforts, it’s helpful to familiarize yourselfwith some digital image basics

Understanding Digital Image Color

If you were to stick a magnifying glass up to your computer monitor, you’dfind the screen consists of hundreds of individual dots or units called

pixels These pixels remain in rows and columns, just like a table

Computer monitors essentially have a palette that holds the followingcolors:

A blob of red paint

A blob of green paint

A blob of blue paint

You can create other colors by mixing these colors together Becausered, green, and blue are a computer monitor’s primary colors, computermonitors work in RGB color space

In your computer monitor, each primary color allows for 256 individualshades (ranging from 0 to 255)

Caution Besides RGB, you may have heard of CMYK CMYK is

another color model, which stands for cyan (blue), magenta(red), yellow, and black The differences between the twoare that CMYK removes color from a white background,whereas RGB adds color to a black background

So what does all this mean to you? Essentially, RGB worksbest with electronic display devices (for example, monitors),whereas CMYK works best with color printers Thus, for our

Digital Image Dimensions

The number of pixels contained in the width and height define the

dimensions of an image

For example, say you’ve got an image 25 pixels wide by 25 pixels high.Web designers typically express that image as having dimensions of25x25

As a web designer, you’ll always need to keep image dimension in mind.Your canvas (the computer monitor) contains fixed display dimensionsranging from 640x480 to 1280x1024 Most people keep their monitors at800x600 or 1024x768 Figure 1-4 displays the Walt Disney web page on

monitor display; however, the page requires vertical scrolling

Tip I’d recommend designing your images for an 800x600 screen.This will ensure that those looking at your images won’t have toscroll to view your entire screen

I wouldn’t worry about designing web pages for those using a640x480 screen setting Hardly anyone uses that large of ascreen resolution anymore, and if they do, they’re probably used

to using horizontal scroll bars

A good rule of thumb is to not make any web image larger than

775 pixels wide It’s OK to have users scroll vertically if needed,but avoid making images so large that users have to scroll

horizontally No one likes to do that

When defining your image dimensions, not only will you want to accountfor the screen dimension, but you’ll also want to account for the webbrowser For example, if you know you’re designing for an 800x600

screen (which is the norm), you’d also want to subtract some space forthe browser

Table 1-1 shows the dimensions you can use for your web pages andimages depending on the monitor screen size For the examples in thisbook, we’ll design images at 800x600

For digital images, there are two basic formats: bitmap images and vectorimages This can be a tricky subject, but one that’s bound to come up themore you work with graphics — especially those designed for use on webpages

Let’s start by talking about bitmap images — the most common type, andthe type you’ll use for most of your web design work

Bitmap Images

Bitmap images (sometimes referred to as raster images) consist of pixelsaligned in a grid As explained earlier in this chapter, pixels are those tinydots of color that come together to form an image If you’re familiar withart, pixels are similar to the art technique of pointillism (where tiny dots

make up a picture), as used in Georges Seurat’s famous A Sunday

Afternoon on the Island of La Grande Jatte painting If you were to take a

magnifying glass to this image, you’d see a pixelated image Pixelatedimages are those where each individual square dot of color is visible tothe naked eye, as shown in Figure 1-5

Figure 1-5: Viewing a pixelated image

To get a better idea of what bitmap images are — specifically as theyapply to the World Wide Web — let’s look at an icon that might be found

on a website Figure 1-6 displays a web button that is 232 by 66 pixels(or 232x66) In other words, there are 232 pixels horizontally and 66

You’d think from that last statement that you’d want to save your images

at the highest resolution possible If you were creating images to display

in a local newsletter or some other print media, then yes, you’d want yourimages to display with the highest resolution

Unfortunately, higher resolution also means larger image file sizes Inweb design, larger file sizes will result in web pages loading slower Ifyour pages take longer than 20 to 30 seconds to load, there’s a chanceusers will simply click to another site rather than stick around

What does this all mean? It means that when designing images for theWorld Wide Web, 72 to 96 ppi is the resolution you’ll want to use for yourimages

GIFs or JPEGs: The Web Images of Choice

Bitmap images include various image file formats, including:

GIF (short for Graphics Interchange Format)

JPEG (short for Joint Photographic Experts Group)

PNG (short for Portable Network Graphics)

BMP (short for Standard Bit-Mapped Graphics Format)

Of this entire list, you should use only GIFs and JPEGs for images thatwill be displayed on web pages These graphics are the most widelysupported by web browsers So is there a difference between GIFs andJPEGs? Should you use one over the other?

Although opinions differ, I would suggest the following rule of thumb withGIFs and JPEGs:

Use GIFs for images where you have large flat areas and singlecolors (such as a diagram) Also, GIFs support

transparency(something JPEGs don’t support)

Use JPEGs for all other images that aren’t diagrams JPEGscompress data better than GIFs, meaning they’ll have smaller filesizes

Vector Images

Although they’re not as common as bitmap graphics, vector graphics arebeing used more and more frequently within the World Wide Web Avector graphic consists of many individual objects, with each of theseobjects defined by mathematical statements In other words, each objecthas individual properties assigned to it such as color, fill, and outline.Vector images are resolution independent You can increase and

decrease the size of vector images to any degree, and your lines willremain sharp — be it on a computer monitor or in print Figure 1-7

displays an example of a vector drawing that is increased in scale Thesize of the file stays the same, and the image does not degrade (as is thecase with bitmap images)

Vector images must originate from software You can’t scan an imageand save it as a vector file (at least not without using special conversionsoftware) On the other hand, vector images can be converted to bitmaps(a process known as rasterizing)

However, once you convert a vector image to a bitmap image, it loses allthe wonderful qualities it had in its vector state If you convert a vector to

a bitmap at a size of 200x200 pixels, and then want the image larger, forthe best quality you’ll need to go back to the original vector file and

convert the image again

Currently, you cannot view vector images on the web without

downloading a plug-in (such as Flash) for your World Wide Web browser.Thus, you’ll probably need to convert vector images to a bitmap format ifthey’re used for the web

Common vector formats include AI (Adobe Illustrator), CDR

(CorelDRAW), CGM (Computer Graphics Metafile), SWF (Shock- waveFlash), and DXF (AutoCAD and other CAD software)

You’ve learned a lot of information that will serve as a foundation in yourfuture web design efforts In the next chapter, you’ll learn the basic skillsyou’ll need for the web design projects presented within this book

Chapter 2: Getting Started with Photoshop

Rather than start this book with a definition of every nook and cranny ofPhotoshop, let’s instead jump headfirst into the program Hands-onpractice is a lot more fun and effective way to learn anyway

In this chapter, you’ll learn Photoshop’s major web design tools Afterreading this chapter, you’ll know enough to get up and running with thesoftware You’ll also learn about creating logos — an important but oftenoverlooked area of web design

Logos are usually only a small part of a website; however, they carrymuch weight They’re symbolic…carrying messages about the nature of

a company’s business and the company’s style

With that said, let’s get started

For the example in this chapter, we’ll design a logo for an attorney- at-lawnamed Jonathan Bing Keeping this in mind, let’s go through our

requirements:

1 Who is your audience? Who goes to see lawyers? Clients

seeking legal help or advice visit lawyers These individuals areprobably facing some legal problem, and thus feeling someapprehension, confusion, and stress A conservative logo withimages that invoke justice and confidence will work best

People seeking lawyers probably won’t respond well to cutesy

or cartoony text and symbols

2 What do competitors’ logos look like? A quick search on

Google for Attorneys at Law brings up a large list of lawyers.

Check out a few of their websites The logos are simple andbold…often using only two colors and simple lines

3 Decide the format for the logo Since this logo is for Jonathan

Bing’s website, we’ll create a JPEG image at 72 dpi

With that said, let’s jump into Photoshop and get to work!

If you’ve worked with computers before, you’re probably familiar with thedifferent methods for firing up software programs To start Photoshop,you can either:

Double-click the Adobe Photoshop icon on your desktop

Select Programs ▶Adobe from your Start menu

A submenu displays, listing all your Adobe programs Select Photoshopfrom this submenu After starting Photoshop, the splash screen displays

The Splash Screen

You’ll see a bunch of little messages and files display These are fontsand plug-ins loading into the software Loading these files can take awhile, so it’s the perfect time to start making a fresh pot of coffee Afterthe splash screen goes away, the Photoshop workspace displays

Tip Photoshop needs memory…more than 384 MB of RAM (or

random-access memory) as recommended by Adobe If yourcomputer displays a message saying it’s out of memory, try

quitting some other programs that may be currently running or, ifthat doesn’t work, try restarting your computer If all else fails,you may need to add some more memory

If you’re not sure how to add memory, any computer store will bemore than happy to help Or check out www.memoryx.com

If you’re familiar with Windows or Mac programs, you’re probably familiarwith some of the elements of the Photoshop work area display, shown in

Figure 2-1

Figure 2-1: The Photoshop work area

The Photoshop work area consists of three main elements: the menu bar,palettes, and the toolbox, as summarized in Table 2-2 Of all these

and pasting, accessing specific palettes, and applying

effects to images As you progress through this book,you’ll familiarize yourself with Photoshop’s menus

Palettes

Palette is just a fancy word for dialog box The palettesfloat around — atop your images Palettes containadded controls for Photoshop, such as extra controlsfor color As you work your way through this book,you’ll become familiar with palettes to create manydifferent variations of your images

The toolbox contains multiple tools for creating,selecting, and manipulating images You’ll learn aboutthese tools as you progress through this book Press

an icon on the toolbox to select a tool To select anadditional tool (one that’s not one of the displayeddefault tools), click and hold the right-facing arrowheadfound at the lower-right corner of some icons Pressingthis small arrowhead brings up a column of alternatetools you can select The toolbox is where you’ll bespending much of your time Thus, we’ll explore thiselement in more detail in the following pages

Select File ▶New from the menu bar The New dialog box displays Enterthe following settings into the New dialog box:

including graphic designers, web designers, and photographers Noteveryone wants Photoshop to work the same way

Photoshop’s Preferences dialog box allows you to tweak the program tofit your personal likes and dislikes Let’s take a look at one preferenceespecially useful to web designers: the unit of measure.

Layers are a powerful feature in Photoshop To understand how layerswork, think of each layer as a piece of transparent paper They’re likethose old acetate slides teachers used to use with overhead projectors…before the days of Microsoft PowerPoint

Each layer in a Photoshop image contains a part of the image For

example, one layer might contain the text of an image Another layermight contain the background color A third layer might contain the cool,3D bevel style that makes the layer lift from the page A fourth layer mightcontain a drop shadow of the entire image

When all those layers are combined, you get a composite, or a masterimage, created from all these multiple layers

The best way to understand layers is to see them in action If the Layerspalette is not already displayed, select Window ▶Layers See the

following sections to learn about layers

Creating a New Layer

You should see a layer named Background listed within the Layers

palette To create a new layer, click the New Layer button found at thebottom of the Layers palette, as shown in Figure 2-4