From Photoshop to Dreamweaver

Transcription

1 From Photoshop to Dreamweaver 3 Steps to Great Visual Web Design Colin Smith Crystal Waters

2 From Photoshop to Dreamweaver 3 Steps to Great Visual Web Design Apress 2002 Originally published by Friends of ED in 2002 All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews. The authors and publisher have made every effort in the preparation of this book to ensure the accuracy of the information. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, friends of ED nor its dealers or distributors will be held liable for any damages caused or alleged to be caused either directly or indirectly by this book. First Printed November 2002 Trademark Acknowledgements ISBN ISBN (ebook) DOI /

3 From Photoshop to Dreamweaver 3 Steps to Great Visual Web Design Credits Authors Colin Srnith Crystat Waters Commissioning Editor Luke Harvey Graphie Editor Avtar Bhogat Editors Atan McCann Paut Thewlis Cover Design Katy Freer Avtar Bhogat lndexer Sirnon Coltins Author Agent Chris Matterface Project Manager Sirnon Brand Technical Reviewers Martin White Jon Steer Kim Christensen Ctifton Evans Tim Payne Vicki Loader Dan Caylor Chris Arlidge Matthew B. Hein Proof Reader Met Orgee Managing Editor Chris Hindtey

4 AUTHOR BIOGRAPHIES Colin Smith Colin is an award winning Graphie Designer who has caused a stir in the design community with his stunning photorealistic illustrations composed entirely in Photoshop. He is also founder of the popular PhotoshopCafe web resource for Photoshop users and web designers. He has won numerous design contests and awards, including Guru Awards at the 2001 Photoshop World Convention in LA, 2002 in SanDiego and MacWorld 2002 in NY. Colin's work has been recognized by Photoshop User. Mac Design, Dynamic Graphics, Computer Arts, Studio Multimedia and WWW Internet Life magazines. Colin is also a regular columnist for the NAPP members' site and Planet Photoshop. Between Freelance Design and writing for foed, he keeps pretty busy. Colin has co authored New Masters of Photoshop, Foundation Photoshop, Photoshop Most Wanted and Photoshop 7 Trade Secrets. "To jason Cook, my Dreamweaver teacher, thanks for alt the extra help on UltraDev." Crystal Waters Crystal has been writing about consumer-oriented technology since the '80s- back when 5MB hard drives were a novel upgrade! She's author of two books, Web Concept & Design and Universal Web Design (New Riders), and also co-author of The Flash Usability Guide from foed. She's been an editor at a number of magazines and was director of MFWeb conferences, among other rotes. Crystal is a long-distance charity cyclist and avid kayakfisherman. She lives and fishes with her boytriend Dwayne (who took this photo) and dog Nellie (pictured) in Vermont. Her sites are and She likes parentheses (obviously) - and, erm, dashes.

5 TADLE OF CONTENTS Welcome 1 The Book Format... 1 Support and Feedback Planning your website 5 ln this chapter... 5 Why Photoshop and Dreamweaver?... 6 lntroducing Dreamweaver MX... 6 Print vs. web: Photoshop experience transformed... 9 Images for the web... 9 Planning your website What is the goal of your site? What is your site about? How would you evaluate your audience? How do you want to impress your audience? What is your strategy? Do you intend to sell or market a product? Site and content development Brainstorming Wireframing Design principles Using color as a messenger Contrasting for readability Web color defaults Pieking a color palette Customizing your palette Successful color scheme samples Navigation necessities Use understandable icons Use breadcrumbs Don't hide information Help people out Designing our site in Photoshop 27 ln this chapter Building the mock-up Creating some simple buttans An easy way to duplicate and align elements on a page Adding text to the buttans Organizing layers Adding depth to the buttans Mass-producing the layer style Designing the top part of the page Adding some random tone and texture Making a quick logo... 59

6 FROM PHOTOSHOP TO DREAMWEAVER: 3 Steps to Great Visual Web Design Adding speed lines The main content area Adding some dummy content Slicing and optimizing 75 ln this chapter Slicing explained Slicing our mock-up Slices From Guides layer based slices User defined slices Taking it to ImageReady Slices in ImageReady Combining slices Previewing our page Using rollovers A simple rollover Optimization Exploring the Optimization window Up view Up view Exporting the page lntroducing Dreamweaver 111 ln this chapter The Dreamweaver workspace Defining your site Opening home.html in Dreamweaver Exploring the workspace some more Creating a page in Dreamweaver Layout View Adding images Fixing the heights Removing the page borders Adding color to a table cell Nested tables Aligning tables and content Summary and what's to come Saving time with Dreamweaver 149 ln this chapter Hypertinking our graphics Image maps lntroducing templates Using a site map

7 TABLE OF CONTENTS Applying a template to a page Using Cascading Style Sheets Creating a new CSS document Applying the styles Attaching an existing CSS to a document Adding a textlink Rollover effects on text links More advanced web techniques 181 ln this chapter Using behaviors Another method of creating rollovers Updating between Photoshop and Dreamweaver Using Transparency Separating an object from its background Method #1 - Magie Wand Method #2 - The Extract tool Creating a transparent image for the web Animation Creating an Animated Rollover Optimizing the slices Getting your site online 217 ln this chapter Domain name Web Forwarding Registering your name Web hosting How much web space? How much Bandwidth? Support Dynamic capability Control Panel Sign up! Uploading with Dreamweaver Connecting to the web server Uploading your files Matehing content Photoshop and Dreamweaver Pro Tips 235 ln this section Keep all original PSD files Keep a current back up of your site Keep backups of 'semi-final' sites

8 FROM PHOTOSHOP TO DREAMWEAVER: 3 Steps to Great Visual Web Design 4. Keep a copy of files with client records Don't give clients access to areas they don't need Document your processes Consider your update schedule Create custom swatch palettes for projects Play around with optimization Keep an eye on size Clean up code Upload and test Know how to use thesynchronize command Take advantage of automation join a user group or mailing Iist Take it further Last but not least Index 251

9

10 Welcome Welcome to From Photoshop To Dreamweaver. ln just 250 pages time. you'll be effortlessly designing websites using the two best design tools out there, and you'll be effectively and efficiently planning, optimizing and publishing websites before you know it. You'll want to get started as soon as possible so we don't intend to keep you waiting; there's just a few quick things you should know before you get going. The Book Format The book is sorted into three sections, reflecting our easy three-step process: Plonond Design Plan and Design - Here we'll be mainly using Photoshop to conjure the visuals of our site, drafting some Iayouts and designing buttons, and tabs, before adding in images and placeholders for text. Create and Str..wne Create and Streamline- Using lmageready, we'll be optimizing our site for the Web and looking at some different ways to add interactivity. Then, in Dreamweaver, we'll show you how to streamline your processes and save a tot of time. Erilanceand Publish Enhance and Publish - Still mainly in Dreamweaver in this last section, we'll add some advanced effects as well as some animation in lmageready, before taking you step-by-step through the process of getting your website online. We finish off with nearly 20 top professional tips for getting the most from your new skills. We don't use very many styles throughout the book, but we do emphasize special tips of particularly important points like this: This is a tip; remember me, and maybe even pass me onto your friends!

11 Support and Feedback All books from friends of ED aim to be easy to follow and without errors. However, if you do run into problems, don't hesitate to us - our support is fast, friendly, and free. You can reach us at support@friendsofed.com, quoting the last four digits of the ISBN in the subject of the (that's 0578 in this case). lf you're having technical problems with a specific file that you've created from an exercise, it can sometimes help to include a copy of that file with your mail. Even if our dedicated reader support team is unable to solve your problern immediately, your queries will be passed onto the people who put the book together - the editors and authors - to solve. Technical queries aside, we'd Iove to hear from you, whether it's to request future books, ask about friends of ED, or tell us about the sites you went on to create after reading From Photoshop to Dreamweaver. To tell us a bit about yourself and make comments about the book, why not fill out the reply card at the back and send it to us! Friends of ED also run a wide range of design community forums at Head along there for some information, inspiration or just plain chat. and don't forget to keep visiting for news, more books, sample chapters, downloads, author interviews and more! OK, that's enough info to get you started. Turn the page and we'll start our journey araund the world of possibilities Photoshop, ImageReady and Dreamweaver have to offer. 2

12 SLICING AND OPTIMIZING let's add a rollover effect to our user defined slices an the other buttans on the page. Select the slice. 16. Create a new layer state the same way we did it before by clicking the New State button. 17. Choose our layer in the layers palette. This is one of the differences between user slices and the layer based slices. Previously when using the /ayer based slices, your layer was se/ected automatical/y tor you. Since we are working with a user slice now, you will have to se/ect the /ayer yourself. When I say select, I just mean c/ick on it and make it the working layer. 95

13