Web Designer's Guide to Adobe Photoshop byChris Tull Wordware Publishing 2006 (272 pages) ISBN:9781598220018 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 Table of Contents Web Designer’s Guide to Adobe Photoshop Introduction Part I - Web Design Basics Chapter 1 - The World of Web Design Chapter 2 - Getting Started with Photoshop Chapter 3 - Working with Layers Chapter 4 - Creating Shapes with Selections Part II - Pulling It All Together Chapter 5 - Combining Images Chapter 6 - Creating Web Headers Chapter 7 - Pulling a Web Page Together Chapter 8 - Creating Web Backgrounds Part III - Publishing to the World Wide Web Chapter 9 - Working with Dreamweaver Chapter 10 - Creating a “Professional” Web Page Style Chapter 11 - Designing a “Modern” Web Page Style Chapter 12 - Going Live with Your Website Appendix A - Top Ten Web Design Mistakes Appendix B - Recommended Books Appendix C - Web Designer’s Glossary Index List of Figures List of Tables Back Cover 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 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 Web Designer’s Guide to Adobe Photoshop Chris Tull Library of Congress Cataloging-in-Publication Data Tull, Chris Web designer’s guide to Adobe Photoshop / by Chris Tull p cm Includes bibliographical references and index ISBN-13: 978-1-59822-001-8 ISBN-10: 1-59822-001-2 (pbk.) Adobe Photoshop Web sites Design Computer graphics I Title TK5105.8885.A38T85 2005 006.6'86 dc22 2005029723 CIP © 2006, Wordware Publishing, Inc All Rights Reserved 2320 Los Rios Boulevard Plano, Texas 75074 No part of this book may be reproduced in any form or by any means without permission in writing from Wordware Publishing, Inc Printed in the United States of America ISBN-13: 978-1-59822-001-8 ISBN-10: 1-59822-001-2 10 9 8 7 6 5 4 3 2 1 0510 Adobe and Photoshop are registered trademarks of Adobe Systems Incorporated in the United States and/or other countries Dreamweaver is a registered trademark of Macromedia, Inc in the United States and/or other countries All other brand names and product names mentioned in this book are trademarks or service marks of their respective companies Any omission or misuse (of any kind) of service marks or trademarks should not be regarded as intent to infringe on the property of others The publisher recognizes and respects all marks used by companies, manufacturers, and developers as a means to distinguish their products This book is sold as is, without warranty of any kind, either express or implied, respecting the contents of this book and any disks or programs that may accompany it, including but not limited to implied warranties for the book’s quality, performance, merchantability, or fitness for any particular purpose Neither Wordware Publishing, Inc nor its dealers or distributors shall be liable to the purchaser or any other person or entity with respect to any liability, loss, or damage caused or alleged to have been caused directly or indirectly by this book All inquiries for volume purchases of this book should be addressed to Wordware Publishing, Inc., at the above address Telephone inquiries may 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 And for 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 of dozens of people’s knowledge, effort, and enthusiasm So many people helped 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 a constant miracle in my life, and makes each day better than the last I also want to thank my little daughter, Abby She’s taught me so many lessons in life The amazing thing is she’s taught me these things even though she’s still a month or so away from being born Image how much more I’ll learn once she’s actually here! I must also give thanks to Tom and Carole Tull, my parents They’ve taught me that all is possible in this world as long as you try and believe, no matter what Thanks must also go out to my technical editor, Clark Allen Your advice has made this book a million times better than it could have ever been on its own Thank you, Wordware Publishing, especially Wes Beckwith and Beth Kohler I love Wordware books They’re the best in the industry I feel lucky to have worked with you once again Finally, I want to thank you…my readers You teach me much more than you’ll ever know Introduction Overview 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, to which 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 the Internet — it’s growing exponentially Figure 1 illustrates just how dramatic this growth has been over the course of a couple years Figure 1: The exponential growth of the internet No one really knows how big the Internet is, and few analysts are prepared to speculate on a figure these days Whatever the number, it’s definitely in the billions of pages Google alone has indexed over 8 billion pages…and that’s only the tip of the iceberg Any way you figure it, the Internet is huge and continues to grow The opportunities for a budding web designer are immense and will only increase with time About This Book Web design is a unique blend of technical know-how and creative artistic ability You don’t need to be a computer programmer or Leonardo da Vinci 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 present material exactly the way you intend Create web pages that allow readers all across the world, using different computer models, operating systems, and connectivity speeds, 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 and Macromedia Dreamweaver I’ll give you some tricks and tips on creating some dazzling effects for your web pages Essentially, I’ll give you the scoop on everything you need to know to become an expert in web design, whether your goal is to expand your professional skills or simply handle your local club’s website Web Designer’s Guide to Adobe Photoshop tells you the stuff you want to know, such as: How do I use Adobe Photoshop? How do I prepare images for the web? How do I get these images into a web page? What are some examples of cool web pages I can create? How do I get these images loaded onto the Internet? 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 List of Tables Chapter 1: The World of Web Design Table 1-1: Sizes to use to account for screen and browser dimensions Chapter 2: Getting Started with Photoshop Table 2-1: Requirements for logos checklist Table 2-2: Elements of the Photoshop workspace Chapter 3: Working with Layers Table 3-1: The different controls of the Layers palette Chapter 4: Creating Shapes with Selections Table 4-1: Understanding Photoshop’s Selection tools ... handle your local club’s website Web Designer’s Guide to Adobe Photoshop tells you the stuff you want to know, such as: How do I use Adobe Photoshop? How do I prepare images for the web? How do I get these images into a web page?... develop marketing and technical materials and solutions Web Designer’s Guide to Adobe Photoshop Chris Tull Library of Congress Cataloging-in-Publication Data Tull, Chris Web designer’s guide to Adobe Photoshop / by Chris Tull... different computer models, operating systems, and connectivity speeds, 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 and Macromedia Dreamweaver