Presentation is loading. Please wait.

Presentation is loading. Please wait.

Using Adobe ® Dreamweaver ® and Photoshop ® An Introduction PART ONE The design phase before launching Dreamweaver.

Similar presentations


Presentation on theme: "Using Adobe ® Dreamweaver ® and Photoshop ® An Introduction PART ONE The design phase before launching Dreamweaver."— Presentation transcript:

1 Using Adobe ® Dreamweaver ® and Photoshop ® An Introduction PART ONE The design phase before launching Dreamweaver

2 Chapter 1-1 Creating the critical first impression of your site

3  Building an Idea Book  What is an Idea Book?  Collecting screen shots of existing web sites  The art of page design vs. visitor usability  Stimulating your creativity: the art of inspiration  An important reminder of the purpose of an Idea Book Chapter 1-2

4  Surfing the competition  What is included in their sites  How is the information presented  How will your site be different?  The power of brainstorming  Brainstorming alone or with friends and colleagues  Defining the specifics of your future audience Chapter 1-3

5  The principle  Critical content in the top 400-500 pixel viewing area  Does not refer to horizontal scrolling  Engage your visitors to want to scroll for your content Chapter 1-4

6  Web equivalent colors  A combination of 6 letters and numbers between A-F, and 0-9  Photoshop’s Color Picker generates the web equivalent for a selected color Chapter 1-5

7  Understanding the web safe palette  RGB are “Additive”colors  White = #FFFFFF  Red = #FF0000  Green = #00FF00  Blue = #0000FF  Black = #000000  CC = 80%, 99 = 60%, 66 = 40%, 33 = 20% Chapter 1-6

8  Web smart colors  All web combinations of A-F and 0-9 hexadecimal values that have double identical letters or digits such as: #0077DD  A total of 4,096 colors vs. 216 original web safe colors Chapter 1-7

9  Determining the color scheme for a site  Designing within an existing corporate color identity  Designing a site based on color theory and psychological influence Chapter 1-8

10  Color Fundamentals  Primary, Secondary, Intermediate/Tertiary  Monochromatic  Complementary  Warm/Cool  Analogous Chapter 1-9

11  Choosing a color scheme based on the psychological influence of color  Combining the psychological influence of colors  Combining color theory with the psychological influence of color Chapter 1-10

12 Chapter 2-1 Typography for the web vs. the printed page

13  A graphic designers introduction  Adapting print typography to web typography: similarities and differences Chapter 2-2

14  Type properties  Size  Alignment  Vertical Spacing  Horizontal spacing  Indenting/Block quotes Chapter 2-3

15  More type properties for web text  Style  Decoration  Weight  Variant  Transform  Color Chapter 2-4

16  Definition of a paragraph  New paragraph/hard return: Return/Enter key  Line break/soft return: Shift+Return/Enter key Chapter 2-5

17  General typeface categories  Serif  Sans Serif  Script  Decorative/Novelty  Monospaced/Fixed-width  Symbols Chapter 2-6

18  Web Readability  Serif vs. Sans Serif for body text  Caps vs. Sentence case  Type color vs. background color  WWW Consortium standards Chapter 2-7

19  How type speaks to the reader  The feeling/mood/tone of a typeface  Choosing a font that will “speak” to your visitors Chapter 2-8

20  Understanding the problem  Web safe fonts  Font collections Chapter 2-9

21  Custom font vs. viewer’s browser  Installed font  Editing the font list  Browser substitution Chapter 2-10

22  Custom headlines created in Photoshop  Fonts are converted to graphics  Freely arrange type layout  Combine multiple typefaces if desired Chapter 2-11


Download ppt "Using Adobe ® Dreamweaver ® and Photoshop ® An Introduction PART ONE The design phase before launching Dreamweaver."

Similar presentations


Ads by Google