Photoshop CS6 unlocked, 2nd edition

The Photoshop Workspace Photoshop’s “out of the box” workspace consists of the following components, shown in Figure 1.1: Individual “panes” that hold information or options for working

Preface xv

1 Getting Started with Photoshop 1

2 Basic Skills 37

3 Creating Buttons 83

4 Creating Backgrounds 137

5 Working with Text 185

6 Adjusting Images 219

7 Manipulating Images 273

8 Designing a Website 357

9 Advanced Photoshop Techniques 385

Index 407

Photoshop CS6 Unlocked: 101 Tips, Tricks & Techniques

by Corrie Haffly

Copyright© 2012 SitePoint Pty Ltd

Editor: Kelly Steele

Product Manager: Simon Mackie

Cover Designer: Alex Walker

Technical Editor: Diana MacDonald

Indexer: Fred Brown

Latest Update: July 2012

Notice of Liability

The author and publisher have made every effort to ensure the accuracy of the information herein However, the information contained in this book is sold without warranty, either express or implied Neither the authors and SitePoint Pty Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.

Trademark Notice

Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.

Published by SitePoint Pty Ltd.

48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: business@sitepoint.com ISBN 978-0-9872478-7-2 (print) ISBN 978-0-9872478-8-9 (ebook) Printed and bound in the United States of America

About Corrie Haffly

Corrie Haffly graduated from UC Davis with a degree in mathematics, but found web design to be much more interesting She created her first simple HTML page in 1998, after which she began working for Advantrics LLC in 2000, where she brought its PixelMill and John Galt's Templates brands to the top of the website template market Corrie went freelance from 2004-2010, before joining Synteractive as their lead designer She lives in Davis with her husband and two sons (with another arriving soon!).

About SitePoint

SitePoint specializes in publishing practical, rewarding, and approachable content for web professionals Visit http://www.sitepoint.com/ to access our books, blogs, newsletters, articles, and community forums.

To my sons Steven and Matthew: I love you all the

way to India and back.

To Baby Bear: I can’t wait to meet you!

Preface xv

Who Should Read This Book xvi

What’s in This Book xvi

Where to Find Help xvii

The SitePoint Newsletters xviii

Your Feedback xviii

Acknowledgments xviii

Conventions Used in This Book xix

Chapter 1 Getting Started with Photoshop 1

The Photoshop Workspace 2

Working in Photoshop 6

Photoshop Layers 10

Photoshop Toolbox 13

Other Useful Tasks and Shortcuts 28

When Photoshop Stops Working 34

All Tooled Up 35

Chapter 2 Basic Skills 37

Placing a Graphic in Your File 37

Resizing a Document 42

Resizing a Layer or Selection 42

Rotating a Layer or Selection 44

Using Drawing Tools to Create Lines 45

Perfect Squares and Circles 46

Straightening Edges of a Rounded Rectangle 46

Curved Design Elements 49

Reusing Vector Shapes 54

Sampling Colors from Image Files 57

Saving Color Swatches 58

Finding the Hexadecimal Code for a Color 59

Adjusting Layer Transparency 62

Fading an Image into the Background 63

Blending Two Images Together 66

Rounding the Corners of a Photo 68

Masking Multiple Layers with the Same Shape 70

Making a Dotted Coupon Box 74

Applying a Drop Shadow 77

Images with Transparent Backgrounds 77

A Solid Foundation 81

Chapter 3 Creating Buttons 83

Making a Simple Flat Button 83

Adding an Outline to a Button 85

Making a Pill Button 87

Making a Gradient Button 91

Making a Shiny Plastic Button 96

Making a Flat Plastic Button 105

Making a Round Push-button 108

Making a Metallic Button with a Matte Finish 109

Making a Shiny Metallic Button 113

Making Angled Tab Buttons 116

Making a Rounded Tab Button 119

Making a Rounded Arrow Button 120

Making a File Folder Tab Button 123

Making a Badge Button 125

Making a Sticker Button 127

Cute as a Button 136

Chapter 4 Creating Backgrounds 137

Making a Seamless Tiling Background 137

Making a Striped Background 147

Making a Pixel Background 149

Making a Gradient Background 152

Creating a Brushed Metal Background 153

Creating a Woodgrain Background 157

Making a Granite Background 162

Making a Textured Stone Background 165

Making a Textured Paper Background 171

Making a Rice-paper Background 172

Making a Rainbow-striped Background 180

Got Your Back 183

Chapter 5 Working with Text 185

Adding a Single Line of Text 185

Word-wrapping Text 186

Adding Lorem Ipsum Text 187

Increasing the Space between Lines of Text 188

Increasing the Space between Letters 189

Using Paragraph and Character Styles 191

Word-wrapping Text inside a Shape 193

Warping Text 196

Wrapping Text around a Curved Object 197

Making Small Text More Readable 199

Making Text Follow a Path 200

Adding an Outline 203

Making Text Glow 203

Making Glassy Text 203

Creating Chiseled or Engraved Text 205

Giving Text a Stamp Effect 206

Giving Text a Motion Effect 211

Adding a Shadow to Text 213

Adding a Pattern to Text 213

Adding a Gradient to Text 214

Changing the Shape of Letters 215

It’s All in the Fine Print 218

Chapter 6 Adjusting Images 219

Straightening Crooked Images 219

Making Whites Whiter 223

Making Blacks Blacker 227

Adjusting Tone and Contrast 227

Making Colors More Vivid 230

Removing Color Tints from Photos 233

Darkening Areas on an Image 239

Lightening Areas on an Image 242

Fixing the Red-eye Effect 245

Converting Photographs to Black-and-white Images 247

Making Sepia Images 251

Matching Lighting and Colors between Images 252

Combining Two Distinct Images 257

Getting Rid of Dust and Scratch Marks 259

Smoothing Grainy or Noisy Images 264

Sharpening Images 267

Adjusting Dark Shadows and Bright Highlights 269

Photo Op 271

Chapter 7 Manipulating Images 273

Adding Scanlines to an Image 273

Creating a Magnifying Glass Effect 277

Making the Foreground of a Photo Stand Out 292

Adding a Bokeh Effect to a Photo 300

Creating a Bordered Photo Effect 301

Creating a Photo App Effect 304

Adding a Paint Effect to an Image 310

Isolating an Object from an Image 314

Saving an Object on a Transparent Background for a Flash Movie 325

Creating a Reflection for an Image 325

Creating an Image Thumbnail 329

Putting a Picture onto a Product Box 330

Placing a Picture onto a Curved Surface 336

Making Product Photos for an Ecommerce Site 339

Removing Blemishes from a Portrait 343

Removing Distracting Elements from an Image 344

Merging Partial Scans into a Single Image 350

Replacing a Color in an Image 352

Coloring a Grayscale Image 354

You’re in Control 356

Chapter 8 Designing a Website 357

Before Firing up Photoshop 357

Setting up a Grid in Photoshop 358

Making Wireframes in Photoshop 360

Designing a Website Using Photoshop 364

Experimenting with Different Layouts 368

Filling an Area with a Pattern 370

Adding a Content Shadow Effect 372

Creating Web-optimized Images from a Photoshop Site Mockup 376

Taking It to the Web 383

Chapter 9 Advanced Photoshop Techniques 385

Creating Thumbnails for Multiple Images 385

Saving Settings for a Batch Command 389

Pausing an Action to Make Customizations 390

Watermarking Multiple Photos 391

Saving Photoshop Actions 393

Saving Layer Style Sets 395

Saving Multiple Comps for Presentation 396

Creating an Animated GIF 397

Editing Videos in Photoshop 403

Let the Adventure Begin 406

Index 407

This book is a resource for web designers who want to use Photoshop to create better-looking webgraphics.

When this book came out in 2006, it was one of the first Photoshop CS2 books that didn’t encourageyou to use Photoshop’s generated HTML code Instead, it saw Photoshop fundamentally as a webgraphic editor and optimizer in the web design process Yet Photoshop is just one of many tools tofound in a web developer’s arsenal While knowledge of how to actually code a website usingHTML, CSS, and other web languages is important, it is not covered in this book, which is strictlyabout using Photoshop to create graphics for websites I encourage you to look into the many otherresources—both online and book form—that will teach you the basics of web development if youneed to develop your skills in those areas

A lot has changed in the field of web design and Photoshop in the last six years Now at versionCS6, Photoshop has more powerful filters and effects, and more efficient tools Meanwhile, themobile environment, responsive design, and a wider adaptation of HTML5 and CSS3 has transformedthe way the Web works and looks I’ve updated this book to take into account the new and improvedtools in Photoshop CS6, as well as recent techniques and design elements you might be seeing onthe Internet For instance, you’ll notice that buttons and backgrounds have evolved somewhat since

2006, and there are new solutions for using Photoshop’s Content-Aware technology, as well as forsetting up grids and wireframes in Photoshop

My purpose in writing this book was to provide some of the building blocks and techniques thatwill help you create your own cool web graphics There’s no need to dedicate several hours eachweek working through an example project; the anthology format of this title enables you to quicklylook up a task or effect you’re interested in and accomplish it following clear instructions

Hundreds of tutorials exist online for creating various web graphic effects in Photoshop This bookshows you how to create many of these effects, with several solutions expanding to include a

"Discussion" section that explains the concepts involved This will enable you to understand more

of how Photoshop works so that you can apply that knowledge in other situations

As this book is primarily for web designers, I’ve covered only some of the basic and intermediatetasks related to photo adjustments and retouching If this area is of interest to you, there are manyexcellent books geared towards professional photographers and artists that provide more advancedinstruction than does this title

My hope is that this book will help you build the skills and knowledge needed to become confidentusing Photoshop to create web graphics Good luck, and have fun!

Who Should Read This Book

This book is ideal for all web designers working with Photoshop If you’re new to the application,there’s enough beginner material here to give you a great grounding in the basics, but if you have

a bit more experience up your sleeve, there are some more advanced solutions to help hone yourskills

What version of Photoshop do I need?

Most of the techniques in the book will work regardless of the version of Adobe Photoshop thatyou’re using However, the book is intended for web designers using Photoshop CS6, and there aresome solutions that make use of the newer features in this version Some of the shortcuts differbetween versions of Photoshop, so keep this in mind if you’re working with an older version

What’s in This Book

This book comprises the following nine chapters Read them in order from beginning to end to gain

a complete understanding of the subject, or skip around if you only need a refresher on a particulartopic

Chapter 1: Getting Started with Photoshop

If you’re brand new to Photoshop, come here to learn about how to get around If you’re notbrand new, you may still enjoy the time-saving tips included in these pages

Chapter 2: Basic Skills

Build a good foundation for your use of Photoshop with these basic skills, including resizing,rotating, and hiding parts of your picture

Chapter 3: Creating Buttons

Make buttons of every shape and style by following the solutions in this chapter

Chapter 4: Creating Backgrounds

Create tiling backgrounds that you can use in design elements such as headings and menu bars,

or even the page background itself!

Chapter 5: Working with Text

Learn to adjust type settings and make cool text effects for your next logo or web graphic

Chapter 6: Adjusting Images

Fix, salvage, and adjust photographs that are over-exposed, under-exposed, or just dull-looking

Or, take a good photograph and make it look even better!

Chapter 7: Manipulating Images

Start with a photograph or image and add your own effects such as a bokeh effect, reflections,and more!

Chapter 8: Designing a Website

Bringing all the skills from previous chapters together, this chapter shows you how to createweb design mockups in Photoshop, then generate web-optimized images

Chapter 9: Advanced Photoshop Techniques

Automate and animate! This chapter shows you how to save time when performing similartasks on many different files, then shows you how to use Photoshop to create animations andedit videos

Where to Find Help

SitePoint has a thriving community of web designers and developers ready and waiting to help youout if you run into trouble We also maintain a list of known errata for the book, which you canconsult for the latest updates

The SitePoint Forums

The SitePoint Forums1are discussion forums where you can ask questions about anything related

to web development You may, of course, answer questions, too That’s how a discussion forumsite works—some people ask, some people answer, and most do a bit of both Sharing your knowledgebenefits others and strengthens the community A lot of fun and experienced web designers anddevelopers hang out there It’s a good way to learn new stuff, have questions answered in a hurry,and just have fun

The Graphics Forum is your best bet for most matters Photoshop.2

The Book’s Website

Located at http://www.sitepoint.com/books/photoshop2/,3the website supporting this book willgive you access to the following facilities

The File Archive

The file archive is a downloadable archive that contains some examples presented in the book intheir original formats It contains files for many examples with which you can play Go ahead anddownload the archive.4

Updates and Errata

As much as we try, no book is perfect, and we expect that watchful readers will be able to spot atleast one or two mistakes before the end of this one The Errata5page on the book’s website willalways have the latest information about known typographical and code errors

The SitePoint Newsletters

In addition to books like this one, SitePoint publishes a range of free email newsletters: PHPMaster,

CloudSpring, RubySource, DesignFestival, BuildMobile, and the SitePoint newsletter In them you’ll

read about the latest news, product releases, trends, tips, and techniques for all aspects of web velopment You can sign up to one or more of these newsletters at

de-http://www.sitepoint.com/newsletter/

Your Feedback

If you’re unable to find an answer through the forums, or if you wish to contact us for any otherreason, the best place to write isbooks@sitepoint.com We have a well-staffed email support systemset up to track your inquiries, and if our team members are unable to answer your question, they’llsend it straight to us Suggestions for improvements, as well as notices of any mistakes you mayfind, are especially welcome

Acknowledgments

Many thanks to Simon, Diana, Tom, Kelly, and the rest of the wonderful and cheery SitePoint teamfor working with me on this book, and for their patience and positive encouragement when I fellbehind schedule! I am extremely grateful for the time they invested in this whole process

Thanks again to Jason, Greg, and Eric: first, for believing in the potential of a young mathematicsmajor with a flimsy resume; second, for suggesting that I submit an article to SitePoint (whichstarted all of this); and finally, for their supportive working relationship and continued friendship.Thanks also to Heather for recruiting me to my current position with Synteractive, and for being

an awesome supervisor and friend, giving me the flexibility and encouragement to take this project

on while getting my own workload done

Thanks to Angela, for introducing her kid sister to computer graphics programs, and Leslie, forsetting up the free travel, room and board, and summer internship that would introduce me to webdesign Thanks also to my parents, who sacrificed for me and taught me how to work hard, andagain to the Toones and Wiekings, who let me use photos of their cute children for the originalbook, which have made it into this edition as well!

I am so very thankful for Steve, who was willing to take on the extra hours of being a stay-at-homedad to our sons Steven and Matthew so that I could work on new screenshots and revisions, evenduring treasured weekend times Thank you for loving me, believing in me, and never once holding

me back I hope I can do the same for you

Finally, I thank the One who has blessed me with every good gift and is my source of inspiration

Conventions Used in This Book

You’ll notice that we’ve used certain typographic and layout styles throughout this book to signifydifferent types of information Look out for the following items

Tips, Notes, and Warnings

Make Sure You Always …

… pay attention to these important points.

Watch Out!

Warnings will highlight any gotchas that are likely to trip you up along the way.

Getting Started with Photoshop

You’ve heard of Photoshop, right? Of course you have—you wouldn’t be reading this book otherwise!

Photoshop is one of the most commonly used tools in the web designer’s arsenal From the ation of initial design comps to generating optimized graphics for a web page, most web designersrely heavily on this powerful program

prepar-In this introductory chapter, I’ll cover some of the basic tools and tasks that we’ll draw on in laterchapters I’ll also share some of the shortcuts and time-savers that I frequently use This chapterwill stop short of providing an exhaustive review of the many effects that Photoshop can achieve(where would it end?), but it will provide the bare bones that will help beginners get started Ifyou’re already familiar with the interface and can perform tasks like making selections, applyinggradients, and working with layers, you might want to skip ahead to the next chapter

So, what are you waiting for? Open up Photoshop and let’s go!

What’s new in Photoshop CS6?

If you’re a seasoned user of previous versions of Photoshop, you might just be interested in what’s new in CS6 for web designers Here’s a quick list:

■ The Photoshop interface is darker, allowing your images and documents to better stand out.

■ Background saving and auto-recover gives you peace of mind.

■ The Crop Tool has many more options, including image-straightening and helpful aspect ratio grids A new Perspective Crop Tool allows you to straighten images taken at an angle.

■ The Shape Tool allows you to immediately apply fill and stroke effects to the shape (instead of using styles).

■ Blurring tools are much more powerful.

■ The Patch Tool uses better Content-Aware technology.

■ The Content-Aware Move Tool allows you to quickly move objects in photos with minimal editing.

■ Basic video editing is now possible in Photoshop.

■ You can now define character and paragraph styles for type.

■ You can quickly add lorem ipsum filler text from theTypemenu.

■ Layer styles are no longer just for layers; they can now be applied to Groups.

■ TheLayerpanel allows for filtering and searching layers.

The Photoshop Workspace

Photoshop’s “out of the box” workspace consists of the following components, shown in Figure 1.1:

Individual “panes” that hold information or options for working with your file, known as

panels, float on the right-hand side Each panel is labeled with a tab, and can be minimized,

closed, grouped with other panels, or dragged to the panel docking areas on the right and bottom,and in the icon column In Figure 1.1, theColorpanel allows you to change the foreground andbackground colors by changing the Red/Green/Blue values directly, or by picking from thecolor spectrum

Document windows

Each open document has its own document window with a status bar along the bottom The

status bar displays information that’s specific to the document Document windows can be

full-screen as shown in Figure 1.1, with multiple document tabs across the top, or dragged out tobecome independent, floating windows.

Menu bar (not shown)

You will probably already be familiar with the menu bar from other programs This runs across

the top of your display (Mac) or Photoshop window (Windows), and contains various menuoptions for Photoshop’s tools

Figure 1.1 The Photoshop workspace

Comps and Turtlenecks: Designer Lingo

Now that you’re going to be working in Photoshop, you might want to start talking like a designer Designers, like professionals in most specialist fields, have their own terminology for their tools of the trade A comp (short for “composite”) refers to a mockup of the final solution that a designer has in mind Traditionally, a comp is used in the print world to refer to page layouts, but for web designers it usually refers to a static interface prepared entirely in Photoshop for the client to look over before they decide to proceed You might even hear it being used as a verb, where comping is the process of creating that mockup site.

Customizing Your Workspace

You can customize your Photoshop workspace to suit you or your project; almost everything withinyour workspace can be repositioned and reconfigured You might choose to customize your work-space by:

Changing the look of the menu bar

You can change which menu items are visible in your menu bar, or even add color to your

menu items If you wanted, you could also assign new or alternative keyboard shortcuts to menucommands (I recommend against it, though, until you feel very comfortable with Photoshop orhave a compelling reason to do so) Go toEdit > Menus…and use the dialog box to modify themenu bar and panel menus

Moving the options bar

If you want to move the options bar, you can do so by clicking the handle on its left side and

moving it around The options bar will “dock” to the top or bottom of the screen automatically

if moved near those areas

Moving the toolbox

The toolbox is extremely portable, and can be moved to any location on your screen Move the

toolbox by clicking on the dark gray area at the top of it and dragging it around You may alsoclick the double arrows in this gray area to change the toolbox from one to two columns

Rearranging panels

There are many ways to rearrange your panels You might want to separate a panel from its

panel group and move it into another group You can do this by dragging the panel tab out of

its original group and into the new group You might also decide to drag some of your paneltabs into the icon column The panel icon column can be resized as well to display the name

of the panel instead of just the icon Panels also can be docked in the right side or bottom ofthe workspace of the workspace Finally, to display a panel that has been closed, go toWindow

and select the panel you want to show

Displaying different information in the document window status bar

The status bar displays the document file size by default The file size is shown as two numbersseparated by a forward slash: the first number is an approximation of the image file size withall layers merged (known as “flattening” the image), while the second number is an approxim-ation of the total file size of the image with layers intact If all this sounds new to you, don’tworry—we’ll be discussing layers shortly You can set the status bar to display different inform-ation, such as the document dimension in pixels (shown in Figure 1.2) or the version number

of the file To do this, click on the arrow icon next to the status bar and choose the informationyou’d like to see

Figure 1.2 Changing the status bar

Saving Your Customized Workspace

As you become more proficient with Photoshop, you may discover that you use certain sets ofpanels for different types of projects, while other panels are left unused Photoshop allows you to

save and load various workspaces—different arrangements of panels, menus, even keyboard

shortcuts—to help you work more efficiently

After you’ve customized your workspace to your satisfaction, selectWindow>Workspace>New Workspace…from the menu bar and enter a name for your workspace, such as Creating Thumbnails

or My Default Workspace You can then load your different workspaces by openingWindow>

Workspaceand selecting your custom workspace from the menu list

Web Designers Use Pixels

One of the first tasks I do once I’ve installed Photoshop is change my Photoshop preferences to use pixel units instead of inches or centimeters Go toPhotoshop>Preferences>Units & Rulers(Windows:

Edit>Preferences>Units & Rulers) and change theRulerunits to pixels You may also want to change theTypeunits to pixels.

Working in Photoshop

Now that you’ve been introduced to the Photoshop workspace and have a basic idea of whereeverything is, let’s start getting our hands dirty

Creating New Documents

You can create a new document by selectingFile>New…from the menu bar, or pressing the keyboard

shortcut Command-N (Ctrl-N on Windows) The Newdialog box will appear, as shown in Figure 1.3,where you can specify the document size and other settings

Figure 1.3 The New dialog box

Snappy Presets

If you’re designing for a website, be sure to set the resolution at 72Pixels/Inchto reflect the actual screen resolution If you’re designing for a minimum screen size, such as 1024×768, be sure to take into account scrollbars and menus, and set your initial document size at a smaller dimension for your actual working area 1000×650, for example, will give you a better estimate of your actual screen size.

If you want easy access to these dimensions for other new documents, it’s probably a good idea to clickSave Preset…and give the settings a name like “Web Page.” The next time you create a new

Save a file by selectingFile>Save or pressing Command–S (Ctrl–S on Windows) For a newly created

document, this will save your work in Photoshop Document (PSD) format If you’d prefer to save

an additional copy of the document, you can useFile>Save As… or press Command-Shift-S (Ctrl-Shift-S) instead To the great delight of Photoshop users everywhere, Photoshop CS6 introduces

a backup save, where a recovery file is saved every ten minutes You can change the time in betweensaves by going to Photoshop’s preferences (Mac:Photoshop>Preferences>File Handling…, PC:Edit

>Preferences>File Handling…), and choosing from 5, 10, 15, or 30 minutes, or 1 hour If Photoshopcrashes on you, the recovery file will open automatically the next time you start up Photoshop

Double-clicking Power

As if keyboard shortcuts weren’t quick enough, Windows users have even more ways to open and save files, such as:

■ holding down Ctrl and double-clicking the work area to create new documents

■ double-clicking the work area to pull up theOpendialog box to open files

■ holding down Alt and double-clicking the work area to open existing files as new documents

■ holding down Ctrl-Shift and double-clicking the work area to save documents

■ holding down Shift and double-clicking the work area to access Adobe Bridge: Adobe’s “control

center” and file browser

The work area is the dark gray area behind the document windows If your shortcuts fail, check

that you’re clicking on an empty spot on the work area, and not in one of the document windows

or Photoshop tools.

Alas, on a Mac, Photoshop only allows for double-clicking the work area to open a document Even then, you must haveWindow>Application Frameticked in order for it to function.

Saving Files for the Web

Photoshop files themselves are unable to be embedded into a web page You’ll need to export yourfile and save it in a web-friendly format There are three formats for web graphics: GIFs, JPEGs, andPNGs

GIF The GIF format (pronounced “giff”) can have a maximum of 256 colors GIF files support

transparency and animation, and work best with graphics that have large areas of the samecolor, as shown in the logo in Figure 1.4

Figure 1.4 An image that should be saved as GIF

JPEG The JPEG format (pronounced “jay-peg”) works best with photographic images, or images

that have more than 256 colors and gradients, such as the flower in Figure 1.5 Images saved

in JPEG format are compressed, which means that image information is lost, causing theimage to degrade in quality

Figure 1.5 An image that should be saved as JPEG

PNG The PNG format (sometimes pronounced “ping”) is similar to the GIF format in that it

sup-ports transparency and works best with solid-color images like the logo shown previously;however, it’s superior to the GIF format as it has the ability to support true levels of trans-parency for colored areas PNGs can produce a better quality image at a smaller file sizethan can GIFs Photoshop allows you to save an image as a PNG–8 file (which works thesame way as a GIF would with 256 colors) or a PNG–24 file (allowing for millions of colors

as well as variable transparency)

To save for the Web in Photoshop, selectFile>Save for Web… or press Command-Option-Shift-S (Ctrl-Alt-Shift-S on Windows) This will bring up the Save for Webdialog box shown in Figure 1.6,which will show you a preview of the image to be exported, with its optimized size in the bottomleft-hand corner You can adjust the settings for the image using the options in the pane on theright Choose whether you want to save the file as a GIF, JPEG, PNG-8, or PNG-24, and have a playwith the other settings, keeping an eye on the optimized file size Try to strike a balance betweenthe quality and file size of the image When you’re happy with the result, clickSave…and give yourimage a filename

Figure 1.6 Save for Web dialog box

If you tried this exercise, you’re probably quite pleased with yourself for saving an image of able quality at a file size significantly smaller than the original You managed this by altering the

reason-settings in the right-hand pane, but what do these reason-settings actually do?

GIF/PNG-8

Colors

Adjusting this setting reduces the number of colors used in the image This will usually havethe biggest effect on the final image

Dither amount and type (such as No Dither, Diffusion, Pattern, Noise)

This setting has nothing to do with being nervous or agitated Dither refers to a compression

technique in which the pattern of dots is varied to give the illusion of a color gradient Changingthe dither will result in a more noticeable degradation for images that involve a large number

of colors blended together

Transparency

If you want transparent areas in your graphic, check this box We’ll look more closely at parency in Chapter 2

trans-Matte color

For transparent images, the matte color is used to blend the edges of your image into the

back-ground of the web page For opaque images, the matte color defines the backback-ground color ofthe image Using matte color with transparent images is covered in more detail in Chapter 2

JPEG

Quality Changing the value in the compression quality drop-down box orQualityinput field alters

the level of compression for the image Reducing the quality may result in blurring orpixelation, but too high a setting will produce a large file that will take users too long

to download A good approach is to decrease the quality value gradually until you noticethe degradation of your image becoming unacceptable A reasonable compromise will

be somewhere around this point

Photoshop Layers

Layers are a powerful feature of Photoshop that enable you to work on one part of an image withoutdisturbing the rest of it While the concept of layers may seem intimidating at first, you’ll wonderhow you ever survived without them once you get the hang of using layers Figure 1.7 shows aPhotoshop document made up of layers

Figure 1.7 Layered Photoshop document

Figure 1.8 reveals how the layers stack together

Figure 1.8 The layers in a layered Photoshop document

The transparent parts of any layer, shown by a checkered grid, allow the layers beneath that layer

to show through You can show and hide each layer in an image by clicking on its correspondingeye icon in theLayerspanel, as shown in Figure 1.9

Figure 1.9 Hiding a layer

To organize your layers, you can arrange them into layer groups by going toLayer>New>Group….Each layer group displays in the same way as any ungrouped layers on theLayerspanel A layer

group is signified by a folder icon You can collapse or expand layer groups by clicking on the triangle

to the left of the folder icon, and nest layer groups within each other by dragging one folder iconinto another

Layer Shortcuts and Tasks

■ Rename layers by double-clicking on the layer name

■ Change the transparency of a layer by changing its opacity with theOpacityslider, or typing avalue into theOpacitybox

■ Duplicate a selected layer by pressing Command-J (Ctrl-J on Windows) You can also duplicate

a layer by dragging it while pressing the Option (Alt) key Or you could type Shift-Option (Shift-Alt) and then hit an arrow key to duplicate the layer and nudge it ten pixels in your desired

direction (note that this only works when you have the Move Tool invoked)

■ Select multiple layers by holding down Command (Ctrl) and clicking the layer names This

forms a temporary link between the selected layers that allows you to move them as one unit,delete them all, and so on

■ You can also link layers together Select layers by clicking on them while holding down Shift

or Command (Shift or Ctrl on Windows) Once you’ve selected all the layers you wish to link,

click theLink layersbutton at the bottom-left of theLayerspanel (signified by the chain) Linkinglayers allows the link relationship to remain even after you select a different layer (unlike theprocess of simply selecting multiple layers)

To unlink all the layers, select one of the linked layers and go toLayer>Select Linked Layerstoselect all of them automatically; then go toLayer>Unlink Layers To unlink a single layer, selectthe layer you wish to remove from the link and click theLink layersbutton at the bottom-left oftheLayerspanel; the other layers will stay linked To temporarily unlink a layer, hold down

Shift and click on its corresponding link icon (a red “X” will appear over the link icon)

React-ivate the link by holding down Shift and clicking the link icon again.

■ Rearrange layers by dragging the layer above or below other layers Use the “move down”

shortcut Command-[ (Ctrl-[) and the “move up” shortcut Command-] (Ctrl-]) to move selected layers up and down Command-Shift-[ and Command-Shift-] (Ctrl-Shift-[ and CtrlShift ] on

Windows) will bring layers to the very top or very bottom of the stack

■ Select a layer by using the keyboard shortcuts Option-[ and Option-] (Alt-[ and Alt-] on Windows).

These keystrokes let you move up and down through layers in theLayerspanel

■ Create a new layer by pressing Shift-Command-N (Shift-Ctrl-N on Windows) This will bring

up theNew Layerdialog box Want to create new layers quickly without having to deal with the

■ Merge a layer into the one beneath it by pressing Command-E (Ctrl-E) If you’ve selected layers,

this shortcut will merge those selected layers together

Finding Layers

Some Photoshop documents grow to have dozens of layers Even if you’ve diligently named yourlayers so that they’re easily identifiable, it might be challenging to find the specific layer you want

to work on This is where the top section of theLayerspanel comes in and saves the day

My sunset document only has a few layers, but it has enough to make my point In Figure 1.10, thetop row of theLayerspanel in the image on the left shows the search and filtering tools By default,the filter type is set toKind, which allows you to filter the different types of layers: image layers,adjustment layers, text layers, shape layers, or smart object layers In the middle diagram, I’ve selectedtheFilter for type layersoption, and instantaneously, only the text layers of the document are shown!You can imagine how this would simplify finding a layer in a document with a hundred layers

Figure 1.10 Filtering and searching layers

The right-hand side image of Figure 1.10 reveals that I’ve changed the filter type toName, enabling

me to search for a string of letters across layers As you explore the other filter types, you’ll findthem to be invaluable when navigating documents containing many layers

Photoshop Toolbox

In this section, I’ll introduce some of the most frequently used tools found in the toolbox I’ll discussmore tools in later chapters as we apply them to solutions

You’ll notice that some of the tool icons have small triangles in their bottom right-hand corners.These icons contain hidden treasures! The triangle indicates that there are more related toolsavailable If you right-click on the tool icon (or click and hold it down), a fly-out menu will appear

as displaying the additional tools

Quick Keyboard Shortcuts

Figure 1.11 Tooltip for a keyboard shortcut

Naturally, most of the tools in the toolbox have a keyboard

shortcut You can learn each tool’s shortcut by hovering your

cursor over a tool for a few seconds; a tooltip box will appear,

displaying the name of the tool and its shortcut as in

Fig-ure 1.11 If additional tools are available in the fly-out menu,

you can cycle through them by pressing Shift-[keyboard

shortcut] Keyboard shortcuts can save you valuable

time—pressing V to bring up the Move Tool, for instance, is

certainly a lot quicker than moving the cursor over the

tool-box to select it It may seem insignificant right now, but the

time you take to access tools will add up over the course of

a project For your convenience, whenever I mention a tool,

I’ll list its shortcut in parentheses; for example, the Move

Secret Selections

Selections can have varying levels of transparency, known as the degree of opacity It’s actually

possible to make a selection with an opacity of 100% in one area, but only 20% in another area If

a selection has an opacity that’s more than 50%, it will be displayed with a border of dotted lines Photoshop won’t visibly outline areas with less than 50% opacity (though they will still be selected) Selection tools automatically select at 100% opacity We’ll learn about creating transparent selections using quick masks and alpha channels later in the section called “Other Useful Tasks and Shortcuts”.

Marquee tools (M), as shown in Figure 1.13, are used to create rectangular or elliptical selections,

including selections that are “single row” (one pixel tall, stretching across the entire width of thedocument) and “single column” (one pixel wide, stretching through the entire height of the docu-ment) To make single-row or single-column selections, click with the appropriate tool on the imagearea where you want to select a row or column

Figure 1.13 Marquee tools

You can use the lasso tools (L), shown in Figure 1.14, to create freeform selections.

Figure 1.14 Lasso tools

There are three forms:

Lasso Tool (L) Click and drag the Lasso Tool to draw a selection area Releasing

the mouse button will close the selection by joining the start andend points with a straight line

Polygonal Lasso Tool (L) Click at different points to create vertices of a polygonal shape

using the Polygonal Lasso Tool Close the selection by movingyour cursor to the beginning of your selection and clicking once,

or pressing the Enter key.

Magnetic Lasso Tool (L) If you think you need help with making your selection, try the

Magnetic Lasso Tool Photoshop will attempt to make a “smart”selection by following the edges of contrast and color difference.Click once near the “edge” of an object and follow around it;Photoshop will automatically lay down a path with fasteningpoints You can also click as you direct the line to create yourown points along on the path Close the selection by pressing the

Enter key or clicking at a point near the beginning of the selection.

No Selection Sometimes Equals All Selected

If you’ve made a selection, only the pixels within the selection are active and can be worked on Some tools can be used without making a selection at all Be aware, however, that if no specific

selection has been made, Photoshop will assume that you’re working on the entire layer with any

changes that you make affecting all pixels in the layer.

Quick Selection Tool

The Quick Selection Tool (W) allows you to “paint” a selection, grabbing the nearby areas with

similar colors and excluding areas of contrasting colors Using your brush cursor, more areas areincluded in your selection as you paint over them; for example, Figure 1.15

You can use the options bar to change your brush size, or type [ or ] to increase or decrease the brush size If you select a bit more than you intended to, hold the Option (Alt) key and you’ll see

the cursor change from a plus to a minus sign Now the areas that you paint with the Quick SelectionTool will be excluded from your selection

Figure 1.15 Using the Quick Selection Tool to create a selection

Magic Wand Tool

The Magic Wand Tool (W), shown in Figure 1.16, selects areas of similar color You can change the

tolerance of a Magic Wand selection—that is, how close the color values should be to the sampled

color in order to be selected—and choose whether you want the selection to be contiguous, meaning

pixels that are touching, or not In the case of the latter, matching colors across the entire documentwill be selected

Figure 1.16 Using the Magic Wand to create a selection

Selection Shortcuts and Tasks

■ Hold the Shift key to add another selection to the first selection.

■ Hold the Option key (Alt key on Windows) to subtract your new selection from the first.

■ Hold Option-Shift (Alt-Shift) to select the intersection of your first and second selections.

■ Use the arrow keys to move the selection pixel by pixel If this is too slow, hold down Shift and

use the arrow keys to move the selection ten pixels at a time.

■ Press Command-J (Ctrl-J) to copy the selection into its own layer If this seems familiar to you,

it’s because I mentioned earlier how to copy a layer using the same keyboard shortcut Now that you know that not selecting anything sometimes means that everything is selected, it makes sense that by simply selecting a layer in theLayerspanel, you can copy the entire layer by

pressing Command-J (Ctrl-J).

■ To cut the selection into its own layer, press Command-Shift-J (Ctrl-Shift-J).

■ To deselect a selected area, click outside of it with one of the Marquee tools or press Command-D (Ctrl-D).

■ To reactivate your last selection, press Command-Shift-D (Ctrl-Shift-D).

■ Clicking theRefine Edge…button in the options bar brings up a dialog box (seen in Figure 1.17) that allows you to make adjustments to the edges of the selection that you’ve made; for example, you can feather your selection or smooth it out The real-time preview shows how your changes affect what’s selected.

Figure 1.17 The Refine Edge dialog box

The Move Tool

The Move Tool (V) moves a selected area, as in Figure 1.18, or an entire layer You can invoke the Move Tool temporarily when using most other tools by holding down the Command key (Ctrl key

on Windows)

Figure 1.18 The Move Tool in action

You can also duplicate a layer by holding down the Option (Alt) key while using the Move Tool,

as shown in Figure 1.19

Figure 1.19 Copying a layer with the Move Tool

Move and Copy Shortcut

For most tools, holding Command-Option (Ctrl-Alt) and dragging a selected area will temporarily

invoke the Move Tool, allowing you to move and duplicate the selected layer quickly.