Actual Size keyboard shortcut 63
Adobe Flash, exporting artwork to 220
versus Photoshop
canvases versus artboards 51
color settings 45
pixel preview 49
vector- versus raster-based graphics 2–3
Adobe InDesign, Adobe Swatch Exchange format 211
Adobe Swatch Exchange format 211
Effect menu
Document Raster Effects Settings (DRES) 144, 154–157
list of effects 143
exporting artwork to 220
versus Illustrator
canvases versus artboards 51
color settings 45
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
Distribute Spacing option 69
with guides 66
to key objects 70
to objects 72
point type 96
to selections 70
Smart Guides 72
anchor/path labels 72
basics 71
strokes
to outside 92
tools 69
anchor/path labels, Smart Guides 72
pixel-precise drawing 80
type 94
Appearance panel/attributes 114. See also color/color tools; Effect menu (Illustrator)
basics 106
Clear Appearance 158
definition 8
fills/strokes 91–92, 107–108, 115
keyboard shortcut 106
Mixed Objects 147
Opacity settings 110–111, 116, 118
Path layer 109
Swatches panel 108
Arch Warp effect (Illustrator) 115–116
Area Type options 98
versus point type 96
Area Type tool 25
applying grids to multiple 79
Artboard tool
basics 52
Artboards panel 54
Control panel 53
from Control panel 53
from existing objects 56
from New Artboard button 79
exporting to
Flash 220
JPEGs 220
Photoshop 220
PNGs 220
naming 57
rearranging 60
saving
Artistic effects (Photoshop), Film Grain 143, 150–151
Blur effects (Photoshop) 143
Boulton, Mark 74
bounding boxes keyboard shortcut 16
Bring to Front keyboard shortcut 167, 177
Brush Strokes effect (Photoshop) 143
Change Screen Mode tool 32
Character panel/styles
style guides
creating templates from 216
using in other documents 211
Tracking field 128
underlining 98
CMYK color mode 49
Colborne, Giles 180
Color Guide panel 6
Color Settings
keyboard shortcut 63
Appearance panel
Color Picker/color options 107–108, 110
CMYK 49
color groups
saving in style guides 211
templates from 215
color schemes 7
Color Settings
keyboard shortcut 63
Edit Colors menu 176
Eyedropper tool 29
keyboard shortcut 41
sampling color 99
RGB color mode 49
Web Safe RGB 111
swatches 7
templates from color swatches and groups 215
construction guides 73
Convert Anchor Point tool 21–22
Convert to Shape effect (Illustrator) 143
Copy keyboard shortcut 103
Crisp setting, anti-aliasing options 95
Crop Marks effect (Illustrator) 143
CSS (cascading style sheets) and Illustrator effects 107–108, 113
Cut command
basics 79
keyboard shortcut 103
Delete Anchor Point tool 21–22
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 190–198
adding color and style 202–205
Direct Selection tool
basics 17
gridlines 78
keyboard shortcut 41
Distort & Transform effects (Illustrator) 143
Distort effect (Photoshop) 143
Distribute Spacing alignment option 69
Document Raster Effects Settings (DRES) 144, 154–157
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
basics 23
keyboard shortcut 41
Line Segment
basics 23
keyboard shortcut 41
Pen
construction guides 73
keyboard shortcut 41
Rectangle
keyboard shortcut 41
rounded corners 109
DRES (Document Raster Effects Settings) 144, 154–157
Drop Shadow Stylize effect (Illustrator) 112–113, 144, 146–147
dummy text 164
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) 107–108, 113
Distort & Transform 143
Illustrator versus Photoshop 142–144
Path 143
Pathfinder 143
Stylize 143
Drop Shadow 112–113, 144, 146–147
Feather 144
Inner Glow 110–111, 113, 144, 149–150
Outer Glow 144
SVG Filters 143
viewing effects in Outline mode 112
Warp 143
Effect menu (Photoshop). See also Effect menu (Illustrator)
Artistic, Film Grain 143, 150–151
Blur 143
Brush Strokes 143
Distort 143
DRES (Document Raster Effects Settings) 144, 154–157
Illustrator versus Photoshop 142–144
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
Eyedropper tool
basics 29
keyboard shortcut 41
sampling color 99
styling text 99
Feather Stylize effect (Illustrator) 144
Fill and Stroke tools
basics 29
keyboard shortcuts 41
Film Grain Artistic effect (Photoshop) 143, 150–151
Flash. See Adobe Flash
fonts
free web fonts 129
installing 127
minimal sizes and styles 97
Free Transform tool 165
basics 26
keyboard shortcut 41
Full Screen with Menu Bar mode 32–33
Garrett, Jesse James 180
Gaussian Blur effect (Photoshop) 154, 157
Glitschka, Von 20
Glyphs panel 6
Gradient panel 111
Gradient tool
keyboard shortcut 41
Grain Texture effect (Photoshop) 143
Graphic Styles panel/styles
editing 118
keyboard shortcut 117
style guides
creating templates from 216
using in other documents 211
versus symbols 119
grids
applying to multiple artboards 79
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
Hand tool
keyboard shortcut 63
Hide/Show Guides
keyboard shortcut 103
Hide/Show Rulers, keyboard shortcut 67, 103
Hide/Show Smart Guides
basics 71
keyboard shortcut 103
Hoekman, Robert 180
Illustrator. See Adobe Illustrator
images in layout example
embedding
image processing 176
versus linking 171
image processing 176
importing
preparations 172
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) 110–111, 113, 144, 149–150
iPad and iPhone, profiles in Illustrator 50
isolation mode 122
Isolate Selected Clipping Mask 149
JPEG file format, exporting artwork to 220
actual size 63
Appearance panel 106
bounding boxes, showing/hiding 16
Copy 103
Graphic Styles panel 117
Hide/Show Smart Guides 103
Outline mode 112
Paste 177
Paste in Place 103
Paste on All Artboards 79, 103
Save As 225
Save for Web 225
Select All 19
Select All on Active Artboard 19
Select menu options 19
Send to Back 177
Show Hide Smart Guides 71, 103
Slice tool 30
units of measurement preferences 225
Krug, Steve 180
Kuler tool 6
Lasso tool
basics 19
keyboard shortcut 41
Layers panel/layers
creating 134
information display options 133
objects
showing selected 132
layout example
content area, grain textures 153
images
image processing 176
preparing for import 172
lining up elements 138
main content area 90
navigation bars 89
grain textures 153
navigation hierarchy with different typefaces 129
photo/picture frames
softening shadows 154
flexibility of options 113
inner glow shadows 110–111, 113
grain textures 153
sign-up buttons
rounded corners 146
symbols
basics 119
duplicating 122
versus graphic styles 119
instances 121
renaming 122
drop caps 168
typing 162
type
attributes, duplicating with Eyedropper tool 99
tracking 128
underlining 98
viewing 138
Line Segment tool
basics 23
keyboard shortcut 41
Line tool 92
Lipservice dummy text tool 164
Lipsum dummy text tool 164
Lock icon 132
Lock/Unlock Guides
keyboard shortcuts 103
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
navigation hierarchy with different typefaces 129
New Document
basics 49
keyboard shortcut 63
Next Object Above/Below keyboard shortcuts 19
Normal Screen mode 32
Norman, Donald A. 180
Object Highlighting Smart Guide 72
objects
alignment
with guides 66
to key objects 70
to selections 70
strokes to outside 92
arranging, Bring to Front 167, 177
artboards, creating from objects 56
attributes 8
converting guides to 68
coordinates and reference points, Scale tool 73
coordinates for pixel-precision drawing 85–87
drawing
ellipses 21
rectangles 21
editing 122
grouping 18
highlighting with Smart Guides 72
layers
adding objects to 131
moving objects between 135–137
showing objects selected 132
mirroring 26
Object Highlighting Smart Guide 72
object-based drawing model 10
proportionally 87
scaling, coordinates and reference points 85
selecting
all instances of symbols 19
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
Ordering Disorder: Grid Principles for Web, Design 74
Outer Glow Stylize effect (Illustrator) 144
Outline mode keyboard shortcut 112
panels
tabs
changing order 37
switching between 35
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 221–222
Pen tool
construction guides 73
keyboard shortcut 41
photo/picture frames in layout example
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, 82–84
Pixel Preview mode
keyboard shortcut 103
Place command
text files 163
Plain text 163
planning UI design
basics 180
resources 180
site maps
PNG file format, exporting artwork to 220
point type
versus area type 96
wrapping text 165
points, measurement units
keyboard shortcut 225
preferences 44
preferences
Control panel 34
document-wide grids 82
Eyedropper tool 29
Smart Guides 71
units of measurement 44
Print profile 49
profiles, documents
saving new 50
Web and Print 49
raster-based applications, versus vector-based applications 2
effects, Photoshop versus Illustrator 142–144
Rasterize effect (Illustrator) 143, 155–157
DRES (Document Raster Effects Settings) 144, 154–157
Rectangle tool
keyboard shortcut 41
rounded corners 109
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) 154–157
versus Illustrator 144
RGB color mode 49
Web Safe RGB 111
Round Corners Stylize effect (Illustrator) 109–110, 146
RTF (Rich Text Format) 163
Saffer, Dan 180
Save As keyboard shortcut 225
Save for Web
keyboard shortcut 225
Save keyboard shortcut 103
Save Swatch Library as AI 211
Save Swatch Library as ASE 211
screen modes
keyboard shortcut 41
flexibility of options 113
inner glow shadows 110–111, 113
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
keyboard shortcut 41
Send to Back keyboard shortcut 177
shapes
adding/removing points from stars or polygon sides 23–24
changing star inner radius 23–24
constraining to squares or circles 23
locking rotation angle to 0 23
repositioning on artboard 23
Sharp setting, anti-aliasing options 95
shortcut keys. See keyboard shortcuts
Show/Hide Guides
keyboard shortcut 103
Show/Hide Rulers, keyboard shortcut 67, 103
Show/Hide Smart Guides
basics 71
keyboard shortcut 103
sidebars in layout example 88–89
grain textures 153
Simple and Usable Web, Mobile, and Interaction Design 180
“Simple Steps to Designing Grid Systems” 74
Sketch effect (Photoshop) 143
Slice tool
keyboard shortcut 30
Smart Guides 10
alignment 72
anchor/path labels 72
construction 73
measurement labels 73
object highlighting 72
transform tools 73
storyboards for communication with developers 190–198
adding color and style 202–205
Strong setting, anti-aliasing options 95
Stylize effect (Photoshop) 143
Stylize effects (Illustrator) 143
Drop Shadow 112–113, 144, 146–147
Feather 144
Inner Glow 110–111, 113, 144, 149–150
Outer Glow 144
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
duplicating 122
versus graphic styles 119
instances 121
renaming 122
saving symbols in style guides 211
Symbol panel/symbols (site map)
style libraries 206
style libraries, templates from 212–213
in wireframes 189
templates
character styles 216
color swatches and groups 215
graphic styles 214
paragraph styles 216
text. See also type; typography
drop caps 168
dummy text tools 164
typing 162
with drop caps 168
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
Transform effect (Illustrator) 115–116, 159–161
transformation tools/panels
Reflect tool 26
Rotate tool 73
Scale tool 73
Shear tool 73
Smart Guides 73
Transform panel
coordinates and reference points 85–87
options 84
pixel alignment 84
type. See also text; typography
Area Type options 98
versus point type 96
attributes, duplicating with Eyedropper tool 99
Character panel/styles
style guides, creating templates from 216
style guides, using in other documents 211
Tracking field 128
underlining 98
minimal sizes and styles 97
point type
versus area type 96
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
design principles 4
UI design
advantages of AI
drawing and layout 10
scalability 3
speed 2
stability 3
artboards, exporting
Flash 220
JPEGs 220
Photoshop 220
PNGs 220
developers and communication
with storyboards, adding color and style 202–205
with storyboards, inserting notes 199–201
planning
basics 180
resources 180
style libraries/guides
Adobe Swatch Exchange format 211
basics 206
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
Undo tool keyboard shortcut 67, 103
units of measurement
keyboard shortcut 225
preferences 44
Vector Basic Training 20
vector-based applications
effects, Illustrator versus Photoshop 142–144
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
Warp effects (Illustrator) 143
Web profile 49
Web Safe RGB color mode 111
Wheelr layout example
content area, grain textures 153
images
image processing 176
preparing for import 172
lining up elements 138
main content area 90
navigation bars 89
grain textures 153
navigation hierarchy with different typefaces 129
softening shadows 154
flexibility of options 113
inner glow shadows 110–111, 113
grain textures 153
sign-up buttons
rounded corners 146
symbols
basics 119
duplicating 122
versus graphic styles 119
instances 121
renaming 122
text
drop caps 168
typing 162
type
attributes, duplicating with Eyedropper tool 99
tracking 128
underlining 98
viewing 138
workspaces
applying grids to multiple 79
Artboards panel 54
Control panel 53
creating from Control panel 53
creating from existing objects 56
creating from New Artboard button 79
duplicating 55
exporting to other formats 217–220
JPEGs 220
Photoshop 220
PNGs 220
naming 57
rearranging 60
saving as PDFs or for web 221–224
color space organization 46–47
default 38
measurement units
keyboard shortcut 225
preferences 44
screen modes
keyboard shortcut 41
Zoom tool
basics 30
keyboard shortcut 61
options 10
18.191.186.219