Table of ContentsIntroduction.
1. The Big Project.
2. Jumping In with the Basics.
3. Altering Photos and Images.
4. Filters and Effects.
5. Advanced Altering Photos.
6. Making Images Web-Ready.
7. The Art of the Cut.
8. Animation-Yes You Can Do It!
9. Tips and Tricks.
Appendix A: Photoshop Tools Reference.
Appendix B: Filters Reference.
Who Needs This Book?
If you need to create a Web site using images, and you have a limited knowledge of creating or altering images with Photoshop, this book is for you. Now that Web sites have become as common as business cards, everyone needs to have one. There are many programs that allow you to create the programming for the page itself, but none can create or change the images for you by magic. You still have to do that part yourself. We'll show you how easy and exciting it is to create images and then make them ready for your Web site. In this book, you will be given the knowledge and tools for resolving real-life problems while creating a work-along Web site.
This book is more than just a bible or dictionary of Photoshop terms and tools. In those types of books, you have to know what the tool is called and what it can do in order to figure out how to use it. By that point, you won't need to look up how to do it.
This book will present real questions such as, "How do I take the red-eye out of a photograph?" or "Now that I have an image, how do I make it a Web image?" This is not a reference book that will sit on your library shelf just out of reach. This is a book that will sit on the edge of your desk with post it notes or bookmarks sticking out of your favorite pages. This book will show you how to get the job done quickly and have a great time doing it.
What's Different from the Photoshop 5 Book?
All of the excellent reader feedback has given us an even better way to put this book together. We've kept what you liked and added more where you asked for it. A new follow-along Web site has been created so that allthe lessons are better organized and we've kept it to just the essentials. The Web site for the book now has the full-sized images. You will be able to follow along and download each image from the book's Web site. Of course we'll show you all of the latest Web-essential features of Photoshop 6, too.
How to Use This Book
Follow along as a Web site is developed using Photoshop 6. After the basics, each chapter starts with a problem you may encounter that requires a quick solution. We'll take you through each step. We don't just point to the tools in Photoshopwe give you a problem and then tell you ways to solve that problem. Of course there are many ways to go about each problem and we show you several different ways to achieve what you need. You will also be given homework at the end of each chapter so you can practice and experiment with the techniques you've learned.
What Projects Will Be Completed
We'll be creating a Web site for StichStyle, an online fashion magazine. This new Web site will present many unique problems to you, the creator. Work along side us as we give you projects, some with ample time to resolve and some that are deadline-sensitive. Best of all, we'll present real-world problems that pop up during the process and give you solutions to them.
Brief Introduction to New Features in Photoshop
Adobe Photoshop 6 is the best image creating and editing software available. It has become the standard program for creating images for the Web. If you can think of it, you can do it with Photoshop. Photoshop is a very powerful tool. In fact, almost every image you see in magazines and catalogs has been altered or manipulated by Photoshop in some way.
If you are already a user of Photoshop 5 and would like to get a quick overview of the new features, continue reading this section. If Version 6 is your first foray into Photoshop, skip this section and go on to Chapter 1, because it's all new. Starting in Chapter 1, each feature and tool you need is demonstrated, along with assignments to explore the others.
If Photoshop 5 was the last version that you used, there's going to be quite a bit of new information. We'll catch you up quickly. Version 5.5 started a whole new way of creating Web graphics. Some of those features are highlighted here.
- * Photoshop and ImageReady are now together
- It may seem intimidating to have to learn an update to a familiar tool and a whole new application, but the two programs are integrated so well that you feel as if it's just another palette that you are using. There are only six additional tools that you need to learn in ImageReady. (See Appendix A for a list of the tools in both programs.) ImageReady's tools make preparing images for the Web a joy. The great part of both programs is that they have provided a Jump command that allows you to jump from one to the other.
- * Image optimization
- My favorite new feature is the ability to view your images as you optimize them. You can see the original and up to three variations at the same time, allowing you to choose the best for your needs. You can also see the size and approximate download times for each of those images.
- * Creating multiple-image layouts
- This is an incredible set of tools for Web professionals. The Cr to put all of your graphics for your Web site into one Photoshop file or one Web page with links. This is invaluable while updating your site graphics.
- * Animation
- This is an exciting addition to your abilities as a Web professional. You can create animated GIFs right from ImageReady 3. You can make real cell animation with an optimization tool. You are able to open existing animated GIFs. You can also open MOV, AVI, Flic, and PICT formats, as well as QuickTime-compatible movies, and manipulate each frame. You can then export them as QuickTime movies.
Those are the major changes from Version 5. Now take a look at all the super enhanced features in Version 6.
New in Version 6
This section identifies key new Web Essentials features and gives a brief overview of what they do. Detailed explanations are in later chapters.
Vector-Based Graphics Are Here
A quick reminder about vector-based graphicsuntil now, all Photoshop images were created using pixels, or little squares. If you zoom way up on an image you will be able to see all the little squares of color that make up that image. To change any piece of an image, you had to change those squares.
Programs such as Adobe Illustrator or Aldus Freehand are vector-based drawing tools. They create a mathematical formula for a line segment or curve. Those segments are all easily manipulated to change shape or size by grabbing the line and just moving it. Now in Photoshop 6 you have the benefit of using vector-based graphics with the shape tools or the type tools. Those layers hold their vector-based mathematics unless you choose to rasterize or render that of creating vector-based shapes such as a rectangles, rounded rectangles, ellipses, polygons, custom shapes, and lines.
This allows you to get crisp line output for anything you print or output to Adobe Acrobat in PDF format. Have you ever printed a graphic with text or circles on the page and seen all the jaggy lines? The vector-based option allows you to eliminate the jaggies and print crisp lines.
You wonder what that has to do with the Web? Remember, you have to sell your ideas to people and sometimes you need to print them out on paper and present them to a boardroom full of people. It's much easier to get your point across with excellent, sharp-looking graphics.
In addition, you can now combine vector-based shapes with add, subtract, restrict, and invert options. You can manipulate lines in very detailed ways as if you were using a separate vector-based drawing program. Your custom shapes can be created and shared.
Photoshop also now allows you to save transparency layers and vector-based objects in PDF Files. This helps if you are also preparing PDF documents to download from your Web pages.
Photoshop 6 has a completely new interface to handle all the layer stylesyou don't need to pull down several menus anymore. Now all your layer styles from Blending Mode to styles like Drop Shadow and Bevel are on one palette.
In addition there are new stroke, overlay, and satin effects, a new contour option, and advanced blending and transparency options as well as changes to the drop shadow, inner shadow, glow, bevel, and emboss effects.
There is a new Liquefy options palette that allows you to do some very cool manipulations of images. With this option, you can freeze the areas you want to protect and go wild on the other pieces.
Enhanced Slicing Capabilities
The new Slice and Slice Select tools allow you to create and select slices directly in Photoshop. These slices allow you to make rollovers or animations for each slice. The new slicing options also let you generate the HTML code to put the images together on a Web page. You can create separate file names, URL links, Alt tags, and notes for each slice. Optimizing and linking the slices is still done in ImageReady.
Enhanced Support for Image Maps and Rollovers
You no longer have to use that shareware image map maker. Image maps allow you to override standard HTML and designate multiple URLs for each Web image. ImageReady allows you to create image maps right in the program. It also creates the HTML code to add to your page.
The other new option for rollovers is that you can use the Styles palette along with your rollovers. That means if you have a particular effect you are going for on your rollovers, you don't have to go through the entire process for each slice. Create a style and, with one click, apply it to the other rollovers in your image. Image maps can be made in any shape with the standard or polygon tools.
Photoshop has made it easier and faster
Photoshop 6 has added several enhanced features in the interface, layers, and text sections.
There are enhancements to the options bar and palette management. Up to now, every tool had a separate palette that controlled its options. Now there is a new options bar that sits on top of the page right below the top menu bar. Each tool's options are now available without showing that tool's palette. It's an excellent improvement that will take a little getting used to. For those of us that use two monitors, one for the working area and one for all the palettes, the habit of moving to the other screen is hard to change.
Speaking of palettes, you no longer need to keep them all to the side of your image while you work on a small screen. And there is not such a need for a second monitor for palettes. The palettes that still need to be separate from the options bar can be docked at the top of the menu bar. You can create several options in a single menu and keep it at the top.
Enhanced Layer Management
The Layers palette has several new options that make layer management much easier. Layers can now be kept in sets. You can hide or show entire sets as you work. You can put layers in folders, which makes life much easier. Color coding has been added to layers, similar to Illustrator. This allows you to create a visual system for yourself. You can now lock layers as well. Layer effects are now listed in the layers palette below the object or text they are attached to. The palette will look quite a bit different to you. We go over the new layer descriptions in Chapter 1.
Expanded Text Features
The newest and greatest feature is the ability to create text right on the page. There is no longer a text dialog box that pops up that you then apply to the page. The text stays live and editable at all times. It stays in its vector-based format until it's rasterized. The only setback for this feature is the inability to grab the Move tool with the Command/Control key while you are in the middle of editing. This is a major change in work flow for those of us that keep our thumbs on that key for speed.
This is something we've always had to go to other programs like TypeStyler for. You can now warp text in 15 different styles such as Arch, Bulge, Fisheye, and Flag. With each warp option, you have the ability to manipulate the image to be exactly what you want by pushing, pulling, enlarging, rotating, and shrinking different areas.
There are new paragraph options for styling paragraphs that are also similar to Illustrator. You can define alignment, leading, space before, hyphenation, justification, and other fine-tuning options. You can set superscript and subscript to create trademarks and formulas without creating separate characters and fitting them in. You can create faux bold and italic along with all caps and small caps. You can also change color on each letter of the same line.
More New Features
You can now attach both notes and audio annotations to your image. The annotation format is readable by other Photoshop 6 users and in Adobe Acrobat. You can also import annotations from a PDF document into Photoshop.
WebDAV Workflow Management
This isn't a Web essential, but Photoshop now supports WebDAV server technology. We don't use this feature for Web design.
Cascading Style Sheets
Cascading Style Sheets, or CSS, are similar to styles in any word processing program. Simply put, they allow you to do multiple cool things on the Web. One of the coolest is the ability to change hundreds of pages of Web text with a single character change on a style sheet. This is an advanced feature that we won't cover much of. You might want to check out the Web Essential book on CSS.
Expanded File Format Support
This option allows you to import PDF documents into Photoshop.
A droplet is a small application that applies an action to one or more images that you drag onto the droplet icon. You can save a droplet to a location on a disk. Those actions can include an effect or an optimization style.
Gradient Map Adjustment
Though gradients don't appear well on the Web, people still use them. The Gradient Map adjustment layer allows you to take an image and map its tonal range to the colors of a gradient fill.
Easy Measurement Switching
You can switch the ruler measurements on the fly. It's better than shifting into four-wheel drive. For a Mac, use Control-click and, for Windows, use right-click on the rulers to immediately change the ruler units.
Enhanced Multiple Image-Options
There are some great options for creating groups of images with labels. Contact Sheet II gives you more labeling, layering, and template options.
There You Have It
It seems like a lot and it is. This is the best Photoshop version yet. We go over every tool that you'll need, along with homework to try the others.
Go ahead and jump in. Turn the page and begin learning your Photoshop 6 Web Essentials! If you haven't purchased this book yet, what are you waiting for? You have a Web site to create!