Smashing Ebook 3

Smcshin e3ccl Series.
=J | MasLering PhoLoshop or Web Design | l

Phctcshc is c cwerjul tccl, cnJ clthcuh the bcsics ccn
be ecsy tc rcs, mcsterin the cliccticn ccn be
extremely Jijjicult. 1his is where Mcsterin Phctcshc
ccmes in. it tcles recJers thrcuh the c in Jeth cnJ
relctes cll tcsls bccl tc the crective rccess. 1heres much
tc lecrn in here, jcr beinners cnJ exerts clile.
- FllioL Jay SLocks, designer, illusLraLor and speaker
Smcshin e3ccl Series. =J | MasLering PhoLoshop or Web Design | 2
lntrcJucticn
1his book was wriLLen in Lhe hope o illing a gap - a gap LhaL has exisLed
or as long as designers have been using PhoLoshop or Web design, a gap
LhaL we so oLen ill wiLh LuLorials ocused on Lhe laLesL Lrends and on
inspiraLion galleries LhaL are quickly browsed and orgoLLen, a gap LhaL is
growing as quickly as our Lechnologies. lL's a gap o oundaLion.
1he asL pace o Lhe lnLerneL has ocused us on Lhe laLesL and greaLesL
Lechniques, which Lypically have a liespan o only a ew monLhs. Rarely do
we ocus on Lhe undamenLals, Lhe principles LhaL ouLlive Lhe Lrends.
UnorLunaLely, Lhe principles are oLen less appealing Lhan Lhe shiny and
new. PhoLoshop LuLorials oer quick resulLs. 1hey hold our hands sLep by
sLep unLil someLhing incredible appears, buL Lhey rarely go in depLh Lo
explain Lhe principles LhaL enable us Lo creaLe someLhing unique and
incredible o our own.
MasLering Lhe undamenLals o our Lools opens our minds and unlocks our
inherenL creaLiviLy. lL helps us recognize Lhe dierence beLween Limeless and
Lrendy. lL increases our eiciency and ulLimaLely makes us and our work
more valuable.
My hope is LhaL Lhis book helps you gain a deeper undersLanding o
PhoLoshop. l you're a beginner, l hope iL gives you Lhe comprehension you
need Lo bring your ideas Lo lie. l you're a veLeran, l hope iL unveils some o
Lhe mysLeries LhaL have always boggled you. UlLimaLely, Lhough, l hope Lhis
book increases your appreciaLion o Lhe undamenLals and Lhe subLleLies
LhaL make PhoLoshop such a powerul Lool.
Smcshin e3ccl Series. =J | MasLering PhoLoshop or Webdesign | 3
Abcut the Authcr
1homas CiannaLLasio is an inLeracLive designer who
resides in Lhe WashingLon DC meLro area. He specializes
in Web design and ronL-end developmenL, parLicularly
arL direcLion, websiLe design and applicaLion design, and
has 4 years o experience. 1homas cares sLrongly abouL
Lypography, simpliciLy and user experience. CurrenLly he
works as a senior designer or a global markeLing irm
and reelances under Lhe name cttcsi.
DeJiccteJ tc my relentlessly sucrtive wije, Mcie,
withcut whcm this bccl wculJ nct be cssible. 1hcnls jcr
uttin u with me!
- 1om
lmprinL
Published in July 200
Smashing Media CmbH, Freiburg, Cermany
8ook Cover Design. Andrea AusLoni
Prooreading. Andrew Lobo
LayouL. Jessica 8ordeau, viLaly Friedman
ConcepL & FdiLing. Sven LennarLz, viLaly Friedman
lS8N. 978-3-943075-00-7
Smashing e8ook Series. #3 | MasLering PhoLoshop or Webdesign |
1cble cj Ccntents
lntrcJucticn J
Abcut the Authcr 4
lmrint 6
Chcter 1, Cclcr Mcncement 10
CalibraLing Lhe Display
lCC Proiles 2
SeLLing Up PhoLoshop 3
Color ManagemenL Module (CMM) 3
Color SeLLings 4
Aside. Modern 8rowsers and Color ManagemenL 6
Color ManagemenL Policies 6
Conversion OpLions and Advanced OpLions 7
Chcter 2, Pcths 20
8zier 8asics 2
PaLh CreaLion 1ools 2
1he PerecLionisL's Way 25
OLher CreaLion MeLhods 26
PaLh Usage 27
Quick 1ips 34
Keyboard ShorLcuLs 36
Chcter J, lcyer Styles J9
8asics 40
FecLs 40
8lend OpLions 44
ConLexLual ConLrols 49
Saving and Loading SLyles 50
Quick 1ips 5
Chcter 4, 3rushes S4
8asic SeLLings 55
Advanced SeLLings 59
Chcter S, 1ycrchy 77
AnaLomy o Lhe 1ype 1ool 78
CharacLer PaleLLe 79
FonL 80
Size and Spacing 8
Color, 8aseline ShiL and SLreLching 8
Fauxs and varianLs 82
AnLi-Aliasing 83
FlyouL opLions 87
Paragraph PaleLLe 92
Quick 1ips 97
Clyph ShorLcuLs 00
Chcter 6, Phctcrchy 111
Carbage ln, Carbage OuL 3
Resizing and lnLerpolaLion 3
SmarL ObjecLs 6
Color and 1one 8
Repair 27
Sharpening 33
Masking 37
Quick 1ips 49
Chcter 7, lxcrtin 1S9
Save or Web and Devices 60
Slices 73
Summcry 177
Chcter 1, CoIor Management
Mcintcinin c ccnsistent cecrcnce cn
the Web is Jijjicult beccuse ycu never
lncw the enJ users envircnment. 1hey
mcy be viewin c website cn their hcme
ccmuter cr cn c mcbile Jevice. 1hey
cculJ be cn c WinJcws lctjcrm cr
runnin c Mcc. lven within these
crcmeters, c multituJe cj cther
vcricbles cjject hcw their mcnitcr is
cclibrcteJ. All cj these jcctcrs cmcunt tc
cn unremeJicble lcss cj ccntrcl cver the
jincl cutut. Cclcrs ccn cecr lihter cr
Jcrler, mcre cr less scturcteJ, cccler cr
wcrmer, cr just lcin wrcn JeenJin
cn the users envircnment. 1his ccn be
quite c rcblem, eseciclly with c clients
brcnJ-secijic cclcrs As Web Jesiners,
cur rescnsibility is tc ensure thct the
exeriences we crcjt cre cs true tc the
criincl cs cssible. 1c Jc this, ycu neeJ
tc mcnce cnJ clin every ste cj the
Jesin rccess with hcw the mcjcrity cj
users will be viewin ycur wcrl. 1his
requires c ccmlex cnJ equclly
ccnjusin system cj cclcr mcncement.
While it Jcesnt ccmletely sclve the
rcblem cj cclcr shijtin, it mcles it jcr
less severe cnJ ensures the mcximum
reservcticn cj cclcrs ccrcss c mcjcrity
cj Jevices.
Smcshin e3ccl Series. =J | MasLering PhoLoshop or Web Design | l0
Chapter l, CoIor Management
CaIibrating the DispIay
Caining conLrol o your color ouLpuL sLarLs by conLrolling your inpuL (i.e. your
moniLor). A properly calibraLed moniLor is crucial. iL lays Lhe oundaLion or a
properly managed worklow. CalibraLing your moniLor can be done wiLh soLware,
buL iL is beLLer leL Lo a colorimeLer. Purchasing a colorimeLer is a good idea i you're
concerned abouL accuracy. A number o companies sell aordable soluLions. Monaco
OpLix, LaCie blue eye, baslCColor displaySQUlD, eLc. WheLher you use hardware or
soLware Lo calibraLe your moniLor, leL your moniLor warm up or abouL hal an hour.
Also ensure LhaL Lhe lighLing in Lhe room is soL and evenly disLribuLed and LhaL no
lighL shines direcLly on Lhe moniLor.
8ecause our work will be displayed on boLh Macs and Windows machines, our
gamma and whiLe poinL should be seL Lo Lhe mosL common seLLings. Camma is
basically a value LhaL represenLs Lhe relaLionship beLween luminance values o Lhe
moniLor. 1he higher Lhe
number, Lhe darker Lhe
display appears. Windows
machines run a gamma o
2.2, while Macs run .8 -
alLhough, Snow Leopard now
deaulLs Lo 2.2. A gamma o
2.2 is Lhe mosL common
seLLing o Web users, and or
Lhis reason your moniLor
should be seL Lo maLch. 1he
mosL common whiLe poinL is
D65, and you're besL o
ollowing suiL.
Smcshin e3ccl Series. =J | MasLering PhoLoshop or Web Design | ll
1he lcCie blue eye cclcrimeter
(htt.//bit.ly/cHhAv)
lCC ProfiIes
Managing color across Lhe ever-increasing specLrum o devices would be impossible
wiLhouL a universal sLandard. 1he lnLernaLional Color ConsorLium (lCC) has provided
jusL LhaL. 8y speciying vendor-neuLral color speciicaLions, Lhe lCC has creaLed Lhe
abiliLy or devices Lo inLerpreL and display color as inLended. ln order or Lhe lCC
speciicaLion Lo work, boLh devices and iles need Lo have proiles aLLached Lo Lhem.
An image ile's lCC proile essenLially Lells Lhe device how Lo inLerpreL iLs color daLa,
and Lhe device's proile Lells Lhe sysLem how Lo display LhaL color daLa.
8ecause Lhe sLandard
red, green and blue
proile (or sRC8 lFC
6966-2.) represenLs
a wide range o colors
LhaL can be replicaLed
across a majoriLy o
devices, iL has been
adopLed by Lhe lnLerneL
world as iLs sLandard.
1hereore, you should
creaLe all o your work in
Lhis proile Lo mainLain
maximum consisLency.
For more inormaLion,
see Color SeLLings on
page 4.
1he sRC3 cclcr cmut.
(htt.//bit.ly/cYuSCv)
5etting Up Photoshop
ALer you have calibraLed your moniLor, Lhe nexL Lhing Lo manage is PhoLoshop. 1his
is where Lhings become slighLly more complicaLed. ou have Lwo goals or color
managemenL in PhoLoshop. 1he irsL is Lo avoid color shiLing when your ile is
exporLed and displayed in a Web browser. 1he second is Lo save Lhe color daLa in Lhe
ile so LhaL iL can be used and viewed consisLenLly across dierenL plaLorms.
CoIor Management ModuIe (CMM)
PhoLoshop works wiLh a Color ManagemenL Module (CMM), which is used Lo
converL colors beLween lCC proiles. AL Lhe core o Lhe module is Lhe Proile
ConnecLion Space (PCS). 1his is Lhe engine LhaL processes a ile's raw daLa along wiLh
iLs lCC proile and Lells Lhe LargeL device how Lo display iL based on iLs proile.
UndersLanding Lhis process is imporLanL, because Lhe colors you see in PhoLoshop
are noL necessarily Lhe acLual colors o Lhe ile. For example, i your working space is
seL Lo sRC8 (more on Lhis in Lhe nexL secLion), and you examine a brownish color
(leL's say 6, 2, 69) using Lhe Mac's DigiLalColor MeLer, you'll noLice LhaL Lhe
display is acLually ouLpuLLing 40, 03, 56. 1haL's quiLe a shiL, especially in Lhe blue
channel. 1his is because Lhe documenL is Lelling Lhe PCS LhaL Lhe ile should be
converLed irsL Lo Lhe
sRC8 proile and Lhen
converLed Lo Lhe
moniLor's proile.
ln order Lo view Lhe
raw color values, we
can assign Lhe
documenL a dierenL
proile by going Lo
Cclcr shijtin jrcm rcw Jctc with cn sRC3 rcjile cnJ mcnitcr rcjile.
FdiL - Assign Proile. l we change Lhe Proile in Lhe drop-down menu Lo our
moniLor's proile, Lhen Lhe colors will shiL Lo display aL Lheir acLual values. So, now
our documenL is Lelling Lhe PCS Lo converL Lhe raw daLa direcLly Lo Lhe moniLor's
proile, Lhereby bypassing Lhe sRC8 conversion, which caused Lhe iniLial color shiL.
1his can be quiLe conusing, and discrepancies in Lhe working space can cause a
massive headache once you inLroduce Lhe browser inLo Lhe worklow. Many browsers
compleLely ignore embedded lCC proiles, and Lhe ClF and PNC ormaLs don'L even
supporL Lhem. 1his leads Lo color shiLs and can even cause browsers Lo render an
image dierenLly. Luckily, Lhere's a way Lo simpliy Lhe whole process. by properly
managing your working space.
CoIor 5ettings
l leL aL iLs deaulLs, PhoLoshop will exporL iles LhaL shiL in color when viewed in Lhe
browser. 1his is due Lo PhoLoshop's deaulL working space, which is Adobe RC8.
While Lhis proile is greaL or phoLographic work LhaL's meanL Lo be prinLed, iL will
wreak havoc on your Web designs. For Lhis reason, you need Lo change your working
space. 1here seems Lo be Lwo schools o LhoughL on which working space is besL or
Lhe Web. Some argue LhaL Lhe working space proile should maLch your moniLor's
proile, while oLhers suggesL using sRC8. 8oLh o Lhese meLhods can acLually achieve
Lhe same resulL, buL in dierenL ways.
Using your moniLor's proile as Lhe working space has Lhe beneiL o simpliciLy.
1here's no need or any conversion or prooing. However, you need Lo ensure LhaL
Lhe "ConverL Lo sRC8" opLion is Lurned o in Lhe "Save or Web and Devices" dialog.
OLherwise, your colors will shiL. 1his meLhod is exLremely simple and works well or
a one-person shop. However, you are essenLially binding Lhe documenL Lo Lhe
moniLor's proile. l you were Lo open Lhe PSD on a dierenL machine, Lhe color
values will remain Lhe same, buL Lhey will display dierenLly, which can be quiLe
deceiving.
1o mainLain Lhe highesL degree o consisLency in boLh your exporLs and your PSDs, l
recommend using a seL sLandard or all your working spaces. sRC8. 1he sRC8 proile
provides a baseline rom which all machines can accuraLely reproduce color.
However, when you seL Lhe working space Lo sRC8, Lhe documenL's appearance will
noL maLch whaL is ulLimaLely rendered in Lhe browser (unless you embed an lCC
proile and Lhe browser is adepL aL inLerpreLing iL).
1his can be easily remedied by working wiLh a soL proo. Under view - Proo SeLup,
change Lhe seLLing Lo "MoniLor RC8." 1hen, make sure LhaL view - Proo Colors is
checked. ou should see a change in your documenL. 1his is idenLical Lo how Lhe
image will appear in Lhe browser. Working wiLh Proo Colors can be Lricky Lo
remember, buL iL's worLh geLLing inLo Lhe habiL o prooing.
1he boLLom line here is LhaL using an sRC8 working space is Lhe besL soluLion or
ensuring consisLency in PhoLoshop and in exporLed images. 1haL being said, make
sure while you're working Lo have your Proo Colors on and seL Lo your moniLor's
proile. When you "Save or Web and Devices," iL doesn'L maLLer wheLher "ConverL Lo
sRC8" is on or o, buL
make sure LhaL "Fmbed
Color Proile" is o.
1o change your working
space, open Lhe Color
SeLLings dialog (FdiL -
Color SeLLings). ou can
Lhen change Lhe RC8
Working Space Lo sRC8
lFC6966-2.. ou'll also
noLice a number o oLher
seLLings in Lhis dialog.
1he Cclcr Settins Jiclc with the RC3 Wcrlin Scce set tc
sRC3.
Aside. Modern Browsers and CoIor Management
ln Lhe pasL, all browsers compleLely ignored embedded lCC proiles. However, more
and more browsers are sLarLing Lo accepL Lhem. Once all browsers are up Lo daLe on
color managemenL, your worklow will vary rom whaL we've jusL discussed.
ForLunaLely, you'll already be accusLomed Lo working in Lhe sRC8 color space, and
you'll only need Lo sLarL including Lhe proile when saving your iles by checking Lhe
"Fmbed Color Proile" opLion.
CoIor Management PoIicies
1he Color ManagemenL Policies secLion gives you conLrol over how discrepancies in
proiles are handled. For example, when copying and pasLing an image wiLh a proile
oLher Lhan Lhe currenL working space, you'll wanL Lo conLrol how LhaL ile is
converLed. l recommend leaving RC8, CMK and Cray on "Preserve Fmbedded
Proiles," wiLh boLh o Lhe Proile MismaLches checked. When you open or pasLe a ile
wiLh an opposing proile, PhoLoshop will ask wheLher you'd like Lo converL Lhe ile Lo
Lhe currenL working space, keep Lhe currenL proile or ignore color managemenL
alLogeLher.
When c jiles
rcjile Jcesnt
mctch the
current
wcrlin
scce, the
Cclcr
Mcncement
Pclicies
Jetermine
hcw tc
hcnJle the
Jiscrecncy.
NoLe LhaL Lhe conversion process rom one proile Lo anoLher is desLrucLive. 1he
sRC8 color space is, in acL, signiicanLly smaller Lhan, say, Adobe RC8. 1hereore,
when converLing rom Adobe RC8 Lo sRC8, you'll be clipping a loL o daLa. 1his is a
necessary evil and should be done only when necessary.
Conversion Options and Advanced Options
l you click Lhe "More OpLions" buLLon in Lhe Color SeLLings dialog box, you'll be
presenLed wiLh a couple o exLra opLions. 1he irsL are Lhe Conversion OpLions, which
conLrol how images in one proile are converLed Lo anoLher. 1hese are preLLy
advanced opLions and probably don'L need Lo be alLered or a Lypical Web design
worklow. However, you may have some luck changing Lhe lnLenL Lo "AbsoluLe
ColorimeLric" when converLing exLremely sensiLive colors, such as Lhose ound in a
logo. 1he Advanced OpLions are less useul when working on Lhe Web. 1hey're
basically used Lo simulaLe oLher devices and prinL ouLpuL. On Lhe whole, Lhese
opLions can all be leL as Lhey are.
Assign ProfiIe
1he "Assign Proile" opLion can be used Lo change Lhe proile associaLed wiLh a
documenL wiLhouL acLually converLing Lhe daLa. 1his can be helpul i a documenL
has somehow losL iLs proile buL you know Lhe proile LhaL should be associaLed wiLh
iL. OLherwise, using Lhis opLion is a shoL in Lhe dark. ou can cycle Lhrough dierenL
proiles and mighL hiL one LhaL properly reproduces Lhe original.
1he Assin Prcjile Jiclc ccn be useJ tc shijt cn imces rcjile withcut ccnversicn cr cmut
cliin.
Convert to ProfiIe
l an image conLains a proile oLher Lhan Lhe currenL working space, iL will need Lo be
converLed beore iL can be included in your sRC8 documenL. As sLaLed, converLing a
documenL Lo a dierenL proile will resulL in desLrucLion o Lhe raw daLa. 1hereore,
aim Lo converL a ile only once. rom iLs source space direcLly Lo Lhe working space.
PhoLoshop uses a rendering engine Lo process rom Lhe source space Lo Lhe
desLinaLion space using dierenL algoriLhms. Fach algoriLhm (or "lnLenL" as iL's
reerred Lo in Lhe dialog) specializes in a dierenL kind o conversion. SLicking wiLh
Lhe deaulL o "RelaLive ColorimeLric" is probably besL, because iL seeks Lo reproduce
colors as close Lo Lheir originals as possible while preserving highlighL values. 1he
"AbsoluLe ColorimeLric" inLenL can be used Lo Lry Lo preserve signaLure colors.
"PercepLual" aims Lo reproduce colors Lhe way Lhe human eye perceives Lhem while
sLraying rom Lhe raw color values, Lhis can used Lo some eecL in converLing
phoLographs. Finally, Lhe "SaLuraLion" inLenL pumps up Lhe saLuraLion wiLhouL sLaying
Lrue Lo Lhe original colors and Lheir relaLiviLy Lo each oLher.

1he Ccnvert tc Prcjile Jiclc ccnverts rcw cclcr Jctc tc jit the cmut cj the Destincticn
Scce.
The Quick 5et-Up
1o recap, seLLing up your sysLem or color managemenL is exLremely imporLanL or
reproducing your PhoLoshop documenL on Lhe Web. And while Color ManagemenL
as a subjecL can be conusing, Lhe seL-up is really quiLe simple.
. CalibraLe your moniLor wiLh a gamma o 2.2 and a whiLe poinL o D65.
2. SeL PhoLoshop's working space Lo sRC8.
3. Use PhoLoshop's "Proo Colors" command Lo proo all documenLs in MoniLor
RC8.
Chcter 2, Paths
Phctcshc is such c rcbust cliccticn
thct erjcrmin c simle tcsl ccn cjten
be Jcne in three cr jcur Jijjerent wcys.
While the ccse cculJ be mcJe thct ycu
shculJ wcrl with whctever tccls ycu jeel
mcst ccmjcrtcble with, there cre certcin
ccses in which cne methcJclcy rcves
tc be suericr.
Usin cths is cne methcJ thct will
chcne ycur entire crccch tc Web
Jesin. Ycu cculJ, cj ccurse, builJ ycur
Jccument usin rcster lcyers, but the
jlexibility inherent tc cths cllcws ycu tc
quiclly cnJ ecsily resize elements
withcut lcsin quclity, mclin them the
erject jcunJcticn jcr interjcces.
Desite the ecse cnJ recisicn cjjcrJeJ
by cths, mcny Jesiners shy cwcy jrcm
them - erhcs beccuse lllustrctcr is
recrJeJ cs AJcbes vectcr lctjcrm cnJ
Phctcshc rimcrily cs the rcster
lctjcrm. While lllustrctcrs vectcr tccls
cre much mcre cwerjul, Phctcshcs
cJJeJ benejit lies in its cbility tc blenJ
vectcr cnJ rcster Jctc tcether
secmlessly. 3eccuse Phctcshc
Jccuments cre bcseJ cn c ixel riJ, the
cth tccls mcle them suericr tc
lllustrctcr jcr Jesinin cn-screen meJic.
ln this chcter, well ccver the tccls
necesscry tc crecte jlexible cnJ ixel-
erject interjcce elements with cths.
Chapter 2, Paths
Bzier Basics
PaLhs are Lhe building blocks o Lhe vecLor graphics ormaL (a ormaL LhaL represenLs
images based on maLhemaLical equaLions). 1his is in conLrasL Lo Lhe rasLer ormaL,
which uses a grid o pixels. PhoLoshop documenLs are unique in LhaL Lhey are based
on a pixel grid buL allow Lhe use o vecLor elemenLs. vecLor paLhs are ulLimaLely
processed on Lhe pixel grid, buL Lhe PSD ormaL - as well as a ew oLhers, such as
FPS and 1lF - saves Lhe vecLor daLa so LhaL you never have Lo rasLerize iL. 1his
dramaLically increases lexibiliLy and producLiviLy, making paLhs an indispensable
Lool.
PaLhs consisL o a series o anchor poinLs, each o which has Lwo handles LhaL dicLaLe
Lhe curvaLure o Lhe lines connecLing iL Lo oLher anchor poinLs. 1he maLhemaLical
basis o paLhs allows Lhem Lo be scaled indeiniLely wiLhouL losing Lhe smooLhness o
Lheir curves (reerred Lo as 8zier curves). PhoLoshop provides a number o Lools LhaL
allow you Lo creaLe and modiy paLhs, and Lhere is a varieLy o ways Lo implemenL
Lhem.
Path Creation TooIs
Pen TooI
1he Pen 1ool (P) is Lhe mosL dynamic paLh creaLion Lool available Lo Web designers.
While iL is noL really suiLed Lo creaLing geomeLric shapes, iL shines wiLh organic
orms. lL provides a precise means or creaLing paLhs, buL iL requires an experienced
hand Lo ploL naLurally lowing curves. A loL o pracLice is necessary Lo eel
comorLable wiLh iL, buL masLering Lhe Pen 1ool is well worLh Lhe Lime invesLed.
PhoLoshop provides Lwo dierenL pen Lools. Lhe sLandard Pen and Lhe Freeorm Pen.
AlLhough iL requires manually drawing every line segmenL, Lhe sLandard Pen 1ool is
besL suiLed Lo nearly every Lask. 1he Freeorm Pen can be handy - wiLh Lhe
Smcshin e3ccl Series. =J | MasLering PhoLoshop or Web Design | 2l
Chapter 2, Paths
MagneLic opLion Lurned on - or quickly Lracing an objecL, buL Lhe paLh is rarely as
clean as iL should be. AL irsL, using Lhe Pen 1ool involves a loL o Lrial and error, buL
resL assured, Lhere is a meLhodology Lo creaLing well-ormed paLhs.
5tart in a Corner
1he irsL poinL in a paLh is probably Lhe LrickiesL, because you cannoL see how Lhe
inal poinL in Lhe paLh connecLs Lo iL. For Lhis reason, sLarLing in a sharp corner is
besL. 1his way, when you reach Lhe end o Lhe paLh you won'L have Lo worry abouL
Lhe smooLhness o Lhe curve.
Add Points where Necessary
FirsL, add poinLs wherever Lhere is an abrupLness or sharp change in direcLion. 1he
direcLional handles on Lhese poinLs will Lypically creaLe an acuLe angle, i any handles
are even necessary. "On-curve" poinLs are a liLLle Lrickier. Add Lhem where Lhey eel
mosL naLural - Lypically aL or near all opLical apexes.
Keep Points to a Minimum
lL may seem LhaL Lhe more poinLs LhaL are along your paLh, Lhe more accuraLe Lhe
paLh will be. However, Lhis Lypically makes or jagged and awkward paLhs. Using as
ew poinLs as possible is always good pracLice. JusL remember. Lhe ewer, Lhe
smooLher.
Use the Rubber Band Option
1o seL anchor poinLs exacLly where you'd like Lhem, you can Lurn on Lhe "Rubber
8and" opLion, locaLed in Lhe drop-down menu nexL Lo Lhe CusLom Shape 1ool buLLon
in Lhe Pen's properLy bar. 1his seLLing allows you Lo see Lhe curve connecLing Lhe lasL
anchor poinL Lo Lhe mouse's currenL posiLion.

Chapter 2, Paths
5pring-Loaded TooIs
1he Pen 1ool has a number o hidden capabiliLies known as spring-loaded Lools LhaL
make iL Lhe mosL powerul Lool or creaLing and ediLing paLhs.
Convert to Point 7ool. OpLion (AlL) while hovering over an anchor poinL
Direct Selection 7ool. Command (ConLrol)
Path Selection 7ool. Command - OpLion (ConLrol - AlL)
6rou Selection 7ool. Command - OpLion (ConLrol - AlL) while hovering over a paLh
segmenL or anchor poinL
AJJ Anchor Point 7ool. Hover over paLh segmenL
Subtract Anchor Point 7ool. Hover over anchor poinL
Chapter 2, Paths
Pen 1ccl with
the Rubber
3cnJ settin.
5hape TooI
1he Shape 1ool (U) gives you access Lo sLandard geomeLric shapes. Perhaps Lhe mosL
useul o Lhe Shape 1ools are Lhe RecLangle and Rounded RecLangle 1ools. 1hese Lwo
Lools are indispensable and can and should be used as Lhe basis o a majoriLy o your
design elemenLs. buLLons, rames, masks, menu bars, eLc.
Depending on Lhe shape you're drawing, a ew seLLings mighL help. FirsL and
oremosL is Lhe mode. Like Lhe Pen 1ool, Lhe Shape 1ool can be used in Lhree
dierenL modes. 1hese modes speciy how Lhe Lool will implemenL Lhe shape. as a
shape layer, as a paLh or by illing pixels. For more inormaLion on Lhese modes, reer
Lo "PaLh Usage. Modes" on page 27. ln addiLion Lo Lhe mode, Lhere are advanced
opLions unique Lo Lhe shape LhaL can be ound in Lhe drop-down menu in Lhe
properLies bar. 1hese give you access Lo opLions such as snapping Lo pixels,
consLraining proporLions, adding arrowheads, eLc.

PhoLoshop also gives you Lhe abiliLy Lo creaLe more complex shapes using Lhe
CusLom Shape 1ool. 1he deaulL library is limiLed, buL oLher libraries o cusLom
shapes are accessible rom Lhe Shape drop-down's lyouL menu. 1o deine your own
cusLom shape, selecL Lhe shape's paLh using Lhe PaLh SelecLion 1ool (A), righL-click
inside Lhe canvas, selecL "Deine CusLom Shape," name iL and click OK. 1he shape will
Lhen be appended Lo Lhe Shape drop-down in Lhe properLy bar.
Chapter 2, Paths
AJvcnceJ Shce 1ccl settins.
The Perfectionist's way
Fvery PhoLoshop documenL is builL on a grid o pixels, buL paLhs are noL consLricLed
Lo Lhe pixel grid like rasLer daLa is. An anchor poinL can acLually reside beLween pixel
edges. 1his can allow or greaLer lexibiliLy when creaLing dynamic shapes, buL iL can
also lead Lo undesirable anLi-aliasing, especially along horizonLal and verLical lines.
One o Lhe besL ways Lo prevenL Lhis rom happening is by using Lhe Snap Lo Pixels
opLion locaLed in Lhe Shape 1ool's properLy bar. Now when drawing a shape, Lhe
beginning and end poinLs are guaranLeed Lo be perecLly aligned on Lhe pixel grid.
l you run inLo an o-pixel
anchor poinL, iL can be
easily ixed by nudging iL
while zoomed in. FirsL,
zoom in as ar as possible,
Lhe urLher zoomed in you
are, Lhe smaller Lhe
incremenL o each nudge.
1hen, use Lhe DirecL
SelecLion 1ool (A) Lo selecL Lhe anchor poinL, and use Lhe arrow keys Lo nudge iL inLo
posiLion (clicking and dragging will move Lhe anchor poinL in only one-pixel
incremenLs). 1he Pixel Crid (Show - Pixel Crid) comes in handy when doing Lhis.
Type TooI
ConverLing Lype Lo a shape layer allows you Lo work direcLly wiLh Lhe anchors and
curves o each leLLer, and iL mighL even improve your LypeseLLing. 8ecause you will
be sacriicing Lhe abiliLy Lo ediL Lhe LexL, Lhis Lechnique is mosL useul when you know
LhaL Lhe LexL won'L change. WiLh Lhe Lype layer selecLed, righL-click Lhe layer in Lhe
Layers paleLLe and choose "ConverL 1ype Lo Shape." ou can now access Lhe acLual
paLhs used Lo creaLe Lhe Lype. 1hinking o Lype in Lhis manner (as shapes insLead
Chapter 2, Paths
On- cnJ cjj-ixel eJe ccmcriscn.
o leLLers) dramaLically
changes Lhe way you
work. Kerning is now
more inLuiLive. jusL
selecL a leLLer and
move iL - no pesky
inLegers Lo seL!
Other Creation Methods
5eIections
FdiLing paLhs is ar superior Lo ediLing rasLer daLa, especially when iL comes Lo
scaling. l Lhe rasLer shape is simple enough, why noL converL iL Lo a paLh SelecL
your shape, Lhen rom Lhe lyouL menu in Lhe PaLhs paleLLe, selecL "Make Work PaLh,"
or OpLion-click Lhe "Make work paLh rom selecLion" buLLon aL Lhe boLLom o Lhe
paleLLe. SeL Lhe Lolerance based on Lhe complexiLy o Lhe shape. Lhe simpler Lhe
shape, Lhe higher Lhe
Lolerance. Click OK.
ou'll noLice LhaL
pixel-Lo-paLh
conversion is noL an
exacL science, buL
wiLh some manual
clean-up, you can
eecLively recreaLe
Lhe original shape.
Chapter 2, Paths
1ye-tc-cth ccnversicn.
Selecticn-tc-cth ccnversicn.
lmporting and xporting
While PhoLoshop provides vecLor Lools LhaL are suicienL or many basic Lasks, iL in
no way compares Lo Lhe ease and power o lllusLraLor. ForLunaLely, Adobe producLs
work in unison. ou can creaLe paLhs in lllusLraLor and easily imporL Lhem by copying
(Command/ConLrol - C) and pasLing (Command/ConLrol - v) in PhoLoshop. ln Lhe
pasLe dialog box, selecL eiLher "PaLh" Lo imporL a Work PaLh or "Shape Layer" Lo
creaLe a ill layer wiLh Lhe oreground color. ln case you need Lo LranslaLe your paLhs
in Lhe opposiLe direcLion, copying and pasLing will work as above, or you can use
FxporL - PaLhs Lo lllusLraLor Lo creaLe a new lllusLraLor documenL wiLh Lhe same
dimensions and posiLions as Lhe currenL PhoLoshop documenL.
PixeI Perfection
Moving a shape such as a logo rom lllusLraLor inLo PhoLoshop and having iL anLi-
alias properly can be diiculL. lmporLing iL as a SmarL ObjecL allows you Lo resize and
LranslaLe iL as a whole unLil Lhings line up beLLer wiLh Lhe pixel grid. However, or
maximum conLrol over individual elemenLs, Lry imporLing iL as a shape layer. Now
you can work wiLh Lhe individual paLhs Lo perecLly align every elemenL. l Lhe logo
consisLs o mulLiple colors, you may need Lo imporL Lhe enLire logo as a shape layer
and Lhen separaLe each color inLo iLs own shape layer. While Lhis may noL work or
more complex shapes, Lhe improvemenL in crispness can be exLreme.
Path Usage
Modes
When creaLing paLhs via Lhe Pen or Shape 1ool, Lhree seLLings - ound in Lhe Lool's
properLy bar - are available Lo deine how Lhe paLh should be used. Shape Layer,
PaLhs and Fill Pixels. 1he Shape Layer seLLing auLomaLically creaLes a new ill layer
using Lhe color and layer sLyle seL Lo Lhe righL.
Chapter 2, Paths
PaLhs creaLe a Lemporary Work PaLh accessible in Lhe PaLhs paleLLe, which makes iL
available or many dierenL implemenLaLions. Fill Pixels painLs rasLer daLa on Lhe
currenL layer, leaving no paLhs behind.

5hape Layer
Shape layers are Lhe key Lo lexible inLerace consLrucLion. 1he abiliLy Lo quickly
resize, reshape and recolor Lhem can save you hours o rusLraLion on large projecLs.
1hey are ideal or creaLing one-layer buLLons and can even be illed wiLh gradienLs or
paLLerns wiLhouL Lhe use o layer sLyles.
Chapter 2, Paths
Pen 1ccl set
tc crecte c
Shce lcyer.

Crectin c rcJient shce lcyer.
CcmmcnJ-
cliclin
(Ccntrcl-
cliclin tc
quiclly
crecte c
vectcr Mcsl.
A shape layer is essenLially a ill layer wiLh a vecLor mask. lL can be creaLed as a solid
color, gradienL or paLLern, alLhough only Lhe oremosL is expliciLly available. 1he
easiesL way Lo creaLe a shape layer is Lo use a paLh drawing Lool seL Lo Shape Layer.
However, seLLing Lhe Lool Lo PaLhs allows you Lo speciy Lhe Lype o ill Lo be used.
FirsL, draw your paLh. 1hen, click Lhe "CreaLe new ill or adjusLmenL layer" in Lhe
Layer's paleLLe and choose rom Solid, CradienL or PaLLern. NoLe LhaL you can also
creaLe an adjusLmenL layer wiLh a vecLor mask in Lhe same manner.
Vector Mask
vecLor masks are oLen preerable Lo rasLer masks because Lhey can be easily
Lweaked and scaled and sLill produce a crisp edge. WiLh CS4's inLroducLion o Lhe
Masks paleLLe, vecLor masks are more powerul Lhan ever. Now, you can eaLher Lhe
edges and adjusL Lhe densiLy o a vecLor mask. 1he quickesL way Lo creaLe a vecLor
mask is Lo selecL Lhe layer you wish Lo mask. 1hen, selecL Lhe paLh using Lhe PaLh
SelecLion 1ool (A) and Command-click (ConLrol-click) Lhe "Add Layer Mask" buLLon aL
Lhe boLLom o Lhe Layer's paleLLe.

Chapter 2, Paths
Type Paths. ln and On
1here are Lwo ways
Lo use paLhs wiLh
Lhe Lype Lool. by
deining Lhe
baseline or by
creaLing a cusLom
LexL box shape.
SelecL Lhe work paLh
you'd like Lo use,
and wiLh Lhe 1ype
1ool (1) mouse over
Lhe paLh.
1he doLLed square on Lhe cursor will
change Lo a curved line. Click on Lhe
paLh, and you'll see LhaL Lhe Lype
lows righL along Lhe paLh. ALer
commiLLing Lhe Lype (Command /
ConLrol - FnLer), you can use Lhe
PaLh SelecLion 1ool (A) Lo move Lhe
beginning and end poinLs -
indicaLed by an "x" and a black
circle, respecLively - or Lo lip Lhe
Lype rom Lhe Lop o Lhe line Lo Lhe
boLLom. l using a closed paLh, you
can click inside iL Lo creaLe a cusLom-
shaped LexL box. 1hese are helpul
when wrapping LexL around an objecL.
Chapter 2, Paths
1ye cn c cth.
1ye in c cth.
liII and 5troke
1he PaLhs paleLLe provides an inLeresLing array o opLions Lo ill and sLroke a work
paLh. 1hese opLions are available only when Lhe currenL layer is a rasLer layer - you
can quickly creaLe a new rasLer layer using Command - OpLion - ShiL - N (ConLrol
- AlL - ShiL - N). 1hen, by OpLion-clicking (AlL-clicking) on Lhe "Fill paLh wiLh
oreground color" buLLon, you can open Lhe Fill PaLh dialog box.
From here, you can seL Lhe ill Lype, blending modes, Lransparency and eaLhering.
OpLion-clicking (AlL-clicking) Lhe "SLroke paLh wiLh brush" buLLon will open Lhe
SLroke PaLh dialog box, which allows you Lo choose a Lool Lo sLroke wiLh. 1he sLroke
will adopL Lhe oreground color and Lhe selecLed Lool's currenL seLLings.

Chapter 2, Paths
lill Pcth
Jiclc bcx.
Strcle tccls.
BooIean Operators
1o allow or more
complex shapes, mulLiple
paLhs can be grouped
LogeLher in a compound
paLh, on which 8oolean
operaLions can be seL.
1hese are accessible in
Lhe properLies bar o Lhe
Pen 1ool, Shape 1ool and
PaLh SelecLion 1ool, and
Lhey include.
Chapter 2, Paths
3cclecn mcJes.
Add (+). speciies a ill area.
5ubtract (-). deines an area LhaL is noL illed. l only one paLh exisLs, Lhen Lhe enLire
canvas is considered Lhe ill area, rom which Lhe shape is subLracLed.
lntersect. seLs Lhe ill Lo areas included in all paLhs.
xcIude. ills all paLh areas excepL Lhose LhaL overlap.
5tacking Order
When creaLing compound paLhs, noLe Lhe posiLions o Lhe paLhs in Lhe sLacking
order. A compound shape wiLh an add paLh on Lhe boLLom and a subLracL on Lop will
be compleLely dierenL wiLh swapped depLhs. A paLh's 8oolean operaLor Lakes eecL
on all o Lhe paLhs below iL. UnorLunaLely, Lhere are no commands or paleLLes Lo
simply swap depLhs in PhoLoshop, you'll need Lo use a series o cuL (Command /
ConLrol - X) and pasLe (Command / ConLrol - v) commands Lo rearrange Lhem.

Chapter 2, Paths
Pcth
stcclin
crJer.
Combining
Combining paLhs can reduce complexiLy by creaLing a single paLh rom Lhe perimeLer
o a compound paLh's ill area. 1o do Lhis, selecL Lhe paLhs Lo combine using Lhe PaLh
SelecLion 1ool (A), and click Lhe Combine buLLon in Lhe 1ool ProperLies bar.
Quick Tips
One-Layer Buttons
8uLLons are an unavoidable elemenL in inLerace design. ou'll undoubLedly need Lo
creaLe many o Lhem, and mainLaining a consisLenL sLyle or every buLLon will
maximize usabiliLy. 8y simpliying buLLons Lo a single resizable layer, Lhe Lask o
replicaLing and managing buLLons is made much easier. Using paLhs in conjuncLion
wiLh layer sLyles is assuredly Lhe besL basis or achieving concise buLLons.
5tep by 5tep
. SelecL Lhe Rounded RecLangle 1ool, and seL Lhe mode Lo PaLhs and Lhe Radius
Lo 6 pixels. lL's a good idea Lo open Lhe advanced seLLings and Lurn on Snap
Lo Pixels.
2. Draw an elongaLed recLangle.
Chapter 2, Paths
ReJucin
ccmlexity by
ccmbinin
Pcths.
3. ln Lhe Layer's paleLLe, click Lhe "CreaLe new ill or adjusLmenL layer" buLLon,
and choose "CradienL."
4. Click Lhe gradienL's icon Lo ediL iL. SeL Lhe righL color sLop Lo a dark red color
and Lhe leL sLop Lo a brighLer orange color. Drag Lhe boLLom-righL slider over
so LhaL iLs LocaLion reads 45%, and click OK.
5. Click OK Lo close Lhe CradienL Fill dialog box. 1hen, open Lhe 8lending
OpLions dialog by OpLion - double-clicking (AlL - double-clicking) Lhe layer's
Lhumbnail in Lhe layer's paleLLe.
6. Add a CradienL Overlay, and click on Lhe gradienL's Lhumbnail. Change boLh o
Lhe color sLops Lo whiLe.
7. Modiy Lhe leL opaciLy sLop Lo 0%, and make sure Lhe righL opaciLy sLop is seL
Lo 00%. Also, creaLe Lwo new opaciLy sLops by clicking direcLly above Lhe
gradienL bar. SeL Lhe irsL's locaLion Lo 49% and iLs opaciLy Lo 0%. Place Lhe
second aL 50%, and seL iLs opaciLy Lo 25%. 1hen, click OK.
8. Change Lhe 8lend Mode Lo Linear Dodge (Add), and knock Lhe opaciLy down
Lo abouL 65%.
ou should now have a shiny new buLLon conLained nicely on one layer. 8ecause Lhe
buLLon was builL wiLh paLhs and sLyles, you can easily resize iL Lo use LhroughouL your
design.
wrapping Type
PhoLoshop's 1ype 1ool is noL nearly as robusL as lllusLraLor's or lnDesign's, buL you
can sLill achieve many o Lhe same eecLs Lhrough various workarounds. 1he 1ype
1ool allows you Lo click and drag Lo creaLe a paragraph LexL block. However, Lhere's
no way Lo Lhen alLer Lhe shape o Lhe LexL block Lo anyLhing buL a recLangle. 8y irsL
creaLing a work paLh in Lhe desired shape, you can Lhen Lurn iL inLo a Lype holder by
selecLing Lhe 1ype 1ool (1) and clicking inside Lhe shape. ou can Lhen modiy Lhe
paLh, and Lhe LexL will auLomaLically wrap inside Lhe shape.
Chapter 2, Paths
Keyboard 5hortcuts
Pen TooI (P)
5hift + P
Loggle beLween Pen 1ool and Freeorm
Pen 1ool
5hift consLrains Lo 45 angles
Option
change Lo ConverL Lo PoinL 1ool, used Lo
seL direcLional handles
Command (ControI)
change Lo DirecLL SelecLion 1ool, used Lo
move anchor poinLs or sLreLch line
segmenLs
Command + 5hift (ControI + 5hift)
selecL mulLiple anchor poinLs and
segmenLs
Command + Option (ControI + AIt)
change Lo Croup SelecLion 1ool, used Lo
selecL enLire paLhs
Command + Option + 5hift (ControI
+ AIt + 5hift)
selecL mulLiple paLhs
+ seL 8oolean mode Lo Add
- seL 8oolean mode Lo SubLracL
5hape TooI (U)
5hift + U roLaLe Lhrough Shape Lools
5hift consLrain proporLions
Chapter 2, Paths
Option (AIt) whiIe dragging draw rom cenLer o shape
Option (AIt) before cIicking, if set to
create 5hape Layers
Lemporarily swiLch Lo Fye-Dropper Lool
Option (AIt) before and whiIe
dragging, if set to create Paths
seL 8oolean mode Lo SubLracL
Option + 5hift (AIt + 5hift) before
and whiIe dragging, if set to create
Paths
seL 8oolean mode Lo lnLersecL
Command (ControI)
change Lo PaLh SelecLion 1ool, used Lo
selecL and move paLhs
Command + 5hift (ControI + 5hift) selecL mulLiple paLhs
+ seL 8oolean mode Lo Add
- seL 8oolean mode Lo SubLracL
5pace bar (whiIe dragging) move Lhe shape's originL
Path 5eIection TooI (A)
5hift + A or Command-cIick (ControI-
cIick) inside document window
Loggle beLween PaLh SelecLion 1ool and
DirecL SelecLion 1ool
5hift + CIick selecL mulLiple
5hift + Drag move and snap Lo 45 angles
Command + Option (ControI + AIt) converL Lo Shape 1ool
Command + Option + 5hift (ControI
+ AIt + 5hift)
converL Lo Shape 1ool (consLrained Lo
45 angles)
Option (AIt) change Lo Croup SelecLion 1ool
Chapter 2, Paths
Option + CIick + Drag (AIt + CIick +
Drag)
duplicaLe selecLed paLh
Arrow
nudge selecLed paLh or anchor poinL
pixel
5hift + Arrow
nudge selecLed paLh or anchor poinL 0
pixels
Option + Arrow (AIt + Arrow)
duplicaLe selecLed paLh or anchor poinL
and move copy pixel
Option + 5hift + Arrow (AIt + 5hift +
Arrow)
duplicaLe selecLed paLh or anchor poinL
and move copy 0 pixels
Target Path
nter dismiss LargeL paLh
Command + nter (ControI + nter) selecLion rom LargeL paLh
Command + Option + nter (ControI
+ AIt + nter)
subLracL paLh area rom currenL selecLion
Command + Option + 5hift + nter
(ControI + AIt + 5hift + nter)
inLersecL paLh area rom currenL
selecLion
Command + T (ControI + T) Free 1ransorm PaLh
Command + 5hift + T (ControI + 5hift
+ T)
Free 1ransorm PaLh again
Command + C (ControI + C)
copy paLh or anchor poinL wiLh
neighboring poinLs
Command + X (ControI + X) cuL paLh or anchor poinL wiLh
Chapter 2, Paths
Chcter J, Layer 5tyIes
ln the revicus chcter, we ccvereJ the
benejits cj usin cths in ycur
Jccuments, but cths clcne ccn mcle
jcr c rcther Jull Jesin. 1his is where
Phctcshcs lcyer Styles ccme in. 1hey
cllcw ycu tc cJJ Jeth cnJ tcctility, cnJ
beccuse they ccn be ecsily ccieJ cnJ
mcJijieJ, they hel mcintcin ccnsistency
ccrcss Jijjerent elements cj c website.
lcyer Styles cre essenticl tc crectin
jlexible cnJ ncn-JercJcble Jccuments,
beccuse theyre secrcteJ jrcm the
lcyers cctucl ccntent. ln this chcter,
well ccver hcw tc crecte rect-lcclin
cnJ reuscble styles. Well clsc ccver
scme unique ejjects cnJ ncn-tyiccl uses
thct hel tc ccnscliJcte excess lcyers.
Chapter 3, Layer 5tyIes
Basics
Layer SLyles are a seL o commonly used eecLs LhaL can be applied Lo a layer
wiLhouL aecLing Lhe daLa o Lhe layer iLsel. 8eore Layer SLyles were inLroduced,
Lhese eecLs had Lo be creaLed manually using numerous layers and adjusLmenLs.
1his oLen resulLed in a mess o layers jusL Lo creaLe one simple eecL. Now wiLh a
ew clicks, we can easily creaLe, duplicaLe,
modiy and remove sLyles. Learning when and
how Lo use Layer SLyles can greaLly increase a
designer's producLiviLy.
1he Layer SLyles dialog box is noL readily
available buL can be quickly accessed in a ew
ways. My personal avoriLe is by double-clicking
on a layer's Lhumbnail in Lhe Layers paleLLe - i
iL's a shape or Lype layer, Lhen you'll need Lo
OpLion - double-click (AlL - double-click).
ou can also ConLrol-click (righL-click) on a layer
and selecL "8lending OpLions" or use Lhe "Add a
layer sLyle" buLLon aL Lhe boLLom o Lhe Layers
paleLLe Lo selecL a parLicular eecL.
ffects
Along Lhe leL side o Lhe dialog box is a menu wiLh a number o eecLs. Adding an
eecL can be as simple as clicking one o Lhe check boxes. However, Lhe deaulL is
rarely appropriaLe. 1o access more opLions or Lhe eecL, you musL click on iLs name.
Fach eecL has a number o seLLings LhaL can be Lweaked. blend mode, color, size,
conLour, eLc. While Lhere is no magic ormula or creaLing a greaL layer sLyle, Lhere
1he 'AJJ c lcyer style' menu ives
ycu quicl cccess tc inJiviJucl ejjects.
are some Lechniques you can employ Lo maximize your eorL. 8elow are some Lips
Lo help you geL beLLer resulLs rom your layer sLyles.
BIend Modes for Better CoIor
1he deaulL blend modes or some o Lhe eecLs are good enough, buL Lhey can
oLen appear dull and unnaLural. For example, using MulLiply or a black drop
shadow againsL a brighLly colored background can resulL in a shadow LhaL is
abnormally gray, breaking Lhe sense o realiLy.
8y changing Lhe
8lend Mode Lo
Linear 8urn and
also reducing Lhe
opaciLy, Lhe
shadow will adopL
more color rom
Lhe background.
1he very same
Lechnique works
well or eecLs
LhaL Lypically use
Screen. Changing iL Lo Linear Dodge will be more inLense, buL when Lhe opaciLy is
reduced you can achieve a more realisLic eel.
CoIor-lndependent ffects
When possible, keep absoluLe color values ouL o your layer sLyles. Fspecially wiLh
Lhings like buLLons, which can be o myriad colors, you may wanL Lo Lry building a
layer sLyle wiLh relaLive eecLs. For example, i we have Lwo simple buLLons, one blue
and one red, we could add a CradienL Overlay LhaL gradaLes rom a brighL red Lo a
dark red or Lhe irsL and a brighL blue Lo a dark blue or Lhe second.
Chcnin the blenJ mcJe jrcm Multily (lejt) tc linecr 3urn (riht) ccn
um scme lije intc c Jull ejject.
However, i Lhe layers are already red and blue, Lhen we can simply add a gradienL
LhaL ramps rom black Lo whiLe and change Lhe blend mode Lo Linear 8urn. We can
Lhen reuse one layer sLyle or buLLons o any color while mainLaining a consisLenL
look.
Remember the 5tacking Order
ou may have noLiced LhaL someLimes an eecL isn'L visible when anoLher eecL is
being used. For example, a Color Overlay seems Lo override a CradienL Overlay. 1his
is due Lo Lhe Layer SLyles sLacking order. JusL as wiLh Lhe Layer's PaleLLe, one layer will
cover anoLher LhaL is lower in Lhe sLacking order.
UnorLunaLely, Lhe Layer SLyles menu doesn'L allow you Lo rearrange Lhe order o
eecLs. One way around Lhis (alLhough you will sacriice Lhe abiliLy Lo ediL) is Lo use
CreaLe Layers, which will Lurn all o your Layer SLyle eecLs inLo acLual layers LhaL you
can Lhen move (see page 50).
Usin the scme lcyer style with cclcr-inJeenJent ejjects jcr cur buttcns
rcviJes ccnsistency cnJ jlexibility.
Interior jjects Stacking OrJer.
8evel and Fmboss
SLroke
lnner Shadow
lnner Clow
SaLin
Color Overlay
CradienL Overlay
PaLLern Overlay
xterior jjects Stacking OrJer.
SLroke
OuLer Clow
Drop Shadow
Avoid BeveI and mboss
8evel and Fmboss is greaL in Lheory buL preLLy ugly in pracLice. lL is quiLe possibly Lhe
mosL abused layer sLyle in Lhe arsenal. We've all wiLnessed poor Lypography made
worse wiLh a gaudy 8evel and Fmboss. PhoLoshop's aLLempLs Lo simulaLe lighL and
shadow on a beveled surace are quirky and unrealisLic. 1his is noL Lo say LhaL a
beveled look can'L be creaLed using layer sLyles, Lhere is simply a beLLer meLhod. 8y
using a combinaLion o lnner Shadow and lnner Clow, you can creaLe a crisper and
more cusLomizable bevel. Use a black lnner Clow seL Lo MulLiply or Linear 8urn or a
shadow. 1hen, use a whiLe lnner Shadow seL Lo Linear Dodge or Lhe highlighL.
1his Lechnique
gives you ar
beLLer conLrol o
Lhe ouLpuL and is
greaL or buLLons
and beveled Ul
elemenLs.
3evel cnJ lmbcss (lejt) ccn quiclly cJJ Jimensicn, but it crectes unsihtly
riJes. Usin c ccmbincticn cj lnner ShcJcw cnJ lnner Clcw ccn crecte
much smccther results, even thcuh ycu sccrijice certcin rcJcticns.
Change the Light's AngIe
1he lnner Shadow and Drop Shadow eecLs are casL based on Lhe Angle seLLing. 8y
deaulL, Lhis is seL Lo 20, which corresponds Lo our gesLalL's preerence or an
upper-leL lighL source. 1his, however, is noL always ideal. ln acL, because Lhis angle
is slighLly more upward Lhan leLward, adding a LighL drop shadow can look
awkward.
Changing iL Lo 35 will give you
perecLly upper-leL angled
eecLs. For example, by
changing Lhe angle Lo 35,
seLLing Lhe size Lo 0 and Lhe
disLance Lo , we add an evenly
disLribuLed shadow Lo Lhe
boLLom and righL o an objecL.
BIend Options
1he 8lend OpLions menu gives you conLrol over how Lhe layer and iLs eecLs blend
wiLh Lhe resL o Lhe documenL. ln addiLion Lo Lhe sLandard ill, opaciLy and blend
mode seLLings, you also have conLrols or Lhe applicaLion o masks, value-based
blending sliders, layer-only channels and more. 1hese opLions are powerul and
worLh going inLo in depLh.
GeneraI BIending
1he Lwo seLLings in Lhe Ceneral 8lending secLion should be preLLy amiliar. 1hey're
Lhe same conLrols ound on Lhe Layers paleLLe. 8lend mode changes how Lhe enLire
layer blends wiLh Lhe layers below iL, and opaciLy changes Lhe Lransparency along
wiLh all o iLs eecLs.
1he Jejcult 120 liht cnle (lejt) renJers
csymmetriccl shcJcws. Chcnin it tc 1JS evens
thins cut (riht).
Advanced BIending
ln Lhe Advanced 8lending secLion are some really powerul seLLings LhaL are oLen
overlooked. 1he Fill OpaciLy seLLing is Lhe same as Lhe Fill in Lhe Layers paleLLe. iL
conLrols Lhe Lransparency o Lhe acLual layer daLa and noL any o Lhe eecLs applied
Lo iL. 1he Channels check boxes allow you Lo conLrol which channels o Lhe currenL
layer are shown.
KnockouL provides Lwo opLions or subLracLing Lhe currenL layer rom Lhe layers
below iL. 8y using Shallow or Deep, all opaque pixels on Lhe currenL layer will cuL
Lhrough Lhe layers below iL. l Lhe layer's ill is seL Lo 00%, Lhis may noL be
immediaLely obvious, buL aLer changing iL Lo 0% you should see underlying layers
showing Lhrough.
1he layer LhaL comes Lhrough Lhe KnockouL depends on which seLLing you've used
and where Lhe currenL layer is in Lhe layer sLack. 1he Deep seLLing will always show
Lhe background layer. l Lhere is no background layer, Lhen Lhe area will be
1he Chcnnels
checl bcxes cllcw
ycu tc tcle
inJiviJucl
chcnnels cj the
current lcyer.
Abcve, the
criincl hctc
(lejt) cnJ its reJ
cnJ reen
chcnnels (riht).
LransparenL. Shallow works Lhe same way as Deep, unless Lhe currenL layer is in a
group, in which case iL cuLs Lhrough Lo Lhe boLLom-mosL layer o Lhe group. 1hese
seLLings can be really handy or removing cerLain areas o a large sLack o layers.
Tip
ou can Lurn any layer inLo a background layer by selecLing Layer - New -
8ackground rom Layer. 1here are ive addiLional opLions in Lhe Advanced 8lending
secLion LhaL deal primarily wiLh how Lhe layer's eecLs are deined. 8y deaulL, "8lend
Clipped Layers as Croup" and "1ransparency Shapes Layer" are checked. 8lend
Clipped Layers as Croup conLrols how Lhe blending modes o any clipped layers
aecL Lhe layer Lhey're clipped Lo. WiLh Lhis opLion selecLed, all clipped layers will
1he kncclcut
ccmmcnJ cllcws c
lcyer tc cut thrcuh
the lcyers belcw it.
Shcllcw (tc) cuts
thrcuh cll lcyers in
the current rcu,
cnJ Dee (bcttcm)
cuts thrcuh the
3cclrcunJ lcyer cr
(ij cne Jces nct exist)
cllcws jull
trcnscrency.
irsL blend wiLh Lhe base layer, and Lhen Lhe composiLed base layer will apply iLs
blend mode Lo Lhe layers beneaLh iL.
However, when Lhe 8lend Clipped Layers as Croup opLion is Lurned o, each o Lhe
clipped layers and Lhe base layer will apply Lheir individual blend modes.
1ransparency Shapes Layer conLrols Lhe area wiLhin which Lhe eecLs are consLrained.
l checked, Lhe layer's daLa acLs as bounds or Lhe eecLs. OLherwise, Lhe bounds will
be Lhe enLire canvas, and cerLain eecLs will noL render.
1he 8lend lnLerior FecLs as Croup opLion will cause all eecLs LhaL modiy Lhe
original layer daLa Lo acL as parL o iL. For example, i a layer has a deaulL gradienL
overlay on iL, and we Lurn Lhe Fill OpaciLy Lo 0%, Lhen Lhe gradienL will sLill be
displayed aL 00%
opaciLy. However,
i we now Lurn on
8lend lnLerior FecLs
as Croup, Lhen Lhe
gradienL will also
adopL Lhe 0%
opaciLy.
1he inal Lwo
opLions ("Layer Mask
Hides FecLs" and
"vecLor Mask Hides
FecLs") modiy Lhe
bounds LhaL deine Lhe eecLs. When Lhey're boLh unchecked, any opaque areas o
Lhe layer are used Lo deine Lhe bounds. 1urning one o Lhese opLions on removes
Lhe mask's inluence on Lhe boundaries and insLead hides any eecLs lying ouLside o
iLs acLive area.
1he Sctin ejject set tc Screen lccls unncturcl by Jejcult (tc), but
usin the 3lenJ lntericr ljjects cs Crcu (bcttcm) crectes c much
better ejject.
BIend lf
AL Lhe boLLom o Lhe
8lending OpLions menu
are Lwo exLremely
powerul sliders, which
conLrol Lhe Lransparency
o pixels. 1his Layer slider
dicLaLes Lhe Lransparency
o each pixel o Lhe currenL
layer based on iLs biL value
(rom 0 Lo 255). Sliding Lhe
black sLops Lo Lhe righL
gradually causes Lhe
darkesL pixels o Lhe layer
Lo become compleLely
LransparenL, and dragging
Lhe whiLe sLops Lo Lhe leL
in Lurn causes Lhe lighLesL
pixels Lo disappear. 1his is exLremely helpul when exLracLing someLhing like a logo
rom a whiLe background. However, you'll noLice LhaL Lhere's no gradaLion in
Lransparency, resulLing in unsighLly aliased edges. 1o achieve a smooLh anLi-aliased
edge, you need Lo spliL Lhe color sLops. 8y holding OpLion (AlL), you can move each
1he 3lenJ lj sliJers mcle shcrt wcrl cj simle extrccticns
3y Jejcult, ejjects crent
hiJJen by lcyer cr vectcr
mcsls (lejt). Chcnin
this tc lcyer Mcsl HiJes
ljjects (miJJle) cr vectcr
Mcsl HiJes ljjects
(riht) hels smccthen
cut strcne ejjects.
hal o Lhe color sLop independenLly. 1he Underlying Layer slider works in a similar
ashion, excepL LhaL iL bases Lhe Lransparency o Lhe currenL layer on Lhe biL values o
Lhe visible daLa below iL. ou can also seL Lhe opaciLy based on values rom a
parLicular channel by changing Lhe seLLings in Lhe 8lend l drop-down menu.
ContextuaI ControIs
1he Layers paleLLe has some convenienL, Lhough inconspicuous, opLions Lo help you
manage sLyles. 8y righL-clicking on eiLher Lhe x icon or Lhe eecLs lisL, you can
quickly access Lhe blending opLions or any o Lhe eecLs. WhaL's more, you're also
given copy, pasLe and clear conLrols and Lhe abiliLy Lo show or hide all eecLs, creaLe
layers and conLrol Lhe global lighL.
Copy, Paste and CIear Layer 5tyIe
SelecLing Copy Layer SLyle will copy all o Lhe eecLs o Lhe currenL layer, aLer which
you can use Lhe PasLe Layer SLyle command Lo apply Lhe same eecLs and blending
opLions Lo one or more layers. 1he copy command can also be done by holding
OpLion (AlL) while dragging Lhe x icon Lo a dierenL layer, however, Lhis will noL copy
any blending opLions.
Clear Layer SLyle allows you Lo remove all eecLs and blending opLions rom Lhe
selecLed layer. AlLernaLively, i you'd like Lo remove only Lhe eecLs, you can simply
drag Lhe x icon Lo Lhe Lrash can aL Lhe boLLom o Lhe Layers paleLLe.
5how or Hide AII ffects
Hide All FecLs is an inLeresLing opLion. lL allows you Lo hide noL only Lhe eecLs on
Lhe selecLed layer buL all o Lhe eecLs in Lhe documenL. 1his can be useul when
inspecLing Lhe core sLrucLure o a websiLe and Lhe sLyles have become disLracLing.
Create Layers
1he CreaLe Layers command allows
you Lo break sLyles inLo individual
layers (righL-click on a layer sLyle lisL
on Lhe Layers paleLLe and selecL
CreaLe Layers). 8uL in doing so, you
sacriice Lhe abiliLy Lo ediL Lhem via
Lhe Layer SLyles dialog. CerLain layer
sLyles will break when converLed Lo
layers, and some will need Lo be
remasked. 8reaking Lhe sLyle inLo
layers can help you double up eecLs
on Lhe original layer (e.g. Lwo sLrokes)
or apply eecLs Lo eecLs Lhemselves
(e.g. sLrokes wiLh sLrokes).
GIobaI Light
l you're applying a global lighL Lo your sLyles, you can quickly modiy Lhe angle and
alLiLude rom Lhe FecLs conLexLual menu.
5aving and Loading 5tyIes
Once you've creaLed a Lop-noLch layer sLyle, you'll undoubLedly wanL Lo save iL or
laLer use. 8y clicking Lhe New SLyle buLLon in Lhe Layer SLyle dialog, you can append
your layer sLyle Lo Lhe currenL lisL o sLyles. ou can even save Lhe opaciLy, ill and
oLher blending opLions by checking "lnclude Layer 8lending OpLions." ALer a sLyle
has been creaLed, iL can be accessed in a ew places. ln Lhe Layer SLyle dialog, you
can view and manage sLyles by clicking Lhe SLyles Lab. 1here is also a SLyles paleLLe
(Window - SLyles) LhaL gives you Lhe same managemenL conLrol as Lhe Layer SLyle
1he Crecte lcyers ccmmcnJ cllcws ycu tc
chcne the stcclin crJer cj ejjects.
dialog. ou mighL also wanL Lo preseL a sLyle beore creaLing new shapes. 1his can be
done in Lhe Shape 1ool's properLies bar using Lhe SLyles drop-down menu.
8uilding a library o commonly used layer sLyles can save you a loL o Lime and
hassle, especially on large projecLs. lL's also a good idea Lo save your mosL commonly
used sLyles in an ASL ile, which can be shared across worksLaLions. 1his can be done
Lhrough eiLher Lhe SLyle Lab in Lhe Layer SLyle dialog or Lhe SLyles paleLLe by
selecLing Save SLyles rom Lhe lyouL menu. ou can Lhen save a ile LhaL conLains all
o Lhe sLyles currenLly in Lhe lisL. ln Lhe same manner, you can load ASL iles by
choosing Load SLyles rom Lhe lyouL menu.
Quick Tips
0% fiII
WheLher you're creaLing a LransparenL buLLon, a simple border or anyLhing else LhaL
calls or a layer sLyle buL noL necessarily any layer daLa, a 0% ill can be exLremely
useul. 8ecause you're sLripping away only Lhe original layer daLa, your layer sLyles
will display aL Lheir respecLive opaciLies - essenLially creaLing an eecLs-only layer.
3uilJin c
librcry cj styles
ccn be reclly
usejul jcr lcre
rcjects,
eseciclly when
multile
Jesiners cre
invclveJ.
lnvisibIe 5trokes
lnvisible inner sLrokes come in handy when you need Lo shrink Lhe conLenL o a layer
proporLionaLely inward rom iLs perimeLer. For example, creaLing a rounded recLangle
inside anoLher rounded recLangle while keeping proporLionaLely smaller corner radii
can be raLher diiculL. 8y using Lhe same corner radius as Lhe larger recLangle and
adding an inner sLroke wiLh Lhe opaciLy seL Lo 0%, you can simply ramp up Lhe size o
Lhe sLroke Lo reduce Lhe radius unLil iL's perecLly in line.
Letterpress Type
A popular eecL is simulaLed leLLerpress. 8y adding a whiLe drop shadow wiLh a size
o 0, a disLance o and a blend mode seL Lo Screen, you can creaLe Lhe eecL o
Lype (or any shape or LhaL maLLer) being pressed inLo Lhe background. AlLernaLively,
i Lhe background is a lighL shade, you can reverse Lhe angle, change Lhe color Lo
black and change Lhe blend mode Lo MulLiply Lo creaLe Lhe same eecL.
A 0 jill
cens c
number cj
crective
cssibilities.
A strcle set
tc 0 ccn be
useJ tc
ccntrcct the
erimeter cj
c lcyer.
5caIing ffects
1here may be Limes when you've creaLed a Layer SLyle LhaL looks greaL aL Lhe original
size, buL when Lhe shape is increased or decreased your beauLiul sLyle is desLroyed.
ForLunaLely, PhoLoshop provides a meLhod or adjusLing ouL-o-whack sLyles. Simply
choose Layer - Layer SLyle - Scale FecLs, and inpuL Lhe percenLage Lo iL your
needs.
lnconspicuous Menu Options and 5pring-Loaded TooIs
A number o hidden commands are available Lo you in Lhe Layer SLyles menu.
Depending on Lhe eecL, you can gain access Lo eiLher Lhe Hand Lool or Lhe Move
Lool by simply mousing over Lhe documenL window. 1he Hand Lool allows you Lo
move Lhe documenL around jusL as iL would ouLside o Lhe Layer SLyles menu, and
Lhe Move Lool reposiLions Lhe currenL eecL and updaLes Lhe seLLings auLomaLically.
When using Lhe Move Lool, you can sLill access Lhe Hand Lool by holding Lhe space
bar. While using eiLher o Lhe Lools, you can zoom in and ouL by holding Command -
Space (ConLrol - Space) or OpLion - Space (AlL - Space), respecLively. Finally,
holding OpLion will change Lhe Cancel buLLon Lo a ReseL buLLon, allowing you Lo
undo any changes.
Drc
shcJcws ccn
be useJ tc
crecte c
subtle
letterress
ejject.
Chcter 4, Brushes
Wcbi-scbi is the trcJiticncl Iccnese
cesthetic cj the imerject. lt rcmctes
the becuty cnJ humcnness cj wcrn,
ncturclly ceJ cbjects. lcr excmle, the
ctinc cj cn cncient brcnze stctue cJJs
cn crecicble imerjecticn. 1he imlieJ
histcry cnJ ncturclness cJJ c sense cj
leitimccy cnJ uniqueness thct c new
stctue simly ccnt rcviJe.
Mcny websites tcJcy cre lile new
stctues, with erjectly clisheJ Jesin
elements, cris eJes cnJ ecmetric
shces. While this mcles jcr clecn, ecsy-
tc-use interjcces, it ccn clsc crecte c
rcther cclJ user exerience. lntrcJucin
scme imerject Jesin elements ccn
hel cut thrcuh the stcrl recisicn cnJ
rcJuce c wcnJerjully unique cesthetic.
Phctcshcs tccls cre JesineJ tc
execute with cbsclute recisicn. 1he
exceticn is the brush tccl, which is
cccble cj cJJin rcnJcmness cnJ
imerjecticn. Mcsterin the Jiitcl brush
is by nc mecns ecsy. lt ccrries the scme
Jijjiculties cs the scble brush hiJJen ct
the bcttcm cj ycur crt bin. ln jcct, the
Jijjiculty is multilieJ by the Jisccnnect
between the hcnJ cnJ mcnitcr.
Develcin Phctcshc brush slill tcles
time, but it is well wcrth the ejjcrt.
Chapter 4, Brushes
Basic 5ettings
Along Lhe brush's properLies bar are some simple yeL powerul seLLings LhaL
deLermine Lhe sLrengLh and shape o Lhe brush. 1hese seLLings have a big impacL on
Lhe how Lhe brush applies painL, so undersLanding Lhem is imporLanL.
Brush
1he brush menu, which is accessible by clicking Lhe drop-down menu nexL Lo Lhe
brush preview or by righL-clicking on Lhe canvas, presenLs Lhree opLions Lo conLrol
Lhe shape o your brush. "MasLer DiameLer," "Hardness" and "8rush Shape."
1he MasLer DiameLer seLLing seLs Lhe
overall widLh and heighL o your
brush in pixels. While hard Lo noLice
on a sLandard round brush, making a
brush larger Lhan iLs original size can
make iL blurry. So, i you wanL Lo
mainLain clean edges, keep an eye on
Lhe brush's original diameLer. 1his
seLLing is easily conLrolled using a
couple o shorLcuLs. Use [ and ] Lo
modiy Lhe diameLer in incremenLs o
0 pixels, or use Lhe on-canvas drag
meLhod. wiLh your mouse cursor on
Lhe canvas, hold down OpLion -
ConLrol - ShiL (AlL - ShiL - RighL-
click) and drag Lhe mouse leL or righL. 1he brush will change in size as you scrub
back and orLh. 1his is greaL or when you need a precise size on Lhe ly.
Chapter 4, Brushes
1he brush menu is ecsily cccessible by riht-
cliclin cn the ccnvcs.
1he hardness seLLing is available only or PhoLoshop's round brushes. SeLLing Lhe
hardness as a percenLage rom 0 Lo 00 will eaLher Lhe edges o Lhe brush. 00% is a
crisp edge, and 0% is a compleLely eaLhered edge rom Lhe cenLer o Lhe brush Lo
Lhe circumerence. For broad alLeraLions Lo Lhis seLLing, use Lhe keyboard shorLcuLs
ShiL - ] and ShiL - [ Lo change Lhe values in 25% incremenLs, or hold Command -
OpLion - ConLrol (ConLrol -
AlL - RighL-click) and drag
inside Lhe canvas Lo change
Lhe values and see Lhem Lake
eecL as you do iL.
AL Lhe boLLom o Lhe panel is
an assorLmenL o brush preseLs
LhaL gives you quick access Lo
Lhe brushes you use mosL.
Some o Lhe deaulLs are jusL
simple shapes and LexLures,
buL oLhers have been cusLomized wiLh advanced seLLings in Lhe 8rushes paleLLe (F5).
PhoLoshop has a number o brush libraries you can add Lo Lhe lisL using Lhe panel's
lyouL menu, buL you can also load and creaLe cusLom brushes (see "8rush PreseLs"
on page 59).
Mode
1he brush's mode seLs how painLed pixels aecL Lhose already on Lhe currenL layer.
1hese modes work Lhe same way LhaL 8lend Modes work on Lhe layer's paleLLe,
excepL LhaL Lhey're converLed Lo absoluLe values when Lhe sLroke is inished. 1his is
an imporLanL disLincLion Lo undersLand. once you've painLed using a blending mode,
LhaL mode cannoL be alLered aLer Lhe acL, because Lhen you would be using
blending modes on Lhe layer's paleLLe.
Chapter 4, Brushes
1he cn-ccnvcs Jrc shcrtcuts mcle Jicmeter cnJ
hcrJness cJjustments simle cnJ intuitive.
1he brush Lool also inLroduces Lwo blending modes noL ound in Lhe layer's paleLLe.
"8ehind" and "Clear." 1he 8ehind seLLing allows you Lo painL only in Lhe areas o Lhe
layer LhaL are LransparenL, Lhis can be helpul i you need Lo painL behind a subjecL
and leave illed pixels inLacL. 1he Clear seLLing essenLially Lurns Lhe brush inLo an
eraser, insLead o adding painL Lo Lhe layer, iL removes iL.

Chapter 4, Brushes
Settin the
mcJe chcnes
hcw the cint
cjjects the
lcyers current
ixels.
1he 3ehinJ
mcJe cllcws
ycu tc cint
strictly in
trcnscrent
crecs. Clecr
mcJe
essenticlly turns
the brush intc
cn ercser.
Opacity, lIow and Airbrush
1hese Lhree seLLings work in unison Lo deLermine Lhe amounL o painL laid on Lhe
canvas. 1he opaciLy seLLing is Lhe masLer conLrol. iL seLs Lhe maximum amounL LhaL
can be painLed wiLh each sLroke, mouse down Lo mouse up, regardless o any oLher
seLLing.
Flow, on Lhe oLher hand, seLs Lhe amounL o painL applied Lo an area every Lime Lhe
brush moves. So, i your Flow seLLing is seL Lo 20%, and you click one area o Lhe
layer, only 20% will be painLed. However, i you move Lhe mouse back and orLh over
an area wiLh Lhe same seLLing, Lhe painL will build up incremenLally by 20%.
Finally, Lhe Airbrush seLLing allows you Lo add painL based on Lime insLead o
movemenL, by simply holding Lhe mouse down in one area, you mulLiply Lhe brush's
eecL. ou can quickly seL Lhe OpaciLy o a brush using Lhe number keys (5 is 50%, 65
is 65%). 8y holding ShiL while inpuLing Lhe numbers, you can conLrol Lhe brush's Fill
seLLing. NoLe. i Lhe Airbrush seLLing is on, Lhen Lhese Lwo shorLcuLs are reversed.
Chapter 4, Brushes

Occity cnJ
llcw bcth
ccntrcl the
brushs
trcnscrency
but cre very
Jijjerent.
Advanced 5ettings
On Lhe 8rushes paleLLe (F5) are dozens o seLLings LhaL conLrol Lhe way Lhe brush
painLs, rom shape and size Lo low and scaLLer. UndersLanding how Lo use Lhese
opLions is Lhe key Lo creaLing wonderul brushes.
Brush Presets
1he 8rush PreseLs menu lisLs
all o Lhe currenLly available
brushes. While some o Lhe
preseLs simply change Lhe
shape o Lhe brush, oLhers
have advanced seLLings.
PhoLoshop has a number o
brush libraries in addiLion Lo
Lhe deaulLs LhaL can be
easily appended Lo Lhe
currenL lisL o preseLs. 1hese
preseLs are accessible in Lhe
lyouL menus locaLed on Lhe
8rushes PaleLLe and in Lhe
8rush drop-down menu in
Lhe Loolbar. PhoLoshop
provides a dozen or so
libraries, including Dry
Media, WeL Media, NaLural
and Calligraphic buL you
can load a cusLom library by
choosing "Load 8rushes."
Chapter 4, Brushes
1he brushes in the 3rush Presets list cre nct just brush
shces. scme clsc hcve cJvcnceJ settins.
l you've creaLed a brush LhaL you would like Lo save as your own cusLom preseL, you
can do so by clicking Lhe "CreaLe New 8rush" buLLon aL Lhe boLLom o Lhe paleLLe.
1his will add Lhe brush Lo your preseL menu, buL i Lhe menu is reseL, Lhe brush will
be losL. Luckily, PhoLoshop allows you Lo exporL a cusLom library so LhaL you never
lose your avoriLe brushes. Simply choose "Save 8rushes" rom Lhe ly-ouL menu, and
Lhen you can exporL an A8R ile conLaining all o Lhe brushes currenLly in Lhe 8rush
PreseLs menu.
ou can cusLomize even urLher by creaLing your own brush shape. 1o do so, sLarL by
selecLing Lhe area you'd like Lo creaLe Lhe brush sample rom (or selecL Lhe layer
you'd like Lo use). 1hen, selecL FdiL - CreaLe 8rush PreseL. Name iL and click OK. A
new brush preseL will be added Lo Lhe menu.
Brush Tip 5hape
1his group allows you Lo conLrol Lhe primary shape o Lhe brush. Many o Lhese
seLLings, which are ouLlined above, are also ound in Lhe 8rushes Loolbar, buL here we
also have opLions or lipping, roLaLion, roundness and spacing. RoLaLion, Flip X and
Flip modiy Lhe orienLaLion o Lhe brush. SeLLing Roundness Lo lower Lhan 00%
Chapter 4, Brushes
Crectin c
custcm brush
shce is the
jirst ste tc
crectin c
ccmletely
unique brush.
squishes Lhe brush along iLs
original x-axis, Lhis can be
used Lo easily creaLe a
calligraphic brush. ou can
also conLrol Lhe values by
dragging Lhe arrow and
conLrol poinLs on Lhe image
Lo Lhe righL.
PhoLoshop scales brushes by
inLerpolaLing Lhem up or
down, no vecLor brushes are
available. 1hereore, some
brushes become griLLy or
pixelaLed i scaled Loo big. 1o
quickly reLurn a brush Lo iLs
original size, click Lhe "Use
Sample Size" buLLon.
1he inal seLLing in Lhis group
is Spacing, which deLermines
how oLen Lhe brush is
sampled onLo Lhe layer. Lower
values place Lhe samples close
LogeLher, and higher values
space Lhem arLher aparL.
Spacing noL only changes Lhe
sLroke's appearance buL can
drasLically aecL PhoLoshop's
perormance. SeLLing iL Lo %
Chapter 4, Brushes
Over-sizin c brush ccn ccuse unwcnteJ ixellcticn.
1his ccn be remeJieJ with the Use Scmle Size buttcn.
1he 3rush 1i Shce menu ccntrcls the rimcry shce cj
the brush.
can produce smooLher edges, buL a large or complex brush can seriously bog down
PhoLoshop. l perormance is an issue, keep Lhis seLLing as high as possible. Spacing
can also be Lurned o using Lhe check box nexL Lo iLs name. 1his causes Lhe brush Lo
sample wiLh inconsisLenL spacing based on Lhe speed o your movemenLs.
Brush ControI Methods
A number o Lhe seLLings in Lhe 8rushes paleLLe allow you Lo seL a meLhod or
conLrolling values. 1hey include O, Fade, Pen Pressure, Pen 1ilL, SLylus Wheel,
RoLaLion, lniLial DirecLion and DirecLion. Some o Lhese seLLings require a LableL, such
as a Wacom. l you don'L have a LableL, or i Lhe meLhod is noL available wiLh your
parLicular sLylus, PhoLoshop will display an error icon Lo noLiy you.
Off
ConLrol is compleLely
negaLed wiLh Lhe O seLLing,
which means LhaL values will
remain consisLenL LhroughouL
Lhe sLroke o Lhe brush.
Chapter 4, Brushes
Withcut c ccntrcl set, ecch scmle cj the brush remcins
ccnsistent.

Sccin rectly
cjjects the
smccthness cj
ycur brush but
ccn clsc imcct
renJerin seeJ.
lade
1he Fade conLrol allows you
Lo speciy Lhe number o
sLeps over which Lhe seLLing
will incremenLally decrease
unLil iL reaches iLs minimum.
So, by deaulL, seLLing Lhe
Size conLrol Lo Fade wiLh 0
sLeps will cause Lhe brush Lo
decrease iLs size by 0% each sLep unLil Lhe brush reaches 0. 1his can be used wiLh
Lhe Size seLLing Lo creaLe individual sLrands o hair. While many o Lhe seLLings allow
you Lo speciy Lhe ade's minimum percenLage, some use a preseL amounL. For
example, seLLing sLeps or Lhe Angle Fade deLermines how many sLeps will be used
Lo roLaLe Lhe brush 360.

Pen Pressure
Pen Pressure is an exLremely
useul seLLing buL requires a
pressure-sensiLive LableL
device. lL deLermines values
based on how hard you press
Lhe pen Lo Lhe pad. 1his oLen
makes or inLuiLive painLing,
especially when used on size
and opaciLy seLLings.
Pen TiIt
1he Pen 1ilL seLLing changes values based on Lhe angle o Lhe pen Lo Lhe LableL.
When Lhe pen is perecLly perpendicular Lo Lhe LableL, Lhe variance is seL Lo 0%. As
you LilL Lhe pen, Lhe values increase. 1his seLLing is especially helpul or conLrolling
Chapter 4, Brushes
Pen Pressure requires c tcblet Jevice cnJ Jetermines vclues
bcseJ cn hcw hcrJ the stylus is resseJ tc the cJ.
1he lcJe Ccntrcl incrementclly Jecrecses vclues until the
minimum is reccheJ.
Lhe angle o Lhe brush,
because iL also Lakes inLo
consideraLion Lhe direcLion in
which Lhe pen is poinLing on
Lhe LableL. So, holding Lhe pen
aL an angle and poinLing iL Lo
Lhe leL o Lhe LableL will poinL
Lhe brush Lo Lhe leL.

5tyIus wheeI
l your sLylus is equipped wiLh
a SLylus Wheel, you can use iL
Lo conLrol variance on Lhe ly
by roLaLing iL. 1his may be
helpul or quickly changing
seLLings beLween sLrokes,
alLhough using iL Lo change
values during a
sLroke is diiculL.

Rotation
1his is anoLher seLLing LhaL
requires a special Lype o
sLylus. l your sLylus supporLs
RoLaLion, you can simply
roLaLe Lhe sLylus Lo conLrol
values. 1his is probably besL
used wiLh Lhe angle seLLing.
Chapter 4, Brushes
3y settin the Anle Ccntrcl tc Pen 1ilt, ycu ccn mctch
the brush tis rctcticn tc ycur hcnJs rctcticn.
Stylus Wheel
Rctcticn
lnitiaI Direction
When using Lhe lniLial
DirecLion seLLing, Lhe brush
will noL immediaLely sLarL
applying painL. PhoLoshop
waiLs Lo see in which direcLion
you move Lhe brush and Lhen
roLaLes Lhe brush according Lo
Lhe angle.
Direction
1he DirecLion seLLing can be
parLicularly useul or painLing
Lhings like grass along a
conLour, because iL roLaLes
based on Lhe direcLion your
brush has Lraveled since Lhe
lasL sLep.
5hape Dynamics
Now LhaL you have seL a basic
shape and size, you can add
some variance using Shape
Dynamics. Here you'll see
Lhree dierenL Lypes o jiLLers,
which conLrol Lhe amounL o
variaLion allowed or size,
angle and roundness. SeLLing
any o Lhese opLions Lo above
0% will cause Lhe brush Lo
Chapter 4, Brushes
1he jirst mcvement ycu mcle usin the brush Jetermines
the cnle when usin the lniticl Directicn ccntrcl.
1he Directicn ccntrcl rctctes ycur brush sc thct it
ncturclly jcllcws the curve cj the strcle.
1he Shce Dyncmics jitter ccntrcls ccn be useJ tc cJJ
vcricticn tc the brush shce.
sample aL random values wiLhin Lhe range seL by Lhe percenLage (e.g. seLLing Lhe
Angle JiLLer Lo 50% will limiL Lhe brush's roLaLion Lo 80).
5cattering
1he ScaLLering menu allows
you Lo vary where each
sample o Lhe brush is
placed and how many
samples are placed per sLep.
1hree sliders are here or you
Lo conLrol. ScaLLer, CounL
and CounL JiLLer.
1he ScaLLer seLLing seLs a
percenLage or how ar o
Lhe origin Lhe sample is
allowed Lo Lravel. 8y deaulL,
Lhis conLrols Lhe variance
only along Lhe y-axis, buL by
clicking Lhe "8oLh Axes"
check box, you seL Lhe same
value or Lhe x-axis.
CounL and CounL JiLLer work
LogeLher Lo deLermine how
many samples are generaLed in every sLep. CounL dicLaLes Lhe maximum number o
samples allowed, while CounL JiLLer randomly chooses a number in LhaL range Lo
sample. l Lhe ScaLLer seLLing is noL seL Lo above 0%, Lhen Lhe CounL seLLing will place
Lhe brush on Lop o iLsel, which can creaLe a "heavy" brush wiLh jagged edges.
Chapter 4, Brushes
Scctterin ccn cJJ c lively rcnJcmness tc c strcle.
Texture
Adding a LexLure Lo your brush can give a wonderul sense o depLh. PhoLoshop
allows you Lo apply any o your 1exLure preseLs Lo Lhe brush. ou can Lhen modiy
Lhe scale or inverL iL. 1he Mode drop-down menu provides a lisL o blending modes
LhaL deLermine how Lhe LexLure mixes wiLh Lhe currenL values o Lhe brush. AlLhough
mosL o Lhese blending modes will look amiliar Lo you, Lhey uncLion a liLLle
dierenLly here. For example, you would Lhink LhaL seLLing Lhe Mode Lo MulLiply on a
brush LhaL is compleLely black wouldn'L have any eecL. However, PhoLoshop
compensaLes by reducing Lhe original values o Lhe brush so LhaL Lhe LexLure is
visible.
AL irsL, Lhe DepLh seLLing
seems Lo work by seLLing Lhe
opaciLy o Lhe LexLure. 8uL whaL
iL really does is ramp Lhe values
o Lhe LexLure rom Lheir
original grayscale values (aL
00%) Lo compleLely whiLe
(0%). 1his allows or more
dramaLic resulLs Lhan you
would geL by simply reducing
Lhe LexLure's opaciLy.
1his menu also has a eaLure,
called 1exLure Fach 1ip, LhaL
allows you Lo conLrol Lhe
LexLure o every brush sample.
Checking Lhis opLion Lurns a
couple o oLher sliders on LhaL
seL Lhe Minimum DepLh and
Chapter 4, Brushes
Usin c texture cJJs tcctility cnJ Jeth tc ecch strcle.
DepLh JiLLer. AlLering Lhese values gives each sample a random depLh wiLhin Lhe seL
range.
DuaI Brush
Combining Lwo brushes using Lhe Dual 8rush opLion opens Lhe door Lo some
anLasLic eecLs LhaL you could never creaLe wiLh a single brush. As Lhe name implies,
Lhis seLLing uses Lwo dierenL brush shapes Lo creaLe Lhe inal sample. 1he primary
brush is basically used as Lhe mask LhaL Lhe dual brush is conLained wiLhin. 1he Dual
8rush menu has a ew seLLings or Lhe second brush LhaL work in Lhe same manner
as Lhe ones or Lhe primary brush. 1he dierences you seL in Shape, Spacing,
ScaLLering, CounL and Mode make or a more dynamic and naLurally random brush
sLroke.
Chapter 4, Brushes
Ccmbinin
brush shces
crectes unique
ejjects thct ycu
ccnnct cchieve
ctherwise.
CoIor Dynamics
1he Color Dynamics menu helps you injecL some color variaLion inLo your brush
sLrokes. ou can conLrol Lhe colors by using Lhe Foreground/8ackground JiLLer, or
you can allow PhoLoshop Lo randomly selecL values using Lhe Hue, SaLuraLion and
8righLness JiLLers.
1he Foreground / 8ackground
JiLLer conLrols how much o Lhe
background color is allowed Lo
be sampled inLo Lhe brush.
NoLe LhaL Lhe background color
is added Lo (noL subsLiLuLed
or) Lhe oreground color. 1his means LhaL i your oreground color is red and your
background color is blue, Lhe inLermediary samples will be a purple hue.
1he Hue, SaLuraLion and
8righLness JiLLers deLermine Lhe
maximum amounL o variance
allowed based on Lhe
oreground color's values or
each. So, i your oreground
color has a saLuraLion or
brighLness value o 0, Lhen your
brush sLrokes will be compleLely
grayscale. AL Lhe oLher exLreme,
seLLing a oreground color Lo
00% brighLness and saLuraLion
will make every possible
color available Lo use.
Chapter 4, Brushes
Hue, Scturcticn cnJ 3rihtness Iitters ccn be useJ tc cJJ
vcricticn tc the jcrercunJ cclcrs rcerties.
1he lcrercunJ/3cclrcunJ Iitter rcnJcmly blenJs twc
cclcrs.
ln addiLion Lo Lhe JiLLer seLLings
is a PuriLy slider. 1his seLs how
pure Lhe saLuraLion is or each
sample. l seL Lo 0%, iL does
noLhing, i moved Lo 00%, iL
limiLs Lhe SaLuraLion value or
each sample Lo 00%. However,
don'L misLake Lhis or an
overriding seLLing or saLuraLion,
iL seLs only Lhresholds or iL. So,
seLLing iL Lo -50% ensures LhaL
saLuraLion values never go
above 50%, and a seLLing o
-00% compleLely removes all
saLuraLion.
Other Dynamics
WiLh Lhe OLher Dynamics
menu, you can jiLLer and seL
conLrols Lo vary Lhe brush's
opaciLy and low. 8oLh o Lhese
jiLLers depend on Lhe brush's
currenL seLLings in Lhe
properLies bar. 1hey don'L allow
Lhe brush Lo gain opaciLy, Lhey
only deLermine how much
lower iL can go. 1he pen
pressure conLrol is an inLuiLive
maLch or eiLher o Lhese
seLLings.
Chapter 4, Brushes
Occity cnJ llcw Iitters bcth chcne the trcnscrency cj
ecch brush ti shce, but the llcw Iitter cllcws the scmles
tc ccmcunJ.
1he Purity sliJer sets c threshclJ jcr ecch brush scmles
scturcticn level.
Other 5ettings
Noise
1his generaLes random noise
wiLhin Lhe gray values o your
brush shape.

wet dges
1his decreases Lhe inLerior
values o your brush, while
leaving Lhe edges aL ull opaciLy.
ln doing so, Lhe brush creaLes
an eecL similar Lo waLercolor,
wiLh iLs "weL" edges.
Airbrush
1his allows painL Lo build up incremenLally based on Lhe Flow seLLing and limiLed by
Lhe OpaciLy seLLing (see OpaciLy, Flow and Airbrush above).
5moothing
1his seLLing smooLhens Lhe curves o Lhe sLroke Lo prevenL polygonal curvaLures.
1urning Lhis o mighL help i your brush is rendering slowly.
Protect Texture
1his ensures LhaL Lhe same LexLure is used or every brush wiLh a LexLure.
Other PaIette Options
Lock 5etting
NexL Lo each menu name in Lhe 8rushes PaleLLe is a padlock icon. 1his allows you Lo
lock seLLings so LhaL when you swiLch Lo a dierenL brush preseL, Lhe seLLings rom
Chapter 4, Brushes
LhaL menu carry over Lo Lhe new preseL. 1his is handy when you need a similar eecL
buL don'L wanL Lo rebuild iL wiLh a new brush shape.
Resetting
1he 8rushes PaleLLe has Lwo dierenL ways Lo reseL conLrols in iLs lyouL menu. "Clear
8rush ConLrols" and "ReseL All Locked SeLLings." Clear 8rush ConLrols Lurns o all
conLrols excepL or SmooLhing, buL keeps Lhe locked seLLings locked. ReseL All
Locked SeLLings also Lurns o all conLrols buL unlocks everyLhing.
Quick Tips
Learning Lhe Lechnical aspecLs o Lhe digiLal brush is only Lhe irsL sLep Lo becoming a
masLer brush arLisL. A biL o LalenL mixed in wiLh neverending pracLice are also
required. Here are some quick Lips Lo help you along Lhe way.
Changing the Cursor
l Lhe normal cursor isn'L Lo
your liking, you can change iL.
ln PhoLoshop's Preerences
menu (Command/ConLrol - K)
is a secLion called Cursors
(Command/ConLrol - 5). Here
you have Lhe opLion Lo change
Lhe "PainLing Cursor" rom
Normal 8rush 1ip Lo SLandard,
Precise or Full-Size 8rush 1ip.
ou can also creaLe a hybrid
cursor by using Lhe Normal or
Full-Size 8rush 1ip in
conjuncLion wiLh Lhe "Show
Crosshair in 8rush 1ip" opLion.
Chapter 4, Brushes
Chcnin the curscr miht ive ycu better ccntrcl cj
the brush.
8elow Lhe PainL Cursors secLion is an opLion or Lhe 8rush Preview color. 1his is Lhe
color LhaL is displayed when modiying Lhe brush shape wiLh Lhe on-canvas drag
shorLcuLs. ConLrol - OpLion - Drag (AlL - RighL-click - Drag) Lo change Lhe
diameLer, and ConLrol - OpLion - Command - Drag (ConLrol - AlL - RighL-click -
Drag) Lo change Lhe hardness.
Painting 5traight Lines
PainLing a reehand sLraighL line is nearly impossible. Luckily, PhoLoshop has some
eaLures Lo help wiLh Lhis. 8y holding Lhe ShiL key while painLing, your sLroke will be
consLrained Lo 45 angles. PainLing sLraighL lines LhaL aren'L locked Lo 45 angles is
jusL as easy. click Lo sLarL a line, and Lhen ShiL-click aL anoLher poinL, and you'll geL a
perecLly sLraighL line beLween Lhe Lwo poinLs.
Painting Perfect Curves
PhoLoshop's PaLhs paleLLe allows you Lo sLroke a paLh using Lhe currenL brush's
seLLings. 1his can be exLremely helpul i you have a Lricky curve or complex shape Lo
painL.
Chapter 4, Brushes
Cliclin tc stcrt c
line cnJ then
hclJin Shijt cnJ
cliclin scmewhere
else will cint c
erjectly strciht
line between the twc
cints.
FirsL, seL up your brush. 1hen, selecL
Lhe paLh you wish Lo sLroke, and in Lhe
PaLhs paleLLe, OpLion-click Lhe SLroke
paLh wiLh Lhe brush buLLon. 1his will
presenL you wiLh a dialog box LhaL
allows you Lo seL Lhe Lool Lo sLroke
wiLh. ou can even use Lhe SimulaLe
Pressure buLLon Lo acLivaLe any conLrol
meLhods you have seL on your brush.
Other Painting TooIs
Remember LhaL Lhe 8rush 1ool is noL Lhe only Lool LhaL uses brush seLLings. 8y
cusLomizing oLher Lools, you can creaLe some very impressive eecLs. 1he oLher
"PainLing" Lools include Lhe ollowing. Pencil, Fraser, 8ackground Fraser, Clone SLamp,
PaLLern SLamp, Healing 8rush, HisLory 8rush, ArL HisLory 8rush, Smudge, 8lur,
Sharpen, Dodge, 8urn, Sponge, Color ReplacemenL and Quick SelecLion.
Keyboard 5hortcuts
B 8rush Lool
5hift + B
RoLaLe Lhrough 8rush Lools
(i.e. 8rush, Pencil and Color ReplacemenL Lools)
l5 Show or hide 8rushes paleLLe
Chapter 4, Brushes
Strclin c cth with ycur brush ives ycu
erject ccntrcl cver the strcles curvctures.
Brush 5ettings
{ Decrease brush diameLer
] lncrease brush diameLer
5hift + { Decrease brush hardness by 25%
5hift + ] lncrease brush hardness by 25%
Digit combination (with airbrush off) SeL Lhe brush's opaciLy
5hift + Digit combination (with airbrush off) SeL Lhe brush's ill
Digit combination (with airbrush on) SeL Lhe brush's ill
5hift + Digit combination (with airbrush on) SeL Lhe brush's opaciLy
Option + 5hift + + (AIt + 5hift + +) NexL blending mode
Option + 5hift + - (AIt + 5hift + -) Previous blending mode
, Previous brush
. NexL brush
5hift + , FirsL brush
5hift + . LasL brush
Caps Iock
1oggles beLween Precise and
Normal cursors
ControI + CIick (Right-cIick) inside canvas 8ring up Lhe quick brush menu
ControI + 5hift + CIick (5hift + Right-cIick)
inside canvas
8rush blending mode menu
ControI + Option + Drag (AIt + Right-cIick
drag) inside canvas
Change Lhe brush's diameLer
Chapter 4, Brushes
ControI + Option + Command + Drag
(ControI + AIt + Right-cIick drag) inside
canvas
Change Lhe brush's hardness
Painting
5hift + Drag ConsLrain Lhe brush Lo 45
CIick, move cursor, then 5hift + CIick
Draw a sLraighL line rom Lhe irsL click Lo
Lhe second click
HeIper TooIs
Option (AIt) 1emporarily swiLch Lo Fyedropper Lool
5hift + Option (5hift + AIt) 1emporarily swiLch Lo Color Sampler Lool
Command (ControI) 1emporarily swiLch Lo Move Lool
Command + Option (ControI + AIt) DuplicaLe and Drag layer
5pace 1emporarily swiLch Lo Hand Lool
Chapter 4, Brushes
Chcter S, Typography
WcrJs mcy be clecr cnJ ccncise, but
tycrchy is the vcice thct ccrries them intc
cur subccnscicus. 1ycrchy hcs the cbility tc
evcle jeelins cnJ jcre imressicns recter
thcn the wcrJs it renJers. lven bcJ tycrchy
ccn be extremely cwerjul. Weve cll lcnJeJ cn
websites with briht reJ text cn cn even
brihter blue bcclrcunJ, cnJ strcineJ cur
eyes tc recJ three crcrchs cver minutes
thct we wisheJ we cculJ tcle bccl.
Pccr tye ccn instcntly ruin c visitcrs
imressicn cj ycur brcnJ cnJ its reutcbility.
Sc, unJerstcnJin the ins cnJ cuts cj cn-screen
tycrchy is criticcl. While the mcjcrity cj
tye cn the Web is renJereJ by H1Ml,
Phctcshc is still necesscry tc hcnJle trectment
beycnJ the rcs cj CSS. ln this chcter, well
exlcre Phctcshcs tye tccls cnJ Jisccver
wcys tc mcximize the scjtwcres tyesettin
cccbilities.
Chapter 5, Typography
Anatomy of the Type TooI
PhoLoshop's 1ype 1ool is preLLy
sLraighLorward. Click inside Lhe
documenL and you can add a
Lype layer, which is reerred Lo as
a PoinL 1exL layer. Clicking and
dragging creaLes a Paragraph 1exL
layer. ou can even click on or
wiLhin a paLh Lo creaLe a 1ype
PaLh. 1hese implemenLaLions are
very similar buL have some
imporLanL disLincLions.
Point Text
PoinL 1exL layers speciy a single
poinL rom which Lhe irsL baseline
o Lhe LexL is seL. 1he LexL lows
rom Lhis poinL on Lowards ininiLy
unless manual line breaks are
enLered. 1his resLricLs some o Lhe paragraph opLions buL makes Lhis Lype o layer
greaL or creaLing LexL or buLLons and headlines (i.e. LexL wiLh ew characLers). ln acL,
Lhe open naLure o a PoinL 1exL layer makes iL much easier Lo use in Lhese
circumsLances. Fumbling around wiLh Lhe size o a Paragraph 1exL layer Lo change
Lhe LexL on a buLLon can be a real hassle.
Paragraph Text
8y speciying a seL area or Lhe LexL Lo low wiLhin, Paragraph 1exL allows more
advanced seLLings, such as word wrapping and hanging puncLuaLion. 1hese
advanced paragraph opLions are essenLial when seLLing larger blocks o LexL.
1he three mcin imlementcticns cj the tye tccl.
Type Paths
1here are Lwo ways paLhs can be used wiLh Lhe Lype Lool. by deining Lhe baseline or
by creaLing a cusLom LexL box shape. SelecL Lhe Work PaLh you'd like Lo use, and wiLh
Lhe 1ype 1ool, mouse over Lhe paLh. 1he doLLed square on Lhe cursor will change
rom a square Lo a curved line. Click on Lhe paLh and you'll see LhaL Lhe Lype lows
righL along Lhe paLh.
ALer commiLLing Lhe Lype (Command/ConLrol - FnLer), you can use Lhe PaLh
SelecLion 1ool Lo move Lhe beginning and end poinLs - indicaLed wiLh an "x" and
black circle, respecLively - or lip Lhe Lype rom Lhe Lop o Lhe line Lo Lhe boLLom. l
using a closed paLh, you can click inside iL Lo creaLe a cusLom-shaped LexL box.
Aside. warping Text
Warp 1exL is reminiscenL o MicrosoL's WordArL because iL allows you Lo bend, bulge
and skew LexL in all sorLs o ridiculous ways. l recommend sLeering clear o Lhese
opLions because Lhey will give your LexL a less Lhan proessional eel. NoneLheless,
you can access Lhe Warp 1exL dialog in Lhe 1exL 1ool's properLies bar. Choose rom a
number o dierenL sLyles, and seL Lhe amounL o bend and disLorLion. Again,
Lhough, even i you wanL Lo jusL wrap LexL around a simple shape, you're beLLer o
using a Lype paLh.
Character PaIette
1he CharacLer paleLLe is sorL o like a wol in sheep's cloLhing. lL provides everyLhing
you need Lo properly change Lhe appearance o Lype, buL iL also has opLions LhaL
should never appear in soLware or creaLive proessionals. UndersLanding how and
how noL Lo use Lhis paleLLe is exLremely imporLanL Lo seLLing Lype.

lont
Anyone who has used a word
processing program should be
preLLy amiliar wiLh Lhe irsL ew
opLions in Lhe paleLLe. 1he very
irsL is Lhe onL amily, which,
when expanded, displays a lisL
o all onLs available in Lhe
sysLem.
ALer you have chosen a onL,
Lhe drop-down menu nexL Lo iL
will provide a lisL o all o Lhe
onL's varianLs. 1his may include
obliques, headlines, various
weighLs, glyph seLs, exLended
and condensed versions and more.
Phctcshcs
Chcrccter clette
(lejt) cjjers mcny
unrcjessicncl
cticns. 1he
clette cn the
riht is mcre
crcricte jcr
scmecne whc is
sericus cbcut
tycrchy.
1he jcnt vcricnt Jrc-Jcwn menu ives
ycu cccess tc mcny styles JeenJin cn
the jcnt jcmily.
5ize and 5pacing
JusL below Lhe onL drop-down menus are our seLLings or conLrolling Lhe size and
spacing o Lhe Lype. 1he irsL seLLing is Lhe size o Lhe onL, seL in poinLs, which varies
greaLly rom pixels. NexL Lo iL is Lhe leading, which seLs Lhe disLance beLween
baselines, in poinLs as well.
1hird, we have kerning, which conLrols Lhe spacing beLween Lwo characLers. 1o kern
Lwo characLers, place Lhe cursor beLween Lhem, and Lhen modiy Lhe kerning value Lo
bring Lhe characLers closer or move Lhem arLher aparL. l you selecL mulLiple
characLers or simply selecL Lhe enLire block o LexL, you can seL Lhe auLo-kerning Lo
eiLher MeLric or OpLical. MeLric kerning
evaluaLes Lhe absoluLe space beLween
characLers, wiLh no consideraLion or
individual characLer shapes. OpLical
kerning accounLs or how Lhe characLers
acLually look (e.g. a capiLal "v" will be
kerned closer Lo a lowercase "g").
1he inal opLion in Lhis seL is Lracking.
Like kerning, Lracking conLrols Lhe space
beLween characLers, buL or mulLiple
characLers. 1his should be used Lo space
an enLire block o LexL, as opposed Lo
individual characLers.
CoIor, BaseIine 5hift and 5tretching
1he nexL seL o opLions conLains Lwo useul and Lwo absurd ones. We'll sLarL wiLh Lhe
opLions you should acLually use. 1he Color opLion allows you Lo modiy Lhe color o
Oticcl lernin intelliently scces letterjcrms,
which is usuclly rejercble tc settin the
lernin tc 0 cr usin Metric lernin.
Lhe selecLed LexL. 1o Lhe leL o iL is Lhe baseline shiL, which LranslaLes characLers up
or down rom Lhe baseline. 1he oLher Lwo opLions in Lhis secLion allow you Lo sLreLch
LexL Lo make iL Laller or wider. As a rule, avoid Lhese Lwo opLions. SLreLched Lype jusL
looks bad.
lauxs and Variants
Under Lhe guise o simpliciLy, Adobe has added a series o icons LhaL give you quick
access Lo common LypeseLLing eaLures. A couple o Lhem are raLher helpul, buL
mosL o Lhem aLLempL Lo invenL new characLers or you. 1he All Caps opLion is Lhe
saesL o Lhe bunch, iL simply replaces all lowercase leLLers wiLh Lheir capiLal
equivalenLs. 1he Underline and SLrikeLhrough opLions are also airly sae, Lhough you
can achieve beLLer resulLs by drawing Lhe line as a separaLe shape layer, Lhus
avoiding inLersecLing Lhe descenders.
1he remaining opLions are ones LhaL anyone who is serious abouL Lypography should
avoid. 1hese oenders are Faux 8old, Faux lLalic, SuperscripL, SubscripL and Small
Caps. 8y running preseL calculaLions on Lhe LexL, Lhese opLions bloaL, skew and resize
your Lype Lo simulaLe a dierenL onL varianL. 1hese aux varianLs look awkward and
can be easily spoLLed, especially Small Caps, which simply changes Lhe poinL size o
Lhe characLers, leaving you wiLh noLiceably dierenL weighLs.
lcux ltclics uses
injericr letterjcrms
jcr the scle cj
simlicity. Sticl
with true itclics jcr
better tycrchy.
1he SuperscripL and SubscripL opLions work Lhe same way. While somewhaL
conspicuous, superscripL and subscripL characLers are usually included in Lhe onL seL.
l recommend using lllusLraLor's Clyph paleLLe Lo hunL down Lhe elusive characLers. l
you need bold, iLalics or small caps, check Lhe onL varianL drop-down menu. l no
such varianL exisLs, Lhen check wiLh Lhe Lype oundry Lo see i iL is available. l no
varianL is available, you're probably besL o choosing a dierenL onL.
Anti-AIiasing
AnLi-Aliasing is criLical Lo Lhe appearance o on-screen Lypography. lL basically
smooLhens Lhe edges o characLers Lo preserve Lheir original design. PhoLoshop
provides ive preseL anLi-alias seLLings, which deLermine pixel values using various
algoriLhms in conjuncLion wiLh Lhe documenL's pixel grid. UnorLunaLely, none o
Lhese seLLings allow or subpixel rendering, buL by using Lhe Free 1ransorm opLion
Lo nudge Lhe layer's posiLion, you can eecLively orce Lhe algoriLhms inLo rendering
more cleanly. Fach seLLing allows a dierenL amounL o origins, and some only
produce variaLions when LranslaLed along Lhe x-axis. 8elow is a Lable o available
LransormaLions.
Usin the lree 1rcnsjcrm tccl cllcws ycu tc nuJe tye lcyers tc imrcve
the cnti-clicsin.
lcux ltclics uses injericr
letterjcrms jcr the scle cj
simlicity. Sticl with true itclics jcr
better tycrchy.
Aside. 5ubpixeI Rendering
Fvery pixel on a sLandard moniLor consisLs o Lhree componenLs. a red, a green and a
blue. 1he brighLness o each o Lhese subpixels is conLrolled independenLly, and
because o Lheir small size, our eyes blend Lhe Lhree inLo one solid-colored pixel.
1ypical anLi-aliasing seLs even values or each o Lhese subpixels, resulLing in ull
grayscale pixels.
Subpixel rendering exploiLs Lhe individualiLy o each single-colored componenL and
uses iL Lo increase Lhe perceived resoluLion o Lhe moniLor. 1his allows a pixel Lo Lake
on visual weighL rom neighboring pixels, Lhereby allowing Lype Lo be smooLhed in
smaller incremenLs. 1he only drawback is LhaL rendering Lype in Lhis way can produce
subLle color shiLs visible along Lhe edges o glyphs. UnorLunaLely, PhoLoshop does
noL supporL subpixel rendering aL Lhis Lime, buL iL cerLainly gives us someLhing Lo
hope or.
Subixel RenJerin
renJers tye mcre
smccthly by
increcsin the
erceiveJ rescluticn
cj c Jevice.
Unjcrtunctely,
Phctcshc Jces nct
currently sucrt it.
None
Aliased LexL creaLed using Lhe None seLLing has
very limiLed use and Lypically looks besL
beLween poinL sizes o 9 and 8. Sizes below
Lhis range will resulL in unidenLiiable characLers,
and larger sizes will lead Lo increased characLer
weighL and overly jagged edges.
Depending on Lhe onL, someLimes Lwo dierenL poinL sizes will render aL Lhe same
heighL, causing a shiL in leLLer spacing, widLh and x-heighL. For example, 4 pL Arial
renders 0 pixels high wiLh an x-heighL o 8 pixels. Arial aL 3 pLs also siLs 0 pixels
high buL has an x-heighL o only 7 pixels - a slighL buL very perceivable dierence.
When LighLly Lracked, Lhis seLLing mighL also require manual kerning, because some
leLLers will siL pixel Lo pixel againsL each oLher.
5harp
1he Sharp seLLing uses very LighL grid-iLLing
and produces sharp, i noL Loo sharp, Lype.
1he ploLLing o pixels wiLh Lhis seLLing is very
similar Lo how Lhe None seLLing ploLs Lhem,
buL iL allows or a cerLain degree o
smooLhing. ln acL, i you seL Lhese Lwo
opLions aLop one anoLher, you can acLually
see LhaL a majoriLy o solid pixels carry over
rom None Lo Sharp.
1J t cnJ 14 t
Aricl renJer with
the scme cc
heiht but
Jijjerent x-heihts.
While Lhe cap heighL and x-heighL Lypically remain Lhe same, you mighL see an
increase in characLer weighL and widLh. Sharp has a Lendency Lo compleLely cuL
subLle shape variaLions rom rendering and someLimes causes inconsisLenL
leLLerorms. So, i Lypeace inLegriLy is imporLanL Lo you, you may wanL Lo Lry a
dierenL seLLing.
Crisp
1he Crisp seLLing mainLains much o Lhe onL's
original weighL and curvaLure buL cleans up
some o Lhe awkward pixels creaLed by lighL
seris and Lhin sLrokes, which is especially useul
or larger poinL sizes. WiLh Lhe Crisp seLLing,
however, you sacriice Lhe abiliLy Lo nudge Lhe
layer on Lhe y-axis.
5trong
1he SLrong seLLing is noLorious or adding
unnecessary weighL Lo a Lypeace, buL iL
provides Lhe mosL reedom wiLh LranslaLing Lhe
origin, wiLh 32 x-axis variaLions and 6 on Lhe y-
axis. 1he varieLy o origins wiLh Lhis seLLing
comes in handy when working wiLh complex
leLLerorms. SLrong is also useul when working
wiLh Lypeaces LhaL have very Lhin sLrokes.
5mooth
1he SmooLh seLLing is Lhe closesL Lo unhinLed
anLi-aliasing and Lhereore remains LruesL Lo Lhe
original glyph shape. 1his algoriLhm is besL used
on medium-sized Lo large Lype, because iL Lends
Lo render very lighL and oLen blurry aL smaller poinL sizes. l used wiLh an
appropriaLe Lypeace aL a proper size and i Lhe origin is properly adjusLed, Lhis
seLLing can sLrike a beauLiul balance beLween crispness and leLLerorm ideliLy.
lIyout options
Change Text Orientation
1his opLion allows you Lo Loggle Lhe Lype layer beLween a verLical and horizonLal
layouL.
5tandard VerticaI Roman AIignment
l your Lype layer is seL Lo verLical
orienLaLion, Lhen your LexL will sLack
characLer on Lop o characLer.
However, i you Lurn Lhe SLandard
verLical Roman AlignmenL opLion o,
Lhen Lhe LexL will align characLers
along Lhe same baseline buL roLaLe
Lhem 90.

OpenType
Depending on Lhe onL, a number o
Open1ype eaLures mighL be
available. 1hese can really improve
your Lypography by giving you
access Lo more appropriaLe glyphs
and creaLive alLernaLives. Many o
Lhese eaLures should be seL only on
Lhe necessary characLers Lo avoid
sLrange ormaLLing.
StanJarJ Ligatures. replaces common characLer combinaLions wiLh a single
combined glyph.

Contextual Alternates. changes characLers based on Lhe characLers around Lhem Lo
increase luidiLy.
AJcbe CcrcmcnJ
Prc ltclic with cnJ
withcut the
stcnJcrJ 'th' cnJ
'jji' lictures.

3iclhcm Scrit Prc
hcs mcny ccntextucl
clternctes, cs seen
cbcve.
Discretionary Ligatures. replaces characLer combinaLions in Lhe onL's discreLionary
ligaLure Lable wiLh a single combined glyph.

Swash. swaps capiLal characLers wiLh more decoraLive swash alLernaLives.
OlJ Style. swiLches lining igures wiLh old-sLyle igures.
AJcbe
CcrcmcnJ
Prcs
Jiscreticncry
st licture.

3iclhcm Scrit
Prc hcs
extrccrJincry
swcshes.
CcuJy OlJ Style
cnJ its clJ-style
jiures clin
better with
lcwerccse text.
AJcbe
CcrcmcnJ
Prc set tc
crncments.
Stylistic Alternates. subsLiLuLes decoraLive alLernaLives or sLandard characLers.
7itling Alternates. subsLiLuLes more appropriaLe glyphs or use wiLh large Lype sizes.
Ornaments. changes cerLain characLers wiLh glyphs rom Lhe ornamenL seL.

3iclhcm Scrit
Prc with stylistic
clternctes jcr
the 3 cnJ l.
DiJct l1 StJ
HecJlin with
titlin clternctes
(bcttcm) hcs
subtle Jijjerences
in weiht cnJ
sccin, mclin
it better suiteJ tc
hecJlines.
AJcbe
CcrcmcnJ Prc
rcerly
Jislcys c
jrccticn with c
scliJus instecJ
cj c bcclslcsh.
OrJinals. swaps characLer combinaLions such as "sL," "nd" and "rd" or use wiLh "sL,"
"2nd" and "3rd."
Iractions. change digiLs separaLed by a backslash (/) wiLh Lheir numeraLor or
denominaLor alLernaLives and replaces Lhe backslash wiLh a solidus.
lractionaI widths
1his seLLing can someLimes help wiLh anLi-aliasing and kerning Lype, especially aL
small poinL sizes. WiLh Lhis seLLing Lurned on, characLer spacing is seL Lo varying
racLions o pixels. 1his is ideal or auLo-kerned Lype aL large sizes, buL iL Lends Lo
bump Lhe Lype eiLher Loo close LogeLher or Loo ar aparL aL smaller sizes. 1urning Lhis
opLion o rounds all characLer spacing Lo whole pixel values, which mighL beLLer
space Lhe problemaLic Lype. 1his is hiL or miss, so use iL wisely.
AJcbe
CcrcmcnJ Prcs
crJincls sruce
u these
rcnlins.
5ystem Layout
SysLem LayouL reseLs cerLain opLions in Lhe CharacLer paleLLe Lo simulaLe Lhe generic
LypeseLLing o a plain LexL documenL. Kerning and Lracking reLurn Lo 0, Lhe anLi-alias
seLLing is changed Lo None, and FracLional WidLhs are Lurned o.
No Break
No 8reak gives you manual conLrol over which words hyphenaLe in a paragraph LexL
layer. 8y selecLing a word and seLLing No 8reak, you ensure LhaL Lhe word will never
be hyphenaLed. ou can also do Lhis wiLh mulLiple words Lo always keep a phrase on
Lhe same line. l you don'L mind Lhe word being hypenaLed buL you have a
preerence or where Lhe hyphenaLion should occur, Lhen selecL Lhe characLers LhaL
should noL be broken and seL No 8reak, which will creaLe a break elsewhere.
Reset Character
1he ReseL CharacLer opLion reLurns Lhe LexL Lo iLs original deaulL seLLings. FonL, size,
leading, color and everyLhing else in Lhe CharacLer paleLLe will be reseL.
Paragraph PaIette
1he Paragraph paleLLe relaLes mainly Lo margins and jusLiicaLion. 1hese seLLings are
mosL useul when seLLing large blocks o LexL wiLh a paragraph LexL layer, buL Lhey
can also be used wiLh poinL LexL layers.
Justification
PhoLoshop provides seven dierenL jusLiicaLion seLLings. Lhree ragged and our
lush. 1he irsL Lhree are your basic ragged seLLings. leL-aligned, cenLered and righL-
aligned. 1hey are available or boLh poinL LexL and paragraph LexL, and Lhey simply
deLermine how each line o LexL in a paragraph is aligned. l seL, hyphenaLion is sLill
applied, buL wiLhouL jusLiicaLion. 1he oLher our seLLings - JusLiy LasL LeL, JusLiy
LasL CenLered, JusLiy LasL RighL
and JusLiy All - are available
only wiLh paragraph LexL and
space LexL so LhaL boLh Lhe leL
and righL edges are lush.
1he jusLiicaLion seLLings can be
urLher conLrolled via Lhe
JusLiicaLion seLLing in Lhe
Paragraph paleLLe's lyouL
menu. 1his dialog allows you Lo
seL Lhresholds and an opLimal
seLLing or how Lhe LexL
composer spaces characLers or
adjusLs Lheir widLh. Achieving
an evenly colored block o LexL
is Lhe ulLimaLe goal here, buL
keep Lhe ranges as low as
possible and use glyph scaling
only when absoluLely necessary.
WorJ Sacing. seLs Lhe spacing beLween ull words. 80%, 00% and 20% are Lypical
seLLings, going much urLher beyond Lhese could resulL in inconsisLenL spacing.
lnsLead o increasing Lhe range, Lry adding leLLer spacing.
Letter Sacing. conLrols Lhe amounL o space added beLween individual characLers.
1his can reduce gaping spaces buL should be used in moderaLion (+5% or so).
6lyh Scaling. horizonLally scales glyphs Lo add Lo or subLracL rom Lhe lengLh o Lhe
line. 1his should be used as liLLle as possible (no more Lhan abouL +2%).
Otimcl justijiccticn srecJs text evenly ccrcss the
cclumn, resultin in c blccl thct cclcrs the ce
ccnsistently. Pccrly justijieJ text cllcws wcrJs tc run
tcether cnJ srecJs letters tcc jcr ccrt.
Auto LeaJing. seLs Lhe amounL o leading applied when Lhe Leading opLion in Lhe
CharacLer paleLLe is seL Lo AuLo.
Hyphenation
1he hyphenaLion opLion, which is on by deaulL, breaks up words aL Lhe end o a line
Lo aid jusLiicaLion and balance rags. ou can modiy Lhe hyphenaLion seLLings wiLh
Lhe HyphenaLion opLion in Lhe Paragraph paleLLe's lyouL menu.
WorJs Longer 7han. seLs Lhe minimum number o leLLers a word musL conLain Lo be
hyphenaLed. Using a minimum o ive is a good rule o Lhumb.
Ajter Iirst. conLrols Lhe minimum
o leLLers leL behind Lhe hyphen.
1wo deiniLely should be Lhe
minimum or Lhis.
8ejore Last. conLrols Lhe
minimum number o leLLers Lo
be carried over Lo Lhe nexL line.
1hree is a sae minimum here.
WiLh a ive-leLLer word, leaving
Lwo behind and carrying over
Lhree is accepLed sLyle.
Hyhen Limit. dicLaLes Lhe maximum number o consecuLive hyphens allowed. Avoid
more Lhan Lhree.
Hyhenation Zone. speciies a disLance rom Lhe righL edge o a paragraph wiLhin
which no hyphenaLion should occur.
Hyhencticn ccn imrcve justijiccticn but shculJ
nct be cveruseJ, cs it is cbcve.
Hyhenate CaitalizeJ WorJs. enables or disables hyphenaLion o capiLalized words.
ln general, avoid hyphenaLing proper nouns.
lndents
1here are Lhree indenLing opLions in Lhe Paragraph paleLLe. lndenL LeL Margin,
lndenL RighL Margin and lndenL FirsL Line. 1he ones or Lhe leL and righL margins
allow you Lo inseL a paragraph rom iLs leL or righL bounds. 1his is helpul or
blockquoLes, lisLs and oLher non-sLandard paragraphs. 1he lndenL FirsL Line opLion
indenLs only Lhe irsL line o every paragraph.
l no exLra space separaLes your paragraphs, Lhe lndenL FirsL Line opLion can be used
Lo add an appropriaLe pause beLween paragraphs. All o Lhe indenLing opLions also
allow negaLive values, you can easily ouLdenL a paragraph or creaLe nicely aligned
lisLs by seLLing a posiLive leL indenL and a negaLive irsL-line indenL.

A lejt-mcrin
inJent cculeJ
with c nective
jirst-line inJent is
rect jcr clinin
bulleteJ lists with
multi-line items.
5pacing
Spacing paragraphs by adding a hard reLurn in Lhe LexL is bad sLyle. l you're amiliar
wiLh H1ML, iL's like adding a <br /> beLween <p> Lags insLead o using CSS Lo space
paragraphs. lL noL only adds unnecessary daLa Lo Lhe LexL, buL makes conLrolling Lhe
space beLween paragraphs much more diiculL. 1he spacing opLions in Lhe
Paragraph paleLLe make Lhis Lask much easier and more lexible.
very-Line Composer vs. 5ingIe-Line Composer
1he line breaks and hyphenaLion o paragraph LexL layers are deLermined by whaL's
reerred Lo as a "composer." Fach paragraph is conLrolled by eiLher Lhe Fvery-Line
Composer or Lhe Single-Line Composer. 1hey evaluaLe Lhe characLer seLLings along
wiLh Lhe jusLiicaLion and hyphenaLion Lhresholds Lo deLermine Lhe besL place Lo
break lines. 1he Fvery-Line Composer analyzes every line in a paragraph Lo reduce
Lhe number o line breaks, while Lhe Single-Line Composer works line by line and
makes each as long as possible. 1he composer can be changed per paragraph by
seLLing Lhe cursor in Lhe LargeL paragraph and selecLing eiLher Fvery-Line Composer
or Single-Line Composer rom Lhe Paragraph paleLLe's lyouL menu.
1he sccin
cticns ive
ycu much
better ccntrcl
cver the
relcticnshi
between
crcrchs
cnJ hecJlines.
Roman Hanging Punctuation
Hanging puncLuaLion is good Lypography. lL enLails exLending puncLuaLion
(quoLaLion marks, periods, commas, eLc.) aL Lhe beginnings and ends o lines inLo Lhe
margins.
8ecause Lhe visual weighL o puncLuaLion is Lypically lighL, Lhis seLLing improves Lhe
lush alignmenL o paragraphs. PhoLoshop will auLomaLically hang puncLuaLion when
you enable Roman Hanging PuncLuaLion in Lhe lyouL menu o Lhe Paragraph paleLLe.
Quick Tips
DecimaI Point 5izes for lmproved Anti-AIiasing
1ypophiles mighL cringe aL Lhe idea o using a decimal poinL size, buL when
designing or digiLal media, sLandard poinL sizes don'L always conorm Lo Lhe pixel
grid. 8y using decimal poinL sizes and eiLher Lhe SmooLh or SLrong anLi-alias seLLing,
you can usually bring a blurry Lypeace back inLo ocus.
Hcnin
unctucticn
imrcves the
clinment cj
multi-line text
blccls.
5hape Layer Anti-AIiasing
l PhoLoshop's hinLed algoriLhms are producing undesirable resulLs, you may wanL Lo
aLLempL using unhinLed anLi-aliasing by way o converLing Lhe Lype inLo a shape
layer. 1his gives you access Lo Lhe original ouLlines o Lhe onL, which draw values
based on Lhe percenLage o Lhe pixel enclosed in Lhe shape. WhaL you sacriice in
ediLable Lype you make up or in origin LransormaLions. 32 on boLh Lhe x-axis and y-
axis. While iL's usually a lasL resorL, don'L rule ouL Lhe possibiliLy o using a Shape
Layer. iL can oLen produce beLLer resulLs Lhan PhoLoshop's algoriLhms.
5mart Quotes
SmarL QuoLes are good sLyle and
should be used insLead o sLraighL
quoLes wherever available. Luckily,
PhoLoshop allows you Lo replace
dumb quoLes auLomaLically. Open
Lhe Preerences dialog (Command/
ConLrol - K) and navigaLe Lo Lhe
1ype secLion.
Usin Jecimcl
vclues ccn
Jrcmcticclly
imrcve cnti-
clicsin results, cs
seen cbcve. 1c. 16
t CcuJy OlJstyle
with Strcn Anti-
Alicsin. 3cttcm.
16.S t CcuJy
OlJstyle with Strcn
Anti-Alicsin.
ou should see a ew opLions, Lhe irsL o which is Use SmarL QuoLes. Check Lhis, now,
any Lime you Lype a quoLe or aposLrophe, iL will be replaced wiLh iLs smarL
equivalenL. NoLe. some onLs do noL have smarL quoLes.
Hard Returns vs. 5oft Returns vs. Paragraph 5pacing
SeparaLing lines o LexL is a preLLy common Lask, buL separaLing Lhem properly goes
beyond hiLLing Lhe ReLurn key. When you press ReLurn, a hard reLurn is inserLed in
Lhe LexL. 1his signiies Lhe end o a paragraph and should be used as such. DespiLe
common pracLice, enLering Lwo hard reLurns aLer a paragraph is noL Lhe ideal way Lo
space paragraphs. RaLher, you can save daLa and make paragraph spacing much
more lexible by making one hard reLurn and modiying Lhe Add Space ALer
Paragraph opLion in Lhe Paragraph paleLLe. Doing so gives all hard reLurns Lhe
speciied amounL o spacing.
O course, Lhis can be a hassle when seLLing someLhing like a posLal address, which
has mulLiple lines buL is essenLially a single paragraph. 1his is where soL reLurns
come in. 8y pressing ShiL - ReLurn, you add a soL reLurn. 1his does noL regisLer Lhe
end o a paragraph buL insLead allows you Lo conLrol where your lines break in Lhe
paragraph.
xtra GIyphs
Fach onL Lypically conLains a varieLy o glyphs LhaL go beyond Lhe sLandard seL.
Some o Lhese glyphs are accessible by acLivaLing cerLain Open1ype eaLures, buL a
loL o Lhem aren'L. l you happen Lo own Adobe lllusLraLor, you can use iLs wonderul
Clyphs paleLLe Lo view all o Lhe exLra glyphs LhaL you don'L have direcL access Lo.
ou can Lhen copy and pasLe Lhem inLo a PhoLoshop LexL area.
l you don'L have access Lo lllusLraLor, you can use a sysLem applicaLion Lo browse
glyphs. ln OS X, acLivaLe Lhe characLer paleLLe rom SysLem Preerences -
lnLernaLional. 1hen, open Lhe CharacLers dialog and change Lhe view Lo Clyph.
ou now have access Lo Lhe glyphs o all insLalled onLs, and you can inserL one inLo
Lhe acLive LexL ield by double-clicking iL. l you're on a Windows machine, you can
access a similar menu by opening Lhe CharacLer Map (SLarL - ApplicaLions - SysLem
1ools - CharacLer Map).
GIyph 5hortcuts
5peciaI Characters
- Fn dash OpLion - - AlL - 050
- Fm dash OpLion - ShiL - - AlL - 05
" 1rademark OpLion - 2 AlL - 053
RegisLered OpLion - R AlL - 074
CopyrighL OpLion - C AlL - 069
s SecLion OpLion - 6 AlL - 067
1 Pilcrow OpLion - 7 AlL - 082
8ulleL OpLion - 8 AlL - 049
. Fllipsis OpLion - , AlL - 033
Dagger OpLion - 1 AlL - 034
Double dagger OpLion - ShiL - 7 AlL - 035
lnverLed FxclamaLion OpLion - AlL - 06
lnverLed QuesLion OpLion - AlL - 09
Feminine Ordinal OpLion - 9 AlL - 070
Masculine Ordinal OpLion - 0 AlL - 086
8roken bar AlL - 066
Dipthongs
AF OpLion - ShiL - ' AlL - 098
ae OpLion - ' AlL - 0230
0 OF OpLion - ShiL - Q AlL - 040
o oe OpLion - Q AlL - 056
Ligatures
i OpLion - ShiL - 5
l OpLion - ShiL - 6
8 FszeLL (Cerman double s) OpLion - S
Diacritics
Add acuLe OpLion - F, characLer Lo add Lo
Add circumlex OpLion - l, characLer Lo add Lo
' Add diaeresis OpLion - U, characLer Lo add Lo
` Add grave OpLion - `, characLer Lo add Lo
Add Lilde OpLion - N, characLer Lo add Lo
AcuLe OpLion - ShiL - F AlL - 080
8reve OpLion - ShiL - >
Smcshin e3ccl Series. =J | MasLering PhoLoshop or Web Design | l0l
Circumlex OpLion - ShiL - l AlL - 036
` Caron OpLion - ShiL - 1
i DoLless l OpLion - ShiL - 8
' Diaeresis OpLion - ShiL - U AlL - 068
` Crave OpLion - ShiL - `
Macron OpLion - ShiL - < AlL - 075
OverdoL OpLion - H
Ring OpLion - K
1ilde OpLion - ShiL - N AlL - 052
Cedilla OpLion - ShiL - Z AlL - 084
Ogonek OpLion - ShiL - X
A ring OpLion - ShiL - A AlL - 097
a ring OpLion - A AlL - 0229
A acuLe OpLion - ShiL - AlL - 093
a acuLe OpLion - F, a AlL - 0225
A circumlex OpLion - ShiL - M AlL - 094
a circumlex OpLion - l, a AlL - 0226
A A diaeresis OpLion - U, A AlL - 096
a a diaeresis OpLion - U, a AlL - 0228
A Lilde OpLion - N, A AlL - 095
a Lilde OpLion - N, a AlL - 0227
A A grave OpLion - `, A AlL - 092
a grave OpLion - `, a AlL - 0224
C cedilla OpLion - ShiL - C AlL - 099
c cedilla OpLion - C AlL - 023
F F grave OpLion - `, F AlL - 0200
e grave OpLion - `, e AlL - 0232
F F acuLe OpLion - F, F AlL - 020
e acuLe OpLion - F, e AlL - 0233
F F circumlex OpLion - l, F AlL - 0202
e circumlex OpLion - l, e AlL - 0234
F F diaeresis OpLion - U, F AlL - 0203
e diaeresis OpLion - U, e AlL - 0235
l l acuLe OpLion - ShiL - S AlL - 0205
i acuLe OpLion - F, i AlL - 0237
l l circumlex OpLion - ShiL - D AlL - 0206
i circumlex OpLion - l, i AlL - 0238
l l diaeresis OpLion - ShiL - F AlL - 0207
i diaeresis OpLion - U, i AlL - 0239
l grave OpLion - `, l AlL - 0204
i grave OpLion - `, l AlL - 0236
N Lilde OpLion - N, N AlL - 0209
O slash OpLion - ShiL - O AlL - 026
o slash OpLion - o AlL - 0248
O acuLe OpLion - ShiL - H AlL - 02
o acuLe OpLion - F, o AlL - 0243
O circumlex OpLion - ShiL - J AlL - 022
o circumlex OpLion - l, o AlL - 0244
O O diaeresis OpLion - U, O AlL - 024
o diaeresis OpLion - U, o AlL - 0246
O Crave OpLion - ShiL - L AlL - 020
o grave OpLion - `, o AlL - 0242
O Lilde OpLion - N, O AlL - 023
o Lilde OpLion - N, o AlL - 0245
U acuLe OpLion - ShiL - , AlL - 028
u acuLe OpLion - F, u AlL - 0250
U grave OpLion - `, U AlL - 027
u grave OpLion - `, u AlL - 0249
U circumlex OpLion - l, U AlL - 029
u circumlex OpLion - l, u AlL - 025
U diaeresis OpLion - U, U AlL - 0220
u diaeresis OpLion - U, u AlL - 0252
acuLe AlL - 022
y acuLe AlL - 0253
y diaeresis OpLion - U, y AlL - 0255
Quotations
' LeL single OpLion - ] AlL - 045
' RighL single OpLion - ShiL - ] AlL - 046
" LeL double OpLion - [ AlL - 047
" RighL double OpLion - ShiL - [ AlL - 048
LeL guillemeL OpLion - \ AlL - 07
RighL guillemeL OpLion - ShiL - \ AlL - 087
Single leL guillemeL OpLion - ShiL - 3 AlL - 039
Single righL guillemeL OpLion - ShiL - 4 AlL - 055
Double prime OpLion - ShiL - C
Mathematics
lniniLy OpLion - 5
NoL equal OpLion - =
+ Plus/minus OpLion - ShiL - = AlL - 077
Solidus OpLion - ShiL -
CreaLe racLion numeraLor, OpLion - ShiL - ,
denominaLor
ApproximaLely OpLion - X
Degree OpLion - ShiL - 8 AlL - 076
MulLiplied by AlL - 025
- Divided by OpLion - / AlL - 0247
> CreaLer Lhan or equal
Lo
OpLion - >
< Less Lhan or equal Lo

OpLion - <
lnLegral OpLion - 8
NegaLion OpLion - L AlL - 072
Lozenge OpLion - ShiL - v
Micro OpLion - M AlL - 08
Pi OpLion - P
v Square rooL OpLion - v
Middle doL OpLion - ShiL - 9 AlL - 083
ParLial dierenLial OpLion - D
% Per mille OpLion - ShiL - R AlL - 037
' SuperscripL AlL - 085
SuperscripL 2 AlL - 078
' SuperscripL 3 AlL - 079
One quarLer , OpLion - ShiL - , 4 AlL - 088
One hal , OpLion - ShiL - , 2 AlL - 089
1hree quarLers 3, OpLion - ShiL - , 4 AlL - 090
Currency
Currency AlL - 064
Pound OpLion - 3 AlL - 063
CenL OpLion - 4 AlL - 062
Furo OpLion - ShiL - 2 AlL - 028
Florin OpLion - F
en OpLion - AlL - 065
Greek
DelLa OpLion - J
_ Sigma OpLion - W
Omega OpLion - Z
pi OpLion - P
Pi OpLion - ShiL - P
Keyboard 5hortcuts
Command + H (ControI + H) Hide or show LexL selecLion
nter or Command + Return (ControI
+ Return)
CommiL changes
sc Discard changes
Option + DeIete (AIt + Backspace) Change LexL color Lo Foreground color
Command + DeIete (ControI +
Backspace)
Change LexL color Lo 8ackground color
Return lnserL hard reLurn
5hift + Return lnserL soL reLurn
Variants
Command + 5hift + B (ControI + 5hift + B) 8old
Command + 5hift + l (ControI + 5hift + l) lLalic
Command + 5hift + + (ControI + 5hift + +) SuperscripL
Command + 5hift + - (ControI + 5hift + -) SubscripL
Command + 5hift + K (ControI + 5hift + K) All Caps
Command + 5hift + H (ControI + 5hift + H) Small Caps
Command + 5hift + U (ControI + 5hift + U) Underline
Command + 5hift + ? (ControI + 5hift + ?) SLrikeLhrough
Justification
Command + 5hift + L (ControI + 5hift + L) LeL align
Command + 5hift + C (ControI + 5hift + C) CenLer align
Command + 5hift + R (ControI + 5hift + R) RighL align
Command + 5hift + J (ControI + 5hift + J) JusLiy lasL leL
Command + 5hift + l (ControI + 5hift + l) JusLiy all
5pacing and 5izing
Command + 5hift + < (ControI + 5hift + <) Decrease Lype size by 2 pLs
Command + 5hift + > (ControI + 5hift + >) lncrease Lype size by 2 pLs
Command + Option + 5hift + < (ControI + AIt +
5hift + <)
Decrease Lype size by 0 pLs
Command + Option + 5hift + > (ControI + AIt +
5hift + <)
lncrease Lype size by 0 pLs
Option + Up arrow (AIt + Up arrow) lncrease leading by 2 pLs
Option + Up arrow (AIt + Up arrow) Decrease leading by 2 pLs
Command + Option + Up arrow (ControI + AIt +
Up arrow)
lncrease leading by 0 pLs
Command + Option + Up arrow (ControI + AIt +
Up arrow)
Decrease leading by 0 pLs
Option + Left arrow (AIt + Left arrow) Kern or Lrack -20 uniLs
Option + Right arrow (AIt + Right arrow) Kern or Lrack -20 uniLs
Command + Option + Left arrow (ControI + AIt
+ Left arrow)
Kern or Lrack -00 uniLs
Command + Option + Right arrow (ControI + AIt
+ Right arrow)
Kern or Lrack -00 uniLs
Option + 5hift + Up arrow (AIt + 5hift + Up
arrow)
ShiL baseline -2 pLs
Option + 5hift + Down arrow (AIt + 5hift +
Down arrow)
Command + Option + 5hift + Up arrow (ControI ShiL baseline -0 pLs
+ AIt + 5hift + Up arrow)
Command + Option + 5hift + Down arrow
(ControI + AIt + 5hift + Down arrow)
Resets
Command + 5hift + Y (ControI
+ 5hift + Y)
Removes 8old, lLalic, SuperscripL, SubscripL, All
Caps, Small Caps, Underline and SLrikeLhrough
Command + 5hift + X (ControI
+ 5hift + X)
ReseLs verLical scale Lo 00%
Command + Option + 5hift + X
(ControI + AIt + 5hift + X)
ReseLs horizonLal scale Lo 00%
Command + Option + 5hift + A
(ControI + AIt + 5hift + A)
SeLs leading Lo (AuLo)
Smcshin e3ccl Series. =J | MasLering PhoLoshop or Web Design | ll0
Chcter 6, Photography
U tc this cint, weve JiscusseJ the
crecticn cj jcirly cssive elements. theyre
necesscry, but they Jcnt ence the user
cn the scme level thct c hctcrch
Jces. Phctcrchy cn the Web is
extremely cwerjul, cnJ thct cwer hcs
tc be hcnJleJ rcerly. A hctcrch -
eseciclly cj the humcn jcce -
immeJictely Jrcws the users cttenticn
cnJ ccn be useJ tc Jirect eye jlcw tc
imcrtcnt crecs cj the ce. Plccin c
lcre hctcrch cbcve the jclJ is c
ccmmcn wcy tc rcviJe cn entry cint tc
the ccntent. 3eccuse hctcrchs cre
hih cbcve cther elements in the
hiercrchy, they neeJ tc be hcnJleJ with
ccre cnJ recisicn.
Smcshin e3ccl Series. =J | MasLering PhoLoshop or Web Design | lll
Chapter 6, Photography
PhoLography is subjecLive, and choosing images LhaL complemenL your subjecL
maLLer can be Lime-consuming. Some websiLes mighL call or expliciL shoLs LhaL
quickly communicaLe an idea, presenL a producL or simulaLe an experience. ln oLher
siLuaLions, Lhe message mighL be besL conveyed Lhrough meLaphor or absLracLion.
1he key Lo Lhe perecL phoLo is balancing relevance and appeal. ensuring LhaL Lhe
subjecL relaLes Lo Lhe message LhaL needs Lo be communicaLed and LhaL Lhe image
appeals Lo Lhe audience iL is being direcLed aL.
ALer devising your approach, you'll have Lo conquer a number o Lechnical hurdles
graceully in order Lo produce a high-end producL. Prepping phoLos or on-screen
display varies rom prepping Lhem or prinL. ln addiLion Lo LradiLional concerns o
color, Lone, sharpness and composiLion, Web designers also need Lo be aware o
inLerpolaLion and compression. ln Lhis chapLer, we'll cover Lhe worklow or bringing
phoLography Lo lie on Lhe Web.
Phctcrchy is
c cwerjul tccl
jcr Jrcwin
cttenticn cnJ
Jirectin eye
jlcw.
Garbage ln, Garbage Out
PhoLoshop is a greaL Lool and can do amazing and seemingly impossible Lhings wiLh
phoLography. However, Lhis black magic relies heavily on good source maLerial,
PhoLoshop simply adds Lhe polish. ou can easily make a good phoLo greaL, buL
making a bad phoLo anyLhing beLLer is impossible. Applying endless adjusLmenLs Lo
a heavily over-exposed image will never give you Lhe subLleLy o a properly exposed
image. 1hereore, inding workable source maLerial is viLal Lo ensuring a qualiLy
producL. ShoLs LhaL a clienL's nephew Look wiLh his mobile phone are a big red lag. l
you're using sLock phoLography, spend Lhe exLra Lime siLing or jusL Lhe righL shoL. l
you're Lhe one shooLing, make sure you're noL seLLing yoursel up or a headache in
posL.
Resizing and lnterpoIation
Resizing is one o Lhe mosL common Lypes o ediLs. ldeally, you'd be working wiLh
beauLiul, high-resoluLion phoLos LhaL you only have Lo scale down. While noL always
possible, Lry Lo use images LhaL are aL leasL Lwice as big as Lhe ouLpuL size. 1his gives
you a nice cushion and ensures LhaL Lhe inal ouLpuL is o Lhe besL qualiLy qualiLy.
Avoid increasing Lhe size o phoLos aL all cosLs, even Lhough iL is someLimes
unavoidable.
WheLher you're scaling up or down, undersLand how PhoLoshop deLermines pixel
values. 1he calculaLion o pixel values when scaling is reerred Lo as inLerpolaLion.
1his is done based on Lhe color relaLionship o neighboring pixels. As a simple
example, imagine one black pixel and one whiLe pixel nexL Lo each oLher, scaled
down Lo creaLe one gray pixel. ln iLs simplesL orm, Lhis is how inLerpolaLion
algoriLhms deLermine values.
PhoLoshop provides ive dierenL meLhods o inLerpolaLion, each or a cerLain kind o
resizing. 8elow is a breakdown o Lhe modes and Lheir purpose. ou can change Lhe
inLerpolaLion meLhod in Lwo places. l you're using Lhe Free 1ransorm Lool, you
would change iL in Lhe Preerences dialog. l you're using Lhe lmage Size command,
jusL change iL in LhaL same dialog.
Nearest Neighbor
1he NearesL Neighbor mode is greaL or mainLaining crisp edges and is mosL useul
wiLh recLangular shapes LhaL line up wiLh Lhe pixel grid. When calculaLing a pixel's
value, Lhis mode irsL deLermines an average color based on iLs neighbors and Lhen
makes iL inheriL Lhe exacL value o Lhe neighbor closesL Lo Lhis average. 1hereore, no
new values are ever used.
l you were Lo scale Lhe image by 200%, you would noLice LhaL each pixel basically
doubles in size (i.e. each pixel is now our pixels). 1his can be helpul when working
wiLh screenshoLs o inLeraces or which you'd like Lo mainLain crisp borders and
avoid anLi-aliasing.
BiIinear
8ilinear inLerpolaLion
uses values rom Lhe
our poinLs closesL Lo
Lhe sample poinL and
blends Lhem Lo ind
Lhe average. 1his
meLhod ouLpuLs
adequaLe resulLs buL
is usually Lrumped by
one o Lhe 8icubic
meLhods below.
Necrest Neihbcr ccn be useJ tc sccle screenshcts withcut blurrin
ixels.
Bicubic
8esL or smooLh gradienLs. 1he 8icubic seLLing is PhoLoshop's deaulL and provides
greaL resulLs in mosL siLuaLions. 8y sampling more poinLs per calculaLion, bicubic
inLerpolaLion ouLpuLs much smooLher resulLs, making iL ideal or phoLographs.
Bicubic 5moother
8esL or enlargemenL. 8icubic SmooLher uses an algoriLhm similar Lo LhaL o Lhe basic
8icubic buL wiLh more o a ocus on blending, resulLing in smooLher resulLs and less
conLrasL along edges. When downsampling, Lhis can make images look slighLly
blurry. Upscaling can be improved, Lhough, by using 8icubic SmooLher, which
reduces common blocky arLiacLs.
Bicubic 5harper
8esL or reducLion.
Unlike 8icubic
SmooLher, which
reduces conLrasL
along edges, 8icubic
Sharper acLually
overshooLs edge
values. 1his resulLs in
an increase o
"acuLance," which is
Lhe perceived
sharpness o an
image based on Lhe
conLrasL o iLs edges.
Detcil cj cn imce resizeJ tc 200. 1. 3ilinecr, 2. 3icubic, J. 3icubic
Smccther cnJ 4. 3icubic Shcrer.
5tair-5tep lnterpoIation
SLair-sLep inLerpolaLion is a common Lechnique when resizing images, parLicularly
upscaling. 8y incremenLally scaling and inLerpolaLing an image Lowards iLs inal size,
you can someLimes increase sharpness and preserve deLail. FxperimenL wiLh dierenL
incremenLs, buL 0% seems Lhe mosL common or Lhis meLhod. our resulLs will vary
based on Lhe image and inLerpolaLion meLhod used. lL's really a maLLer o Lrial and
error.
5mart Objects
PhoLoshop CS2's inLroducLion o SmarL ObjecLs radically changed Lhe way layers
could be resized and inLerpolaLed. 8y converLing a layer Lo a SmarL ObjecL, you
ensure LhaL however many Limes an image is resized, iL will be inLerpolaLed only
once. 1he SmarL ObjecL inLerpolaLion meLhod is deLermined by Lhe universal
inLerpolaLion seL in Lhe Preerences dialog.
SmarL ObjecLs are criLical Lo non-desLrucLive ediLing. Any layer - even mulLiple
layers - can be converLed Lo a SmarL ObjecL by righL-clicking Lhe layer in Lhe Layers
paleLLe and selecLing "ConverL Lo SmarL ObjecL." 1his essenLially exLracLs Lhe daLa
rom Lhe selecLed layers and puLs iL in a new documenL, which is embedded in Lhe
main documenL.
8ecause all o Lhe daLa is now separaLe rom Lhe layer iLsel, PhoLoshop will pull Lhe
daLa rom Lhe original SmarL ObjecL every Lime a LransormaLion is applied Lo iL. Any
Lime you need Lo ediL Lhe layers in Lhe SmarL ObjecL, you can double-click iLs
Lhumbnail, which will open a new PS8 documenL conLaining all o Lhe layers in Lhe
same sLaLe as when you creaLed iL. ou can modiy Lhe SmarL ObjecL as i iL were any
oLher documenL, and when you're inished, simply save iL, and Lhe documenL
conLaining Lhe SmarL ObjecL will be updaLed Lo relecL your changes.
ln addiLion Lo preserving Lhe original daLa while resizing, SmarL ObjecLs also increase
Lhe lexibiliLy o ilLers. 1ypically, ilLers are permanenLly applied Lo a layer, buL ilLers
on SmarL ObjecLs become a SmarL FilLer. As you add ilLers, Lhey're added Lo Lhe
layer in Lhe Layers paleLLe under Lhe SmarL FilLers secLion. Fach o Lhe ilLers can be
ediLed by double-clicking iLs name. ou can even change Lhe sLacking order o Lhe
ilLers by dragging Lhem up and down. Finally, you'll noLice a Lhumbnail nexL Lo Lhe
SmarL FilLers header. Lhis is an addiLional mask LhaL applies only Lo Lhe ilLers. Like a
sLandard layer mask, any areas LhaL are painLed black will be hidden.
ln general, mulLi-layered SmarL ObjecLs make or an inLeresLing, alLhough somewhaL
unpredicLable, eaLure. SmarL ObjecL SLack Modes. 8y selecLing mulLiple layers and
compiling Lhem inLo a SmarL ObjecL, you can alLer how Lhose layers are composiLed
by changing Lheir SLack Mode (Layer - SmarL ObjecLs - SLack Mode). Fach o Lhese
modes oer unique blending meLhods, buL only a ew o Lhem are inLuiLive (Lhe resL
are based on complex algoriLhms, which render Lhem impracLical or a Web
designer's worklow).
Smcrt lilters
cllcw ycu tc
mcJijy ycur
jilters cjter
theyre clieJ.
Ycu ccn clsc
chcne the
stcclin mcJe
cnJ mcsl
certcin crecs cj
the imce jrcm
bein jiltereJ.
CoIor and Tone
WheLher creaLive or correcLive, color and Lone adjusLmenLs are an imporLanL parL o
design. 1he color and Lone o phoLographs musL maLch Lhe eel o Lhe websiLe. A
phoLo's color values are deLermined by Lhe composiLion o iLs channels - because
we're Web designers and our inal ouLpuL is rendered in pixels, Lhese are usually Red,
Creen and 8lue. When making adjusLmenLs, you're essenLially alLering Lhe brighLness
value o each pixel's red, green and blue componenL.
AdjusLing Lhe color or
Lone o an image is beLLer
done wiLh a visualizaLion
o iLs values, known as a
hisLogram. 1he
HisLogram paleLLe
(Window - HisLogram)
provides numerous
visualizaLions LhaL allow
you Lo deLermine Lhe
image's balance aL a
glance. WhaL appears as
jagged mounLains is
acLually a represenLaLion
o Lhe sum o pixels wiLh a corresponding value. When Lhe Channel drop-down
menu is seL Lo RC8, each value along Lhe x-axis (known as Lhe levels) represenLs each
pixel's overall Lonal value. 1hereore, Lhe values Lo Lhe leL o Lhe graph represenL
pixels LhaL are compleLely black or almosL black, and values Lo Lhe righL move
Lowards whiLe. 1he same holds Lrue when changing Lhe Channel drop-down menu Lo
Red, Creen or 8lue, excepL LhaL Lhe charL would Lhen represenL Lhe values o LhaL
individual channel only.
1he Histcrcm rcviJes c visuclizcticn cj ixel
vclues. As ycu ccn see, this imce ccntcins mcre
liht vclues thcn Jcrl cnes.
1he hisLogram is criLical Lo balancing Lhe color and Lone o an image and is seen in
many o Lhe adjusLmenL dialogs. 1ypically, Lhe values in a well-balanced image will
range across Lhe enLire span o Lhe hisLogram. AlLhough Lhe hisLogram is noL direcLly
ediLable, you can make Lwo key hisLogram-based adjusLmenLs. Levels and Curves
(see page 20 and 22 or deLails).
Adjustment Layers
PhoLoshop allows you Lo adjusL layers direcLly via lmage - AdjusLmenLs, buL in Lhe
spiriL o non-desLrucLive ediLing, your besL opLion is Lo use adjusLmenL layers. AL Lhe
boLLom o Lhe Layers paleLLe is Lhe "CreaLe new ill or adjusLmenL layer" buLLon,
which gives you access Lo Lhe core adjusLmenLs. Choosing an opLion rom Lhe lisL will
creaLe a new layer named aLer Lhe adjusLmenL Lype. 1he adjusLmenLs Lo Lhis new
layer will be applied Lo all o Lhe layers below iL, buL you can consLrain Lhem Lo a
single layer by creaLing a clipping mask (Command - OpLion - C or ConLrol - AlL
- C).
AJjustment
lcyers ive
ycu much
mcre
jlexibility
thcn ycu
wculJ et by
clyin
cJjustments
vic lmce -
AJjustments.
PreservaLion o daLa is noL Lhe only perk Lo using adjusLmenL layers. 1hey also
provide superb lexibiliLy by allowing you Lo modiy Lhe adjusLmenL aL any Lime via
Lhe AdjusLmenLs panel (Window - AdjusLmenLs). And because each adjusLmenL is
LreaLed as a layer, you can prioriLize Lhem by changing Lhe sLacking order. WhaL's
more, each o Lhe adjusLmenL layers can make use o blend modes, layer sLyles and
masks, giving you LoLal conLrol over Lhe implemenLaLion.
Brightness/Contrast
1his sel-explanaLory adjusLmenL comes in Lwo sliders. one or 8righLness and one
or ConLrasL. 1he 8righLness conLrol allows you Lo increase or decrease brighLness by
50 uniLs, and Lhe
conLrasL ranges rom
-00 Lo 00. lL can be
used Lo quickly add
pop Lo a lieless
phoLo, buL iL lacks
Lhe conLrol o more
reined adjusLmenLs.
LeveIs
1he Levels
adjusLmenL is
exLremely useul or
iLs balance o
simpliciLy and conLrol. 1his hisLogram-based adjusLmenL leLs you seL Lhe range o
values based on eiLher composiLe or channel. 8y deaulL, you're presenLed wiLh Lhe
RC8 hisLogram, wiLh Lhree sliders along Lhe boLLom. black, gray and whiLe. Fach
slider represenLs an absoluLe value. 8lack represenLs a 0 value, gray is 28 and whiLe
is 255. Moving Lhese sliders adjusLs Lhe values relaLive Lo Lhe new absoluLes.
AJJ Jrcmc tc c hctc with the 3rihtness cnJ Ccntrcst cJjustment.
1hereore, moving Lhe black slider Lo Lhe righL progressively darkens Lhe image. All
values Lo Lhe leL o Lhe black slider will be mapped Lo 00% black, and Lhe values Lo
Lhe righL will adjusL Lo Lhe new black poinL. 1he gray slider seLs Lhe weighL o Lhe
mid-poinL. 8y deaulL, Lhis is seL Lo .00, which puLs iL evenly beLween Lhe black and
whiLe poinLs. As you move Lhe black or whiLe poinL, Lhe gray poinL will auLo-adjusL Lo
mainLain Lhe same percenLage. Dragging Lhe gray poinL Lo Lhe righL will darken Lhe
image, and dragging iL Lo Lhe leL will lighLen iL.
1he main slider poinLs can also
be conLrolled using Lhe
Fyedropper Lools nexL Lo Lhe
hisLogram. 8y selecLing one o
Lhe Fyedropper Lools, you can
click anywhere on Lhe canvas Lo
seL LhaL pixel's value as Lhe black,
gray or whiLe poinL. Holding
OpLion (AlL) while mousing over
Lhe canvas will display Lhe
currenL values or LhaL poinL. 1his
provides a raLher inLuiLive way Lo
seL values.
8elow Lhe black, gray and whiLe
poinL sliders are Lwo oLher
sliders LhaL conLrol Lhe ouLpuL
levels. 1hese conLrol Lhe
maximum values or black and
whiLe, which are deaulLed Lo 0
and 255, respecLively. Dragging
Lhe black ouLpuL slider Lo 28
1he levels cJjustment cllcws ycu tc remc cclcrs
bcseJ cn their histcrcm vclues. 1he cJjustment
cbcve will bcth brihten cn imce cnJ reJuce its
ccntrcst.
ensures LhaL no values will be darker Lhan 50%. ou'll noLice LhaL an AuLo buLLon is
locaLed above Lhe hisLogram. Clicking iL will loop Lhrough Lhe channels and balance
Lheir black and whiLe poinLs, which in Lurn will also balance Lhe composiLe image so
LhaL a ull range o values is reached. As wiLh any auLomaLic seLLing in PhoLoshop, Lhe
resulL may be exLreme and is no subsLiLuLe or manual adjusLmenLs.
Curves
While Lhe Levels adjusLmenL is powerul, iL alls shorL when you need Lo adjusL more
Lhan Lhe black and whiLe poinLs. 1his is where Lhe Curves adjusLmenL comes in
handy. O all Lhe adjusLmenL layers, iL is arguably Lhe mosL imporLanL. lL allows or
precise conLrol o every value in Lhe image.
1he Curves adjusLmenL looks similar Lo Levels. Lhe hisLogram is ronL and cenLer,
Lhere are black and whiLe sliders, we can seL which channel Lo work on, and Lhe Lhree
1he Curves
cJjustment
rcviJes twc-
Jimensicncl
ccntrcl cver
ecch chcnnels
vclues.
Fyedropper Lools are Lhere. 1he dierence beLween Curves and Levels is in Lhe
gridded hisLogram. As in Levels, Lhe leL side sLill represenLs black and Lhe righL
represenLs whiLe, buL Curves is a Lwo-dimensional adjusLmenL because iL also ploLs
daLa on Lhe y-axis. 1he boLLom o Lhe hisLogram represenLs 00% black, and Lhe Lop
represenLs 00% whiLe. 1he diagonal line running rom Lhe boLLom-leL Lo Lop-righL
corner represenLs how Lhe values on Lhe hisLogram (inpuL) correspond Lo Lhe
adjusLed values (ouLpuL).
lniLially, we have a perecLly diagonal "curve," seLLing pure black Lo pure black and
pure whiLe Lo pure whiLe. 8y clicking anywhere on Lhe curve, you can add a new
anchor poinL, which can be moved up, down, leL or righL. Moving Lhe poinL up will
lighLen Lhe corresponding values, and moving iL down will darken Lhem. Mindully
seLLing and adjusLing anchor poinLs can quickly resusciLaLe a lieless phoLo.
xposure
8y modiying Lhe Lhree sliders in Lhe Fxposure adjusLmenL (Fxposure, OseL and
Camma), you can correcL exposures or simulaLe an over-exposure or under-
exposure. 1he Fxposure slider is really Lhe key Lo modiying and correcLing Lhe
exposure, while Lhe OseL and Camma opLions allow you Lo change Lhe lighLness
and color range.
Vibrance
1he vibrance adjusLmenL provides Lwo ways Lo adjusL Lhe saLuraLion o colors. 1he
SaLuraLion slider adjusLs iL by simply increasing or decreasing Lhe saLuraLion o each
individual pixel unLil Lhe maximum or minimum value is reached. vibrance, on Lhe
oLher hand, is a biL more sophisLicaLed. 8y Laking inLo consideraLion Lhe original
saLuraLion value, Lhe vibrance slider inLelligenLly increases or decreases saLuraLion Lo
reduce clipping (i.e. heavily saLuraLed colors will gain less saLuraLion Lhan lower
saLuraLed ones). 1his is very useul when working wiLh skin Lones because iL helps Lo
mainLain a more naLural look.
Hue/5aturation
AL irsL glance, Hue/SaLuraLion appears Lo be a simple adjusLmenL LhaL conLrols.
well, Lhe hue and saLuraLion (and lighLness, Loo). However, Lhis adjusLmenL is quiLe
robusL and versaLile. lL can be used Lo creaLe black-and-whiLes, sepia eecLs and
oLher duoLones. lL can even LargeL parLicular ranges o colors Lo help balance Lhem.
1he Lhree sliders adjusL values or each pixel in Lhe currenL color group relaLive Lo Lhe
pixel's original value in Lhe HS8 color model. 8y checking Colorize, you can seL all
values Lo grayscale, aL which poinL Lhe Hue, SaLuraLion and LighLness sliders will add
color. 1his is greaL or quickly creaLing sepia Lones and oLher duoLones.
8y deaulL, all values are
modiied in Lhe MasLer
group. 1his applies Lhe
adjusLmenL Lo Lhe enLire
image. ou can roLaLe
Lhrough dierenL color
groups using Lhe drop-
down menu above Lhe
sliders. ou'll noLice LhaL
color sLops are added
Lo Lhe specLrums aL Lhe
boLLom. 1his allows you
Lo LargeL a parLicular
range o colors. 8y
using Lhe hand-poinLer opLion in Lhe upper-leL o Lhe dialog, you can auLomaLically
seL Lhe color range by clicking anywhere on Lhe image. ou can even click-drag on
Lhe image Lo change Lhe saLuraLion or Command (or ConLrol) - click and drag Lo
change Lhe hue.
Settin Hue/Scturcticn tc Cclcrize cllcws ycu tc quiclly crecte
Juctcne imces.
1he relaLionship beLween Lhe adjusLed values and Lhe originals can be seen in Lhe
specLrums aL Lhe boLLom o Lhe dialog. 1he Lop specLrum represenLs original values,
and Lhe adjusLed values are on Lhe boLLom. 1he bar beLween Lhe Lwo is where Lhe
range sLoppers appear when working wiLh a single color group. Measured in
degrees, Lhe our range sLoppers represenL Lhe beginning and end o Lhe range as
well as Lhe edge gradaLion.
1he Lriangular sLops represenL Lhe color aL which Lhe adjusLmenL should end, any
value beyond Lhem will receive no adjusLmenL. 1he recLangular sLops represenL Lhe
inLernal range wiLhin which 00% o Lhe adjusLmenL will be applied, areas beLween
Lhe inLernal and exLernal ranges will receive only a percenLage o Lhe adjusLmenL.
1his helps Lo mainLain a naLural and smooLh LransiLion rom one color Lo Lhe nexL,
buL Lhey can be adjusLed as you see iL. Modiying Lhe sLoppers is as simple as
dragging Lhem leL or righL, buL you can also use Lhe Fyedropper Lools Lo add,
remove or change Lhe values.
l you happen Lo move a color group's range rom iLs original color Lo anoLher,
PhoLoshop will rename Lhe color group accordingly. For example, i Lhe group is seL
Lo Cyan, and you move iL Lo a range o red colors, Lhen Lhe group will be renamed
Red 2.
CoIor BaIance
Color 8alance does exacLly whaL iLs name suggesLs. iL balances colors beLween Red,
Creen and 8lue and Lheir counLerparLs Cyan, MagenLa and ellow. Range conLrol is
provided by way o Lhe Lhree radio buLLons. Shadows, MidLones and HighlighLs. 1he
Preserve LuminosiLy check box allows you Lo mainLain consisLency beLween lighL and
dark areas. 1his adjusLmenL is helpul or quick color shiLing, buL iL doesn'L maLch
Lhe conLrol o Curves, which can achieve Lhe same resulL.
BIack and white
A number o adjusLmenLs can remove color rom an image - Hue/SaLuraLion,
vibrance, CradienL Map - buL none compare Lo 8lack and WhiLe. 8y having conLrol
over how much o each color is used or Lhe composiLed 8lack and WhiLe image, you
can pull much more conLrasL and deLail. ou can also creaLe duoLones using Lhe 1inL
eaLure.
Photo liIter
PhoLo FilLer simulaLes whaL Lhe image mighL look like i iL were Laken wiLh a
parLicular ilLer on Lhe camera. 1his can be used Lo subLly or drasLically LinL images
warmer, cooler or Lowards a cerLain hue.
ChanneI Mixer
1he Channel Mixer conLrols Lhe values in each channel by adding and subLracLing
values rom oLher channels. 1his can help wiLh subLle color adjusLmenLs buL is raLher
uninLuiLive. 1urning on Lhe Monochrome check box gives you a slimmer version o
1he uer-lejt cj
this imce wcs just
JescturcteJ, but
the bcttcm-riht
hcs c 3lccl cnJ
White cJjustment
clieJ tc it.
Nctice the
imrcvement in
ccntrcst cnJ rcne
cj vclues.
Lhe 8lack and WhiLe adjusLmenL, conLrolled by Lhe Lhree channels as opposed Lo Lhe
six color groups.
Repair
WheLher you're abolishing creases rom a Lurn-o-Lhe-cenLury phoLograph, removing
unwanLed objecLs rom a sLock image or smooLhing ouL blemishes rom a porLraiL,
phoLo repair is a necessary skill. 1here is an arL Lo removing objecLs and covering up
imperecLions. lL musL be done wiLh a careul eye so LhaL iL avoids ending up in a
PhoLoshop DisasLers posL (hLLp.//biL.ly/vwDZr). Removing a blemish is easy, buL
mainLaining Lhe realism can be diiculL. Luckily, PhoLoshop provides a number o
Lools Lo help wiLh Lhe process, mosL o which are brush-based (see 3rushes on page
54). 1hese Lools work by sampling daLa rom similar areas o Lhe image and blending
Lhem wiLh Lhe LargeL area.
CIone 5tamp
1he Clone SLamp is Lhe original repair Lool. lL allows you Lo seL a source rom where
pixels will be copied and applied Lo Lhe LargeL area. ou can seL Lhe source area by
OpLion-clicking (AlL-clicking) anywhere on Lhe canvas. Upon seLLing Lhe source, you
can painL direcLly Lo Lhe area you wanL Lo repair. l you're using a newer version o
PhoLoshop, an overlay o Lhe source area will ollow your cursor Lo help wiLh
alignmenL. 8ecause Lhe sLamp Lool is brush-based, you can modiy Lhe Radius,
Hardness, OpaciLy, Fill and oLher seLLings Lo make your clone blend properly wiLh iLs
surrounding. Reducing Lhe Fill and Hardness and sampling mulLiple Limes wiLh slighL
variaLions is a good Lechnique or mainLaining realism, especially wiLh soL areas such
as skin Lones.
Always copy Lhe layer you're working on beore applying desLrucLive ediLs Lo iL.
8eLLer yeL, avoid desLrucLive ediLs alLogeLher. 1hankully, Lhe Clone SLamp provides
a way Lo avoid applying cloned areas Lo Lhe original layer via Lhe Sample drop-down
menu in Lhe properLies bar.
SLarL by creaLing a new layer above Lhe layer(s) you'd like Lo repair and selecL Lhe
new layer. 1hen, seL Lhe Sample opLion Lo All Layers (or CurrenL and 8elow i oLher
layers are inLerering). Now, any cloning LhaL occurs will be sampled Lo Lhe new layer
and noL Lhe original. 1his allows or much greaLer lexibiliLy and ensures LhaL Lhe
original daLa sLays inLacL. l adjusLmenL layers are shiLing your sample, you can click
Lhe "lgnore adjusLmenL layers while cloning" opLion Lo exclude Lhem rom Lhe
source.
1he Aligned opLion
- locaLed in Lhe
Clone SLamp Lool's
properLy bar -
deLermines wheLher
each clone will sLarL
aL Lhe source. When
checked, Lhe irsL
clone will sample
rom Lhe source's
coordinaLes, and any
subsequenL clones
will be sampled
relaLive Lo Lhe irsL
clone.
For example, leL's assume Lhe source is locaLed aL x.00, y.00, and Lhe irsL clone is
aL x.200, y.200. l Lhe second clone is aL x.225, y.225, Lhen iLs sample will be locaLed aL
x.25, y.25. When Lhe Aligned opLion is unchecked, Lhe second clone would change
Lo Lhe original source coordinaLes o x.00, y.00. More advanced opLions or Lhe
Newer versicns cj Phctcshc rcviJe c review cj the scmleJ crec
within the brush shce.
Clone SLamp Lool can be ound in Lhe Clone Source paleLLe (Window - Clone
Source). AL Lhe Lop o Lhis paleLLe are ive clone source icons, each represenLing a
unique sample area. Clicking an icon acLivaLes iL, and any source area seL while iL's
acLive will be mapped Lo iL. ou can Lhen come back Lo LhaL source aL any Lime by re-
clicking iL.
1he disLance beLween Lhe source and Lhe irsL clone is known as Lhe "OseL." ou'll
noLice LhaL aLer you've seL a source area and move Lhe cursor around, Lhe X and
values are updaLed Lo relecL Lhe dierence. 1hese values can be ediLed aLer cloning,
buL iL's raLher diiculL Lo predicL Lhe resulLs. 1o alLer Lhe oseL in a more inLuiLive way,
OpLion - ShiL - Drag (AlL - ShiL - Drag) Lo Lhe desired locaLion. NexL Lo Lhe OseL
are opLions or scaling and roLaLing Lhe clone. 1he Lhree inpuLs are airly inLuiLive.
seLLing Lhe widLh and heighL Lo 50%, or example, will clone aL hal size. 8eside Lhe W
and H opLions are circular arrows LhaL allow you Lo lip Lhe clone horizonLally or
verLically.
l you're cloning across Lhe rames o an animaLion or video, you can use Lhe Frame
OseL, which leLs you seL Lhe rame o Lhe source. 1he oseL can be seL Lo a posiLive
or negaLive inLeger Lo LargeL uLure or pasL rames, respecLively. 1he Lock Frame
opLion ensures LhaL every clone samples rom Lhe rame where Lhe source was
originally seL.
1he boLLom secLion o Lhe Clone Source paleLLe conLains opLions or conLrolling Lhe
appearance o Lhe overlay. ou can Loggle Lhe overlay on and o, change iLs opaciLy
and modiy iLs blending mode. 1he Clipped opLion dicLaLes wheLher Lhe source is
shown only in Lhe brush shape or Lhe enLire layer is shown. AuLo Hide removes Lhe
source overlay as you painL, and lnverL inverLs Lhe overlay only (Lhe clone iLsel is noL
inverLed).
Heclin clcn shcr
eJes ccn scmetimes
cbscrb cclcr jrcm
necrby elements (cs
seen cn the lejt).
Settin c selecticn
crcunJ the crec ccn
hel remeJy this.
HeaIing Brush
Similar Lo Lhe Clone SLamp buL ar more advanced, Lhe Healing 8rush clones daLa
rom Lhe source and analyzes Lhe daLa so LhaL iL can inLelligenLly blend iL wiLh Lhe
exisLing layer daLa. 1he resulL o Lhis process is Lypically much more naLural. 1he
drawback o Lhe Healing 8rush is LhaL iL someLimes loses subLle LexLures in Lhe
blending process. 1his can be advanLageous when repairing areas such as a cheek,
buL iL can also lead Lo awkwardly smooLh bloLches along a surace. ln such cases,
using Lhe Clone SLamp Lool or a combinaLion o Lhe Lwo is besL.
When using Lhe Healing 8rush along conLrasLing edges, you'll someLimes pick up
unwanLed color rom ouLside o Lhe brush shape. 1his is because PhoLoshop is using
an area larger Lhan Lhe brush Lo help deLermine Lhe resulL. 1his can be problemaLic,
buL Lhere's a quick remedy. 8y making a LighL selecLion over Lhe area LhaL needs Lo
be healed, you can limiL Lhe pixels LhaL are included in Lhe blending process.
1he PaLLern Sample opLion allows you Lo speciy a paLLern Lo blend wiLh Lhe LargeL
area. 1his opLion mighL prove useul or creaLive lourishes buL is less eecLive or
general repair.
5pot HeaIing Brush TooI
1he SpoL Healing 8rush is an oshooL o Lhe Healing 8rush. lL provides a similar
blending process buL doesn'L require - or even allow - a source. When Lhe Lool's
1ype opLion is seL Lo ConLenL-Aware, Lhe Lool analyzes Lhe pixels in Lhe image Lo
deLermine how Lhe area should be illed. 1his works remarkably well in many
circumsLances, buL by sacriicing Lhe abiliLy Lo manually seL Lhe source, you lose a loL
o conLrol. 1hereore, Lhis Lool is besL reserved or healing small and simple areas.
1he 1ype opLion or Lhe SpoL Healing 8rush is almosL always besL leL on ConLenL-
Aware, buL Lhe oLher Lwo opLions may be helpul as well, and i you haven'L
upgraded Lo CS5, Lhey're all you have access Lo. 1he ProximiLy opLion samples pixels
around Lhe painLed area. 1his is similar Lo Lhe ConLenL-Aware opLion, buL iL may noL
preserve LexLure and shading quiLe as well. 1he 1exLure opLion Lakes areas wiLhin Lhe
image, bumps up Lhe conLrasL and blends Lhem over Lhe painLed area. 1his can be
helpul or small areas, buL iL looks aLrocious in large areas. ln acL, i Lhe area is Loo
large, you'll acLually remove LexLure, leaving you wiLh a large blurry area.
With cne clicl, the
Sct Heclin 3rush
remcves unwcnteJ
items jrcm c hctc
while successjully
crectin Jctc tc
relcce them.
Changing Lhe 8lend Mode is anoLher way Lo gain more conLrol o Lhis Lool. 1he
Normal seLLing usually does Lhe Lrick, buL depending on your image, Lhe Replace
seLLing mighL do a beLLer job o preserving LexLure. 1he oLher modes should be
amiliar Lo you, you can use Lhem Lo ensure LhaL Lhe sample LargeLs Lhe color or
luminosiLy o Lhe area.
Patch TooI
Like Lhe Clone SLamp and Healing 8rush, Lhe PaLch 1ool allows you Lo seL a sample
area, buL iL uses an enLire selecLion as iLs source. 8egin by seLLing a selecLion, eiLher
wiLh Lhe PaLch Lool (which acLs as a sLandard Lasso Lool) or by using a prior selecLion.
ALer Lhe selecLion is made, drag iL - depending on Lhe PaLch seLLing, you'll eiLher
sample Lo (DesLinaLion mode) or sample rom (Source mode) Lhe LargeL area. 1he
sample will Lhen be blended as is done wiLh Lhe Healing 8rush. l you're using Lhe
PaLch Lool Lo seL your selecLion, you can use ShiL Lo add Lo Lhe currenL selecLion,
OpLion (AlL) Lo subLracL rom iL and ShiL - OpLion (ShiL - AlL) Lo inLersecL wiLh iL.
Content-Aware liII
One o Lhe mosL anLicipaLed eaLures o PhoLoshop CS5 was Lhe ConLenL-Aware Fill,
which promised Lo alleviaLe nighLmarish repair work by inLelligenLly illing in Lhe
blanks. While Lhe
Lool is somewhaL hiL
or miss, when iL hiLs,
iL really hiLs. 8egin
by selecLing Lhe area
LhaL needs Lo be
illed. 1hen, iniLialize
Lhe Fill dialog (ShiL
- F5), and you'll
noLice LhaL Use now
has a ConLenL-Aware
Ccntent-Awcre lill ccn be useJ tc secmlessly relcce lcre crecs.
1he imces cn the
riht hcve been
rcrcmcticclly
shcreneJ. 1hey hcve
much hiher ccutcnce
(cr eJe ccntrcst) thcn
the imces cn the lejt.
opLion. Click OK, and waLch as PhoLoshop works iLs magic. Depending on Lhe image
and your selecLion, you'll eiLher achieve a seamless repair LhaL needs no urLher
reLouching or a laughable mess. While Lhis opLion doesn'L rival manual healing by a
skilled hand, iL does make a designer's job much easier by speeding up Lhe process.
l you're lucky and Lhe ill has seamlessly creaLed an area o your image, Lhen bravo!
Chances are, Lhough, LhaL Lhis eaLure is more o a jumping o poinL. use iL Lo sLarL
Lhe process, buL ollow up wiLh Lhe Clone SLamp or Healing 8rush Lo rework Lrouble
spoLs.
5harpening
ALer all o Lhe resizing, Lransorming and adjusLmenLs, a phoLograph oLen needs Lo
be sharpened. Sharpening can really bring a phoLo Lo lie, buL iL musL be done very
careully so as noL Lo creaLe any arLiacLs or halos. NoLice LhaL adjusLing Lhe
sharpness o an image
aLer iL has been shoL is
much dierenL Lhan
Lweaking Lhe ocus o
a camera lens.
Unshcr Mcsl ives
ycu rect ccntrcl cver
the cmcunt cj
shcrenin
cnJ the rcne tc which
it is clieJ.
PosL-producLion sharpening relies on changing Lhe perceived sharpness by
increasing Lhe conLrasL along edges, reerred Lo as "acuLance." PhoLoshop provides
ive ilLers or sharpening, all locaLed in Lhe FilLers menu (FilLers - Sharpen).
5harpen, 5harpen More and 5harpen dges
Sharpen, Sharpen More and Sharpen Fdges are quick and dirLy ways Lo increase Lhe
sharpness o an image. 1hey all apply a sLandardized amounL o sharpening LhaL
cannoL be adjusLed and are rarely ideal. Cive Lhem a Lry and maybe you'll luck ouL,
buL you're much beLLer o using Unsharp Mask or SmarL Sharpen.
Unsharp Mask
Unsharp Mask had a long run as Lhe way Lo sharpen. Unlike Lhe generic sharpening
ilLers, Unsharp Mask allows you Lo adjusL Lhe amounL o sharpening.
ou can also modiy Lhe ilLer's Radius and 1hreshold. 1he Radius seLLing conLrols Lhe
sampling area. Larger radii resulL in more dramaLic sharpening buL usually creaLe
unwanLed halos. ou're besL o leaving Lhe radius as small as possible Lo achieve Lhe
desired eecL. 1he 1hreshold limiLs Lhe range Lo which Lhe sharpening is applied. A
seLLing o 0 applies Lo Lhe enLire image, whereas a seLLing o 20 limiLs Lhe sharpening
Lo neighboring pixels whose values dier by aL leasL 20. 1he AmounL, Radius and
1hreshold aord you greaL conLrol over which pixels are sharpened and by how
much, buL Lhe inLroducLion o SmarL Sharpen has changed Lhe way we Lhink abouL
sharpening.
5mart 5harpen
Much like Unsharp Mask, Lhe SmarL Sharpen ilLer allows you Lo conLrol Lhe amounL
o sharpening along wiLh Lhe radius, buL LhaL's where Lhe similariLies end. SmarL
Sharpen opens a slew o eaLures Lo make sharpening more inLuiLive and
cusLomizable. 1he oLher core opLion available is Lhe Remove seLLing, which
deLermines Lhe sharpening algoriLhm.
8y deaulL, Lhis is seL Lo Caussian 8lur, which is Lhe same algoriLhm LhaL Unsharp
Mask uses. 1he Lens 8lur seLLing aLLempLs Lo sharpen iner deLails, and Lhe MoLion
8lur seLLing can help remove Lhe blur rom moving subjecLs (or besL resulLs, Lhe
Angle seLLing musL be Lweaked wiLh Lhe MoLion 8lur seLLing Lo run parallel Lo Lhe
blur sLreaks in Lhe image). 1he More AccuraLe check box can be Lurned on Lo process
Lhe image more inLensively, Lhis slows Lhe process down buL can deliver sharper
resulLs.
1oggling Lhe 8asic opLion Lo Advanced will reveal Lhree Labs. Sharpen, Shadow and
HighlighL. 1he Sharpen Lab holds all o Lhe opLions rom Lhe 8asic mode. 1he oLher
Lwo are new, and as Lheir names imply, Lhey conLrol how Lhe sharpening is applied Lo
Lhe dark and lighL areas. 1hese opLions are like Lhe 1hreshold opLion in Unsharp
Mask, buL wiLh more cusLomizaLion. 8y modiying Lhese opLions, you can really
reduce Lhe appearance o halos and wiLhouL loss o acuLance. 1he Fade AmounL
reduces Lhe amounL o sharpening applied Lo Lhe pixels considered Lo be Shadows
or HighlighLs. 1onal WidLh adjusLs Lhe range o values LhaL make up Lhe Shadow or
HighlighL. values Lowards Lhe leL will decrease Lhe range and Lhus LargeL only Lhe
darkesL or brighLesL edges. Finally, Lhe Radius conLrols how many surrounding pixels
are evaluaLed when deLermining wheLher a pixel is a Shadow or HighlighL. Lhe higher
Lhe value, Lhe smaller Lhe range o sharpened pixels. NoLe LhaL modiying Lhe 1onal
WidLh or Radius has no eecL on Lhe sharpening process unless Lhe Fade AmounL is
seL higher Lhan 0%.
High Pass
1hough noL lisLed in Lhe Sharpen ilLers, anoLher ilLer is commonly used Lo increase
Lhe acuLance o edges. 1he High Pass ilLer (FilLer - OLher - High Pass) ouLpuLs a
grayish version o Lhe currenL layer wiLh inLensiied edge conLrasL. Areas wiLh subLle
value changes will be abouL 50% gray, and areas wiLh sharp conLrasLing edges will be
closer Lo eiLher black or whiLe.
Scmetimes
shcrenin will
crecte hclcs cj
hihlihts cr
shcJcws, cs seen
clcn the hcrizcn
cn the lejt. Smcrt
Shcrens
cJvcnceJ jectures
cllcw ycu tc
reJuce the
shcrenin
clieJ tc thcse
crecs (riht).
AL irsL, Lhis grayish layer mighL seem somewhaL useless, buL applying Lhe High Pass
ilLer Lo a copy o Lhe original layer and changing iLs blending mode Lo Overlay, SoL
LighL or Hard LighL will sharpen Lhe image wiLh dramaLic eecL. ou can experimenL
wiLh Lhe Lhree blend modes and Lhe layer's opaciLy along wiLh Lhe Radius seLLing o
Lhe High Pass ilLer Lo achieve resulLs similar Lo Lhose o Unsharp Mask.
Masking
PhoLoshop masks are Lhe cornersLone o Lhe non-desLrucLive ediLing process.
PhoLoshop oers ive meLhods o masking. Pixel Masks, vecLor Masks, Quick Masks,
Clipping Masks and Clipping PaLhs, all o which deine pixel opaciLies wiLhouL
aecLing Lhe original daLa. Fach has iLs pros and cons, and knowing which meLhod Lo
use is imporLanL Lo creaLing clean, lexible and properly masked layers.
1he criincl
lcyer (lejt), the
JuliccteJ
lcyer with the
Hih Pcss jilter
clieJ
(miJJle), cnJ
the criincl
lcyer with the
Hih Pcss
lcyer set tc
Overlcy (riht).
PixeI Masks
Pixel masks deLermine opaciLy values based on a rasLer image wiLh grayscale values
LhaL correspond pixel or pixel Lo Lhe original layer. 1his makes Lhem ideal or
masking complex phoLographic imagery (e.g. Lhe hair on a model or leaves on a
Lree). Pixel masks allow or 00 shades o gray, which correspond direcLly Lo opaciLy
percenLages. 1he abiliLy Lo vary opaciLies is unique Lo pixel masks, making Lhem an
invaluable Lool.
While pixel masks can be easily modiied, Lhey aren'L ideal or every siLuaLion.
8ecause o Lheir rasLer ormaL, scaling Lhem can cause unwanLed arLiacLs and
inLerpolaLed blurriness. SmooLh curves and perecL edges can also be Lricky Lo creaLe
when painLing a mask. ln such circumsLances, vecLor masks would be preerable.
Creation
CreaLing a pixel mask is as easy as selecLing Lhe layer or layer group and clicking Lhe
"Add Layer Mask" buLLon aL Lhe boLLom o Lhe Layers paleLLe. A second Lhumbnail
will be added Lo Lhe layer, giving you a preview o Lhe mask. 8y deaulL, Lhis will be
Pixel mcsls
cre iJecl jcr
extrcctin
ccmlex
hctcrchic
imcery.
enLirely whiLe. However, i a selecLion happens Lo be acLive when you're creaLing Lhe
mask, Lhen iL will be used Lo deine Lhe grayscale values o Lhe mask. Once a mask is
creaLed, iL can be ediLed as i iL were any oLher pixel daLa by clicking on Lhe mask's
Lhumbnail. ou can Lhen painL in black Lo hide areas or painL in whiLe Lo reveal Lhem.
1he mask can also be Lweaked using adjusLmenLs and ilLers such as Curves,
1hreshold, Unsharp Mask and Caussian 8lur.

View Modes
When creaLing a mask, Lhere are a number o ways Lo view Lhe mask daLa. OpLion-
clicking (AlL-clicking) on Lhe Lhumbnail will display only Lhe mask on Lhe canvas. 1his
is greaL or ine-Luning areas, buL iL doesn'L show you Lhe acLual layer as you're
working. 1o see boLh Lhe mask and layer aL Lhe same Lime, view Lhe mask as a Ruby
overlay. Simply press \ wiLh Lhe layer selecLed Lo Loggle Lhe overlay on and o. 1he
color and opaciLy o Lhe overlay can also be changed by double-clicking Lhe mask's
Lhumbnail. AddiLionally, you can Loggle Lhe mask on and o by ShiL-clicking on Lhe
mask's Lhumbnail.
Pcintin the
mcsl blccl is
much lile
usin the
ercser tccl.
ChanneIs
Fvery Lime a layer wiLh a mask is selecLed, Lhe mask is shown as a Lemporary alpha
channel in Lhe Channels paleLLe. From here, you can save Lhe channel or laLer use
by dragging Lhe
channel Lo Lhe
"CreaLe new
channel" buLLon
aL Lhe boLLom
o Lhe paleLLe or
jusL by selecLing
"New Channel"
rom Lhe lyouL
menu. ou can
also change Lhe
mask's Ruby
overlay seLLings
1urnin the
mcsl cjj cnJ
the cverlcy
cn ccn hel
with jine-
tunin.
A temcrcry chcnnel is cvcilcble whenever c lcyer with c mcsl is selecteJ.
by double-clicking Lhe channel's Lhumbnail. 8ecause a Lemporary channel becomes
available whenever a masked layer is selecLed, you can use keyboard shorLcuLs Lo
Loggle beLween Lhe acLual layer and iLs mask. Pressing Command - \ (or ConLrol - \)
selecLs Lhe mask, and Command - 2 (or ConLrol - 2) brings you back Lo Lhe layer
daLa.
Vector Masks
vecLor masks pick up where pixel masks all shorL. 8y deining Lhe mask's shape
using paLhs, vecLor masks provide a superior level o inesse and lexibiliLy. 1hey're
ideal or deining shapes wiLh clean, crisp lines. 1he disadvanLage o vecLor masks is
LhaL Lhey cannoL vary pixel opaciLies, Lhey are basically eiLher 0 or 00. For Lhis
reason, many masking jobs require a hybrid implemenLaLion. 8y using a vecLor mask
Lo deine Lhe solid edges and a pixel mask or more complex areas or or varying
opaciLies, you can eecLively exLracL objecLs while maximizing lexibiliLy.

vectcr
Mcsls cre
iJecl jcr
mcslin
cris-eJeJ
cbjects.
Creation
1o add a vecLor mask Lo an exisLing layer, simply Command-click (ConLrol-click) Lhe
"Add Layer Mask" buLLon aL Lhe boLLom o Lhe Layers paleLLe. l a paLh is currenLly
acLive, Lhe mask will be creaLed using iL. OLherwise, Lhe mask will be empLy. PaLhs can
Lhen be added, subLracLed or modiied by clicking Lhe mask's Lhumbnail.
View Modes
8y clicking on Lhe vecLor Mask's Lhumbnail in Lhe Layers paleLLe, you can show or
hide Lhe paLhs saved in Lhe mask. 1hese paLhs can also be accessed rom Lhe PaLhs
paleLLe, buL only i Lhe layer iLsel is selecLed. 1oggling Lhe mask on and o can be
done by ShiL-clicking Lhe Lhumbnail.
Paths
Much like how layer masks appear in Lhe Channels paleLLe, a Lemporary work paLh is
displayed in Lhe PaLhs paleLLe when a layer wiLh a vecLor mask is selecLed. ou can
Lhen save Lhe mask by dragging iL Lo Lhe "CreaLe new paLh" buLLon aL Lhe boLLom o
Lhe paleLLe or by selecLing "Save PaLh" rom Lhe lyouL menu. 1his Lemporary paLh
can be accessed aL any Lime by irsL selecLing Lhe PaLh SelecLion Lool (A) and Lhen
pressing FnLer, iL can be dismissed by pressing FnLer again. ou can also quickly
creaLe a selecLion rom an acLive paLh by pressing Command - FnLer (ConLrol -
FnLer).
AppIying
8eore applying a vecLor mask Lo a layer, you musL irsL rasLerize iL by righL-clicking
Lhe vecLor mask Lhumbnail and choosing "RasLerize vecLor Mask." l Lhe layer already
has a pixel mask, Lhen Lhe Lwo masks will be composiLed LogeLher Lo creaLe a single
pixel mask. lL can Lhen be applied like any oLher layer mask (i.e. righL-clicking Lhe
Lhumbnail and choosing "Apply Layer Mask").
Quick Masks
1he Quick Mask mode allows you Lo creaLe a selecLion using pixel-ediLing Lools as
opposed Lo Lhe primiLive selecLion Lools. 1his is a more logical approach Lo creaLing
a complex mask wiLh variable opaciLy. ou can access Lhis mode by clicking on Lhe
"Quick Mask" buLLon in Lhe 1ools bar or by pressing "Q."
Once in Quick Mask mode, you'll no longer be ediLing Lhe currenL layer. lnsLead,
you'll be ediLing a Ruby overlay LhaL can be ediLed as i iL were regular pixel daLa. 8y
deaulL, enLering Lhis mode will cover Lhe enLire canvas wiLh a semi-LransparenL red
color. ou can Lhen painL whiLe Lo remove Lhe overlay and painL black Lo add iL back.
1he Quick Mask is essenLially a more visual represenLaLion o a selecLion. 1hereore,
every area LhaL you remove rom Lhe overlay is added Lo Lhe selecLion.
Options
ou can modiy how Lhe Quick Mask mode is displayed by double-clicking Lhe
"Quick Mask" buLLon in Lhe 1ools bar. Here you can change Lhe color and opaciLy o
Quicl Mcsl
mcJe cllcws
ycu tc quiclly
cint c
selecticn.
Lhe mask as well as wheLher Lhe
mask color indicaLes masked
areas or selecLed areas. Personally,
l ind painLing selecLed areas
more inLuiLive Lhan painLing
masked areas, which is Lhe
deaulL.
5aving
ALer creaLing a quick mask, you
can eiLher immediaLely apply iL Lo
a layer by creaLing a layer mask or save iL or laLer use. 8y selecLing SelecLion - Save
SelecLion, you can save your selecLion as a new channel or apply iL Lo an exisLing
channel. 1his allows you Lo come back Lo Lhe selecLion aL any Lime by ConLrol-
clicking Lhe channel in Lhe Channels paleLLe or by selecLing SelecLion - Load
SelecLion.

1he Quicl Mcsl Oticns menu cllcws ycu tc
chcne the cclcr, cccity cnJ tcret cj the cverlcy.
Scvin c
Quicl Mcsl
crectes c
new chcnnel.
CIipping Masks
ou'll oLen run inLo siLuaLions in which mulLiple layers require Lhe same mask. ou
could group Lhe layers and mask Lhe layer group, buL LhaL is noL always ideal.
Clipping masks allows or a layer Lo adopL Lhe opaciLy o an underlying layer.
1he easiesL way Lo creaLe a clipping mask is Lo OpLion-click (AlL-click) beLween Lhe
Lwo layers in Lhe Layers paleLLe when Lhe clipping mask cursor appears. AlLernaLively,
you could press Command - OpLion - C (ConLrol - AlL - C) Lo clip a layer Lo Lhe
one below iL. Any number o layers can be clipped Lo Lhe masLer layer, buL a clipped
layer cannoL be used as a clipping mask iLsel.
CIipping Paths
Clipping PaLhs are a loL like vecLor Masks excepL LhaL Lhey apply Lo an enLire
documenL raLher Lhan a layer or layer group. 1hey are used primarily by prinL
designers Lo speciy uniquely shaped objecLs LhaL are imporLed inLo a page layouL
program. 1he paLh is imporLed along wiLh Lhe image Lo ensure a crisp clean edge.
Cliin
Mcsls cre
rect jcr
ccnstrcinin
AJjustment
lcyers.
1o creaLe a clipping paLh, irsL be sure LhaL you have a paLh saved, a Lemporary Work
PaLh does noL suice. ou musL selecL "Save PaLh" rom Lhe lyouL menu in Lhe PaLhs
paleLLe i your paLh is noL saved. 1hen, rom Lhe lyouL menu, choose "Clipping PaLh."
our documenL's appearance will noL change,
buL i you were Lo imporL Lhe documenL inLo
lllusLraLor using Lhe Place command, iL would
be clipped Lo Lhe paLh.
Masks PaIette
1he Masks paleLLe was inLroduced in CS4 and
has changed Lhe way we creaLe and reine
masks. For Lhe irsL Lime, we could eaLher
and ade masks wiLhouL losing Lhe original
daLa. ln CS5, we have exacLly Lhe same basic
conLrols, buL a ew updaLes have been made
Lo Lhe Mask Fdge dialog.
Create/View Buttons
AL Lhe Lop o Lhe paleLLe are Lwo buLLons LhaL
can be used Lo selecL Lhe layer mask or vecLor
mask, or Lo creaLe one i one doesn'L exisL. l
Lhe layer conLains SmarL FilLers, Lhen you'll
also geL a FilLer mask icon.
Density
1he densiLy slider basically conLrols how
sLrong Lhe mask is. AL 00%, ully masked
areas will be compleLely LransparenL.
When densiLy is seL Lo 50%, Lhose same
areas will be only 50% LransparenL.
1he Density sliJer ccntrcls the strenth
cj the mcsl.
leather
FeaLhering Lhe edges o a mask used Lo require applying a Caussian 8lur, which
would desLroy Lhe original mask shape. WiLh Lhe Masks paleLLe, you can now change
Lhe amounL o eaLhering aL any Lime while mainLaining Lhe original mask daLa.
Mask dge
1he Mask Fdge menu delivers some long-desired eaLures LhaL aid in reining a
mask's perimeLer. 1hey come in very handy when Lhe exLracLed objecL is sLill picking
up color rom Lhe masked background.
View Mode
1he view drop-down menu allows you Lo conLrol how Lhe mask is previewed. 1his
seLLing is compleLely based on preerence, buL some modes work beLLer or cerLain
implemenLaLions. NoLe Lhe various keyboard shorLcuLs conLained in Lhis menu. 1he
shorLcuL Lo Lemporarily hide Lhe mask view ("X") is parLicularly useul or seeing Lhe
resulL. Show Radius is helpul or Lweaking Lhe Fdge DeLecLion Radius, especially
With the
lecther
sliJer, ycu
ccn ncw
chcne the
mcsls
scjtness cn
the jly.
when using Lhe Reine Radius 1ool. 1he Show Original opLion Loggles Lhe
appearance o Lhe mask beore any o Lhe Reine Mask adjusLmenLs are made.
dge Detection
1he Radius seLLing is similar Lo eaLhering, buL iL reLains some o Lhe edge's crispness.
1his can be helpul or reducing awkward or overly sharp edges o complex shapes.
8y checking SmarL Radius, PhoLoshop deLermines Lhe sharpness o Lhe edges and
adjusLs Lhe Radius accordingly. 1o Lhe leL o Lhe Fdge DeLecLion legend is an icon
or Lhe Reine Radius 1ool. 1his brush-based Lool allows you Lo manually add or
remove areas rom Lhe radius. 8y deaulL, Lhe Lool is seL Lo add, buL you can acLivaLe
Lhe Frase ReinemenLs Lool by pressing ShiL - F or by clicking and holding Lhe icon
or simply by holding OpLion (AlL) while painLing.
Adjust dge
Smooth
SmooLh simpliies Lhe complexiLy o Lhe mask's edges. 1his can be useul i you've
painLed Lhe mask by hand and need Lo quickly clean up some rough edges.
Ieather
1his eaLher command is nearly idenLical Lo Lhe Mask paleLLe's primary eaLher
command, buL iL resLricLs Lhe blur more Lo Lhe edge o Lhe mask. 1he dierence is
slighL yeL noLiceable.
Contrast
ConLrasL simply modiies Lhe conLrasL o edge elemenLs, which helps Lo crispen soL
edges. Using Lhis in conjuncLion wiLh Radius can help remove unwanLed arLiacLs in
Lhe mask.
Shijt Jge
Formerly Lhe ConLracL and Fxpand slider, Lhis opLion allows you Lo grow and shrink
Lhe edges o Lhe mask. 1his is exLremely useul or reducing unwanLed color ringes.
Outut
1he OuLpuL secLion allows you Lo seL how Lhe Reine Mask adjusLmenLs are applied.
ou can seL Lhe changes direcLly Lo Lhe Layer Mask, or you can creaLe a new layer or
even a new documenL wiLh Lhe mask auLomaLically applied or preserved in a layer
mask. 1he DeconLaminaLe Colors opLion processes Lhe edges o Lhe mask and
removes any unwanLed color ringes.
Color Range
1he Color Range menu is one o Lhe mosL powerul ways Lo exLracL an image rom
an evenly colored background. WiLh only a ew clicks and adjusLmenLs, even Lhe
mosL complex objecL can be cleanly masked.
Quick Tips
Post-ApocaIypse
RecreaLing Lhe Lypical deserLed ciLy sLreeL eecL seen in posL-apocalypLic ilms is
made easy by using a video clip and SmarL ObjecLs. 1his Lechnique relies heavily on a
video clip in which Lhe camera remains sLaLionary wiLh no zoom or pan, buL you can
1he Shijt
lJe sliJer
ccn be useJ
tc remcve
unwcnteJ
cclcr jrines.
also use mulLiple sLills Laken consecuLively. We will sample a median o every rame
and piece iL LogeLher, basically eliminaLing anyLhing LhaL has moved during Lhe clip.
1his Lechnique will also eliminaLe Lhe noise in each rame, leaving us wiLh a smooLher
and more deLailed image.
SLarL by imporLing your video by selecLing File - lmporL - video Frames Lo Layers.
Once Lhe layers are imporLed, selecL Lhem all, and converL Lhem Lo a SmarL ObjecL by
righL-clicking one o Lhe layers and choosing "ConverL Lo SmarL ObjecL." NexL,
choose Layer - SmarL ObjecLs - SLack Mode - Median.
CoIor Range Masks
When an objecL needs Lo be exLracLed rom an evenly colored background (much
like Lhe video-ediLing process o Chroma keying), Lhe quickesL means is oLen Lhe
Color Range command.
1he lyeJrcer tccl
cllcw ycu tc ecsily
select the sly in the
hctc belcw.
FirsL, use Lhe Fyedropper Lool Lo selecL Lhe primary background color. 1hen, use Lhe
"Add Lo sample" and "Remove rom sample" Lools Lo reine Lhe color selecLion. 1he
uzziness slider leLs you broaden Lhe range o colors selecLed. l Lhe color daLa is
Lhere Lo supporL iL, Lhis process makes shorL work o an oLherwise Ledious Lask.
Cclcr
Rcne
mcles
quicl wcrl
cj ccmlex
mcsls.
Masks lrom ChanneIs
A mask oLen hides in one o Lhe layer's channels, jusL waiLing Lo be unlocked.
Depending on your image, you may be able Lo ind a channel wiLh a sLrong conLrasL
beLween Lhe LargeL objecL and iLs surroundings. ou mighL even wanL Lo Lemporarily
change Lhe color mode Lo Lab or CMK Lo access alLernaLive channel opLions. Once
you've ound a channel wiLh sLrong enough conLrasL, Command-click iL Lo creaLe a
selecLion. 1hen, apply Lhe selecLion as a layer mask. ou'll Lhen be able Lo Lweak iL as
you would any oLher mask.
As Lhe image below demonsLraLes, simply selecLing a channel is noL always suicienL
or a clean mask. ou may need Lo do some mixing wiLh oLher channels.
. 1he original image has sLrong vibranL colors, making iL a greaL opporLuniLy Lo
creaLe a mask using channels.
2. 1he red channel has Lhe righL oreground-Lo-background conLrasL, so we'll
sLarL Lhere. We've copied and pasLed iL onLo a new layer and Lhen inverLed iL.
3. 1he green cup is sLill prominenL, so we've converLed Lhe blue channel Lo a
layer and will use iL Lo negaLe Lhe green and red cups.
4. 8y seLLing Lhe 8lending Mode on Lhe blue channel's layer Lo MulLiply, we can
eecLively erase any exLraneous whiLe areas.
5. 1he Lwo layers are Lhen laLLened and applied as a layer mask Lo Lhe original
image. 1his leaves us wiLh a cleanly masked blue mug.
PixeI/Vector Hybrid Masks
ObjecLs will quiLe oLen have a combinaLion o sharp edges and soL eaLhered edges.
ln such insLances, using boLh a pixel and a vecLor mask may be besL. One common
example o Lhis is exLracLing a igure. ou can use Lhe Pen Lool Lo draw all o Lhe
smooLh edges along Lhe igure's body, and Lhen use a pixel mask Lo painL in Lhe ine
deLails such as hair.
MuItipIe Masks
AL Limes you may wanL Lo apply more Lhan one mask Lo a layer. ou could apply Lhe
mask by righL-clicking Lhe layer and selecLing "Apply Layer Mask," aLer which you
could apply a new mask. 1his, however, is noL ideal because Lhe daLa behind Lhe
mask will be losL.
A ar beLLer meLhod is Lo creaLe a SmarL ObjecL rom Lhe layer and mask Lhe new
layer. 1his allows you Lo apply Lwo masks Lo one layer wiLhouL losing daLa. ln acL, i
needed, you could repeaL Lhis process over and over.

Removing dge lringes
Fven aLer using Lhe "Reine Fdge" command in Lhe Masks paleLLe, you may ind
random color ringes leL along Lhe edge o your mask. 1his is where some manual
brushwork comes in handy. 1he PainLbrush Lool can be used here, buL l recommend
Lhe Healing 8rush, SLamp Lool or Smudge Lool because Lhey will blend beLLer wiLh
Lhe subjecL.
FirsL, creaLe a new layer and clip iL Lo Lhe masked layer. 1hen, seL your Lool o choice
Lo sample all layers. ou can now selecL Lhe sample area and painL Lhe ringes ouL,
Lhe original layer daLa will be preserved. Changing Lhe brush's 8lend Mode will oLen
preserve Lhe deLail o Lhe layer.
Ccnvertin
c lcyer tc c
Smcrt
Object
cllcws ycu
tc cJJ
multile
mcsls
withcut
lcsin Jctc.
Keyboard 5hortcuts
TooIs
5 (5hift + 5 to cycIe through) Clone SLamp and PaLLern SLamp
J (5hift + J to cycIe through) SpoL Healing 8rush, Healing 8rush, PaLch
Lool and Red Fye Lool
O (5hift + O to cycIe through) Dodge, 8urn and Sponge Lools
Adjustments
Command + L (ControI + L) Levels
Command + M (ControI + M) Curves
Command + U (ControI + U) Hue/SaLuraLion
Command + B (ControI + B) Color balance
Command + Option + 5hift + B (ControI + AIt + 5hift 8lack and whiLe

Cclcr
lrines ccn
usuclly be
smuJeJ cr
cinteJ
cwcy cn c
clieJ
lcyer.
+ B)
Command + 5hift + U (ControI + 5hift + U) DesaLuraLe
Command + l (ControI + l) lnverL
Command + 5hift + L (ControI + 5hift + L) AuLo-Lone
Command + Option + 5hift + L (ControI + AIt + 5hift +
L)
AuLo-conLrasL
Command + 5hift + B (ControI + 5hift + B) AuLo-color
Masks
\ view Layer Mask as an overlay
Command + \ (ControI + \) SeL layer ocus Lo Layer Mask
Command + 2 (ControI + 2) SeL layer ocus Lo layer daLa
Command + Option + \ (ControI + AIt
+ \)
CreaLe selecLion rom Layer Mask
Command + Option + G (ControI +
AIt + G)
Make or release Clipping Mask
A, then nter AcLivaLe or dismiss vecLor Mask
Command + nter (ControI + nter) CreaLe selecLion rom acLive vecLor mask
Command + CIick Mask ThumbnaiI
(ControI + CIick Mask ThumbnaiI)
CreaLe selecLion rom mask
Command + Option + CIick Mask
ThumbnaiI (ControI + AIt + CIick
Mask ThumbnaiI)
SubLracL mask rom selecLion
Command + Option + 5hift + CIick
Mask ThumbnaiI (ControI + AIt +
5hift + CIick Mask ThumbnaiI)
lnLersecL mask rom selecLion
Q 1oggle Quick Mask mode
ln the CoIor Range DiaIog
Option (AIt) 1oggle Lhe ReseL buLLon and Lhe "SubLracL rom
Sample" Lool
Command (ControI) 1oggle beLween Lhe SelecLion view and lmage view
5hift 1oggle Lhe "Add Lo Sample" Lool
ln the LeveIs and Curves DiaIog
Option + 2, 3, 4 or 5 (AIt + 2, 3, 4 or
5)
Cycle Lhrough RC8, Red, Creen and 8lue channels
ln the Refine Mask DiaIog
J Show radius
P Show original
M Marching anLs
V Overlay
B On black
w On whiLe
K 8lack and whiLe
L On layers
R Reveal layer
l Cycle Lhrough view modes
(5hift + to cycIe
through)
Reine Radius Lool and Frase ReinemenLs Lool
Z Zoom Lool
H Hand Lool
CIone 5tamp and HeaIing Brush
Option + CIick (AIt + CIick) SeL Sample locaLion
Option + DoubIe-cIick (AIt + DoubIe-cIick) SelecL Aligned opLion (Clone
SLamp only)
lcr mcre shcrtcuts, see 3rushes. keybccrJ Shcrtcuts cn ce 74.
liIters
Command + l (ControI + l) LasL ilLer
Command + Option + l (ControI + AIt + l) LasL ilLer wiLh dialog
Command + 5hift + l (ControI + 5hift + l) Fade ilLer jusL applied
Chcter 7, xporting
Once ycuve clisheJ every lcst ixel, its
time tc et ycur wcrl intc the brcwser.
1his is c retty strcihtjcrwcrJ rccess,
but rcerly ctimizin ycur imces is
crucicl. Ycu neeJ tc mcintcin c bclcnce
between clcrity cnJ JcwnlccJ seeJ.
1his requires multile jcrmcts, vcryin
levels cj ccmressicn cnJ cther
ctimizcticn techniques. ln this chcter,
well exlcre the wcrljlcw cj excrtin
imces vic the Scve jcr Web cnJ
Devices Jiclc.
Chapter 7, xporting
5ave for web and Devices
Fvery image LhaL is exporLed and LhaL will ulLimaLely end up in a browser should be
senL Lhrough Lhe Save or Web and Devices dialog. 1his dialog provides everyLhing
you need Lo opLimize and save your images or Lhe Web. NoL only does iL save
images in a parLicular ormaL, iL gives you conLrol over qualiLy, Lransparency and
colors. 1weaking all o Lhese seLLings is key Lo reducing a ile's size while keeping Lhe
qualiLy as high as possible. 1his is increasingly imporLanL Loday, as more and more
people access Lhe Web via mobile devices, where smaller ile sizes are more crucial
Lo a smooLh experience.
We'll begin by examining Lhe inLerace o Lhe Save or Web and Devices dialog,
which can be accessed via Lhe File menu or by pressing Command - OpLion - ShiL
- S (ConLrol - AlL - ShiL - S). 1he irsL Lhing you'll likely noLice is Lhe large image
window. 8y deaulL, you should see one large image, which may look slighLly
dierenL rom your acLual ile. 1his is because you're currenLly viewing Lhe opLimized
version. 1here are our dierenL view opLions, which can be changed by Lhe Labs in
Lhe upper-leL corner. Original, OpLimized, 2-Up and 4-Up. 1he Original view shows
Lhe ile exacLly as iL appears ouLside o Lhe dialog. 1he OpLimized shows Lhe ile aLer
Lhe currenL compression seLLings have been applied. 2-Up and 4-Up spliL Lhe screen
inLo panels Lo allow you Lo compare Lhe dierences beLween Lhe original and
opLimized versions. 1he 4-Up view even allows you Lo LesL mulLiple seLLings. 8y
clicking inLo one o Lhe panels, you acLivaLe iLs seLLings, which can be changed
wiLhouL alLering any o Lhe oLher panels. 1his can be valuable or LesLing dierenL
compressions.
AL Lhe boLLom o each view panel is a brie summary o Lhe associaLed ile Lype,
along wiLh Lhe ile size and an esLimaLed download Lime. Remember, Lhe goal here is
Lo geL LhaL ile size down as low as possible wiLhouL disrupLing Lhe qualiLy. ou'll
wanL Lo keep a close eye on Lhis summary. l you like, you can change Lhe simulaLed
Chapter 7, xporting
download seLLings Lo geL a beLLer approximaLion o Lhe ile's speed by clicking Lhe
"SelecL Download Speed" buLLon.
1o Lhe righL o Lhe view panels are Lhe ile seLLings. 1his is where all o your
compression work will be done. 1hese opLions vary greaLly depending on Lhe ile
ormaL you're exporLing Lo. 1his dialog gives you access Lo ive dierenL ile ormaLs.
ClF, JPFC, PNC-8, PNC-24 and W8MP.
lormat 5pecific Options
Gll
1he Craphics lnLerchange FormaL (ClF) is greaL or saving logos, LexL and oLher
graphic images. 1his ormaL uses a lossless compression, meaning LhaL Lhe highesL
qualiLy is mainLained in Lhe process. However, Lhe ClF ormaL allows only 256 colors.
1haL is noL Lo say LhaL you can only choose beLween a seL number o 256 colors, buL
raLher LhaL Lhe ile is able Lo sLore up Lo 256 colors, rom which each pixel will be
Chapter 7, xporting
1he 4-U view
cllcws ycu tc
ccmcre three
Jijjerent
ccmressicn
settins ccinst
the criincl jile.
colored. 1his makes iL less Lhan ideal or phoLographs, buL perecL or images wiLh
large blocks o solid color.

Color ReJuction
l you seL Lhe OpLimized ile ormaL drop-down menu Lo ClF, you'll see a number o
opLions Lo conLrol how Lhe ClF will be compressed. 1he very irsL opLion is Lhe
paleLLe reducLion algoriLhm. 8ecause Lhe ClF ormaL can sLore only 256 colors in iLs
color Lable, PhoLoshop will run Lhe image Lhrough an algoriLhm Lo deLermine which
pixels Lo keep and which Lo discard.
Some o Lhe meLhods are sel-explanaLory, such as 8lack, WhiLe and Crayscale. Some
are basically useless, such as Mac OS and Windows, which aLLempL Lo simulaLe Lhe
Lypical gamuL o Lhose plaLorms. And Lhen Lhere's CusLom, which leLs you seL Lhe
enLire color paleLLe yoursel. 1his can be raLher Ledious, and you're beLLer o wiLh
one o Lhe remaining our meLhods. PercepLual, SelecLive, AdapLive or ResLricLive.
Chapter 7, xporting
1he Cll jcrmct
ccmresses imces
by excminin lcre
blccls cj similcr
cclcrs, mclin it
erject jcr lccs.
1he PercepLual algoriLhm prioriLizes colors LhaL Lhe human eye is mosL adapL aL
perceiving, buL iL is less accuraLe aL reproducing exacL color values. SelecLive
deLermines which colors are used Lhe mosL and in Lhe largesL concenLraLion, and iL
ensures LhaL Lhose are mainLained. 1his makes SelecLive a greaL choice or mosL
images. 1he AdapLive seLLing is similar Lo SelecLive, excepL LhaL iL prioriLizes colors
used LhroughouL Lhe enLire documenL as opposed Lo Lhose neighboring each oLher.
Finally, Lhe ResLricLive seLLing limiLs Lhe color Lable Lo Lhe ouLdaLed Web Sae color
paleLLe o 26 colors. 1his
paleLLe was used in Lhe
early ages o Lhe Web Lo
idenLiy colors LhaL could be
rendered by a majoriLy o
moniLors. 1oday, you'd be
hard-pressed Lo ind a user
who is using a moniLor wiLh
such a limiLed color paleLLe,
which makes Lhe ResLricLive
seLLing basically worLhless.
Colors
A ClF can sLore 256 colors
in iLs color Lable, buL iL can
also be manually resLricLed
Lo ewer. Lowering Lhe
number o colors can help
reduce Lhe size o Lhe ile
and can someLimes be done
wiLhouL degrading Lhe
image.
Chapter 7, xporting
limitin the cclcr tcble ccn scmetimes reJuce the jile size
withcut ncticecble Jitherin.
Dithering
Reproducing color gradaLions wiLh such a limiLed color paleLLe can prove quiLe
challenging. Fven a simple gradienL can conLain hundreds o shades, quickly illing
your color Lable. 8uL simply sLripping some o Lhe colors ouL can creaLe unwanLed
banding. 1o combaL Lhis, PhoLoshop leLs you run Lhe image Lhrough a DiLhering
algoriLhm, which sLraLegically disLribuLes pixels o dierenL colors Lhrough Lhe
gradaLion. 1his is similar Lo poinLillism, because iL relies on our eyes Lo mix Lhe
colors inLo a seamless gradaLion.
1here are our opLions
or diLhering. No DiLher
compleLely removes
diLhering, which can
resulL in color bands.
1he Diusion seLLing
applies a diuse
paLLern, which spaces
pixels ouL based on Lhe
concenLraLion o Lheir
color. PaLLern spaces
ouL pixels more evenly
Lo simulaLe a hal-Lone
paLLern, Lhis is more
sLylisLic Lhan realisLic.
Finally, Lhe Noise
seLLing is similar Lo Diusion, buL Lhe placemenL o pixels is more random, resulLing
in griLLier gradaLions. ln addiLion Lo Lhe diLhering algoriLhm, PhoLoshop allows you Lo
ine-Lune Lhe diLhering by speciying Lhe amounL.

Chapter 7, xporting
3eccuse Cll imces ccn stcre cnly 2S6 cclcrs, it hcs tc
ccmenscte jcr cther shcJes by Jitherin.
7ransarency anJ Matte
1he ClF ormaL allows -biL Lransparency, meaning LhaL a pixel can be eiLher ully
LransparenL or ully opaque. 1his can lead Lo awkwardly sharp edges and sLrangely
colored gradaLions. ou can modiy Lhe 1ransparency DiLher algoriLhm Lo help
smooLhen some o Lhe gradaLions, buL Lhey'll oLen appear griLLy.
1he besL way Lo achieve a smooLh Lransparency wiLh a ClF is Lo maLLe iL on Lhe LargeL
background color. Using Lhe MaLLe drop-down menu, you can selecL Lhe color Lo be
illed in areas wiLh varying Lransparency. For example, i a pixel has an opaciLy o
30%, PhoLoshop will essenLially ill in Lhe oLher 70% wiLh Lhe maLLe color, which
creaLes a blended color wiLh 00% opaciLy. 1his Lechnique works greaL when Lhe
Chapter 7, xporting
Ditherin mcJes.
1. Dijjusicn,
2. Pcttern,
J. Ncise
4. Ncne.
image will ulLimaLely reside above a solid color, buL iL will creaLe seams i placed on a
paLLern or gradienL.

InterlaceJ
lnLerlacing is an ouLdaLed meLhod o delivering iles LhaL allows users wiLh slow
connecLions Lo receive images in progressive segmenLs. Now LhaL a majoriLy o users
are on broadband connecLions, Lhis is rarely needed. lL also adds weighL Lo Lhe ile
size, so use only i necessary.
Web Sna
1his is anoLher deprecaLed opLion LhaL was used Lo shiL colors Lowards Lhe 26 Web
Sae color paleLLe. Nowadays, Lhis can jusL be leL aL 0%.
Lossy
1he Lossy seLLing sacriices Lhe qualiLy o Lhe image Lo reduce ile size. ldeally, you
would never have Lo change Lhis seLLing, buL iL mighL help i you don'L mind losing
some clariLy in Lhe image.
Chapter 7, xporting
1. Nc Mctte cn scliJ,
2. Mctte cn scliJ,
J. Nc Mctte cn
rcJient,
4. Mctte cn rcJient.
JPG
JoinL PhoLographic FxperLs Croup (JPFC) compression is drasLically dierenL rom ClF
or PNC compression (see pages 6 and 70). 1he biggesL disLincLion is LhaL JPFC is
a lossy ormaL, meaning LhaL iL compresses iles by reducing Lhe qualiLy o Lhe image.
When handled careully, Lhis loss o qualiLy is noL perceivable Lo Lhe human eye.
DespiLe Lhis compromise, JPFCs are ideal or phoLographs and oLher complex
imagery. JPFCs are also capable o embedding meLa daLa, which is useul or
including copyrighL and oLher inormaLion wiLh phoLographs.

Chapter 7, xporting
IPlC
ccmressicn
ccn crecte
unwcnteJ
crtijccts.
lxcessive
ccmressicn
ccn revecl cn
88 mcscic
cttern
(bcttcm).
Quality
1he QualiLy seLLing is Lhe primary means o compressing a JPFC. 1he lower Lhe
seLLing, Lhe more Lhe ile is compressed and Lhe worse Lhe image looks.
UnorLunaLely, Lhere are no magic numbers here. ou'll have Lo make a subjecLive
decision on how much Lo compress Lhe ile beore Lhe loss in qualiLy becomes
unaccepLable.
1he Quclity
settin is useJ
tc jinJ the
erject bclcnce
cj clcrity cnJ
jile size.

Chapter 7, xporting
Progressive
Progressive JPFCs download in sLages, much like inLerlaced ClFs. 1his allows users
wiLh a slow connecLion Lo see Lhe image more quickly buL aL very low qualiLy. 1he ile
Lhen gains qualiLy progressively. 1his requires Lhe ile Lo include more daLa and
Lhereore increases Lhe size. 1his is hardly needed in Loday's broadband world.
OtimizeJ
Checking Lhis opLion runs Lhe image Lhrough an addiLional compression Lechnique
(Human coding) Lo reduce Lhe ile size even urLher. Leaving Lhis opLion on is
recommended, because iL eecLively reduces ile size wiLhouL aecLing Lhe qualiLy o
Lhe image.
mbeJ Color Projile
JPFCs are able Lo sLore lCC proiles Lo inorm browsers how Lheir daLa should be
displayed. UnorLunaLely, a majoriLy o browsers compleLely ignore Lhe embedded
proile. For now, Lhis opLion is besL leL unchecked, buL as browsers evolve, we'll sLarL
Lo use Lhis opLion Lo improve Lhe delivery o images.
8lur
8ecause o how Lhe JPFC compression engine operaLes, blurry areas can be
compressed ar more Lhan areas wiLh sharp color variaLions. For Lhis reason,
PhoLoshop leLs you blur an image slighLly beore exporLing. O course, we rarely
wanL blurry images, buL Lhere are Limes when a very slighL blur will reduce Lhe ile
size jusL enough wiLhouL drasLically aecLing Lhe clariLy o Lhe image.
Matte
8ecause JPFCs don'L supporL Lransparency, any LransparenL areas will be illed wiLh
Lhe color seL by Lhe MaLLe opLion.
Chapter 7, xporting
PNG-8 and PNG-24
1he PorLable NeLwork Craphics (PNC) ormaL comes in Lwo varieLies. 1he irsL is
PNC-8 ormaL, which is similar Lo Lhe ClF ormaL. lL supporLs -biL Lransparency and
limiLs iLs color Lable Lo 256 values. 1he only real dierence is LhaL iL doesn'L supporL
animaLion. For deLails on PNC-8 seLLings, please reer Lo Lhe ClF seLLings on page
6.
1he second PNC ormaL is PNC-24, which provides Lhe besL qualiLy o all Lhe
aoremenLioned ormaLs. 1his is a compleLely lossless ormaL, meaning LhaL Lhe
image iLsel is noL aecLed by compression. PNC-24 also supporLs 8-biL
Lransparency. 8asically, whaL you see in Lhe original PSD is whaL you geL in Lhe
exporLed version. However, Lhis beauLiul ouLpuL comes aL a signiicanL cosL. because
Lhey conLain our lossless 8-biL channels, PNC-24 iles can be Lremendous in size.
Use only when appropriaLe.
1he seLLings here are
preLLy simple. ou can
Loggle Lransparency
and add inLerlacing
jusL like wiLh a ClF. ou
can also add a MaLLe
color, buL iL is added
only i 1ransparency is
o.
wBMP
Wireless 8iLmap
(W8MP) iles were
developed or use on
monochromaLic
Chapter 7, xporting
1he PNC-24 jcrmct nct cnly scves the imce ixel jcr ixel, it clsc
scves cn 8-bit clhc chcnnel jcr erject trcnscrency.
wireless devices. 1hey consisL o only black and whiLe pixels. PhoLoshop allows you
Lo conLrol Lhe diLhering algoriLhm and amounL o diLher. Chances are you'll never use
Lhis ormaL.
Other 5ettings
Convert to sRGB
l your working space is seL Lo anyLhing oLher Lhan sRC8, you can check Lhis opLion
Lo have PhoLoshop converL Lhe image Lo sRC8 beore iL exporLs Lhe ile. l you've
ollowed my recommendaLion in Lhe Color ManagemenL chapLer (page 0), you can
leave Lhis opLion unchecked.
Preview
1he Preview drop-down menu dicLaLes how Lhe image in Lhe opLimized panel is
prooed. l your moniLor is properly calibraLed and your working space has been seL
correcLly, you can seL Lhis Lo MoniLor Color Lo see how Lhe ile will appear when
viewed in Lhe browser. ou can also proo Lhe image Lo see how iL would appear on
Windows or Mac, or you can Lurn o Lhe proo by seLLing iL Lo Use DocumenL Proile.
Meta Data
l you'd like Lo pass inormaLion such as conLacL inormaLion, camera daLa and
copyrighL, you can add iL wiLh Lhe MeLa DaLa drop-down menu. 1his opLion conLrols
which daLa Lo include, buL Lhe daLa musL irsL be seL wiLh Lhe File lno dialog (File -
File lno). 1his inormaLion can be saved only in JPFCs.
CoIor TabIe
When working wiLh an indexed ile ormaL (ClF or PNC-8), you'll wanL Lo know
exacLly which colors are being embedded in Lhe ile. 1he Color 1able provides Lhis
inormaLion via swaLches. Fach swaLch represenLs one color in Lhe ile. From Lhis
Lable you can add, remove and Lweak colors.
Chapter 7, xporting
7ransarency. Clicking Lhis Loggles Lhe selecLed swaLches beLween ully LransparenL
and ully opaque.
Shijt/unshijt to Web Palette. 1his opLion shiLs Lhe selecLed color Lo iLs nearesL Web
Sae color. l already seL Lo a Web Sae color, Lhis shiLs iL back Lo Lhe original.
Lock Color. Locking a color wiLh Lhis buLLon ensures LhaL iL is noL dropped, regardless
o any oLher opLion LhaL would oLherwise remove iL.
AJJ swatch. l your documenL has ewer Lhan 256 colors, you can click Lhis buLLon Lo
add Lhe currenL Fyedropper color Lo Lhe Lable. ou'll noLice LhaL Lhe new color is noL
simply added as a new swaLch, insLead, Lhe color closesL Lo iL is converLed Lo LhaL
color. 1he swaLch is Lhen spliL in hal diagonally Lo display Lhe old color (upper-leL)
and Lhe shiLed color (boLLom-righL).
Chapter 7, xporting
1he Cclcr 1cble shcws
cll the cclcrs thct will
be scveJ in the jile.
lrcm here ycu ccn
cJJ, remcve cnJ
remc cclcrs cs
neeJeJ.
Delete swatch.
1o remove a color rom Lhe Lable, selecL iL - or hold Command (ConLrol) Lo selecL
mulLiple - and Lhen click Lhe 1rash icon.
lmage 5ize
l you need Lo resize an image beore exporLing iL, you can do so wiLh Lhe lmage Size
seLLings. Resize iL Lo speciic dimensions or a percenLage, and conLrol Lhe
inLerpolaLion algoriLhm wiLh Lhe QualiLy drop-down menu. However, l recommend
doing all o your resizing ouLside o Lhe Save or Web and Devices dialog.
Animation
1he animaLion seLLings, supporLed only in Lhe ClF ormaL, leL you conLrol Lhe ile's
loop seLLings and preview Lhe animaLion.
5Iices
Modern Web developmenL cenLers on semanLic mark-up and clean CSS. Lie,
however, was noL always so idealisLic. Web developers once had Lo rely on Lables Lo
consLrucL Lheir layouLs. 1his required perecLly aligned Lable cells conLaining images
LhaL were seamlessly sLiLched LogeLher. 1o speed Lhe process o building Lhese Lables
and cuLLing Lhe images jusL righL, PhoLoshop inLroduced Slices. 1his simple Lool leL
developers dicLaLe where images should be cuL and Lhen exporL Lhe individual
segmenLs as separaLe images. lL could even exporL Lhe H1ML needed Lo bring Lhe
images LogeLher in a Lable.
While Lhe developmenL communiLy has moved pasL Lable-based layouLs, Lhese sLill
serve a purpose. H1ML emails have meager and varying CSS supporL, which means
LhaL Lheir layouLs need Lo be consLrucLed wiLh Lables. Slices are sLill relevanL or Lhis
reason.
Chapter 7, xporting
CreaLing a slice is easily done wiLh Lhe Slice Lool (K). Simply click and drag ouL a
recLangle. 1he areas around your slice will be logically spliL inLo oLher slices, reerred
Lo as "auLo-slices." AuLo-slices work exacLly like "user slices" excepL LhaL you can'L
resize Lhem direcLly, buL you can promoLe Lhem Lo user slices using Lhe Slice
SelecLion Lool (ShiL - K Lo roLaLe beLween Lhe Slice Lool and Slice SelecLion Lool).
SelecL Lhe slice and click PromoLe.
Fach slice is delineaLed by a bounding box and numbered based on iLs posiLion
among Lhe oLher slices. ALer creaLing a slice, you can resize iL by dragging iLs
bounding box, and you can move iL by dragging inside Lhe bounding box. l one
slice overlaps anoLher, Lheir sLacking order deLermines how Lhe image is divided.

Chapter 7, xporting
An emcil sliceJ
intc tcble cells.
ou can modiy Lhe sLacking order by selecLing iL wiLh Lhe Slice SelecLion Lool and
using Lhe sLacking order buLLons in Lhe properLies bar. Slices higher in Lhe sLacking
order Lake precedence over Lhose lower down.
A slice basically represenLs a Lable cell, and PhoLoshop can exporL all o Lhe H1ML
necessary Lo build Lhe Lable. 1his is done Lhrough Lhe Save or Web and Devices
dialog. When you open Lhis dialog on an image wiLh slices, Lhings change slighLly. All
o Lhe same ile ormaLs and opLions are Lhere, buL you can now give each slice iLs
own seLLing.
Use Lhe Slice SelecL Lool in Lhe upper-leL corner o Lhe dialog Lo selecL one or
mulLiple slices. 1hen, seL Lhe compression deLails or Lhe selecLed slices, which won'L
aecL Lhe unselecLed ones. ou can easily selecL all o Lhe slices and apply a global
seLLing, buL you mighL be able Lo reduce Lhe ile size by seLLing each slice
individually, especially because some slices mighL work beLLer as JPFCs while oLhers
would beneiL rom ClF compression.
Fach slice also has some hidden seLLings LhaL deLermine how Lhe H1ML will be
wriLLen. Double-clicking a slice wiLh Lhe Slice SelecLion Lool opens Lhe Slice OpLions
dialog. Here you can change Lhe name, message and alL LexL, which conLrol Lhe
image Lag's lD aLLribuLe, sLaLus bar LexL and alL aLLribuLe, respecLively.
ou can also add a link Lo Lhe image by populaLing Lhe URL and conLrol Lhe link's
window LargeL wiLh Lhe 1argeL seLLing. l Lhe slice does noL conLain an image, you can
change Lhe Slice 1ype opLion Lo No lmage, and you'll Lhen be able Lo add LexL or
oLher H1ML in LhaL cell.
Chapter 7, xporting
When you've opLimized all o Lhe slices, click Lhe Save buLLon. AL Lhe boLLom o Lhe
Save OpLimized As dialog, you'll see Lhree opLions. FormaL, SeLLings and Slices.
FormaL conLrols whaL is exporLed (H1ML only, lmages only or H1ML and lmages).
SeLLings deLermines how Lhe images and H1ML are exporLed.
8y selecLing OLher, you gain access Lo a number o opLions Lo conLrol how Lhe H1ML
or XH1ML is wriLLen, how images should be named and wheLher Lo generaLe a Lable
or Dlvs and CSS. Upon clicking Save, all Lhe images are exporLed and Lhe H1ML is
wriLLen. While PhoLoshop can save you Lime by auLhoring Lhe H1ML, iL doesn'L
necessarily do a greaL job. ou'll probably need Lo manually clean up aLerwards.
Chapter 7, xporting
1he Slice
Oticns
Jiclc
Jetermines
hcw the H1Ml
will be
written.
Summcry
l really hope Lhis book has helped remove Lhe barrier beLween your creaLiviLy and
Lhe compuLer screen. MasLering your Lools is Lhe only way Lo achieve creaLive
reedom. 8uL PhoLoshop is an exLremely complex Lool, and conquering iL is by no
means easy. ears o pracLice and experimenLaLion are Lhe only real way Lo masLer
Lhis applicaLion, reading Lhis book is merely a caLalysL.
FxLending your PhoLoshop educaLion beyond Lhis book is crucial. FrequenLing
websiLes dedicaLed Lo PhoLoshop on a regular basis is a good sLarL. 8uL be warned.
many LuLorials you'll ind on Lhe lnLerneL rely on gimmicks and Lrends. SLeer clear o
Lhe shallow LuLorials, and ocus on Lhe ones wiLh principles, Lhey will help you grow
inLo a beLLer designer.
Once you undersLand Lhe undamenLals, l encourage you Lo experimenL. lnvesLigaLe
unamiliar Lools, apply senseless adjusLmenLs, deleLe imporLanL elemenLs and reely
make misLakes. LiLLle misLakes have a way o imparLing LidbiLs o knowledge and
sparking creaLiviLy. PhoLoshop is a design laboraLory. 1hrow on your lab coaL and
sLarL mixing Lhings up.
Finally, geL involved wiLh Lhe design communiLy. So many incredibly LalenLed people
are aL Lhe Lop o our ield, and Lhey're more accessible Lhan you mighL Lhink. CeL ouL
Lhere and connecL wiLh Lhem. Join 1wiLLer, aLLend conerences, Lake parL in online
discussions and share whaL you've learned. We all have someLhing valuable Lo
conLribuLe, and sharing LhaL knowledge ensures LhaL our indusLry will conLinue Lo
grow.
Smcshin e3ccl Series. =J | MasLering PhoLoshop or Webdesign | l77
Smcshin e3ccls Series
eBook #l. ProfessionaI web Design
1his book presenLs guidelines or proessional
Web developmenL, including communicaLing
wiLh clienLs, creaLing a road map Lo a successul
porLolio, rules or proessional neLworking and
Lips on designing user inLeraces or business
Web applicaLions. 1he book shares experL
advice, and iL also helps you learn how Lo
respond eecLively Lo design criLicism, use
sLoryLelling or a beLLer user experience and
apply color Lheory Lo your proessional designs.
Buy this eBook now for just $9.90!
eBook #2. 5uccessfuI lreeIancing lor web Designers
eing a greaL Web designer or developer is one
Lhing - running a successul reelance business
anoLher. WheLher you already have work
experience in companies or have jusL graduaLed
rom design school, being sel-employed
enLails a number o Lasks LhaL you mosL likely
haven'L had Lo deal wiLh so ar. As a reelance
Web designer, you also have Lo be a projecL
manager, accounLanL, conLroller and l1 experL.
Buy this eBook now for just $9.90!
Smcshin e3ccl Series. =J | MasLering PhoLoshop or Webdesign | l78

Smashing Ebook 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Smashing Ebook 3

Uploaded by

Copyright:

Available Formats

Smcshin e3ccl Series.

=J | MasLering PhoLoshop or Web Design | l

You might also like