|
Photoshop 7 & Dreamweaver MX
This book will show you how to combine the power of Adobe
Photoshop 7 and Macromedia Dreamweaver MX, both the premiere
applications in their field and both recently updated.
The book's core purpose is to teach the fundamentals of designing
for the web using Photoshop and Dreamweaver, through a combination
of theory and practical examples. We will start with a brief look at
the history of the internet and some design theory, to lay the
groundwork for what follows. We do not aim to bore you with theory!
Projects and step-by-step examples will form a large part of this
book - so that you can see the theory and good advice put into
practice.
The end goal of this book is to enable the reader to create a
visually stunning, fully functional and aesthetically pleasing
website. The combination of web design theory and clearly worked
examples will allow you to go away and experiment for yourself -
more aware of the potential complexities involved in building a
website and better positioned to do it more efficiently than before.
The outcome: a great visual and well-designed site.
Creating an aesthetically pleasing website that is also
universally functional is no easy task. Through the initial concept
stages and into implementation a web designer must be aware of the
fundamentals involved in taking a flat and lifeless graphic and
converting it into a dynamic entity. For an uninitiated artist or
potential web designer the traps and pitfalls in creating such a
site are plentiful. Walking our reader through this in the simplest
and most informed manner possible is the goal of this publication.
Respecting the Internet as a flexible medium as rich in
personality as those who use it is the message that we’re trying to
get across. But at the same time we want to make the site design and
development process accessible by explaining to the reader the
fundamentals in clear and concise language and providing relevant
screen shots and graphics.
Table of Contents
1 Planning your website
In this chapter
Why Photoshop and
Dreamweaver?.
Introducing Dreamweaver MX.
Print
vs.web:Photoshop experience transformed.
Images for the web
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
Picking a color
palette.
Customizing your palette.
Successful color
scheme samples.
Navigation necessities.
Use
understandable icons.
Use breadcrumbs
Don't hide
information
Help people out.
|
2 Designing our site in
Photoshop
In this
chapter
Building the mock-up.
Creating some simple
buttons.
An easy way to duplicate and align elements on a
page
Adding text to the buttons.
Organizing
layers.
Adding depth to the buttons.
Mass-producing the
layer style.
Designing the top part of the page
Adding
some random tone and texture.
Making a quick logo
Adding speed lines
The main content area.
Adding
some dummy content. |
3 Slicing and Optimizing
In 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
2-Up view.
4-Up view.
Exporting the page
|
4 Introducing Dreamweaver
In 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 |
5 Saving Time with Dreamweaver
In this chapter
Hyperlinking
our graphics
Image maps.
Introducing
templates.
Using a site map.
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 text link.
Rollover effects on
text links.
|
6 More Advanced Web Techniques
In this chapter
Using
behaviors.
Another method of creating
rollovers.
Updating between Photoshop and
Dreamweaver.
Using Transparency.
Separating an object
from its background
Method #1 –Magic Wand.
Method #2
-The Extract tool
Creating a transparent image for the
web.
Animation.
Creating an Animated
Rollover.
Optimizing the slices.
|
7 Getting Your Site Online
In this chapter.
Domain
name
Web Forwarding
Registering your name.
Web
hosting.
How much web space?
How much
Bandwidth?.
E-mail.
Support
Dynamic
capability.
Control Panel.
Sign up!
Uploading with
Dreamweaver
Connecting to the web server.
Uploading
your files
Matching content. |
Photoshop and Dreamweaver Pro Tips
In this section
1.Keep all
original PSD files.
2.Keep a current back up of your
site.
3.Keep backups of 'semi-final'sites.
4.Keep a copy
of files with client records
5.Don ’t give clients access
to areas they don ’t need
6.Document your
processes.
7.Consider your update schedule.
8.Create
custom swatch palettes for projects.
9.Play around with
optimization
10.Keep an eye on size.
11.Clean up code
12.Upload and test
13.Know how to use theSynchronize
command
14.Take advantage of automation.
15.Join a user
group or mailing list.
16.Take it further.
17.Last but
not least.
|
| 
