Digital Art: Its Art and Science Book

Chapter 1

Art in Digital and Digital in Art

1.1 What is Digital Art? 4

1.1.1 Digital Art as Fine Art and as Design 6

1.1.2 Digital Technologies as a Tool and as a Medium in Digital Art 10

1.2 What, Why, and How–What is the Science of Digital Art? Why Must We Learn It? How? 18

1.2.1 Common Mistakes in Learning Digital Art 19

1.3 Art and Design Elements 19

1.4 Critiquing Digital Art 20

1.5 Digital Canvas 21

1.6 Memory and Storage 22

1.6.1 Memory 23

1.6.2 Storage Media 23

1.7 Computer Skills for Working with Files 25

1.7.1 Organizing Files and Folders 25

1.7.2 Opening Files versus Importing Files 27

Terms 29

Learning Aids 29

Review Questions 30

Exercises and Activities 30

Chapter 2

Fundamentals of Digital Imaging for Digital Art

2.1 What are Digital Images? 34

2.2 Measuring the Digital Canvas–Resolution, Resolution,
Resolution! 35

2.2.1 Scanning Resolution 36

2.2.2 Screen Resolution 39

2.2.3 Printing Resolution 42

2.3 Digital Color 43

2.3.1 Difficulties Reproducing Colors Across Devices 43

2.3.2 The Concept of Color Management 44

2.3.3 Producing Consistent Color with Desktop Inkjet Printing 47

2.4 Art and Design Elements 49

2.4.1 Line 50

2.4.2 Shape 53

2.4.3 Value 56

2.4.4 Color 57

2.4.5 Texture 62

2.4.6 Space 63

2.5 Psychology of Seeing–Perceptual Organization Principles 68

2.6 Combining Art and Design Elements–Art and Design Organizational Principles 72

2.6.1 Unity and Harmony 74

2.6.2 Balance 75

2.6.3 Repetition and Rhythm 77

2.6.4 Emphasis and Focus 78

2.6.5 Perspective 78

2.7 Critiquing Digital Images 80

Terms 82

Learning Aids 83

Review Questions 83

Exercises and Activities 85

Chapter 3

Creating Digital Images

3.1 Learning New Software Tools 88

3.1.1 Copying 88

3.1.2 The Basics–What to Learn First 89

3.1.3 Methods of Learning 95

3.1.4 Moving onto the Next Level 96

3.2 Digital Imaging Tools – Creating Traditional Art? 103

3.2.1 Layers 103

3.2.2 Filters 108

3.3 Digital Imaging Tools–Creating Digital Art 111

3.3.1 Digital Photography 111

3.3.2 Scanning 122

3.3.3 Digital Painting and Drawing 123

3.3.4 Mixing Different Techniques and Images 123

3.4 Creating Digital Images for a Portfolio 128

3.4.1 In Print 128

3.4.2 On the Web 137

3.5 Digital Image Tools–Art and Design Fundamentals 141

3.5.1 Shape 142

3.5.2 Line 147

3.5.3 Value and Color 148

3.5.4 Texture 152

3.5.5 Space 155

3.5.6 Composition 156

3.5.7 Repetition 156

3.5.8 Balance and Emphasis 157

3.5.9 Perspective 157

3.6 Making Convincing Composites 160

3.6.1 Example 1: Replicating an Object in Its Environment 160

3.6.2 Example 2: Recreating a Sky Background 164

3.6.3 Example 3: Tools in Vector-Graphic Application Programs for Organic Look 169

3.7 Abstract and Nonrepresentational Images 177

Terms 178

Learning Aids 178

Assignments 179

Projects 181

Chapter 4

Fundamentals of Digital Audio in Digital Art

4.1 What is Digital Audio? 186

4.1.1 Sampled Audio 186

4.1.2 MIDI 189

4.2 Examples of Digital Audio Works 192

4.3 Basic Elements of Digital Audio 195

4.3.1 Perceptual Properties of Sound 195

4.3.2 Properties of Sampled Audio Files 197

4.4 Perceptual Experience of Digital Audio versus Digital Images 198

4.5 Digital Audio in Digital Art 199

4.5.1 Combining Visual Elements 199

4.5.2 Content 199

4.5.3 Ending 199

4.6 Principles of Perceptual Organization–The Psychology of Hearing 199

4.6.1 Proximity and Similarity 200

4.6.2 Common Fate 200

4.6.3 Good Continuation 200

4.6.4 Closure 200

4.6.5 Figure—Ground Phenomenon 201

4.6.6 Past Experience 201

4.7 Generalization of Art and Design Organizational Principles 201

4.7.1 Unity, Harmony, and Variety 202

4.7.2 Balance 203

4.7.3 Repetition and Rhythm 204

4.7.4 Emphasis and Focus 205

4.7.5 Perspective 205

4.8 Using a Narrative Model 205

4.8.1 Beginning 205

4.8.2 Development 205

4.8.3 Ending 206

4.9 Critiquing Digital Audio 206

Terms 208

Learning Aids 208

Review Questions 209

Exercises and Activities 209

Chapter 5

Digital Audio Manipulation for Digital Art

5.1 Introduction 214

5.1.1 What Can Be Manipulated? 214

5.2 Elements Shared in Audio-Editing Application Programs 214

5.2.1 Waveform Editor–One Audio at a Time 215

5.2.2 Multitrack 215

5.3 Multitrack in Art and Design Organizational Principles 218

5.4 Audition Multitrack Basics 218

5.4.1 Placing Clips on a Track 220

5.4.2 Applying Effects in Multitrack 220

5.4.3 Using Sends and Busses to Apply Same Effects to Multiple Tracks in Audition 222

5.4.4 Creating Repetitions Using Loops 223

5.5 Digital Audio Tools in Perceptual Organization 225

5.5.1 Proximity and Similarity 225

5.5.2 Common Fate 230

5.5.3 Good Continuation 232

5.5.4 Closure 232

5.5.5 Figure—Ground Phenomenon 236

Terms 236

Assignments 236

Chapter 6

Video as a Time-Based Medium in Digital Art

6.1 What is Digital Video? 240

6.1.1 Properties of Digital Format 241

6.2 Form and Content 242

6.3 Space, Time, and Narrative 243

6.4 Space 244

6.4.1 On-Screen and Off-Screen Space 244

6.4.2 The Line and the 180-Degree Rule 247

6.4.3 Establishing Shot 251

6.5 Time 251

6.5.1 Duration: Movie Time versus Story Time 251

6.5.2 Temporal Order 252

6.6 Narrative 253

6.6.1 Act 1: Beginning 254

6.6.2 Act 2: Development 254

6.6.3 Act 3: Ending 255

6.7 Perceptual Experience of Video as a Time-Based Medium 257

6.7.1 Train Viewers to Form Expectations 257

6.8 Principles of Perceptual Organization 258

6.8.1 Proximity and Similarity 258

6.8.2 Common Fate 259

6.8.3 Good Continuation 259

6.8.4 Closure 259

6.8.5 Figure—Ground Phenomenon 259

6.8.6 Past Experience 261

6.9 Art and Design Organizational Principles 263

6.9.1 Repetition and Rhythm 263

6.9.2 Unity and Harmony 264

6.9.3 Balance 264

6.9.4 Emphasis and Focus 265

6.9.5 Perspective 265

6.10 Student Projects and Analyses 268

6.10.1 Example 1: You’re it! 268

6.10.2 Example 2: Untitled 275

6.10.3 Example 3: Fast Forward 282

6.11 Critiquing Digital Video 285

Terms 287

Learning Aids 288

References 288

Information of Movie/Video Examples Cited in the Chapter 288

Assignments 292

Chapter 7

Digital Video Manipulation for Digital Art

7.1 Introduction 296

7.2 Workspace Elements in Digital Video-Editing Programs 296

7.3 What Can be Manipulated? 298

7.3.1 Image and Audio 298

7.3.2 Duration of a Clip 301

7.3.3 Transition Between Two Clips 301

7.3.4 Speed of a Clip 302

7.3.5 Motion, Pan, and Zoom of a Clip 303

7.4 Space, Time, and Narrative 303

7.4.1 Space 303

7.4.2 Time 311

7.4.3 Narrative 313

7.5 Incorporating Art and Design and Perceptual Organizational Principles 314

Terms 316

Learning Aids 316

Assignments 317

Projects 318

Chapter 8

Web Site Design: Basic Knowledge

8.1 Introduction 324

8.2 Concepts of a Site 326

8.2.1 Anatomy of a Web Site 327

8.2.2 Organizing Information at the Site Level 328

8.2.3 Defining a Site in Dreamweaver 330

8.3 Web Page Design and Layout 339

8.3.1 Common Building Blocks for a Web Page 339

8.3.2 Basic Guidelines 342

8.3.3 Grid-Based Design 346

8.3.4 Fixed-Width Layout versus Fluid Layout 351

8.4 Basic Anatomy of a HTML Document 355

8.4.1 Tags and Attributes 355

8.4.2 A Bare-Bones Structure of a HTML Document 356

8.4.3 XHTML 357

8.5 Common HTML Tags 359

8.5.1 Paragraph 359

8.5.2 Line Break 360

8.5.3 Headings 360

8.5.4 Bold and Italics 361

8.5.5 List 362

8.5.6 Link 363

8.5.7 Image 364

8.5.8 Table 364

8.6 Web Page Layout Tools–Tables and Cascading Style Sheets 367

8.6.1 How Tables Are Used for Layout 368

8.7 Understanding File Paths 373

8.7.1 File Paths 373

8.7.2 Types of File Paths for Web Pages 373

8.7.3 Rules to Creating Links Using Document-Relative Paths 374

8.7.4 Why Is It Important to Understand File Paths for Web Page Creation? 377

Terms 378

Learning Aids 379

Review Questions 379

Chapter 9

CSS for Web Design

9.1 Cascading Style Sheets (CSS) Basics 384

9.1.1 CSS Syntax 388

9.1.2 How To Create a Style Sheet 397

9.2 Custom-Defined Styles 401

9.2.1 Class Selector 401

9.2.2 ID Selector 402

9.2.3 How to Create Class Styles and ID Styles in Dreamweaver 402

9.3 The Cascading Part of CSS 402

9.4

and tag 403

9.5 CSS Positioning 404

9.5.1 About Different overflow Settings 405

9.5.2 About static, absolute, relative, and fixed Positioning 405

9.5.3 z-index 411

9.6 CSS Box Model 413

9.6.1 Margins 416

9.6.2 Borders 416

9.6.3 Padding 418

9.6.4 Margins versus Paddings 418

9.7 Box Model Examples 421

9.7.1 Example 1: Create One Simple Box 421

9.7.2 Example 2: Add Two Boxes for a Header and a Footer 422

9.7.3 Example 3: Create a Two-Column Layout for the Content Area 424

9.7.4 Example 4: Adding Text Styles to Boxes and Final Touches 429

9.8 Create a Fixed-Width Layout and Fluid Layout 431

9.8.2 Fixed-Width Layout 432

9.8.3 Fluid Layout 432

9.9 More Useful CSS 437

9.9.1 Comments 437

9.9.2 Selector Grouping 438

9.9.3 Element Selector with Class or ID Selector 438

9.9.4 Descendant Selectors 439

9.9.5 CSS List for Grids and Layouts 441

9.10 CSS Design for Print Version 446

9.10.1 Method 1: Two Style Sheets 446

9.10.2 Method 2: One Style Sheets with Two Sets of Style Rules 446

9.10.3 General Rules for Print 447

9.11 Web as a Medium of Digital Art Projects 447

Terms 449

Learning Aids 449

Review Questions 451

Projects 453

Chapter 10

Dynamic HTML for Interface and Interaction

10.1 What is Dynamic HTML? 000

10.2 Variables Functions Parameters, and Arguments 000

10.2.1 Variables 000

10.2.2 Function Definitions and Function Calls 000

10.2.3 Parameters and Arguments 000

10.3 JavaScript: Where to Place the Script 000

10.4 JavaScript: Handling Mouse and Keyboard Events 000

10.5 Rollover Color Change 000

10.5.1 Basic Usage:
document.getElementById(“elementID”).style.color and document.getElementById(“elementID”).style.background 000

10.5.2 A Step Further 000

10.5.3 Another Step Further 000

10.5.4 Application 000

10.6 Rollover Image Change 000

10.6.1 Basic Usage: document.getElementById(“elementID”).src 000

10.6.2 A Step Further 000

10.6.3 Another Step Further 000

10.6.4 Application 000

10.7 Collapsible Menu 000

10.7.1 Basic Usage:
document.getElementById(“elementID”).style.display 000

10.7.2 A Step Further 000

10.7.3 Application 000

10.8 Pop-Up/Drop-Down/Fly-Out Menu 000

10.8.1 Basic Idea 000

10.8.2 A Step Further 000

10.8.3 Another Step Further 000

10.8.4 Application 000

Terms 000

Learning Aids 000

Projects 000