Index

A

Actual Size keyboard shortcut 63

Add Anchor Point tool 2122

Adobe Flash, exporting artwork to 220

Adobe Illustrator

versus Photoshop

canvases versus artboards 51

color settings 45

effects 142144

pixel preview 49

vector- versus raster-based graphics 23

Adobe InDesign, Adobe Swatch Exchange format 211

Adobe Photoshop

Adobe Swatch Exchange format 211

Effect menu

Document Raster Effects Settings (DRES) 144, 154157

list of effects 143

using 150153

exporting artwork to 220

versus Illustrator

canvases versus artboards 51

color settings 45

effects 142144

pixel preview 49

images, editing before placing in Illustrator 172

raster-based applications 2

Adobe Swatch Exchange format 211

alignment

Align panel

keyboard shortcut 103

options 6970

to artboard 70, 76

Distribute Spacing option 69

with guides 66

to key objects 70

to objects 72

to pixel grids 50, 8284

point type 96

to selections 70

Smart Guides 72

anchor/path labels 72

basics 71

keyboard shortcut 71, 225

strokes

within objects 9192

to outside 92

tools 69

anchor/path labels, Smart Guides 72

anti-aliasing 45

Character panel 9495

pixel-precise drawing 80

type 94

typography advancement 45

Appearance panel/attributes 114. See also color/color tools; Effect menu (Illustrator)

basics 106

Clear Appearance 158

definition 8

fills/strokes 9192, 107108, 115

keyboard shortcut 106

Mixed Objects 147

Opacity settings 110111, 116, 118

Path layer 109

Swatches panel 108

Application frame 4546

Arch Warp effect (Illustrator) 115116

area type 9798

Area Type options 98

versus point type 96

using 9798

wrapping text 164167

Area Type tool 25

artboards 4748

aligning to 70, 76

applying grids to multiple 79

Artboard tool

basics 52

keyboard shortcut 30, 63

Artboards panel 54

Control panel 53

creating 5152

from Control panel 53

from existing objects 56

from New Artboard button 79

duplicating 55, 123

exporting to

Flash 220

JPEGs 220

Photoshop 220

PNGs 220

Presentation mode 217219

moving 5859

with artwork 55, 60

naming 57

navigating multiple 6162

rearranging 60

saving

as PDFs 221222

for web 222224

Artistic effects (Photoshop), Film Grain 143, 150151

B

Blur effects (Photoshop) 143

Gaussian Blur 154, 157

Boulton, Mark 74

bounding boxes keyboard shortcut 16

Bring to Front keyboard shortcut 167, 177

Brush Strokes effect (Photoshop) 143

C

Change Screen Mode tool 32

Character panel/styles

anti-aliasing modes 9495

style guides

creating templates from 216

using in other documents 211

styles, creating 100101

tools 67

Tracking field 128

underlining 98

CMYK color mode 49

Colborne, Giles 180

Color Guide panel 6

Color Settings

basics 4445

keyboard shortcut 63

color/color tools

Appearance panel

Color panel 108, 114

Color Picker/color options 107108, 110

CMYK 49

color groups

saving in style guides 211

templates from 215

color schemes 7

Color Settings

basics 4445

keyboard shortcut 63

Edit Colors menu 176

Eyedropper tool 29

keyboard shortcut 41

sampling color 99

Fill and Stroke tools 29, 41

Gradient tool 2728, 41

RGB color mode 49

Web Safe RGB 111

sampling 29, 41, 99

swatches 7

templates from color swatches and groups 215

typography 4, 6

workspace organization 4647

construction guides 73

Control panel basics 3435

Convert Anchor Point tool 2122

Convert to Shape effect (Illustrator) 143

coordinates 8587

Copy keyboard shortcut 103

Crisp setting, anti-aliasing options 95

Crop Marks effect (Illustrator) 143

CSS (cascading style sheets) and Illustrator effects 107108, 113

Cut command

basics 79

keyboard shortcut 103

D

Delete Anchor Point tool 2122

Deselect keyboard shortcut 19, 158

The Design of Everyday Things 180

Designing for Interaction: Creating Smart Applications and Clever Devices 180

Designing Interfaces: Patterns for Effective Interaction Design 180

Designing the Moment: Web Interface Design Concepts in Action 180

Designing the Obvious: A Common Sense Approach to Web & Mobile Application Design 180

developers and communication, with storyboards 190198

adding color and style 202205

inserting notes 199201

Direct Selection tool

basics 17

gridlines 78

keyboard shortcut 41

Distort & Transform effects (Illustrator) 143

Transform 115116, 159161

Distort effect (Photoshop) 143

Distribute Spacing alignment option 69

Document Raster Effects Settings (DRES) 144, 154157

documents

new

basics 49

keyboard shortcut 63

profiles

saving new 50

Web and Print 49

Don’t Make Me Think: A Common Sense Approach to Web Usability 180

Draw Behind mode 31

Draw Inside mode 31

Draw Normal mode 31

Drawing modes

basics 31

keyboard shortcut 41

drawing tools

Add Anchor Point 2122

Convert Anchor Point 2122

Delete Anchor Point 2122

Ellipse

basics 23

keyboard shortcut 41

Line Segment

basics 23

keyboard shortcut 41

Smart Guides 185186

Pen

basics 2022

construction guides 73

keyboard shortcut 41

Polygon 2324

Rectangle

basics 2324

keyboard shortcut 41

rounded corners 109

Star 2324

DRES (Document Raster Effects Settings) 144, 154157

Drop Shadow Stylize effect (Illustrator) 112113, 144, 146147

dummy text 164

E

Effect Gallery (Photoshop) 143, 152

Effect menu (Illustrator). See also Effect menu (Photoshop)

3D 143

Convert to Shape 143

Crop Marks 143

CSS (cascading style sheets) 107108, 113

Distort & Transform 143

Transform 115116, 159161

Illustrator versus Photoshop 142144

Path 143

Pathfinder 143

Rasterize 143, 155157

Stylize 143

Drop Shadow 112113, 144, 146147

Feather 144

Inner Glow 110111, 113, 144, 149150

Outer Glow 144

Round Corners 109110, 146

SVG Filters 143

viewing effects in Outline mode 112

Warp 143

Arch 115116

Effect menu (Photoshop). See also Effect menu (Illustrator)

Artistic, Film Grain 143, 150151

Blur 143

Gaussian Blur 154, 157

Brush Strokes 143

Distort 143

DRES (Document Raster Effects Settings) 144, 154157

Effect Gallery 143, 152

Illustrator versus Photoshop 142144

Pixelate 143

Sketch 143

Stylize 143

Texture

Grain 143

Texturizer 143

Video 143

The Elements of User Experience: User-Centered Design for the Web 180

Ellipse tool

basics 23

keyboard shortcut 41

ellipses and Pen tool 2122

Eyedropper tool

basics 29

keyboard shortcut 41

sampling color 99

styling text 99

F

Feather Stylize effect (Illustrator) 144

Fill and Stroke tools

basics 29

keyboard shortcuts 41

Film Grain Artistic effect (Photoshop) 143, 150151

Find and Replace 169170

Flash. See Adobe Flash

fonts

FontSquirrel web site 93, 127

free web fonts 129

installing 127

minimal sizes and styles 97

using 9495

Free Transform tool 165

basics 26

keyboard shortcut 41

9-Slice scaling 120, 124126

Full Screen mode 3233, 41

Full Screen with Menu Bar mode 3233

G

Garrett, Jesse James 180

Gaussian Blur effect (Photoshop) 154, 157

Glitschka, Von 20

Glyphs panel 6

Gradient panel 111

Gradient tool

basics 2728

keyboard shortcut 41

Grain Texture effect (Photoshop) 143

Graphic Styles panel/styles

additive styles 148, 158161

creating new 117, 147, 159

editing 118

keyboard shortcut 117

repeating 160161

style guides

creating templates from 216

using in other documents 211

versus symbols 119

grids

applying to multiple artboards 79

basics 7475

creating 7577

document-wide 82

fitting 78

resources 74

selecting/deselecting 77

splitting paths into grids 76

Group Selection tool 18

guides 66

adding 77

clearing 75

converting to objects 68

creating 67

from objects 68

showing/hiding, keyboard shortcut 64, 103

using 94, 107, 138

H

Hand tool

basics 30, 6162

keyboard shortcut 63

Hide/Show Guides

basics 67, 94

keyboard shortcut 103

Hide/Show Rulers, keyboard shortcut 67, 103

Hide/Show Smart Guides

basics 71

keyboard shortcut 103

Hoekman, Robert 180

I

Illustrator. See Adobe Illustrator

images in layout example

embedding

image processing 176

versus linking 171

Place command 173174

image processing 176

importing

preparations 172

process 173175

linking

automatically 173

versus embedding 171

Place command 174

preventing double compression 172

inches, measurement units

keyboard shortcut 225

preferences 44

InDesign. See Adobe InDesign

Inner Glow Stylize effect (Illustrator) 110111, 113, 144, 149150

iPad and iPhone, profiles in Illustrator 50

isolation mode 122

Isolate Selected Clipping Mask 149

J

JPEG file format, exporting artwork to 220

K

keyboard shortcuts

actual size 63

Align panel 69, 103

Appearance panel 106

Artboard tool 30, 52, 63

bounding boxes, showing/hiding 16

Bring to Front 167, 177

Color Settings 45, 63

Copy 103

Cut 79, 103

Deselect 19, 158

Direct Selection tool 17, 41

Drawing mode 31, 41

Ellipse tool 2324, 41

Eyedropper tool 29, 41

Fill and Stroke tools 29, 41

Free Transform tool 26, 41

Gradient tool 27, 41

Graphic Styles panel 117

Hand tool 30, 6263

Hide/Show Guides 67, 94, 103

Hide/Show Rulers 67, 103

Hide/Show Smart Guides 103

Lasso tool 19, 41

Line Segment tool 23, 41

Lock/Unlock Guides 6768, 103

Magic Wand tool 18, 41

Make Guides 68, 103

New Document 49, 63

Outline mode 112

Paste 177

Paste in Place 103

Paste on All Artboards 79, 103

Pen tool 20, 41

Pixel Preview mode 81, 83

Preferences 82, 103

Rectangle tool 2324, 41

Reflect tool 26, 41

Release Guides 68, 103

Save 90, 103

Save As 225

Save for Web 225

Screen modes 31, 41

Select All 19

Select All on Active Artboard 19

Select menu options 19

Selection tool 16, 41

Send to Back 177

Show Hide Smart Guides 71, 103

Show/Hide Guides 67, 103

Show/Hide Rulers 67, 103

Slice tool 30

Smart Guides 71, 103

Type tool 25, 41

Undo tool 67, 103

units of measurement preferences 225

Zoom tool 30, 61

Krug, Steve 180

Kuler tool 6

L

Lasso tool

basics 19

keyboard shortcut 41

Layers panel/layers

basics 130132

creating 134

information display options 133

objects

moving between 135137

showing selected 132

layout example

application logo 127128

content area, grain textures 153

headings 99100

flame 149152

images

embedding 171176

image processing 176

importing 172175

linking 171174

preparing for import 172

landing pages 144145

lining up elements 138

main content area 90

navigation bars 89

grain textures 153

navigation hierarchy with different typefaces 129

photo/picture frames

additive styles 160161

creating 9192, 114116

softening shadows 154

search boxes 107108

color options 107108, 110

drop shadows 112113

fills/strokes 107108, 115

flexibility of options 113

inner glow shadows 110111, 113

rounded corners 109110

sidebars 8889

grain textures 153

resolution of effects 155157

sign-up buttons

drop shadows 146148

rounded corners 146

symbols

basics 119

creating 119121

duplicating 122

editing 122123

versus graphic styles 119

instances 121

renaming 122

resizing 124126

swapping 123124

text

drop caps 168

editing 164167

finding/replacing 169170

importing 162164

resizing 165167

simulating floats 166167

typing 162

wrapping 165168

type

anti-aliasing 9495

area type 9698

attributes, duplicating with Eyedropper tool 99

character styles 100101

fonts 9395, 97

point type 9697, 99

tracking 128

underlining 98

viewing 138

Line Segment tool

basics 23

keyboard shortcut 41

Smart Guides 185186

Line tool 92

Lipservice dummy text tool 164

Lipsum dummy text tool 164

Lock icon 132

Lock/Unlock Guides

basics 6768

keyboard shortcuts 103

M

Magic Wand tool

basics 18

keyboard shortcut 41

Make Guides

basics 68

keyboard shortcut 103

measurement labels, Smart Guides 73

measurement units

keyboard shortcut 225

preferences 44

Microsoft Word (Windows and Mac) 162

N

navigation bars 89, 153

navigation hierarchy with different typefaces 129

New Document

basics 49

keyboard shortcut 63

Next Object Above/Below keyboard shortcuts 19

9-Slice scaling 120, 124126

Normal Screen mode 32

Norman, Donald A. 180

O

Object Highlighting Smart Guide 72

objects

alignment

to artboard 70, 76

with guides 66

to key objects 70

to pixel grids 50, 8284

to selections 70

strokes to outside 92

strokes within objects 9192

arranging, Bring to Front 167, 177

artboards, creating from objects 56

attributes 8

color or gradients 2729

converting guides to 68

coordinates and reference points, Scale tool 73

coordinates for pixel-precision drawing 8587

drawing

ellipses 21

rectangles 21

editing 122

grouping 18

highlighting with Smart Guides 72

isolation mode 122, 149

layers

adding objects to 131

moving objects between 135137

showing objects selected 132

mirroring 26

Object Highlighting Smart Guide 72

object-based drawing model 10

reference points 8587

resizing 16, 26

proportionally 87

rotating 16, 26, 85

scaling, coordinates and reference points 85

selecting

all instances of symbols 19

by attributes 1819

behind other objects 17

with freeform marquee 19

individual points or line segments 17

multiple objects 17

with same graphic style 19

showing/hiding bounding boxes 16

splitting paths into grids 76

stretching 26

wrapping text 167168

Ordering Disorder: Grid Principles for Web, Design 74

Outer Glow Stylize effect (Illustrator) 144

Outline mode keyboard shortcut 112

P

panels

expanding/collapsing 3536

grouping/ungrouping 3536

moving 3637

tabs

changing order 37

switching between 35

Paragraph styles 6, 7

saving in style guides 211

Paste in Place keyboard shortcut 103

Paste keyboard shortcut 177

Paste on All Artboards

basics 79

keyboard shortcut 103

Path effect (Illustrator) 143

Pathfinder effect (Illustrator) 143

PDF file format, saving artwork 221222

Pen tool

basics 2022

construction guides 73

keyboard shortcut 41

photo/picture frames in layout example

additive styles 160161

creating 9192, 114116

softening shadows 154

Photoshop. See Adobe Photoshop

picas, measurement units

keyboard shortcut 225

preferences 44

Pixelate effect (Photoshop) 143

pixel-precision drawing 80

aligning objects to pixel grid 50, 8284

coordinates 8587

Pixel Preview mode

basics 49, 81

keyboard shortcut 103

reference points 8587

Transform panel 85, 87

Place command

images 173174

text files 163

Plain text 163

planning UI design

basics 180

resources 180

site maps

basics 181182

dynamic page symbols 182184

organizing pages 185187

wireframes 187189

PNG file format, exporting artwork to 220

point type

versus area type 96

using 9697, 99

wrapping text 165

points, measurement units

keyboard shortcut 225

preferences 44

Polygon tool 2324

preferences

Control panel 34

document-wide grids 82

Eyedropper tool 29

keyboard shortcut 82, 103

Smart Guides 71

units of measurement 44

Presentation mode 217219

preview mode, documents 4950

Print profile 49

profiles, documents

saving new 50

Web and Print 49

R

raster-based applications, versus vector-based applications 2

effects, Photoshop versus Illustrator 142144

Rasterize effect (Illustrator) 143, 155157

DRES (Document Raster Effects Settings) 144, 154157

Rectangle tool

basics 2324

keyboard shortcut 41

rounded corners 109

reference points 8587

Reflect tool

basics 26

keyboard shortcut 41

Release Guides

basics 68

keyboard shortcut 103

replacing text. See Find and Replace

resolution in effects, Photoshop

Document Raster Effects Settings (DRES) 154157

versus Illustrator 144

RGB color mode 49

Web Safe RGB 111

Rotate tool 26, 73

Round Corners Stylize effect (Illustrator) 109110, 146

RTF (Rich Text Format) 163

S

Saffer, Dan 180

Save As keyboard shortcut 225

Save for Web

basics 222224

keyboard shortcut 225

Save keyboard shortcut 103

Save Swatch Library as AI 211

Save Swatch Library as ASE 211

Scale tool 73, 128, 192, 204

screen modes

basics 3233

keyboard shortcut 41

search boxes 107108

color options 107108, 110

drop shadows 112113

fills/strokes 107108, 115

flexibility of options 113

inner glow shadows 110111, 113

rounded corners 109110

selection tools

Direct Selection

basics 17

gridlines 78

keyboard shortcut 41

Group Selection 18

Lasso

basics 19

keyboard shortcut 41

Magic Wand

basics 18

keyboard shortcut 41

Select All keyboard shortcut 19

Select All on Active Artboard keyboard shortcut 19

Select menu options 19

Select Same option 19

Selection

basics 1617

keyboard shortcut 41

Send to Back keyboard shortcut 177

shapes

adding/removing points from stars or polygon sides 2324

changing star inner radius 2324

constraining to squares or circles 23

drawing from center 2324

locking rotation angle to 0 23

repositioning on artboard 23

Sharp setting, anti-aliasing options 95

Shear tool 73, 128

shortcut keys. See keyboard shortcuts

Show/Hide Guides

basics 67, 94

keyboard shortcut 103

Show/Hide Rulers, keyboard shortcut 67, 103

Show/Hide Smart Guides

basics 71

keyboard shortcut 103

sidebars in layout example 8889

grain textures 153

resolution of effects 155157

Simple and Usable Web, Mobile, and Interaction Design 180

“Simple Steps to Designing Grid Systems” 74

site maps 181182

organizing pages 185186

symbols 182184

Sketch effect (Photoshop) 143

Slice tool

keyboard shortcut 30

using 204, 222

Smart Guides 10

alignment 72

anchor/path labels 72

basics 71, 182

construction 73

keyboard shortcut 71, 103

measurement labels 73

object highlighting 72

transform tools 73

Star tool 2324

storyboards for communication with developers 190198

adding color and style 202205

inserting notes 199201

Stroke panel 9192

Strong setting, anti-aliasing options 95

Stylize effect (Photoshop) 143

Stylize effects (Illustrator) 143

Drop Shadow 112113, 144, 146147

Feather 144

Inner Glow 110111, 113, 144, 149150

Outer Glow 144

Round Corners 109110, 146

SVG Filters effect (Illustrator) 143

Swatches panel 95

Save Swatch Library as AI 211

Save Swatch Library as ASE 211

Symbol panel/symbols 9

basics 119

creating 119121

duplicating 122

editing 122123

versus graphic styles 119

instances 121

renaming 122

resizing 124126

saving symbols in style guides 211

swapping 123124

Symbol panel/symbols (site map)

creating 182184

storyboards 193198

style libraries 206

style libraries, templates from 212213

in wireframes 189

T

templates

character styles 216

color swatches and groups 215

graphic styles 214

paragraph styles 216

symbols 212213

text. See also type; typography

drop caps 168

dummy text tools 164

editing 164167

finding/replacing 169170

importing 162164

file formats 162163

process 163164

resizing 165167

simulating floats 166167

typing 162

wrapping 165167, 165168

with drop caps 168

with simulated floats 166167

text formatting 6, 7

Texture effects (Photoshop)

Grain 143

Texturizer 143

Texturizer effect (Photoshop) 143

3D effect (Illustrator) 143

Tidwell, Jennifer 180

Tolerance option, Magic Wand tool 18

Tools panel

floating tool panels 15

groups 14

accessing 1415

Transform effect (Illustrator) 115116, 159161

transformation tools/panels

Free Transform tool 26, 165

9-Slice scaling 120, 124126

Reflect tool 26

Rotate tool 73

Scale tool 73

Shear tool 73

Smart Guides 73

Transform panel

coordinates and reference points 8587

options 84

pixel alignment 84

type. See also text; typography

anti-aliasing 9495

area type 9698

Area Type options 98

versus point type 96

using 9798

wrapping text 164167

attributes, duplicating with Eyedropper tool 99

Character panel/styles

anti-aliasing modes 9495

style guides, creating templates from 216

style guides, using in other documents 211

styles, creating 100101

tools 67

Tracking field 128

underlining 98

fonts 9395, 97

FontSquirrel web site 93, 127

minimal sizes and styles 97

using 9495

point type

versus area type 96

using 9697, 99

wrapping text 165

styling with Eyedropper tool 99

tracking 128

Type on a Path tool 25

Type tool

Area Type options 165

basics 25

keyboard shortcut 41

Type tool group 25

underlining 98

typography. See also text; type

anti-aliasing 45

color/color tools 4, 6

tools 46

UI design 45

design principles 4

U

UI design

advantages of AI

color and typography 46

consistency 710

drawing and layout 10

file size 23

scalability 3

speed 2

stability 3

artboards, exporting

Flash 220

JPEGs 220

Photoshop 220

PNGs 220

Presentation mode 217219

artboards, saving

as PDFs 221222

for web 222224

developers and communication

with storyboards 190198

with storyboards, adding color and style 202205

with storyboards, inserting notes 199201

planning

basics 180

resources 180

site maps 181186

wireframes 187189

site maps 181186

style libraries/guides

Adobe Swatch Exchange format 211

basics 206

Color Guide panel 207209

Kuler plug-in 210

in other applications 211

templates from style guides

basics 212

character styles 216

color swatches and groups 215

graphic styles 214

paragraph styles 216

saving 216

symbols 212213

wireframes 187189

Undo tool keyboard shortcut 67, 103

units of measurement

keyboard shortcut 225

preferences 44

V

Vector Basic Training 20

vector-based applications

effects, Illustrator versus Photoshop 142144

versus raster-based applications 2

Vertical Area Type tool 25

Vertical Type on a Path tool 25

Vertical Type tool 25

Video effect (Photoshop) 143

Vinh, Khoi 74

W

Warp effects (Illustrator) 143

Arch 115116

Web profile 49

Web Safe RGB color mode 111

Wheelr layout example

application logo 127128

content area, grain textures 153

headings 99100

flame 149152

images

embedding 171176

image processing 176

importing 172175

linking 171174

preparing for import 172

landing pages 144145

lining up elements 138

main content area 90

navigation bars 89

grain textures 153

navigation hierarchy with different typefaces 129

photo/picture frames

additive styles 160161

creating 9192, 114116

softening shadows 154

search boxes 107108

color options 107108, 110

drop shadows 112113

fills/strokes 107108, 115

flexibility of options 113

inner glow shadows 110111, 113

rounded corners 109110

sidebars 8889

grain textures 153

resolution of effects 155157

sign-up buttons

drop shadows 146148

rounded corners 146

symbols

basics 119

creating 119121

duplicating 122

editing 122123

versus graphic styles 119

instances 121

renaming 122

resizing 124126

swapping 123124

text

drop caps 168

editing 164167

finding/replacing 169170

importing 162164

resizing 165167

simulating floats 166167

typing 162

wrapping 165168

type

anti-aliasing 9495

area type 9698

attributes, duplicating with Eyedropper tool 99

character styles 100101

fonts 9395, 97

point type 9697, 99

tracking 128

underlining 98

viewing 138

workspaces

Application frame 4546

artboards 4748

aligning to 70, 76

applying grids to multiple 79

Artboard tool 30, 52, 63

Artboards panel 54

Control panel 53

creating 5152

creating from Control panel 53

creating from existing objects 56

creating from New Artboard button 79

duplicating 55

exporting to other formats 217220

JPEGs 220

Photoshop 220

PNGs 220

Presentation mode 217219

moving 5859

naming 57

navigating multiple 6162

rearranging 60

saving as PDFs or for web 221224

color space organization 4647

custom 3840

default 38

Hand tool 30, 6163

measurement units

keyboard shortcut 225

preferences 44

screen modes

basics 3233

keyboard shortcut 41

workspace switcher 38, 40

Z

Zoom tool

basics 30

keyboard shortcut 61

options 10

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.186.219