Smcshinç e3ccl Series.

=J | MasLering PhoLoshop íor Web Design | l
´Phctcshcµ is c µcwerjul tccl, cnJ clthcuçh the bcsics ccn
be ecsy tc çrcsµ, mcsterinç the cµµliccticn ccn be
extremely Jijjicult. 1his is where Mcsterinç Phctcshcµ
ccmes in. it tcles recJers thrcuçh the cµµ in Jeµth cnJ
relctes cll tcsls bccl tc the crective µrccess. 1here´s much
tc lecrn in here, jcr beçinners cnJ exµerts 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 oíLen í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 liíespan oí only a íew monLhs. Rarely do
we íocus on Lhe íundamenLals, Lhe principles LhaL ouLlive Lhe Lrends.
UníorLunaLely, Lhe principles are oíLen less appealing Lhan Lhe shiny and
new. PhoLoshop LuLorials oííer 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 diííerence beLween Limeless and
Lrendy. lL increases our eííiciency 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 liíe. 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 poweríul 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Webdesign | 4
DeJiccteJ tc my relentlessly suµµcrtive wije, Mcççie,
withcut whcm this bccl wculJ nct be µcssible. 1hcnls jcr
µuttinç uµ with me!
- 1om
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Webdesign | 5
lmprinL
Published in July 20í0
Smashing Media CmbH, Freiburg, Cermany
8ook Cover Design. Andrea AusLoni
Prooíreading. 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
lmµrint 6
Chcµter 1, Cclcr Mcncçement 10
CalibraLing Lhe Display íí
lCC Proíiles í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
Chcµter 2, Pcths 20
8ézier 8asics 2í
PaLh CreaLion 1ools 2í
1he PeríecLionisL's Way 25
OLher CreaLion MeLhods 26
PaLh Usage 27
Quick 1ips 34
Keyboard ShorLcuLs 36
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Webdesign | 7
Chcµter J, lcyer Styles J9
8asics 40
FííecLs 40
8lend OpLions 44
ConLexLual ConLrols 49
Saving and Loading SLyles 50
Quick 1ips 5í
Chcµter 4, 3rushes S4
8asic SeLLings 55
Advanced SeLLings 59
Keyboard ShorLcuLs 74
Chcµter S, 1yµcçrcµhy 77
AnaLomy oí Lhe 1ype 1ool 78
CharacLer PaleLLe 79
FonL 80
Size and Spacing 8í
Color, 8aseline ShiíL and SLreLching 8í
Fauxs and varianLs 82
AnLi-Aliasing 83
FlyouL opLions 87
Paragraph PaleLLe 92
Quick 1ips 97
Clyph ShorLcuLs í00
Keyboard ShorLcuLs í07
Chcµter 6, Phctcçrcµhy 111
Carbage ln, Carbage OuL íí3
Resizing and lnLerpolaLion íí3
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Webdesign | 8
SmarL ObjecLs íí6
Color and 1one íí8
Repair í27
Sharpening í33
Masking í37
Quick 1ips í49
Keyboard ShorLcuLs í55
Chcµter 7, lxµcrtinç 1S9
Save íor Web and Devices í60
Slices í73
Summcry 177
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Webdesign | 9
Chcµter 1, CoIor Management
Mcintcininç c ccnsistent cµµecrcnce cn
the Web is Jijjicult beccuse ycu never
lncw the enJ user´s envircnment. 1hey
mcy be viewinç c website cn their hcme
ccmµuter 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 cutµut. Cclcrs ccn cµµecr liçhter cr
Jcrler, mcre cr less scturcteJ, cccler cr
wcrmer, cr just µlcin wrcnç JeµenJinç
cn the user´s envircnment. 1his ccn be
quite c µrcblem, esµeciclly with c client´s
brcnJ-sµecijic cclcrs As Web Jesiçners,
cur resµcnsibility is tc ensure thct the
exµeriences we crcjt cre cs true tc the
criçincl cs µcssible. 1c Jc this, ycu neeJ
tc mcncçe cnJ cliçn every steµ cj the
Jesiçn µrccess with hcw the mcjcrity cj
users will be viewinç ycur wcrl. 1his
requires c ccmµlex cnJ equclly
ccnjusinç system cj cclcr mcncçement.
While it Jcesn´t ccmµletely 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 workílow. CalibraLing your moniLor can be done wiLh soíLware,
buL iL is beLLer leíL Lo a colorimeLer. Purchasing a colorimeLer is a good idea ií you're
concerned abouL accuracy. A number oí companies sell aííordable soluLions. Monaco
OpLix, LaCie blue eye, baslCColor displaySQUlD, eLc. WheLher you use hardware or
soíLware Lo calibraLe your moniLor, leL your moniLor warm up íor abouL halí an hour.
Also ensure LhaL Lhe lighLing in Lhe room is soíL 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
deíaulLs 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
Chapter l, CoIor Management
1he lcCie blue eye cclcrimeter
(httµ.//bit.ly/cHµhAv)
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 speciíying vendor-neuLral color speciíicaLions, Lhe lCC has creaLed Lhe
abiliLy íor devices Lo inLerpreL and display color as inLended. ln order íor Lhe lCC
speciíicaLion Lo work, boLh devices and íiles need Lo have proíiles aLLached Lo Lhem.
An image íile's lCC proíile essenLially Lells Lhe device how Lo inLerpreL iLs color daLa,
and Lhe device's proíile Lells Lhe sysLem how Lo display LhaL color daLa.
8ecause Lhe sLandard
red, green and blue
proíile (or sRC8 lFC
6í966-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.
1hereíore, you should
creaLe all oí your work in
Lhis proíile Lo mainLain
maximum consisLency.
For more iníormaLion,
see Color SeLLings on
page í4.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l2
Chapter l, CoIor Management
1he sRC3 cclcr çcmut.
(httµ.//bit.ly/cYuSCv)
5etting Up Photoshop
AíLer 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 shiíLing 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 diííerenL plaLíorms.
CoIor Management ModuIe (CMM)
PhoLoshop works wiLh a Color ManagemenL Module (CMM), which is used Lo
converL colors beLween lCC proíiles. AL Lhe core oí Lhe module is Lhe Proíile
ConnecLion Space (PCS). 1his is Lhe engine LhaL processes a íile's raw daLa along wiLh
iLs lCC proíile and Lells Lhe LargeL device how Lo display iL based on iLs proíile.
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 shiíL, especially in Lhe blue
channel. 1his is because Lhe documenL is Lelling Lhe PCS LhaL Lhe íile should be
converLed íirsL Lo Lhe
sRC8 proíile and Lhen
converLed Lo Lhe
moniLor's proíile.
ln order Lo view Lhe
raw color values, we
can assign Lhe
documenL a diííerenL
proíile by going Lo
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l3
Chapter l, CoIor Management
Cclcr shijtinç jrcm rcw Jctc with cn sRC3 µrcjile cnJ mcnitcr µrcjile.
FdiL - Assign Proíile. lí we change Lhe Proíile in Lhe drop-down menu Lo our
moniLor's proíile, Lhen Lhe colors will shiíL Lo display aL Lheir acLual values. So, now
our documenL is Lelling Lhe PCS Lo converL Lhe raw daLa direcLly Lo Lhe moniLor's
proíile, Lhereby bypassing Lhe sRC8 conversion, which caused Lhe iniLial color shiíL.
1his can be quiLe coníusing, and discrepancies in Lhe working space can cause a
massive headache once you inLroduce Lhe browser inLo Lhe workílow. Many browsers
compleLely ignore embedded lCC proíiles, and Lhe ClF and PNC íormaLs don'L even
supporL Lhem. 1his leads Lo color shiíLs and can even cause browsers Lo render an
image diííerenLly. Luckily, Lhere's a way Lo simpliíy Lhe whole process. by properly
managing your working space.
CoIor 5ettings
lí leíL aL iLs deíaulLs, PhoLoshop will exporL íiles LhaL shiíL in color when viewed in Lhe
browser. 1his is due Lo PhoLoshop's deíaulL working space, which is Adobe RC8.
While Lhis proíile 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 proíile should maLch your moniLor's
proíile, while oLhers suggesL using sRC8. 8oLh oí Lhese meLhods can acLually achieve
Lhe same resulL, buL in diííerenL ways.
Using your moniLor's proíile as Lhe working space has Lhe beneíiL oí simpliciLy.
1here's no need íor any conversion or prooíing. 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 shiíL. 1his meLhod is exLremely simple and works well íor
a one-person shop. However, you are essenLially binding Lhe documenL Lo Lhe
moniLor's proíile. lí you were Lo open Lhe PSD on a diííerenL machine, Lhe color
values will remain Lhe same, buL Lhey will display diííerenLly, which can be quiLe
deceiving.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l4
Chapter l, CoIor Management
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 proíile
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
proíile and Lhe browser is adepL aL inLerpreLing iL).
1his can be easily remedied by working wiLh a soíL 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í prooíing.
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
proíile. 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 Proíile" 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
lFC6í966-2.í. ¥ou'll also
noLice a number oí oLher
seLLings in Lhis dialog.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l5
Chapter l, CoIor Management
1he Cclcr Settinçs Jiclcç with the RC3 Wcrlinç Sµcce set tc
sRC3.
Aside. Modern Browsers and CoIor Management
ln Lhe pasL, all browsers compleLely ignored embedded lCC proíiles. However, more
and more browsers are sLarLing Lo accepL Lhem. Once all browsers are up Lo daLe on
color managemenL, your workílow 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 proíile when saving your íiles by checking Lhe
"Fmbed Color Proíile" opLion.
CoIor Management PoIicies
1he Color ManagemenL Policies secLion gives you conLrol over how discrepancies in
proíiles are handled. For example, when copying and pasLing an image wiLh a proíile
oLher Lhan Lhe currenL working space, you'll wanL Lo conLrol how LhaL íile is
converLed. l recommend leaving RC8, CM¥K and Cray on "Preserve Fmbedded
Proíiles," wiLh boLh oí Lhe Proíile MismaLches checked. When you open or pasLe a íile
wiLh an opposing proíile, PhoLoshop will ask wheLher you'd like Lo converL Lhe íile Lo
Lhe currenL working space, keep Lhe currenL proíile or ignore color managemenL
alLogeLher.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l6
Chapter l, CoIor Management
When c jile´s
µrcjile Jcesn´t
mctch the
current
wcrlinç
sµcce, the
Cclcr
Mcncçement
Pclicies
Jetermine
hcw tc
hcnJle the
Jiscreµcncy.
NoLe LhaL Lhe conversion process írom one proíile Lo anoLher is desLrucLive. 1he
sRC8 color space is, in íacL, signiíicanLly smaller Lhan, say, Adobe RC8. 1hereíore,
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 proíile are converLed Lo anoLher. 1hese are preLLy
advanced opLions and probably don'L need Lo be alLered íor a Lypical Web design
workílow. 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 useíul when working on Lhe Web. 1hey're
basically used Lo simulaLe oLher devices and prinL ouLpuL. On Lhe whole, Lhese
opLions can all be leíL as Lhey are.
Assign ProfiIe
1he "Assign Proíile" opLion can be used Lo change Lhe proíile associaLed wiLh a
documenL wiLhouL acLually converLing Lhe daLa. 1his can be helpíul ií a documenL
has somehow losL iLs proíile buL you know Lhe proíile LhaL should be associaLed wiLh
iL. OLherwise, using Lhis opLion is a shoL in Lhe dark. ¥ou can cycle Lhrough diííerenL
proíiles and mighL hiL one LhaL properly reproduces Lhe original.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l7
Chapter l, CoIor Management
1he Assiçn Prcjile Jiclcç ccn be useJ tc shijt cn imcçe´s µrcjile withcut ccnversicn cr çcmut
cliµµinç.
Convert to ProfiIe
lí an image conLains a proíile oLher Lhan Lhe currenL working space, iL will need Lo be
converLed beíore iL can be included in your sRC8 documenL. As sLaLed, converLing a
documenL Lo a diííerenL proíile will resulL in desLrucLion oí Lhe raw daLa. 1hereíore,
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 diííerenL algoriLhms. Fach algoriLhm (or "lnLenL" as iL's
reíerred Lo in Lhe dialog) specializes in a diííerenL kind oí conversion. SLicking wiLh
Lhe deíaulL 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 eííecL in converLing
phoLographs. Finally, Lhe "SaLuraLion" inLenL pumps up Lhe saLuraLion wiLhouL sLaying
Lrue Lo Lhe original colors and Lheir relaLiviLy Lo each oLher.

Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l8
Chapter l, CoIor Management
1he ´Ccnvert tc Prcjile¨ Jiclcç ccnverts rcw cclcr Jctc tc jit the çcmut cj the Destincticn
Sµcce.
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 coníusing, 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l9
Chapter l, CoIor Management
Chcµter 2, Paths
Phctcshcµ is such c rcbust cµµliccticn
thct µerjcrminç c simµle 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 methcJclcçy µrcves
tc be suµericr.
Usinç µcths is cne methcJ thct will
chcnçe ycur entire cµµrccch tc Web
Jesiçn. 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.
Desµite the ecse cnJ µrecisicn cjjcrJeJ
by µcths, mcny Jesiçners shy cwcy jrcm
them - µerhcµs beccuse lllustrctcr is
reçcrJeJ cs AJcbe´s vectcr µlctjcrm cnJ
Phctcshcµ µrimcrily cs the rcster
µlctjcrm. While lllustrctcr´s vectcr tccls
cre much mcre µcwerjul, Phctcshcµ´s
cJJeJ benejit lies in its cbility tc blenJ
vectcr cnJ rcster Jctc tcçether
secmlessly. 3eccuse Phctcshcµ
Jccuments cre bcseJ cn c µixel çriJ, the
µcth tccls mcle them suµericr tc
lllustrctcr jcr Jesiçninç cn-screen meJic.
ln this chcµter, we´ll ccver the tccls
necesscry tc crecte jlexible cnJ µixel-
µerject interjcce elements with µcths.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 20
Chapter 2, Paths
Bézier 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 indeíiniLely wiLhouL losing Lhe smooLhness oí
Lheir curves (reíerred Lo as 8ézier curves). PhoLoshop provides a number oí Lools LhaL
allow you Lo creaLe and modiíy 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
comíorLable wiLh iL, buL masLering Lhe Pen 1ool is well worLh Lhe Lime invesLed.
PhoLoshop provides Lwo diííerenL pen Lools. Lhe sLandard Pen and Lhe Freeíorm Pen.
AlLhough iL requires manually drawing every line segmenL, Lhe sLandard Pen 1ool is
besL suiLed Lo nearly every Lask. 1he Freeíorm 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.

Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 22
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 poweríul 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 23
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
useíul 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
diííerenL modes. 1hese modes speciíy how Lhe Lool will implemenL Lhe shape. as a
shape layer, as a paLh or by íilling pixels. For more iníormaLion on Lhese modes, reíer
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 deíaulL library is limiLed, buL oLher libraries oí cusLom
shapes are accessible írom Lhe Shape drop-down's ílyouL menu. 1o deíine your own
cusLom shape, selecL Lhe shape's paLh using Lhe PaLh SelecLion 1ool (A), righL-click
inside Lhe canvas, selecL "Deíine CusLom Shape," name iL and click OK. 1he shape will
Lhen be appended Lo Lhe Shape drop-down in Lhe properLy bar.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 24
Chapter 2, Paths
AJvcnceJ Shcµe 1ccl settinçs.
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 períecLly 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 sacriíicing Lhe abiliLy Lo ediL Lhe LexL, Lhis Lechnique is mosL useíul 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 25
Chapter 2, Paths
On- cnJ cjj-µixel eJçe ccmµcriscn.
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
eííecLively recreaLe
Lhe original shape.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 26
Chapter 2, Paths
1yµe-tc-µcth ccnversicn.
Selecticn-tc-µcth ccnversicn.
lmporting and £xporting
While PhoLoshop provides vecLor Lools LhaL are suííicienL í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 diííiculL. 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 períecLly 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 deíine 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 27
Chapter 2, Paths
PaLhs creaLe a Lemporary Work PaLh accessible in Lhe PaLhs paleLLe, which makes iL
available íor many diííerenL implemenLaLions. Fill Pixels painLs rasLer daLa on Lhe
currenL layer, leaving no paLhs behind.

5hape Layer
Shape layers are Lhe key Lo ílexible inLeríace 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 28
Chapter 2, Paths
Pen 1ccl set
tc crecte c
Shcµe lcyer.

Crectinç c çrcJient shcµe 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 speciíy 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 oíLen preíerable 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 poweríul 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.


Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 29
Chapter 2, Paths
Type Paths. ln and On
1here are Lwo ways
Lo use paLhs wiLh
Lhe Lype Lool. by
deíining 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. AíLer
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 helpíul
when wrapping LexL around an objecL.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 30
Chapter 2, Paths
1yµe cn c µcth.
1yµe 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 - ShiíL - N (ConLrol
- AlL - ShiíL - 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.

Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 3l
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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 32
Chapter 2, Paths
3cclecn mcJes.
Add (+). speciíies a íill area.
5ubtract (-). deíines 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 diííerenL wiLh swapped depLhs. A paLh's 8oolean operaLor Lakes eííecL
on all oí Lhe paLhs below iL. UníorLunaLely, 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.

Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 33
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 inLeríace design. ¥ou'll undoubLedly need Lo
creaLe many oí Lhem, and mainLaining a consisLenL sLyle íor every buLLon will
maximize usabiliLy. 8y simpliíying 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 34
Chapter 2, Paths
ReJucinç
ccmµlexity 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 leíL 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. Modiíy Lhe leíL 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 eííecLs 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 modiíy Lhe
paLh, and Lhe LexL will auLomaLically wrap inside Lhe shape.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 35
Chapter 2, Paths
Keyboard 5hortcuts
Pen TooI (P)
5hift + P
Loggle beLween Pen 1ool and Freeíorm
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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 36
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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 37
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 1ransíorm PaLh
Command + 5hift + T (ControI + 5hift
+ T)
Free 1ransíorm PaLh again
Command + C (ControI + C)
copy paLh or anchor poinL wiLh
neighboring poinLs
Command + X (ControI + X) cuL paLh or anchor poinL wiLh
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 38
Chapter 2, Paths
Chcµter J, Layer 5tyIes
ln the µrevicus chcµter, we ccvereJ the
benejits cj usinç µcths in ycur
Jccuments, but µcths clcne ccn mcle
jcr c rcther Jull Jesiçn. 1his is where
Phctcshcµ´s lcyer Styles ccme in. 1hey
cllcw ycu tc cJJ Jeµth cnJ tcctility, cnJ
beccuse they ccn be ecsily ccµieJ cnJ
mcJijieJ, they helµ mcintcin ccnsistency
ccrcss Jijjerent elements cj c website.
lcyer Styles cre essenticl tc crectinç
jlexible cnJ ncn-JeçrcJcble Jccuments,
beccuse they´re seµcrcteJ jrcm the
lcyer´s cctucl ccntent. ln this chcµter,
we´ll ccver hcw tc crecte çrect-lcclinç
cnJ reuscble styles. We´ll clsc ccver
scme unique ejjects cnJ ncn-tyµiccl uses
thct helµ tc ccnscliJcte excess lcyers.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 39
Chapter 3, Layer 5tyIes
Basics
Layer SLyles are a seL oí commonly used eííecLs LhaL can be applied Lo a layer
wiLhouL aííecLing Lhe daLa oí Lhe layer iLselí. 8eíore Layer SLyles were inLroduced,
Lhese eííecLs had Lo be creaLed manually using numerous layers and adjusLmenLs.
1his oíLen resulLed in a mess oí layers jusL Lo creaLe one simple eííecL. Now wiLh a
íew clicks, we can easily creaLe, duplicaLe,
modiíy 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 eííecL.
£ffects
Along Lhe leíL side oí Lhe dialog box is a menu wiLh a number oí eííecLs. Adding an
eííecL can be as simple as clicking one oí Lhe check boxes. However, Lhe deíaulL is
rarely appropriaLe. 1o access more opLions íor Lhe eííecL, you musL click on iLs name.
Fach eííecL 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 40
Chapter 3, Layer 5tyIes
1he 'AJJ c lcyer style' menu çives
ycu quicl cccess tc inJiviJucl ejjects.
are some Lechniques you can employ Lo maximize your eííorL. 8elow are some Lips
Lo help you geL beLLer resulLs írom your layer sLyles.
BIend Modes for Better CoIor
1he deíaulL blend modes íor some oí Lhe eííecLs are good enough, buL Lhey can
oíLen 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 eííecLs
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 eííecLs. 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 4l
Chapter 3, Layer 5tyIes
Chcnçinç the blenJ mcJe jrcm Multiµly (lejt) tc linecr 3urn (riçht) 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 eííecL isn'L visible when anoLher eííecL 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.
UníorLunaLely, Lhe Layer SLyles menu doesn'L allow you Lo rearrange Lhe order oí
eííecLs. One way around Lhis (alLhough you will sacriíice Lhe abiliLy Lo ediL) is Lo use
CreaLe Layers, which will Lurn all oí your Layer SLyle eííecLs inLo acLual layers LhaL you
can Lhen move (see page 50).
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 42
Chapter 3, Layer 5tyIes
Usinç the scme lcyer style with cclcr-inJeµenJent 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 suríace 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 43
Chapter 3, Layer 5tyIes
3evel cnJ lmbcss (lejt) ccn quiclly cJJ Jimensicn, but it crectes unsiçhtly
riJçes. Usinç c ccmbincticn cj lnner ShcJcw cnJ lnner Clcw ccn crecte
much smccther results, even thcuçh ycu sccrijice certcin çrcJcticns.
Change the Light's AngIe
1he lnner Shadow and Drop Shadow eííecLs are casL based on Lhe Angle seLLing. 8y
deíaulL, Lhis is seL Lo í20°, which corresponds Lo our gesLalL's preíerence íor an
upper-leíL lighL source. 1his, however, is noL always ideal. ln íacL, because Lhis angle
is slighLly more upward Lhan leíLward, adding a LighL drop shadow can look
awkward.
Changing iL Lo í35° will give you
períecLly upper-leíL angled
eííecLs. 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 eííecLs 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 poweríul 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 eííecLs.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 44
Chapter 3, Layer 5tyIes
1he Jejcult 120° liçht cnçle (lejt) renJers
csymmetriccl shcJcws. Chcnçinç it tc 1JS° evens
thinçs cut (riçht).
Advanced BIending
ln Lhe Advanced 8lending secLion are some really poweríul seLLings LhaL are oíLen
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 eííecLs 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 aíLer 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 45
Chapter 3, Layer 5tyIes
1he Chcnnels
checl bcxes cllcw
ycu tc tcççle
inJiviJucl
chcnnels cj the
current lcyer.
Abcve, the
criçincl µhctc
(lejt) cnJ its reJ
cnJ çreen
chcnnels (riçht).
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 eííecLs are deíined. 8y deíaulL, "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
aííecL Lhe layer Lhey're clipped Lo. WiLh Lhis opLion selecLed, all clipped layers will
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 46
Chapter 3, Layer 5tyIes
1he kncclcut
ccmmcnJ cllcws c
lcyer tc cut thrcuçh
the lcyers belcw it.
Shcllcw (tcµ) cuts
thrcuçh cll lcyers in
the current çrcuµ,
cnJ Deeµ (bcttcm)
cuts thrcuçh the
3cclçrcunJ lcyer cr
(ij cne Jces nct exist)
cllcws jull
trcnsµcrency.
í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 eííecLs are consLrained.
lí checked, Lhe layer's daLa acLs as bounds íor Lhe eííecLs. OLherwise, Lhe bounds will
be Lhe enLire canvas, and cerLain eííecLs will noL render.
1he 8lend lnLerior FííecLs as Croup opLion will cause all eííecLs LhaL modiíy Lhe
original layer daLa Lo acL as parL oí iL. For example, ií a layer has a deíaulL 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 FííecLs
as Croup, Lhen Lhe
gradienL will also
adopL Lhe 0%
opaciLy.
1he íinal Lwo
opLions ("Layer Mask
Hides FííecLs" and
"vecLor Mask Hides
FííecLs") modiíy Lhe
bounds LhaL deíine Lhe eííecLs. When Lhey're boLh unchecked, any opaque areas oí
Lhe layer are used Lo deíine Lhe bounds. 1urning one oí Lhese opLions on removes
Lhe mask's iníluence on Lhe boundaries and insLead hides any eííecLs lying ouLside oí
iLs acLive area.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 47
Chapter 3, Layer 5tyIes
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
poweríul 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 leíL
in Lurn causes Lhe lighLesL
pixels Lo disappear. 1his is exLremely helpíul 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 48
Chapter 3, Layer 5tyIes
1he 3lenJ lj sliJers mcle shcrt wcrl cj simµle extrccticns
3y Jejcult, ejjects cren´t
hiJJen by lcyer cr vectcr
mcsls (lejt). Chcnçinç
this tc lcyer Mcsl HiJes
ljjects (miJJle) cr vectcr
Mcsl HiJes ljjects
(riçht) helµs smccthen
cut strcnçe 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 eííecLs lisL, you can
quickly access Lhe blending opLions or any oí Lhe eííecLs. WhaL's more, you're also
given copy, pasLe and clear conLrols and Lhe abiliLy Lo show or hide all eííecLs, creaLe
layers and conLrol Lhe global lighL.
Copy, Paste and CIear Layer 5tyIe
SelecLing Copy Layer SLyle will copy all oí Lhe eííecLs oí Lhe currenL layer, aíLer which
you can use Lhe PasLe Layer SLyle command Lo apply Lhe same eííecLs 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 diííerenL layer, however, Lhis will noL copy
any blending opLions.
Clear Layer SLyle allows you Lo remove all eííecLs and blending opLions írom Lhe
selecLed layer. AlLernaLively, ií you'd like Lo remove only Lhe eííecLs, 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 FííecLs is an inLeresLing opLion. lL allows you Lo hide noL only Lhe eííecLs on
Lhe selecLed layer buL all oí Lhe eííecLs in Lhe documenL. 1his can be useíul when
inspecLing Lhe core sLrucLure oí a websiLe and Lhe sLyles have become disLracLing.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 49
Chapter 3, Layer 5tyIes
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
sacriíice 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 eííecLs
on Lhe original layer (e.g. Lwo sLrokes)
or apply eííecLs Lo eííecLs Lhemselves
(e.g. sLrokes wiLh sLrokes).
GIobaI Light
lí you're applying a global lighL Lo your sLyles, you can quickly modiíy Lhe angle and
alLiLude írom Lhe FííecLs 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." AíLer 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 50
Chapter 3, Layer 5tyIes
1he Crecte lcyers ccmmcnJ cllcws ycu tc
chcnçe the stcclinç crJer cj ejjects.
dialog. ¥ou mighL also wanL Lo preseL a sLyle beíore 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
useíul. 8ecause you're sLripping away only Lhe original layer daLa, your layer sLyles
will display aL Lheir respecLive opaciLies - essenLially creaLing an eííecLs-only layer.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 5l
Chapter 3, Layer 5tyIes
3uilJinç c
librcry cj styles
ccn be reclly
usejul jcr lcrçe
µrcjects,
esµeciclly when
multiµle
Jesiçners 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 diííiculL. 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 períecLly in line.
Letterpress Type
A popular eííecL 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 eííecL 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 eííecL.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 52
Chapter 3, Layer 5tyIes
A 0º jill
cµens 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 beauLiíul sLyle is desLroyed.
ForLunaLely, PhoLoshop provides a meLhod íor adjusLing ouL-oí-whack sLyles. Simply
choose Layer - Layer SLyle - Scale FííecLs, 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 eííecL, 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 eííecL 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 53
Chapter 3, Layer 5tyIes
Drcµ
shcJcws ccn
be useJ tc
crecte c
subtle
letterµress
ejject.
Chcµter 4, Brushes
Wcbi-scbi is the trcJiticncl Icµcnese
cesthetic cj the imµerject. lt µrcmctes
the becuty cnJ humcnness cj wcrn,
ncturclly cçeJ cbjects. lcr excmµle, the
µctinc cj cn cncient brcnze stctue cJJs
cn cµµrecicble imµerjecticn. 1he imµlieJ
histcry cnJ ncturclness cJJ c sense cj
leçitimccy cnJ uniqueness thct c new
stctue simµly ccn´t µrcviJe.
Mcny websites tcJcy cre lile new
stctues, with µerjectly µclisheJ Jesiçn
elements, crisµ eJçes cnJ çecmetric
shcµes. While this mcles jcr clecn, ecsy-
tc-use interjcces, it ccn clsc crecte c
rcther cclJ user exµerience. lntrcJucinç
scme imµerject Jesiçn elements ccn
helµ cut thrcuçh the stcrl µrecisicn cnJ
µrcJuce c wcnJerjully unique cesthetic.
Phctcshcµ´s tccls cre JesiçneJ tc
execute with cbsclute µrecisicn. 1he
exceµticn is the brush tccl, which is
ccµcble cj cJJinç rcnJcmness cnJ
imµerjecticn. Mcsterinç the Jiçitcl 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 multiµlieJ by the Jisccnnect
between the hcnJ cnJ mcnitcr.
Develcµinç Phctcshcµ brush slill tcles
time, but it is well wcrth the ejjcrt.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 54
Chapter 4, Brushes
Basic 5ettings
Along Lhe brush's properLies bar are some simple yeL poweríul 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
modiíy 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 - ShiíL (AlL - ShiíL - RighL-
click) and drag Lhe mouse leíL 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 55
Chapter 4, Brushes
1he brush menu is ecsily cccessible by riçht-
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 circumíerence. For broad alLeraLions Lo Lhis seLLing, use Lhe keyboard shorLcuLs
ShiíL - ] and ShiíL - [ 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
eííecL 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 deíaulLs 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 aííecL 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 aíLer Lhe íacL, because Lhen you would be using
blending modes on Lhe layer's paleLLe.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 56
Chapter 4, Brushes
1he cn-ccnvcs Jrcç shcrtcuts mcle Jicmeter cnJ
hcrJness cJjustments simµle 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 helpíul 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.

Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 57
Chapter 4, Brushes
Settinç the
mcJe chcnçes
hcw the µcint
cjjects the
lcyer´s current
µixels.
1he 3ehinJ
mcJe cllcws
ycu tc µcint
strictly in
trcnsµcrent
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
eííecL. ¥ou can quickly seL Lhe OpaciLy oí a brush using Lhe number keys (5 is 50%, 65
is 65%). 8y holding ShiíL 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 58
Chapter 4, Brushes

Oµccity cnJ
llcw bcth
ccntrcl the
brush´s
trcnsµcrency
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 wonderíul 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 deíaulLs 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."
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 59
Chapter 4, Brushes
1he brushes in the 3rush Presets list cre nct just brush
shcµes. scme clsc hcve cJvcnceJ settinçs.
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 ¥ modiíy Lhe orienLaLion oí Lhe brush. SeLLing Roundness Lo lower Lhan í00%
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 60
Chapter 4, Brushes
Crectinç c
custcm brush
shcµe is the
jirst steµ tc
crectinç c
ccmµletely
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. 1hereíore, 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 oíLen 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 aííecL PhoLoshop's
períormance. SeLLing iL Lo í%
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 6l
Chapter 4, Brushes
Over-sizinç c brush ccn ccuse unwcnteJ µixellcticn.
1his ccn be remeJieJ with the Use Scmµle Size buttcn.
1he 3rush 1iµ Shcµe menu ccntrcls the µrimcry shcµe cj
the brush.
can produce smooLher edges, buL a large or complex brush can seriously bog down
PhoLoshop. lí períormance 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 noLiíy you.
Off
ConLrol is compleLely
negaLed wiLh Lhe Oíí seLLing,
which means LhaL values will
remain consisLenL LhroughouL
Lhe sLroke oí Lhe brush.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 62
Chapter 4, Brushes
Withcut c ccntrcl set, ecch scmµle cj the brush remcins
ccnsistent.

Sµccinç çrectly
cjjects the
smccthness cj
ycur brush but
ccn clsc imµcct
renJerinç sµeeJ.
lade
1he Fade conLrol allows you
Lo speciíy Lhe number oí
sLeps over which Lhe seLLing
will incremenLally decrease
unLil iL reaches iLs minimum.
So, by deíaulL, 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 speciíy 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
useíul seLLing buL requires a
pressure-sensiLive LableL
device. lL deLermines values
based on how hard you press
Lhe pen Lo Lhe pad. 1his oíLen
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 períecLly perpendicular Lo Lhe LableL, Lhe variance is seL Lo 0%. As
you LilL Lhe pen, Lhe values increase. 1his seLLing is especially helpíul íor conLrolling
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 63
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 leíL oí Lhe LableL will poinL
Lhe brush Lo Lhe leíL.

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
helpíul íor quickly changing
seLLings beLween sLrokes,
alLhough using iL Lo change
values during a
sLroke is diííiculL.

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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 64
Chapter 4, Brushes
3y settinç the Ançle Ccntrcl tc Pen 1ilt, ycu ccn mctch
the brush tiµ´s rctcticn tc ycur hcnJ´s 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 useíul í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 diííerenL 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 65
Chapter 4, Brushes
1he jirst mcvement ycu mcle usinç the brush Jetermines
the cnçle when usinç the lniticl Directicn ccntrcl.
1he Directicn ccntrcl rctctes ycur brush sc thct it
ncturclly jcllcws the curve cj the strcle.
1he Shcµe Dyncmics´ jitter ccntrcls ccn be useJ tc cJJ
vcricticn tc the brush shcµe.
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 deíaulL,
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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 66
Chapter 4, Brushes
Scctterinç ccn cJJ c lively rcnJcmness tc c strcle.
Texture
Adding a LexLure Lo your brush can give a wonderíul sense oí depLh. PhoLoshop
allows you Lo apply any oí your 1exLure preseLs Lo Lhe brush. ¥ou can Lhen modiíy
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
diííerenLly here. For example, you would Lhink LhaL seLLing Lhe Mode Lo MulLiply on a
brush LhaL is compleLely black wouldn'L have any eííecL. 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 67
Chapter 4, Brushes
Usinç c texture cJJs tcctility cnJ Jeµth 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 eííecLs LhaL you could never creaLe wiLh a single brush. As Lhe name implies,
Lhis seLLing uses Lwo diííerenL 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 diííerences you seL in Shape, Spacing,
ScaLLering, CounL and Mode make íor a more dynamic and naLurally random brush
sLroke.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 68
Chapter 4, Brushes
Ccmbininç
brush shcµes
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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 69
Chapter 4, Brushes
Hue, Scturcticn cnJ 3riçhtness Iitters ccn be useJ tc cJJ
vcricticn tc the jcreçrcunJ cclcr´s µrcµerties.
1he lcreçrcunJ/3cclçrcunJ 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 70
Chapter 4, Brushes
Oµccity cnJ llcw Iitters bcth chcnçe the trcnsµcrency cj
ecch brush tiµ shcµe, but the llcw Iitter cllcws the scmµles
tc ccmµcunJ.
1he Purity sliJer sets c threshclJ jcr ecch brush scmµle´s
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 eííecL 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 diííerenL brush preseL, Lhe seLLings írom
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 7l
Chapter 4, Brushes
LhaL menu carry over Lo Lhe new preseL. 1his is handy when you need a similar eííecL
buL don'L wanL Lo rebuild iL wiLh a new brush shape.
Resetting
1he 8rushes PaleLLe has Lwo diííerenL 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 Preíerences
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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 72
Chapter 4, Brushes
Chcnçinç the curscr miçht ç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 modiíying 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 ShiíL 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 ShiíL-click aL anoLher poinL, and you'll geL a
períecLly 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 helpíul ií you have a Lricky curve or complex shape Lo
painL.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 73
Chapter 4, Brushes
Cliclinç tc stcrt c
line cnJ then
hclJinç Shijt cnJ
cliclinç scmewhere
else will µcint c
µerjectly strciçht
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 eííecLs. 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 74
Chapter 4, Brushes
Strclinç c µcth with ycur brush çives ycu
µerject ccntrcl cver the strcle´s 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 75
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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 76
Chapter 4, Brushes
Chcµter S, Typography
WcrJs mcy be clecr cnJ ccncise, but
tyµcçrcµhy is the vcice thct ccrries them intc
cur subccnscicus. 1yµcçrcµhy hcs the cbility tc
evcle jeelinçs cnJ jcrçe imµressicns çrecter
thcn the wcrJs it renJers. lven bcJ tyµcçrcµhy
ccn be extremely µcwerjul. We´ve cll lcnJeJ cn
websites with briçht reJ text cn cn even
briçhter blue bcclçrcunJ, cnJ strcineJ cur
eyes tc recJ three µcrcçrcµhs cver minutes
thct we wisheJ we cculJ tcle bccl.
Pccr tyµe ccn instcntly ruin c visitcr´s
imµressicn cj ycur brcnJ cnJ its reµutcbility.
Sc, unJerstcnJinç the ins cnJ cuts cj cn-screen
tyµcçrcµhy is criticcl. While the mcjcrity cj
tyµe cn the Web is renJereJ by H1Ml,
Phctcshcµ is still necesscry tc hcnJle trectment
beycnJ the çrcsµ cj CSS. ln this chcµter, we´ll
exµlcre Phctcshcµ´s tyµe tccls cnJ Jisccver
wcys tc mcximize the scjtwcre´s tyµesettinç
ccµcbilities.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 77
Chapter 5, Typography
Anatomy of the Type TooI
PhoLoshop's 1ype 1ool is preLLy
sLraighLíorward. Click inside Lhe
documenL and you can add a
Lype layer, which is reíerred 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 speciíy a single
poinL írom which Lhe íirsL baseline
oí Lhe LexL is seL. 1he LexL ílows
írom Lhis poinL on Lowards iníiniLy
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 speciíying 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 78
Chapter 5, Typography
1he three mcin imµlementcticns cj the tyµe tccl.
Type Paths
1here are Lwo ways paLhs can be used wiLh Lhe Lype Lool. by deíining 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.
AíLer 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í MicrosoíL'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 proíessional íeel. NoneLheless,
you can access Lhe Warp 1exL dialog in Lhe 1exL 1ool's properLies bar. Choose írom a
number oí diííerenL 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 soíLware íor creaLive proíessionals. UndersLanding how and
how noL Lo use Lhis paleLLe is exLremely imporLanL Lo seLLing Lype.

Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 79
Chapter 5, Typography
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.
AíLer 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 80
Chapter 5, Typography
Phctcshcµ´s
Chcrccter µclette
(lejt) cjjers mcny
unµrcjessicncl
cµticns. 1he
µclette cn the
riçht is mcre
cµµrcµricte jcr
scmecne whc is
sericus cbcut
tyµcçrcµhy.
1he jcnt vcricnt Jrcµ-Jcwn menu çives
ycu cccess tc mcny styles JeµenJinç 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 modiíy 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 useíul and Lwo absurd ones. We'll sLarL wiLh Lhe
opLions you should acLually use. 1he Color opLion allows you Lo modiíy Lhe color oí
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 8l
Chapter 5, Typography
Oµticcl lerninç intelliçently sµcces letterjcrms,
which is usuclly µrejercble tc settinç the
lerninç tc 0 cr usinç Metric lerninç.
Lhe selecLed LexL. 1o Lhe leíL oí iL is Lhe baseline shiíL, 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 helpíul, buL
mosL oí Lhem aLLempL Lo invenL new characLers íor you. 1he All Caps opLion is Lhe
saíesL oí Lhe bunch, iL simply replaces all lowercase leLLers wiLh Lheir capiLal
equivalenLs. 1he Underline and SLrikeLhrough opLions are also íairly saíe, 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 oííenders 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 diííerenL í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 diííerenL weighLs.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 82
Chapter 5, Typography
lcux ltclics uses
injericr letterjcrms
jcr the scle cj
simµlicity. Sticl
with true itclics jcr
better tyµcçrcµhy.
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 diííerenL í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. UníorLunaLely, none oí
Lhese seLLings allow íor subpixel rendering, buL by using Lhe Free 1ransíorm opLion
Lo nudge Lhe layer's posiLion, you can eííecLively íorce Lhe algoriLhms inLo rendering
more cleanly. Fach seLLing allows a diííerenL amounL oí origins, and some only
produce variaLions when LranslaLed along Lhe x-axis. 8elow is a Lable oí available
LransíormaLions.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 83
Chapter 5, Typography
Usinç the lree 1rcnsjcrm tccl cllcws ycu tc nuJçe tyµe lcyers tc imµrcve
the cnti-clicsinç.
lcux ltclics uses injericr
letterjcrms jcr the scle cj
simµlicity. Sticl with true itclics jcr
better tyµcçrcµhy.
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 shiíLs visible along Lhe edges oí glyphs. UníorLunaLely, PhoLoshop does
noL supporL subpixel rendering aL Lhis Lime, buL iL cerLainly gives us someLhing Lo
hope íor.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 84
Chapter 5, Typography
Subµixel RenJerinç
renJers tyµe mcre
smccthly by
increcsinç the
µerceiveJ rescluticn
cj c Jevice.
Unjcrtunctely,
Phctcshcµ Jces nct
currently suµµcrt 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 unidenLiíiable characLers,
and larger sizes will lead Lo increased characLer
weighL and overly jagged edges.
Depending on Lhe íonL, someLimes Lwo diííerenL poinL sizes will render aL Lhe same
heighL, causing a shiíL 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 diííerence.
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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 85
Chapter 5, Typography
1J µt cnJ 14 µt
Aricl renJer with
the scme ccµ
heiçht but
Jijjerent x-heiçhts.
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
leLLeríorms. So, ií Lypeíace inLegriLy is imporLanL Lo you, you may wanL Lo Lry a
diííerenL 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
seriís and Lhin sLrokes, which is especially useíul
íor larger poinL sizes. WiLh Lhe Crisp seLLing,
however, you sacriíice Lhe abiliLy Lo nudge Lhe
layer on Lhe y-axis.
5trong
1he SLrong seLLing is noLorious íor adding
unnecessary weighL Lo a Lypeíace, 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
leLLeríorms. SLrong is also useíul when working
wiLh Lypeíaces LhaL have very Lhin sLrokes.
5mooth
1he SmooLh seLLing is Lhe closesL Lo unhinLed
anLi-aliasing and Lhereíore remains LruesL Lo Lhe
original glyph shape. 1his algoriLhm is besL used
on medium-sized Lo large Lype, because iL Lends
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 86
Chapter 5, Typography
Lo render very lighL and oíLen blurry aL smaller poinL sizes. lí used wiLh an
appropriaLe Lypeíace aL a proper size and ií Lhe origin is properly adjusLed, Lhis
seLLing can sLrike a beauLiíul balance beLween crispness and leLLeríorm í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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 87
Chapter 5, Typography
StanJarJ Ligatures. replaces common characLer combinaLions wiLh a single
combined glyph.

Contextual Alternates. changes characLers based on Lhe characLers around Lhem Lo
increase íluidiLy.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 88
Chapter 5, Typography
AJcbe CcrcmcnJ
Prc ltclic with cnJ
withcut the
stcnJcrJ 'th' cnJ
'jji' liçctures.

3iclhcm Scriµt 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 89
Chapter 5, Typography
AJcbe
CcrcmcnJ
Prc´s
Jiscreticncry
´st¨ liçcture.

3iclhcm Scriµt
Prc hcs
extrccrJincry
swcshes.
CcuJy OlJ Style
cnJ its clJ-style
jiçures cliçn
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.

Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 90
Chapter 5, Typography
3iclhcm Scriµt
Prc with stylistic
clternctes jcr
the ´3¨ cnJ ´l.¨
DiJct l1 StJ
HecJlinç with
titlinç clternctes
(bcttcm) hcs
subtle Jijjerences
in weiçht cnJ
sµccinç, mclinç
it better suiteJ tc
hecJlines.
AJcbe
CcrcmcnJ Prc
µrcµerly
Jisµlcys 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 9l
Chapter 5, Typography
AJcbe
CcrcmcnJ Prc´s
crJincls sµruce
uµ these
rcnlinçs.
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
preíerence í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 deíaulL 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 jusLiíicaLion. 1hese seLLings are
mosL useíul 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 diííerenL jusLiíicaLion seLLings. Lhree ragged and íour
ílush. 1he íirsL Lhree are your basic ragged seLLings. leíL-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 jusLiíicaLion. 1he oLher íour seLLings - JusLiíy LasL LeíL, JusLiíy
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 92
Chapter 5, Typography
LasL CenLered, JusLiíy LasL RighL
and JusLiíy All - are available
only wiLh paragraph LexL and
space LexL so LhaL boLh Lhe leíL
and righL edges are ílush.
1he jusLiíicaLion seLLings can be
íurLher conLrolled via Lhe
JusLiíicaLion 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 Sµacing. 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 Sµacing. conLrols Lhe amounL oí space added beLween individual characLers.
1his can reduce gaping spaces buL should be used in moderaLion (+5% or so).
6lyµh 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%).
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 93
Chapter 5, Typography
Oµtimcl justijiccticn sµrecJs text evenly ccrcss the
cclumn, resultinç in c blccl thct cclcrs the µcçe
ccnsistently. Pccrly justijieJ text cllcws wcrJs tc run
tcçether cnJ sµrecJs letters tcc jcr cµcrt.
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 deíaulL, breaks up words aL Lhe end oí a line
Lo aid jusLiíicaLion and balance rags. ¥ou can modiíy 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 leíL behind Lhe hyphen.
1wo deíiniLely 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 saíe minimum here.
WiLh a íive-leLLer word, leaving
Lwo behind and carrying over
Lhree is accepLed sLyle.
Hyµhen Limit. dicLaLes Lhe maximum number oí consecuLive hyphens allowed. Avoid
more Lhan Lhree.
Hyµhenation Zone. speciíies a disLance írom Lhe righL edge oí a paragraph wiLhin
which no hyphenaLion should occur.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 94
Chapter 5, Typography
Hyµhencticn ccn imµrcve justijiccticn but shculJ
nct be cveruseJ, cs it is cbcve.
Hyµhenate CaµitalizeJ 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 LeíL Margin,
lndenL RighL Margin and lndenL FirsL Line. 1he ones íor Lhe leíL and righL margins
allow you Lo inseL a paragraph írom iLs leíL or righL bounds. 1his is helpíul í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 leíL indenL and a negaLive íirsL-line indenL.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 95
Chapter 5, Typography

A lejt-mcrçin
inJent ccuµleJ
with c neçctive
jirst-line inJent is
çrect jcr cliçninç
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 diííiculL. 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
reíerred 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 jusLiíicaLion 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 96
Chapter 5, Typography
1he sµccinç
cµticns çive
ycu much
better ccntrcl
cver the
relcticnshiµ
between
µcrcçrcµhs
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 coníorm Lo Lhe pixel
grid. 8y using decimal poinL sizes and eiLher Lhe SmooLh or SLrong anLi-alias seLLing,
you can usually bring a blurry Lypeíace back inLo íocus.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 97
Chapter 5, Typography
Hcnçinç
µunctucticn
imµrcves the
cliçnment 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 sacriíice in
ediLable Lype you make up íor in origin LransíormaLions. 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 oíLen 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 Preíerences dialog (Command/
ConLrol - K) and navigaLe Lo Lhe
1ype secLion.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 98
Chapter 5, Typography
Usinç Jecimcl
vclues ccn
Jrcmcticclly
imµrcve 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 signiíies Lhe end oí a paragraph and should be used as such. DespiLe
common pracLice, enLering Lwo hard reLurns aíLer 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 modiíying Lhe Add Space AíLer
Paragraph opLion in Lhe Paragraph paleLLe. Doing so gives all hard reLurns Lhe
speciíied 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 soíL reLurns
come in. 8y pressing ShiíL - ReLurn, you add a soíL 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 wonderíul
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 Preíerences -
lnLernaLional. 1hen, open Lhe CharacLers dialog and change Lhe view Lo Clyph.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | 99
Chapter 5, Typography
¥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 - 0í50
- Fm dash OpLion - ShiíL - - AlL - 0í5í
" 1rademark OpLion - 2 AlL - 0í53
® RegisLered OpLion - R AlL - 0í74
¹ CopyrighL OpLion - C AlL - 0í69
s SecLion OpLion - 6 AlL - 0í67
1 Pilcrow OpLion - 7 AlL - 0í82
· 8ulleL OpLion - 8 AlL - 0í49
. Fllipsis OpLion - , AlL - 0í33
¹ Dagger OpLion - 1 AlL - 0í34
¯ Double dagger OpLion - ShiíL - 7 AlL - 0í35
¡ lnverLed FxclamaLion OpLion - í AlL - 0í6í
¸ lnverLed QuesLion OpLion - ¹ AlL - 0í9í
ª Feminine Ordinal OpLion - 9 AlL - 0í70
º Masculine Ordinal OpLion - 0 AlL - 0í86
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l00
Chapter 5, Typography
¦ 8roken bar AlL - 0í66
Dipthongs
Æ AF OpLion - ShiíL - ' AlL - 0í98
æ ae OpLion - ' AlL - 0230
0 OF OpLion - ShiíL - Q AlL - 0í40
o oe OpLion - Q AlL - 0í56
Ligatures
í íi OpLion - ShiíL - 5
í íl OpLion - ShiíL - 6
8 FszeLL (Cerman double s) OpLion - S
Diacritics
´ Add acuLe OpLion - F, characLer Lo add Lo
´ Add circumílex 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 - ShiíL - F AlL - 0í80
´ 8reve OpLion - ShiíL - >
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l0l
Chapter 5, Typography
´ Circumílex OpLion - ShiíL - l AlL - 0í36
` Caron OpLion - ShiíL - 1
i DoLless l OpLion - ShiíL - 8
' Diaeresis OpLion - ShiíL - U AlL - 0í68
` Crave OpLion - ShiíL - `
Macron OpLion - ShiíL - < AlL - 0í75
OverdoL OpLion - H
´ Ring OpLion - K
¯ 1ilde OpLion - ShiíL - N AlL - 0í52
¸ Cedilla OpLion - ShiíL - Z AlL - 0í84
¸ Ogonek OpLion - ShiíL - X
Å A ring OpLion - ShiíL - A AlL - 0í97
ä a ring OpLion - A AlL - 0229
Á A acuLe OpLion - ShiíL - ¥ AlL - 0í93
á a acuLe OpLion - F, a AlL - 0225
 A circumílex OpLion - ShiíL - M AlL - 0í94
â a circumílex OpLion - l, a AlL - 0226
A A diaeresis OpLion - U, A AlL - 0í96
a a diaeresis OpLion - U, a AlL - 0228
à A Lilde OpLion - N, A AlL - 0í95
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l02
Chapter 5, Typography
ã a Lilde OpLion - N, a AlL - 0227
A A grave OpLion - `, A AlL - 0í92
à a grave OpLion - `, a AlL - 0224
Ç C cedilla OpLion - ShiíL - C AlL - 0í99
ç 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 circumílex OpLion - l, F AlL - 0202
é e circumílex OpLion - l, e AlL - 0234
F F diaeresis OpLion - U, F AlL - 0203
ë e diaeresis OpLion - U, e AlL - 0235
l l acuLe OpLion - ShiíL - S AlL - 0205
í i acuLe OpLion - F, i AlL - 0237
l l circumílex OpLion - ShiíL - D AlL - 0206
î i circumílex OpLion - l, i AlL - 0238
l l diaeresis OpLion - ShiíL - F AlL - 0207
ï i diaeresis OpLion - U, i AlL - 0239
Ì l grave OpLion - `, l AlL - 0204
ì i grave OpLion - `, l AlL - 0236
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l03
Chapter 5, Typography
Ñ N Lilde OpLion - N, N AlL - 0209
Ø O slash OpLion - ShiíL - O AlL - 02í6
ø o slash OpLion - o AlL - 0248
Ó O acuLe OpLion - ShiíL - H AlL - 02íí
ó o acuLe OpLion - F, o AlL - 0243
† O circumílex OpLion - ShiíL - J AlL - 02í2
ô o circumílex OpLion - l, o AlL - 0244
O O diaeresis OpLion - U, O AlL - 02í4
ö o diaeresis OpLion - U, o AlL - 0246
Ò O Crave OpLion - ShiíL - L AlL - 02í0
• o grave OpLion - `, o AlL - 0242
Õ O Lilde OpLion - N, O AlL - 02í3
õ o Lilde OpLion - N, o AlL - 0245
Ú U acuLe OpLion - ShiíL - , AlL - 02í8
ú u acuLe OpLion - F, u AlL - 0250
™ U grave OpLion - `, U AlL - 02í7
ù u grave OpLion - `, u AlL - 0249
Ù U circumílex OpLion - l, U AlL - 02í9
≠ u circumílex OpLion - l, u AlL - 025í
Ü U diaeresis OpLion - U, U AlL - 0220
ü u diaeresis OpLion - U, u AlL - 0252
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l04
Chapter 5, Typography
∞ ¥ acuLe AlL - 022í
ý y acuLe AlL - 0253
≤ y diaeresis OpLion - U, y AlL - 0255
Quotations
' LeíL single OpLion - ] AlL - 0í45
' RighL single OpLion - ShiíL - ] AlL - 0í46
" LeíL double OpLion - [ AlL - 0í47
" RighL double OpLion - ShiíL - [ AlL - 0í48
≥ LeíL guillemeL OpLion - \ AlL - 0í7í
» RighL guillemeL OpLion - ShiíL - \ AlL - 0í87
∂ Single leíL guillemeL OpLion - ShiíL - 3 AlL - 0í39
∑ Single righL guillemeL OpLion - ShiíL - 4 AlL - 0í55
∏ Double prime OpLion - ShiíL - C
Mathematics
π lníiniLy OpLion - 5
∫ NoL equal OpLion - =
+ Plus/minus OpLion - ShiíL - = AlL - 0í77
´ Solidus OpLion - ShiíL - í
´ CreaLe íracLion numeraLor, OpLion - ShiíL - í,
denominaLor
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l05
Chapter 5, Typography
Ω ApproximaLely OpLion - X
° Degree OpLion - ShiíL - 8 AlL - 0í76
× MulLiplied by AlL - 02í5
- Divided by OpLion - / AlL - 0247
> CreaLer Lhan or equal
Lo
OpLion - >
< Less Lhan or equal Lo

OpLion - <
¡ lnLegral OpLion - 8
√ NegaLion OpLion - L AlL - 0í72
ƒ Lozenge OpLion - ShiíL - v
≈ Micro OpLion - M AlL - 0í8í
∆ Pi OpLion - P
v Square rooL OpLion - v
· Middle doL OpLion - ShiíL - 9 AlL - 0í83
… ParLial diííerenLial OpLion - D
% Per mille OpLion - ShiíL - R AlL - 0í37
' SuperscripL í AlL - 0í85
´ SuperscripL 2 AlL - 0í78
' SuperscripL 3 AlL - 0í79
Œ One quarLer í, OpLion - ShiíL - í, 4 AlL - 0í88
œ One halí í, OpLion - ShiíL - í, 2 AlL - 0í89
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l06
Chapter 5, Typography
– 1hree quarLers 3, OpLion - ShiíL - í, 4 AlL - 0í90
Currency
— Currency AlL - 0í64
“ Pound OpLion - 3 AlL - 0í63
” CenL OpLion - 4 AlL - 0í62
‘ Furo OpLion - ShiíL - 2 AlL - 0í28
’ Florin OpLion - F
¥ ¥en OpLion - ¥ AlL - 0í65
Greek
◊ DelLa OpLion - J
_ Sigma OpLion - W
Ÿ Omega OpLion - Z
∆ pi OpLion - P
⁄ Pi OpLion - ShiíL - P
Keyboard 5hortcuts
Command + H (ControI + H) Hide or show LexL selecLion
£nter or Command + Return (ControI
+ Return)
CommiL changes
£sc Discard changes
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l07
Chapter 5, Typography
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 soíL 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) LeíL align
Command + 5hift + C (ControI + 5hift + C) CenLer align
Command + 5hift + R (ControI + 5hift + R) RighL align
Command + 5hift + J (ControI + 5hift + J) JusLiíy lasL leíL
Command + 5hift + l (ControI + 5hift + l) JusLiíy all
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l08
Chapter 5, Typography
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)
ShiíL baseline -2 pLs
Option + 5hift + Down arrow (AIt + 5hift +
Down arrow)
ShiíL baseline -2 pLs
Command + Option + 5hift + Up arrow (ControI ShiíL baseline -í0 pLs
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l09
Chapter 5, Typography
+ AIt + 5hift + Up arrow)
Command + Option + 5hift + Down arrow
(ControI + AIt + 5hift + Down arrow)
ShiíL baseline -í0 pLs
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
Chapter 5, Typography
Chcµter 6, Photography
Uµ tc this µcint, we´ve JiscusseJ the
crecticn cj jcirly µcssive elements. they´re
necesscry, but they Jcn´t ençcçe the user
cn the scme level thct c µhctcçrcµh
Jces. Phctcçrcµhy cn the Web is
extremely µcwerjul, cnJ thct µcwer hcs
tc be hcnJleJ µrcµerly. A µhctcçrcµh -
esµeciclly cj the humcn jcce -
immeJictely Jrcws the user´s cttenticn
cnJ ccn be useJ tc Jirect eye jlcw tc
imµcrtcnt crecs cj the µcçe. Plccinç c
lcrçe µhctcçrcµh cbcve the jclJ is c
ccmmcn wcy tc µrcviJe cn entry µcint tc
the ccntent. 3eccuse µhctcçrcµhs cre
hiçh 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 períecL 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.
AíLer devising your approach, you'll have Lo conquer a number oí Lechnical hurdles
graceíully 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 workílow íor bringing
phoLography Lo liíe on Lhe Web.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | ll2
Chapter 6, Photography
Phctcçrcµhy 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. 1hereíore, í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 siíLing í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
beauLiíul, 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 reíerred 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | ll3
Chapter 6, Photography
PhoLoshop provides íive diííerenL 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 1ransíorm Lool, you
would change iL in Lhe Preíerences 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 useíul
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. 1hereíore, 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 helpíul when working
wiLh screenshoLs oí inLeríaces í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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | ll4
Chapter 6, Photography
Necrest Neiçhbcr ccn be useJ tc sccle screenshcts withcut blurrinç
µixels.
Bicubic
8esL íor smooLh gradienLs. 1he 8icubic seLLing is PhoLoshop's deíaulL 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 arLiíacLs.
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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | ll5
Chapter 6, Photography
Detcil cj cn imcçe resizeJ tc 200º. 1. 3ilinecr, 2. 3icubic, J. 3icubic
Smccther cnJ 4. 3icubic Shcrµer.
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 diííerenL
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 Preíerences 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 LransíormaLion 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 modiíy 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 reílecL your changes.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | ll6
Chapter 6, Photography
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 oííer 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 workílow).
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | ll7
Chapter 6, Photography
Smcrt lilters
cllcw ycu tc
mcJijy ycur
jilters cjter
they´re cµµlieJ.
Ycu ccn clsc
chcnçe the
stcclinç mcJe
cnJ mcsl
certcin crecs cj
the imcçe 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. 1hereíore, Lhe values Lo Lhe leíL 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | ll8
Chapter 6, Photography
1he Histcçrcm µrcviJes c visuclizcticn cj µixel
vclues. As ycu ccn see, this imcçe ccntcins mcre
liçht 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 aíLer 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).
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | ll9
Chapter 6, Photography
AJjustment
lcyers çive
ycu much
mcre
jlexibility
thcn ycu
wculJ çet by
cµµlyinç
cJjustments
vic lmcçe -
AJjustments.
PreservaLion oí daLa is noL Lhe only perk Lo using adjusLmenL layers. 1hey also
provide superb ílexibiliLy by allowing you Lo modiíy 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 liíeless
phoLo, buL iL lacks
Lhe conLrol oí more
reíined adjusLmenLs.
LeveIs
1he Levels
adjusLmenL is
exLremely useíul í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 deíaulL, 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l20
Chapter 6, Photography
AJJ Jrcmc tc c µhctc with the 3riçhtness cnJ Ccntrcst cJjustment.
1hereíore, moving Lhe black slider Lo Lhe righL progressively darkens Lhe image. All
values Lo Lhe leíL 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 deíaulL, 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 leíL 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 deíaulLed Lo 0
and 255, respecLively. Dragging
Lhe black ouLpuL slider Lo í28
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l2l
Chapter 6, Photography
1he levels cJjustment cllcws ycu tc remcµ cclcrs
bcseJ cn their histcçrcm vclues. 1he cJjustment
cbcve will bcth briçhten cn imcçe 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 poweríul, 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l22
Chapter 6, Photography
1he Curves
cJjustment
µrcviJes twc-
Jimensicncl
ccntrcl cver
ecch chcnnel´s
vclues.
Fyedropper Lools are Lhere. 1he diííerence beLween Curves and Levels is in Lhe
gridded hisLogram. As in Levels, Lhe leíL 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-leíL Lo Lop-righL
corner represenLs how Lhe values on Lhe hisLogram (inpuL) correspond Lo Lhe
adjusLed values (ouLpuL).
lniLially, we have a períecLly 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, leíL or righL. Moving Lhe poinL up will
lighLen Lhe corresponding values, and moving iL down will darken Lhem. Mindíully
seLLing and adjusLing anchor poinLs can quickly resusciLaLe a liíeless phoLo.
£xposure
8y modiíying Lhe Lhree sliders in Lhe Fxposure adjusLmenL (Fxposure, OííseL and
Camma), you can correcL exposures or simulaLe an over-exposure or under-
exposure. 1he Fxposure slider is really Lhe key Lo modiíying and correcLing Lhe
exposure, while Lhe OííseL 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 useíul when working wiLh skin Lones because iL helps Lo
mainLain a more naLural look.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l23
Chapter 6, Photography
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 eííecLs 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 deíaulL, all values are
modiíied in Lhe MasLer
group. 1his applies Lhe
adjusLmenL Lo Lhe enLire
image. ¥ou can roLaLe
Lhrough diííerenL 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-leíL 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l24
Chapter 6, Photography
Settinç Hue/Scturcticn tc Cclcrize cllcws ycu tc quiclly crecte
Juctcne imcçes.
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. Modiíying Lhe sLoppers is as simple as
dragging Lhem leíL 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 helpíul íor quick color shiíLing, buL iL doesn'L maLch
Lhe conLrol oí Curves, which can achieve Lhe same resulL.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l25
Chapter 6, Photography
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í
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l26
Chapter 6, Photography
1he uµµer-lejt cj
this imcçe wcs just
JescturcteJ, but
the bcttcm-riçht
hcs c 3lccl cnJ
White cJjustment
cµµlieJ tc it.
Nctice the
imµrcvement in
ccntrcst cnJ rcnçe
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
imperíecLions. lL musL be done wiLh a careíul 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 diííiculL. 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 modiíy 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 soíL areas such
as skin Lones.
Always copy Lhe layer you're working on beíore applying desLrucLive ediLs Lo iL.
8eLLer yeL, avoid desLrucLive ediLs alLogeLher. 1hankíully, Lhe Clone SLamp provides
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l27
Chapter 6, Photography
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 inLeríering). 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 shiíLing 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l28
Chapter 6, Photography
Newer versicns cj Phctcshcµ µrcviJe c µreview cj the scmµleJ crec
within the brush shcµe.
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 "OííseL." ¥ou'll
noLice LhaL aíLer you've seL a source area and move Lhe cursor around, Lhe X and ¥
values are updaLed Lo reílecL Lhe diííerence. 1hese values can be ediLed aíLer cloning,
buL iL's raLher diííiculL Lo predicL Lhe resulLs. 1o alLer Lhe oííseL in a more inLuiLive way,
OpLion - ShiíL - Drag (AlL - ShiíL - Drag) Lo Lhe desired locaLion. NexL Lo Lhe OííseL
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
OííseL, which leLs you seL Lhe írame oí Lhe source. 1he oííseL 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 modiíy 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).
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l29
Chapter 6, Photography
Heclinç clcnç shcrµ
eJçes 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 suríace. 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 speciíy a paLLern Lo blend wiLh Lhe LargeL
area. 1his opLion mighL prove useíul íor creaLive ílourishes buL is less eííecLive íor
general repair.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l30
Chapter 6, Photography
5pot HeaIing Brush TooI
1he SpoL Healing 8rush is an oííshooL 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 sacriíicing Lhe abiliLy Lo manually seL Lhe source, you lose a loL
oí conLrol. 1hereíore, Lhis Lool is besL reserved íor healing small and simple areas.
1he 1ype opLion íor Lhe SpoL Healing 8rush is almosL always besL leíL on ConLenL-
Aware, buL Lhe oLher Lwo opLions may be helpíul 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
helpíul í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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l3l
Chapter 6, Photography
With cne clicl, the
Sµct Heclinç 3rush
remcves unwcnteJ
items jrcm c µhctc
while successjully
crectinç Jctc tc
reµlcce 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.
AíLer 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 ShiíL Lo add Lo Lhe currenL selecLion,
OpLion (AlL) Lo subLracL írom iL and ShiíL - OpLion (ShiíL - 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 (ShiíL
- F5), and you'll
noLice LhaL Use now
has a ConLenL-Aware
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l32
Chapter 6, Photography
Ccntent-Awcre lill ccn be useJ tc secmlessly reµlcce lcrçe crecs.
1he imcçes cn the
riçht hcve been
µrcçrcmcticclly
shcrµeneJ. 1hey hcve
much hiçher ccutcnce
(cr eJçe ccntrcst) thcn
the imcçes 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
AíLer all oí Lhe resizing, Lransíorming and adjusLmenLs, a phoLograph oíLen needs Lo
be sharpened. Sharpening can really bring a phoLo Lo liíe, buL iL musL be done very
careíully so as noL Lo creaLe any arLiíacLs or halos. NoLice LhaL adjusLing Lhe
sharpness oí an image
aíLer iL has been shoL is
much diííerenL Lhan
Lweaking Lhe íocus oí
a camera lens.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l33
Chapter 6, Photography
Unshcrµ Mcsl çives
ycu çrect ccntrcl cver
the cmcunt cj
shcrµeninç
cnJ the rcnçe tc which
it is cµµlieJ.
PosL-producLion sharpening relies on changing Lhe perceived sharpness by
increasing Lhe conLrasL along edges, reíerred 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l34
Chapter 6, Photography
¥ou can also modiíy 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 eííecL. 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 diííer by aL leasL 20. 1he AmounL, Radius and
1hreshold aííord 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 deíaulL, 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 modiíying Lhese opLions, you can really
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l35
Chapter 6, Photography
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 leíL 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 modiíying Lhe 1onal
WidLh or Radius has no eííecL 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 inLensiíied 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l36
Chapter 6, Photography
Scmetimes
shcrµeninç will
crecte hclcs cj
hiçhliçhts cr
shcJcws, cs seen
clcnç the hcrizcn
cn the lejt. Smcrt
Shcrµen´s
cJvcnceJ jectures
cllcw ycu tc
reJuce the
shcrµeninç
cµµlieJ tc thcse
crecs (riçht).
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, SoíL
LighL or Hard LighL will sharpen Lhe image wiLh dramaLic eííecL. ¥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 oííers íive meLhods oí masking. Pixel Masks, vecLor Masks, Quick Masks,
Clipping Masks and Clipping PaLhs, all oí which deíine pixel opaciLies wiLhouL
aííecLing 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l37
Chapter 6, Photography
1he criçincl
lcyer (lejt), the
JuµliccteJ
lcyer with the
Hiçh Pcss jilter
cµµlieJ
(miJJle), cnJ
the criçincl
lcyer with the
Hiçh Pcss
lcyer set tc
Overlcy (riçht).
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 modiíied, Lhey aren'L ideal íor every siLuaLion.
8ecause oí Lheir rasLer íormaL, scaling Lhem can cause unwanLed arLiíacLs and
inLerpolaLed blurriness. SmooLh curves and períecL edges can also be Lricky Lo creaLe
when painLing a mask. ln such circumsLances, vecLor masks would be preíerable.
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 deíaulL, Lhis will be
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l38
Chapter 6, Photography
Pixel mcsls
cre iJecl jcr
extrcctinç
ccmµlex
µhctcçrcµhic
imcçery.
enLirely whiLe. However, ií a selecLion happens Lo be acLive when you're creaLing Lhe
mask, Lhen iL will be used Lo deíine 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 ShiíL-clicking on Lhe
mask's Lhumbnail.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l39
Chapter 6, Photography
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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l40
Chapter 6, Photography
1urninç the
mcsl cjj cnJ
the cverlcy
cn ccn helµ
with jine-
tuninç.
A temµcrcry 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 deíining Lhe mask's shape
using paLhs, vecLor masks provide a superior level oí íinesse and ílexibiliLy. 1hey're
ideal íor deíining 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 deíine Lhe solid edges and a pixel mask íor more complex areas or íor varying
opaciLies, you can eííecLively exLracL objecLs while maximizing ílexibiliLy.

Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l4l
Chapter 6, Photography
vectcr
Mcsls cre
iJecl jcr
mcslinç
crisµ-eJçeJ
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 modiíied 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 ShiíL-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
8eíore 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").
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l42
Chapter 6, Photography
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
deíaulL, 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. 1hereíore,
every area LhaL you remove írom Lhe overlay is added Lo Lhe selecLion.
Options
¥ou can modiíy 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í
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l43
Chapter 6, Photography
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
deíaulL.
5aving
AíLer 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.

Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l44
Chapter 6, Photography
1he Quicl Mcsl Oµticns menu cllcws ycu tc
chcnçe the cclcr, cµccity cnJ tcrçet cj the cverlcy.
Scvinç c
Quicl Mcsl
crectes c
new chcnnel.
CIipping Masks
¥ou'll oíLen 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 speciíy 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l45
Chapter 6, Photography
Cliµµinç
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 suííice. ¥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 reíine
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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l46
Chapter 6, Photography
1he Density sliJer ccntrcls the strençth
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 reíining 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 preíerence, 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 useíul íor seeing Lhe
resulL. Show Radius is helpíul íor Lweaking Lhe Fdge DeLecLion Radius, especially
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l47
Chapter 6, Photography
With the
lecther
sliJer, ycu
ccn ncw
chcnçe the
mcsl´s
scjtness cn
the jly.
when using Lhe Reíine Radius 1ool. 1he Show Original opLion Loggles Lhe
appearance oí Lhe mask beíore any oí Lhe Reíine 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 helpíul í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 leíL oí Lhe Fdge DeLecLion legend is an icon
íor Lhe Reíine Radius 1ool. 1his brush-based Lool allows you Lo manually add or
remove areas írom Lhe radius. 8y deíaulL, Lhe Lool is seL Lo add, buL you can acLivaLe
Lhe Frase ReíinemenLs Lool by pressing ShiíL - F or by clicking and holding Lhe icon
or simply by holding OpLion (AlL) while painLing.
Adjust £dge
Smooth
SmooLh simpliíies Lhe complexiLy oí Lhe mask's edges. 1his can be useíul 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 diííerence is
slighL yeL noLiceable.
Contrast
ConLrasL simply modiíies Lhe conLrasL oí edge elemenLs, which helps Lo crispen soíL
edges. Using Lhis in conjuncLion wiLh Radius can help remove unwanLed arLiíacLs 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 useíul íor reducing unwanLed color íringes.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l48
Chapter 6, Photography
Outµut
1he OuLpuL secLion allows you Lo seL how Lhe Reíine 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 poweríul 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 eííecL 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l49
Chapter 6, Photography
1he Shijt
lJçe sliJer
ccn be useJ
tc remcve
unwcnteJ
cclcr jrinçes.
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 oíLen Lhe
Color Range command.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l50
Chapter 6, Photography
1he lyeJrcµµer 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 reíine 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l5l
Chapter 6, Photography
Cclcr
Rcnçe
mcles
quicl wcrl
cj ccmµlex
mcsls.
Masks lrom ChanneIs
A mask oíLen 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 CM¥K 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 suííicienL
íor a clean mask. ¥ou may need Lo do some mixing wiLh oLher channels.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l52
Chapter 6, Photography
í. 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
eííecLively 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 oíLen have a combinaLion oí sharp edges and soíL í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," aíLer 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.

Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l53
Chapter 6, Photography
Removing £dge lringes
Fven aíLer using Lhe "Reíine Fdge" command in Lhe Masks paleLLe, you may íind
random color íringes leíL 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 oíLen
preserve Lhe deLail oí Lhe layer.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l54
Chapter 6, Photography
Ccnvertinç
c lcyer tc c
Smcrt
Object
cllcws ycu
tc cJJ
multiµle
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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l55
Chapter 6, Photography

Cclcr
lrinçes ccn
usuclly be
smuJçeJ cr
µcinteJ
cwcy cn c
cliµµeJ
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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l56
Chapter 6, Photography
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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l57
Chapter 6, Photography
L On layers
R Reveal layer
l Cycle Lhrough view modes
£ (5hift + £ to cycIe
through)
Reíine Radius Lool and Frase ReíinemenLs 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 µcçe 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l58
Chapter 6, Photography
Chcµter 7, £xporting
Once ycu´ve µclisheJ every lcst µixel, it´s
time tc çet ycur wcrl intc the brcwser.
1his is c µretty strciçhtjcrwcrJ µrccess,
but µrcµerly cµtimizinç ycur imcçes is
crucicl. Ycu neeJ tc mcintcin c bclcnce
between clcrity cnJ JcwnlccJ sµeeJ.
1his requires multiµle jcrmcts, vcryinç
levels cj ccmµressicn cnJ cther
cµtimizcticn techniques. ln this chcµter,
we´ll exµlcre the wcrljlcw cj exµcrtinç
imcçes vic the ´Scve jcr Web cnJ
Devices¨ Jiclcç.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l59
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 inLeríace oí Lhe Save íor Web and Devices dialog,
which can be accessed via Lhe File menu or by pressing Command - OpLion - ShiíL
- S (ConLrol - AlL - ShiíL - S). 1he íirsL Lhing you'll likely noLice is Lhe large image
window. 8y deíaulL, you should see one large image, which may look slighLly
diííerenL írom your acLual íile. 1his is because you're currenLly viewing Lhe opLimized
version. 1here are íour diííerenL view opLions, which can be changed by Lhe Labs in
Lhe upper-leíL 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 aíLer
Lhe currenL compression seLLings have been applied. 2-Up and 4-Up spliL Lhe screen
inLo panels Lo allow you Lo compare Lhe diííerences 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 diííerenL
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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l60
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 diííerenL í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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l6l
Chapter 7, £xporting
1he 4-Uµ view
cllcws ycu tc
ccmµcre three
Jijjerent
ccmµressicn
settinçs cçcinst
the criçincl jile.
colored. 1his makes iL less Lhan ideal íor phoLographs, buL períecL í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 plaLíorms. 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l62
Chapter 7, £xporting
1he Cll jcrmct
ccmµresses imcçes
by excmininç lcrçe
blccls cj similcr
cclcrs, mclinç it
µerject jcr lcçcs.
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 Saíe color
paleLLe oí 2í6 colors. 1his
paleLLe was used in Lhe
early ages oí Lhe Web Lo
idenLiíy 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l63
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í diííerenL 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 Diííusion seLLing
applies a diííuse
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 Diííusion, 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 speciíying Lhe amounL.

Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l64
Chapter 7, £xporting
3eccuse Cll imcçes ccn stcre cnly 2S6 cclcrs, it hcs tc
ccmµenscte jcr cther shcJes by Jitherinç.
7ransµarency 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 modiíy Lhe 1ransparency DiLher algoriLhm Lo help
smooLhen some oí Lhe gradaLions, buL Lhey'll oíLen 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l65
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 shiíL colors Lowards Lhe 2í6 Web
Saíe color paleLLe. Nowadays, Lhis can jusL be leíL aL 0%.
Lossy
1he Lossy seLLing sacriíices 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l66
Chapter 7, £xporting
1. Nc Mctte cn scliJ,
2. Mctte cn scliJ,
J. Nc Mctte cn
çrcJient,
4. Mctte cn çrcJient.
JP£G
JoinL PhoLographic FxperLs Croup (JPFC) compression is drasLically diííerenL í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 careíully, 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 useíul íor
including copyrighL and oLher iníormaLion wiLh phoLographs.

Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l67
Chapter 7, £xporting
IPlC
ccmµressicn
ccn crecte
unwcnteJ
crtijccts.
lxcessive
ccmµressicn
ccn revecl cn
8×8 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.
UníorLunaLely, Lhere are no magic numbers here. ¥ou'll have Lo make a subjecLive
decision on how much Lo compress Lhe íile beíore Lhe loss in qualiLy becomes
unaccepLable.
1he Quclity
settinç is useJ
tc jinJ the
µerject bclcnce
cj clcrity cnJ
jile size.

Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l68
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
Lhereíore increases Lhe size. 1his is hardly needed in Loday's broadband world.
OµtimizeJ
Checking Lhis opLion runs Lhe image Lhrough an addiLional compression Lechnique
(Huííman coding) Lo reduce Lhe íile size even íurLher. Leaving Lhis opLion on is
recommended, because iL eííecLively reduces íile size wiLhouL aííecLing Lhe qualiLy oí
Lhe image.
£mbeJ Color Projile
JPFCs are able Lo sLore lCC proíiles Lo iníorm browsers how Lheir daLa should be
displayed. UníorLunaLely, a majoriLy oí browsers compleLely ignore Lhe embedded
proíile. For now, Lhis opLion is besL leíL 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 beíore 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 aííecLing 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l69
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 diííerence is LhaL iL doesn'L supporL
animaLion. For deLails on PNC-8 seLLings, please reíer Lo Lhe ClF seLLings on page
í6í.
1he second PNC íormaL is PNC-24, which provides Lhe besL qualiLy oí all Lhe
aíoremenLioned íormaLs. 1his is a compleLely lossless íormaL, meaning LhaL Lhe
image iLselí is noL aííecLed 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 beauLiíul ouLpuL comes aL a signiíicanL 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
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l70
Chapter 7, £xporting
1he PNC-24 jcrmct nct cnly scves the imcçe µixel jcr µixel, it clsc
scves cn 8-bit clµhc chcnnel jcr µerject trcnsµcrency.
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 beíore 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
prooíed. 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 Proíile.
Meta Data
lí you'd like Lo pass iníormaLion such as conLacL iníormaLion, 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 lnío dialog (File -
File lnío). 1his iníormaLion 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
iníormaLion via swaLches. Fach swaLch represenLs one color in Lhe íile. From Lhis
Lable you can add, remove and Lweak colors.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l7l
Chapter 7, £xporting
7ransµarency. Clicking Lhis Loggles Lhe selecLed swaLches beLween íully LransparenL
and íully opaque.
Shijt/unshijt to Web Palette. 1his opLion shiíLs Lhe selecLed color Lo iLs nearesL Web
Saíe color. lí already seL Lo a Web Saíe color, Lhis shiíLs 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-leíL)
and Lhe shiíLed color (boLLom-righL).
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l72
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 beíore exporLing iL, you can do so wiLh Lhe lmage Size
seLLings. Resize iL Lo speciíic 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. Liíe,
however, was noL always so idealisLic. Web developers once had Lo rely on Lables Lo
consLrucL Lheir layouLs. 1his required períecLly 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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l73
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, reíerred
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 (ShiíL - 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. AíLer 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.

Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l74
Chapter 7, £xporting
An emcil sliceJ
intc tcble cells.
¥ou can modiíy 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-leíL corner oí Lhe dialog Lo selecL one or
mulLiple slices. 1hen, seL Lhe compression deLails íor Lhe selecLed slices, which won'L
aííecL 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 beneíiL í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.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l75
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 aíLerwards.
Smcshinç e3ccl Series. =J | MasLering PhoLoshop íor Web Design | l76
Chapter 7, £xporting
1he Slice
Oµticns
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
uníamiliar 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 coníerences, 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 proíessional
Web developmenL, including communicaLing
wiLh clienLs, creaLing a road map Lo a successíul
porLíolio, rules íor proíessional neLworking and
Lips on designing user inLeríaces íor business
Web applicaLions. 1he book shares experL
advice, and iL also helps you learn how Lo
respond eííecLively Lo design criLicism, use
sLoryLelling íor a beLLer user experience and
apply color Lheory Lo your proíessional 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 successíul í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

  

  

 .

        .

.





   

  .

.

  .

 
  



  



  

  

! "   

# 


.

.

 .

 
   
  



 
   
   

    


 
$


 ! "  %  .

      .

        !&              .

.

      .

 .

        .

'.

.

 .

      .

 .

        .

 .

           .

!   .

 .

     "   .

     .

     .

        .

  #      "   .

     #   .

  $ %&      $ .

    .

 % .

     .

    .

# .

.

 .

!       ' .

$ (      .

 ' .

  .

 ! .

 $ )  .

      .

 .

 .

  $ .

 .

    # $ .

 .

  .

      '.

    .

   .

   .

  .

      '.

 #     $  .

 '       '     .

 !$ % .

   * .

   '  $ %     ' '      '  !$  .

  .

 .

   .

        .

 .

$ %  &    % .

  !   .

  '.

           $ %  &  ! % .

  !  '  .

 ' .

 .

!     $ )' .

 .

 % .

 .

         .

 '  .

  .

 ' .

 .

 .

    $  .

.

      .

 .

       .

(.

  (.

 .

' +   !   .

  .

 .

' $ - *       . ! '              .   .


/0   

$ 

'   

  

 

 
'   

$
,

              ' '    .

 ' $  .

.

      .

 .

       .

)   .

     .

$   #  .

 .

  .

.

.

 .

  .

 ! "  .

     *   '  .

.

      .

 .

       .

.7.    35 <  3 " .   +" :.

.

4.

&    2   2.

 .

.

   2   =.

.

=".

 + ! .

  >" <  4.

 @ ABC66A8.!  ? *  &  = 1 >" <  .6B  .BD6..

.

       .

.

.

 .

      .

" .

 +.

  '.

.

 (.

  (.

 ' +  . +.

.

 . #   .

.    ) .  %.

 .

   '   .  .< . .     65   4   .    '  ./ // /1 /: /: /0 /= /= /? +  0  4@* 4 .. !  >   6! >   .    ' .

.    .

  &  >.

  . .

 .

)  B  C  .

 0/ 1/ 1/ 1A 1= 1? :0 :=  .

.

      .

 .

       .

  .   4   6!   C  .+   1    4  4 >  .   !  7   B  2 02 02 00 0D A2 A/ +  .

 3. AA AD ?0 +  3 ".

 6 '  .

    .

  3  *   .   4 .

  .

6 3     . 3   8 6.

 B  +.

.

 C  .

 44 ?E ?D E2 E/ E/ E1 E: E? D1 D? /22 /2? +  - .

.

.. //: //:  . +  % +  > (*  %   .

.

      .

 .

       .

     ( .' >F .

  B  C  .

 //= //E /1? /:: /:? /0D /AA +  4 5 .

32 /=2 /?:  . !     !  .44  .

.

      .

 .

      .

+  . .

 #  .

    .

  6      .

  $  .

    % $.

 ! "    $     .

   .

 .

  .

 .

  .

  $ ! "  .

  .

  6.

 .

 .

   #! 5$          .

 .

  $    .

   .

.

   ! ( .

   .

 .

 .

    .

 .

 .

.

 .

$    .

! +.

.

      .

   .

 .

     .

.

  .

   .

 7  .

    .

   % $.

 ! "   8  .

       % 9  .

.

 ( 6     .

  .

  .

            .

 .

  .

 ! ".

.

 .

   .

   $    .

    .

   .

  7.

 .

     $  .

 .

 ! "  8   .

  8 .

   .

 .

.

   ! 6  .

% .

   .

$  .

  .

 .

.

          $          $.

 .

 .

.

 .

  7.

 .

  $ !  .

.

      .

 .

          .

 .

.

 .

$$   '  <$ 6    '    5   . +                   .

         '    $ .   '       .

           '$ .

  B)% $ ..    '       &     $ 6 '   '      5   >  7.   %.

.

    .

        '      '   '      .

  .

$ 6  .

 .

  .

  .

  '     !   .

   .

 .

   .

 '  $ 4         .

    '.

  ''  .

   .

    .

 '   ''   $ +''    ! .

  .

  .

  ' !  .

 '  $ .

 .

 .

 .

 ' .

  .

  $   '.

   ''  1$1 .

   /$E  .

 .

   7      1$1$ 6 ''  1$1  .

 '   ''         .

     '   .

    '.

$ .

 '   ''  .

    =A   &      $ " 1+   .

.

.   :.!.<(=>  .

.

      .

 .

          .

 .

  !.

        .

 '  !    '  . !.

  ! $ .

 %  .%.  ' .< ..   .

  ! F .

$ 4  ! .      .

. . %.

  .

    !         $ %    .

.       . %.

!     .

!   .

  .

.'$ 6 '  & %.     .

 ! .

         .

 !&    .

 ' .

   .

    $ 4 .

1$/<          .        .  (+4 %. =/D==.

       'F   !  .

     .

 %     $ .

    .

         .

    ' ' ''  $ 3  '   '   .        /0$ " ?@ .

.

 ! :.!.A@=>  ..

.

      .

 .

          .

 .

"#     6   .

!    '   .

   .

  '   .

 .

$ .

  .

 .

   '  .

 '   '$ G  .

!        ' '  .

 .

$ .

    !     .

 .

              $ .

     ! .

      .

   .

      !       '$ .

 $%.

& ' .

 .

   .

.    '   .  .< .

.

 $ 6 .     !     %..

    .

 '   .

   .<$ .    . .

  .

   .

    &     .

.     .  %.

   ! .

        $ ) .

    '   .

        .

 .

     .

      .

 $ 3   '          (+4 .'   .

  .

    <     '   .

   .&  /=/ /1/ =D<  .

 &  .     &   .

 .

     /02 /2: A=$ .

& #  .

   .

  .

$ .

   .

  '   .

 . .

 .

  .

   !   .

 (+4    .

  !  .

 '  &  $ %   ! .

     !     .

  '        +.

.

  .

     ?@ .

  .

.

 .

 !  .

.

      .

 .

          .

 .

 H 6   $ %  .

  .

    .

  '   '  &   .  .

 .

     .

    .

  !$       '   .

   ! . .

     .

 '  &   .

  .

 (+4  !  .

.

 .

     .

$ .

   #       .

       '! .

.

      .

    .

   .   $     '    ' %..

 +%3  I+  '  & !   .

'$ .

      .

   !       '  $ 7 .

&    ' .

 .

  5    '      $ .

" %     .

 .

      .

 .

     .

 !  .

  $ .

    .

 .

&     .

.

 6  (+4$ .

 .

       .

 .

   .

& '       .

!       $ 3  .

       .

      $ .

 '    .

  .

 .

  .

.

       .

 $  '   .

 .

      .

 '.

  '  &   .

 .

    (+4$ 4 .

 .

 '.

   .

! .

 '     $ )   '  &    .

    .

 .

   '$ .

&       !     $ - !      .

 .

 J. !  (+4K       .

 J!     !K  $ >.

       .

$ .

 '.

  .    ' '        .

$ - !      .

  '  .

 '  &  $ %      .

     '.

 .

    !  ' .

 '  .

    .

.

  # ! $  .

.

      .

 .

          .

 .

 ' .

 .

 .

        .

         %  ''            5 (+4$ .

 (+4    !    ' .

.

 '.

       $ - ! .

    .

     (+4 .

  '&     '.

.

  '   .

   .    ..   '  %.

       <$ .

    '    .

    $ ) 8 H    .

  .

   J   (+4$K .

 '  .

 8 H   .    .

$ G  .

   .

      '$ .

    .

 .

 '     .

  $   .

      ''  &  .   .

  .

 .

    $ .

   '  .

  .

   (+4     .

           .

 .

      ' $ .

   '  .

  &    .

!     .         '  &  $ .

   J!     !K   & ' .

.

 J. !  (+4K      '  .

   K  $  . J' .

        .

   <$ G   .      . H . .

 .

  .

1$/$ G &  " +. (+4     (+4 %.=/D==.

.

   .

   ?@ 6.

     .

?@ !    '  .

    .

  $  .

.

      .

 .

          .

 .

($) $ * + $ .

 % .

 $ - ! '   '        ..      '    ' %.

'$ >            ' '       !  ' .

 &! F $ 3   &    '     .

 (+4       &      .

   .

 !     .

 .

 K' .    K  $ .

 .

. .

   '    !      ! . .

      .

$ 3   ' .

      '  .

   .

 .

 .

      &      .

 .

    !$ %  '' ! (+4 .GC  +  J ! '  K .

 .

 .

   '.

 .

$ .

        .

     .

 .

   .

.

  &    ! .

   .

      .

           ' '  .

$ 6    % .

 .

%     .

     +.

.

 #   .

     .

 .

   !  .

.

      .

 .

          .

 .

I  .

 .

  !     '      .

  !$ .

 (+4          ' .

  6  (+4$ .

  .

  !  ' 6  (+4  (+4  &       $ .

    !  .

     .

 $ -  .  %    . $($-.$.

 J  > K    .

 .         &   .

       $ .

   .

!  >  . .

.

   .

 '        !   .

$ .

   !       &              $ - !   ' .

!  '  .

  .

 %  J6  .  'K .

  !  ' !    .

 .

      $ .

 6! >     .

    .

 $ .

&    ' .

 !   $ > .

 .

 .

        .

 $ ( !.

 .

 J6   K       .

  .

     .

  ' .

   ! .

 $ .

   .

    ' .

  '.

           .

   .

 .

    .

$ >.

  .

     .

  .

 $ G    .

  .

    ' .

 .

  .

     .

  $ " ( .

 .

     .

   % .

 .

 .

$ .

 .

  !  .

.

      .

 .

          .

 .

-   !.

 %  '       .

 .

 .

           !          (+4  '$ 6   !   '            .

  $ .

  '   !    5  '       .

   $ .

 .

          ' .

     .

       .

'$ .

 .

 J%K  &    .' .

  < *       ! $  .

.

   J(! .  'K                  .

      .

 ! .

 .

 .

 !$ .

 'K        !     $ J K '       . J6  .

  .

 .

'  ! .

' .

   ' .

     !" .

     '    ! .

 .

$ 3 .

 J K  '  .

   .

    .

       .

 !  .

.

$ " +.

$  .

.

 & .

 .

$   .

.

  .

   .

  ) .

  !  .

.

      .

 .

          .

 .

1"2#       '      ' '   ' '        ./0%.

 .

  '  .

 $ 6 .

   '   F      . .

   '   .   # '5 /$ . .

 ''  1$1   .

    =A$ 1$  .

 .

&     (+4$ :$ ) .

 .

 K  ''      '     (+4$  . & J   .

.

      .

 .

          .

 .

+  0  .

.

.

    .

 .

   .

     .

   .

   .

 .

    ! 6   .

    .

 .

 .

   $  .

.

 .

   .

 .

.

           .

  .

.

.

 .

$  .

  .

! B   .

  .

    .

  .

 .

6   ! A.

 .

 .

 .

   .

 .

              .

 .

 .

 .

8     C    .

 .

 8         .

.

 .

   ! )      .

 .

          .

   D     '.

      (.

 % $ .

 .

  .

.

.

      .

! 6 '.

% $ .

 .

.

   .

 .

  .

.

.

%           .

  $ .

     .

     !  .

.

.

 .

     .

       .

.

     .

 .

'.

 .

   .

9   ! '     % .

$   .

.

    .

      9          !  .

.

      .

 .

           .

*34 *. .

  .

     .

 !  .

  ' .  ' .

  '    '.

' # <$ .

      .

   ' .

.

     $ .

 .

  '  #  .

 .

           .

   !  '$ 8  .

  '    .

     .

   '       .

 .

    %3  ! .

 !    .

   ! .

!  * $ .

 '      ! ' .

    $ .

       .

   .

 .

.

.

  .

 .

  .

 !  .

      .

 .

  $ .

 '.

'   .

   .

'     .

   .

 ' .

  .

 ! .   4@* !<$ .

 .

  !  '    .

        '  .

  .

   !    '' .

'$   / .

 / .

 .

<  .    .

 '  ' .

    !    $ .

          ' .

  .

 .

   '$ %  !   '    .

   #    .

       !$ 6          '  .

  ' .

       .

.

 ' !$ .

 .

  !     5 .

    .

 3 ' $ 6.

 .

 # '  !   ' .

          ! $ .

 3 '    .

  .

.

  .

.

      .

 .

           .

         #   F  .

 .

      .

 $ 6   .

    ! !            .

   '.

     . ' .

$ "   .

      .

   .

        .

 .

     .

 .

   $ 3  .

      .

    $ .

  .

   .

.

   .

 .

   & .

!      .

 ' .

  .

  3    . !$ ($$ 5 6.

! .

     .

 .

    $ .

   .

  .

            .

  ! $ J>.!K      $ 6 .

' .

 .

  '           $ 7  % % ' ' .

 .

 '    .

      .

 .

 '   .

 .

 $ - ! .

  '   F    .

$ )           $  ''5 .

  .

 ' .

    .$ #8% *$.

     .

  &  .

'      .

 J( 4K      .

  '    .  .

 . ' .

      .

 &   $ .

        .

 !   .

  .

    .

 ' &    $  .

.

      .

 .

           .

  ".

.

   ?    ! " 29 $$/ .

 .

    .

  '  .

      .    .

 '  .

 '           .

$    .

6< . >  .

 .

! !  .

    .

  .

.  < . '' .5 .

  .

  L 6< .. '' L >  .5 .

  .

5 .. '' L >  .   L 6< .

 .

! !  .

 '  .

      .

5 - ! ! .

 '    .

5 - ! ! .

    .

.

      .

 .

           .

"/ .

.

 .

   .)< !       ' .

$ .

 .

 '    .

 .

    .

 (   (  (   $ .

         .

    .

    'F       '5   ' ' '  $   .

 .

  &       ' .

 .

$ 3   '   .

 ' $ 7 .

    .

 .

       .

  ' $ .

 '   .

 .

    '' .

 .

5   .

    .

    $ 3  '   '   .

 '    J .

) 5  K    1?$ %    .

 '  .

  !   #  .

 .

 .

      .

  .  '  .

   $ .

 !       .

             .

 $ ($   ".

.

  ! .

 .

  !   .

    '   ' .

  .

 ' . .

  $ .

    '  .

    ' .

    ' .

 .

 &   '$       ' .  .

  .

 .

& .

 .

 .

    .6<  .

.  .

 !  J . ' .

K '    >C$ .

 .

  .

    .

 .

   .  .

   $  .

.

      .

 .

           .

/  !. :5 ! .

 .

  '          .

       .

       $ 6 .

          $ .

         .

  ' .

        .     .

*   ! $ >  .

    ! .

  ' .

    .

          .

 .

  &   $ I  .

   .

 .

               .

  .   $ %      .

             .

 * ' $ 3 * '      " .

 .

 * '     .

 ' .

 E9  .

9   .

.

! '  .

 $ .

  .

6<   .      .

 .

     .

     ' ! .            .

 .

  '<$ .      .

.   + .

 H   +<  '  .

 .

   .

$ // .

. !    .

          .

.

 .

  !  .

   ' .

 ! ' !    $ 4      .

    .

   .

 .

#  '   .

     .

 .

    & .

 $ .

.

     .

. .

   .

 7   .

 J. !   .

$K G      .

  .

    .

 $ .

    .

 . ' .

   .

.

      .

 .

           .

 < ' .

  .

     $ C    '  !5 F     ' !        M " 9.

9 .

$ .

    $ ".! .

.   .

          .

   '   $ % .

  .

  '   .

 .

    !    .

N    .

 .

  ' .

   '  .

 .

   J   .

 .K  > .

 J   .

 '  K    .

   '  .

 $  .

     .

  '   .

 .

5 .

 ' .

 .

 .

 .

 .

 .

  $ . >C$ G &   .

  . ..

 !          .

 ' ' .    !  .

   .

$   .

9.

9 .

$ .

!  .

.

      .

 .

           .

<  . $.

 .

 .

  ! !    .

     '        '  .

      % $ 3  6        $ G    .

  %    '  .

''O..   L 8<  .'    .   L .<   . ''O..

 .

$ % .

      .

 J .

K  '     .

 J.

 7K      .

.

       $ %         .

  .

              !         H .

  %      %   ' .

.

 ' '       .

  .

 .

  '$ <.

   !  .  !.

 .

    ' %   .

 .

  .

     $ %'     ' >F      *      .!  .

  .

     .

.

   $ - !   ' ''    ! ! '  '     .

 $ I       .

.

 ! .

     ! '$ % .

     '      '   '  .

     .

   .

  .

      .

 $ .

 .

 '       '   ' .

 .

 ' !'      '$ #  $ .

  .

 ! .

   .

   .

       .

  &      !   .

 .

 .

.

  5 .

 7 .

  3  $ .

 .

 7   '       .

         .

  .

$  .

.

      .

 .

           .

.

   '    .

  .

 .

  .

.

'  !   '  '' $ 3       .

   !  .

 .

$   ".

.

   .

    1 ! "9 .

   .

        $ .

   # * .

     .

'  !   .

        F$ .

     !   .      .

   .

 .

    $ +       !  .

.

      .

 .

           .

6 .

       .

 !  '$ %              .

 .

 .

  '     !$ .

      .

      .

     .

 7$ - !  .

    .

       .

      $ 3    .

$ .

  .

    F' K  . J.

 7&   .

  '   +  $ I  .

       F'  .

 !  '  .

 1 8  '      '  . ' '$ =.

              $ .

0&     . .

   !  '  '    .

 !$ I     .

 .

    F .

    !  '$ .

 #     !  '    .

    .

 '$ .

  .

 .

 .

 .

6<  . ..  .     .< . ''.

 J6 7 K    .

   '  .

 7& $ +.

9   :+.

.

9   .

8     = .

 # !  .

.

      .

 .

           .

 ./ )$.

      .

 .

.

   5   .

       '    .

$  .

   .

 &     .

.

  " .

< '  ! .  !   .

 .

$ .

   #  .

    .

  .    ! $ .

 .

   &  .

 .

     .

   .

 .

$ 6  '' .

.  .   L <     . '' O .

 .

    .6<  ' ! .

           J K     !     .

   ' .

    .

   .

   '$ %     .

.           '.

    $ .

  .

 .

       F$ "   !  .

.

      .

 .

           .

>.

.

$" 1 .

 .

   !               .

$ .

    !  .

 .

'' L >  L .           #       .

. L I .   L 6 L .

 L I<$ .

6. <  . .  > .

 J3 .

.

      K       .

 3 .

  $ 3 ' .

     .

    '    .

 $ > . < . .6.

 J  .

.

.

K     .

   .

   .

.

     .

       .

$ .

      .

         .

   &   $ F  .

 .

!  .

.

      .

 .

           .

.

.

.

! * .

.        '   ' .

 ' .

      .

    '  .

  .

.

4      $ .

    .

     .

    .

    .

     .

 5 .

.

  .

 !  .

.

      .

 .

           .

&2')    .($$&?'5    $ "% .

    $ %   .

  .

 .

  !    .

    ' .

.

.

 .

) .  $  .

       .

$ .<.

%$5   .

   .

 .

$ .1. !$ ".

   '  .

   .

     .

 .

  .

  $ 6  '  .

 .

  .

 .

   '          '  .

 .

$ 6 .

& 4         .

 .

   $ )  .

    ''    '  .

  .

 .

..   L P<   .   L 8<  ''    . "  &        . '' O . '' O .

'$    .

 !  .

.

      .

 .

           .

 . ' .

    '       .

 ' .

 '    '  .

&  $   .

  .

 .

   '  .

 .

6<   .     .

 . '    .

     $ ?  .

   .

 ! 0%.1/ .29 *%  4    !  '    $ G &      '  .

'  '       !    ' '* $ 4 '       *  .

     '     ' '.

$ ) .

   F  .

    .

     .

!    $ "" /$  .

 (  (      .

 '   .

  .

 (  =  $ %&      .

 !         $ 1$       $  .

.

      .

 .

           .

:$ % .

 7&   .

 J.    F' K    .

 .  J+$K 0$ .

 &     $  .

  .

              .

       .

     $  .

 .   '.

  !  .

  7    0AQ   >C$ A$ . >C    .

 + 3   $ .

  .

 < .6 L  . . 4 >    >  L  .

 & .

'  .

 & $ =$ 6  + >!    .

 & .

'$ .

   .

 .

       .

$ ?$   .

      2Q  '  .

  .

       /22Q$ 6            ! .

  $  .

 &     0DQ     2Q$  .

    A2Q      1AQ$ .

  >C$ E$ .

  .

6<    . 4    7    .

       =AQ$ G  .

   .

!  .

         $ 4 .

     .

.

       *    .

  .

    $ 5 / .

 .

&            % &  % &      .

! '  .

 '  .

  .

!    $ .

                .

   $ - ! .

&    .

  .

 .

  .

      .

    $ 4      .

 .

  .

    .

      .

   .

    .<    .

 .

$ G   .

 '  .

 .

  .

     '   .

 .

$  .

.

      .

 .

           .

7  $" .% / .

& ' "!? "! .         3 '       0AR   .

   . !          .

 .

          $&  .

' ' ! .

    .

  ' $?"!&  .

?"!'  ' .

     ' .

   +          .

  ' .

 &  .  4  '   6  4  '    $?.

?(.

 ?"!&  .' $?.

 ?(.

?"!' ? 2 "/ .

&#' "!?# "!   .

  .

.

          .

.

      .

 .

           .

. &(.

'+.

 &(.$  .

'! .

 &(.1!  . "9  ..

'! $+.

 $ ! . ?"!&(.   .

?"!'!  $+.

  $&  .$ ! .

' $?"!&  .

 &+.?"!' ? 2 ".

$ '   '   .

 '  .

 .     4  '     4  '   % .

   .

        ' ! .

  ' .

  4  '   6  4  '    ' ! .

 .

&   ".

. / .

&(' "!?(  $2.

.1&  .

2 .

1'$$ ..%+$ + "!? .

.1 "!?  $?. &  .

?(.

' $?. ?"!&  .

 ?(.

 &(.?"!' .

'    .

           ' ' !    0AR    !  .

    !  .

   0AR  < .   .

   +       .

.

      .

 .

           .

. ? .

1? &(..

? .

.1?  ' ( +   .

   .

 .

   /      .

 .

   /2     .

 .

    ' !   /   "!?( + . ?( +&(.

?( +' . ?"!?( +&(.

?"!?   .

 .

 &  . $?.    ( +'  ' !   /2   /   .

?. ' $?. &  . ?.

 ?(.

  &  . ?"!?.?. ' $?.

?(.

?"!?. ' $?/&  .

?/' $?"!?/&  .

?"! ?/' $? &  .

? ' $?@&  .

?@' '   .

   '   .

 .

  '     .

  '    3  ' .

3  ' .

    .

 .

   .

 .

     .

 .

   .

 .

.

      .

 .

           .

+   9 ".

 '   $.

    .

$       .

    .

 .

    .

   .

      ! "    .

.

.

% 1    .

 ! "  .

 .

 .

    G         .

   .

       .

  .

       .

    ! 1       .

     .

9  .

     %    .

   %  .

 ! '     % .

$  .

 .

   9.

.

     ! 6 % .

.

$  .

 8    .

9      .

.

.

    !  .

.

      .

 .

         9 ".

 .

*. 7       ''    .

       .

  .

   .

  $ 4  7     .

  .

    '  '    F'$ .

     '   F    ' $ I  .

        '   ' ! $ 7 .

  .

   7       &  !$ .

 7        !    #     $    !     .   & .

'  .

 7    &  .

    .

<$ G    .  &   >  L  . .6 L  . .  . .

.<      J4 > K   .

 J6  " H(     H   $  .

 8   .

$  !  K    .

   '  .

 6  .!!. 7      $ .

    .

     ' .

 '  $ 6      '     .

 .

  $ - ! .

     $   '      .

    '    '$ .

 .

  '    .

   5  '     *    $ .

 .

   '   '        .

  .

.

      .

 .

         9 ".

 .

  ' .

#    '   ' '*    $ 4    '   .

       '    $ *.

$ $! *  .

.

   '     '  .

      .

  .

      $ 3   '         .

      .

           .

  .

   '   .

   $ 4 .

  .

 4    7 4    .

  .

 .

     '      ' .

   $ .

 ! ' .

#       .

   $ .

    7      '    .

 .

       .

!  '   $ +    .

 .

 # : > .

1   :>   .

  .

   ! .

!!. . 2$$.

         !      $  .

.

     .

.

   '      '        .

! $ 3   '   .

!  '             + >! .

   '   .

        .

     .

        .

  $  .

.

      .

 .

         9 ".

 .

- !  .

       .

   '    .

 '  '   .

  .

  .

  '   7 4$   .

              .

 '     $ B       .

.

9      .

 .

 .

 .

$  .

1.    ! 8 ". $ G  ' .

!   .

  ''   & ! .

  .

  >! '  !  + >!$ .    $ 3   '  .

    .

 7   $   .

.

 7&      !  .

 .

     .

  $ )  .

 7  '  &        .

   $ >    .

 ..

 .

    .

 7 .   <    .

.

      7      .

    .

   A2<$  . ' ! .

.

      .

 .

         9 ".

 .

       S 4!  '  S   S % .

  >! S + >! S  >! S   S > +  S   .  S % +  S  S .

  (- $*-.

  4!  '     .$.

       $ %  #   .

 '      .

 $ &!      .

 '   .

  4!  ' $ .

 .

& '  '  .

  .

    !   #  $ .

      .

  !   &     " .

  '   '.

$ 4    '   % .

   % +         '   '* !$ )   % +      7 4    .

 $ .

   .

 % .

    7      .

 .

 .

 .

$ .

 .

# !         .

          ! )% '$ $   5.

 : >  8    .

        ! B  .

.

 .

 '  .

  '  @.

     .

.

    $  .

 .

    .

!  .

.

      .

 .

         9 ".

 .

9:(.

 .

 % .

     .

       .

 6   $ 4  .

    /12R .

.

     &     .  .

  $ .

 .

!     $ %   .

     .

 '   .

     .

   .

     $ .

    /:AR  !    .   $ 3   '  .

  .

    /:AR  .

 *  2  .

   /    !  .

   .

   '   .

   F$ "   .0/I   : >      .

! +  .

3I $   . .

 :>! *.

  .$.

 4 >  ' !      ! .

 .

      .

.

   .

  '$ %    .

      '       .

!      .

   .    ' !.  .

  ' $ .

        .

   .

$ A .

*.

$ .

     .

 + 4   .

   '$ .

& .

 '       .

 7 $ 4 '  .

  .

 .

    .

.

       .

  .

    .

   $  .

.

      .

 .

         9 ".

 .

$*.($-.

$ % .

 6! 4     '      .

   ! $ .

 3 >   .

 '  .

 3  .

 7 5     .

   .

         .

    $ .

 .

 .

           .

.

.

  .

    .

$ " +    .

 .

 .

 .

.

 $   .

     ! (.

$   .

 .

.

: >          :>! C    !       .

    ' .

    $ 4  .

     #    .

     .

  .

.

    $ % .

 &     /22Q .

 '    '' !    .

    2Q   .

    .

 .

  .

$ .

  .

  ' .

  .

.

 C     .

.

  &!   .

 .

     .

  $ .

     .

 .

    $ % .

       .

 .

     .

.

      .

 .

         9 ".

 .

$ .

    .

 '     .

         .

.

   .

  .

 .

'    .   '.

  $ .

      .

   ' !         $ " J.

 .

 .

 .

    .

 .

     .

 ! .

 :.

>  .

        .

  )  :.

.

>  .

   .

   .

 : .

 .

 .

 > .

   ! / G              7 H I H 4    ' 7$ .

  !      .

 6! 4   .

  ' .

.

 .

 &   $ 4  J4 . 7  + K  J .

 7K  .

$ 4 . 7  +     .

 .

  '       .

  .

&   $ .

.

         .

.

      .

 .

         9 ".

 .

  .

.

    .

 .

  '        '   .

  .

$ - ! .

 .

 4 . 7  +       .

 .

    .

     .

 !  ' $  .

 7    .

  .

 .

.

.

    $ % .

 .

 &        .

 $ >.

 .

     .

  !       $ .

 4 %    +        .

 '  .

          $ 3   '    .

    !      .

 3 >  2Q .

 .

       /22Q $ - !       4 %    +  .

 .

      .

 2Q $ .

J7  - K  J8   - K< '  .     .

   .

  .

 $ .

 .

&  .

.

  #   .

      .

  $    .

    ' ! .

 '&   .

     .

       ! $ "      .

  .

.

     :.

>      ' .

 5   @.

 :.

.

>          !  .

.

      .

 .

         9 ".

 .

      %      .

 $ .

   : >! +  .

1  # <  5  : > .

 = .

 # <  5  :>   .

.

  .

   ! *.

$! 6 .

   '  .

 4 >  '    '    .

.

   .

    $ .

 7   .

   .

   .

       ! . ' 2  1AA<$  .

     .

  .

   .

     .

    '  '     .

 .

    .

     .

  .

    $ .

   ' .

 .

    '.

     '  .

   $ - !  &   .

 .

&         .

   $  .

!  ' .

        . .

     $ 4 .

6<    ' ! .  >  .

"   '    .

 .

 .

  .

  .

.

      .

 .

         9 ".

 .

.

  .

      $ .

 ) 7      ' .

    .

   .

   .

    .

  !  .

 !    $ G     .

    !  '   .

  .

  .

    .

  '$ <%. 4 %  .

  .

 .

 7  .

  '  ! .

 .

      .

   '  $ 4  .

  ..

 .

     .

      #  .

       .

 $ .

& '   &  !          .

   .

  .

         .

    .

$  $ .

 9 ".

  .  7       .

   .

    .

.

    .

  7   ''   .

 '         '  $ .

    ''       .

6< .  >  .

   .

       " .

! .

 7       ' !        ' .         $ .

  $ 6!   &   ' !  .

     '  .

     .

 .

  .

   '  .

 7 $ " + B$(.

.

 - 6      $ %      .!!..

    .

   .

      .

   .

  '$ .

    .

  .

        .

  .

!  '  $  .

.

      .

 .

         9 ".

 .

9  .

 . . 7  ''         !  .

       ..

 7    . 7<$ 4         .

    .

' ! .

 7   $ .     .

  !     '     '$ 4 .

     .

        .

$ $   <      .    .

'! .$ $   .

 <$ " +  1  .

 .

 .

 .

    .

  .

  ! A.

.

9   ' .

     '$ %  &      .

        # '  .

    "-$9 $".

 . >  &!    .

   &     !     $ 4  .

 I     .

 7             .

    $ G   ! ! .

    .

     .

 J% 7 4 > $K 6   .

          $ % .

 7       !  '     .

  $ .

      .  H < .

 !   .

 ' ' '     .

 7   .

.

      .

 .

         9 ".

 .

 $ G  ' .

           .

$ .

      .

 .

  &     .

   .  '$    .

         .

  .

7           $.

$ ! 4     ''      !       '  .

      F$ %&      !   '   ''      67  .

.

  .

     $ .

     .

  .

.

 .

    .

 7    .

     !   ' .

   '$ G   .

 !   .

     .

    .

 $ % .

 ' '      67   .

 7    ' .

1/ C!.   '$ 0%.

.

.

.

  &       '    .

  .

               2Q     ' $ 4  &    .

            .

 $  . !      .

.

      .

 .

         9 ".

 .

( /K  .

     .

  $ .

 ! -.

" 1 %!     '  .

 .

     .

 .

            '  '$ 3   '         .

     .

      '      .

 $ 4  .

 '     .

           .

.

    2Q    ' '  .

 *  .

     .

   &   $ ( .

  .

/K     .

.

      .

   ! 9  / 6     ' $ 4   .

   .

  .

 *  2    /    '         .

  .    .

   .

 '<    .

   $ 6!  .

       .

 .

    ! .

   .

  .

       .

  .

  '      .

 ' $  .

.

      .

 .

         9 ".

 .

).

 .

     .

         ! "..

.!!. .

 '  ' .

  &!   7  .

     .

   *  .

 .

 .

           $ 3  .

 .

  !  '.

   F . ..

 $ ' .

 7 H 7  H     .

 $" 29 $$/ .       $ .% %%. .

 6 '  .

  ''  !     .

 7  '$   .

        .

 .

 -    .

  !    ' '  ! .

  '  $ .

 -        ' ! .

  '   F       .

 7  '  .

  !      .

     .

    '$ .

  .

  !        .

 -    .

 .

  $ .

  .

  .

      * '     .

6 L < !$ 3 .   L <  >  L  .. '' L  .  .

 >   .

  .

     (          . .

 $  .

.

      .

 .

         9 ".

 .

+  . * % 69   .

 L     .

    ! ' .

.

        .

 .

    .

7 ! F.

     .

    .

C        .

! "   .

        .

    8         % .

$ ! #    .

           .

            .

   ! 6    .

   9 .

9      .

     .

      ! '.

 .

             .

    .

  .

  .

  8   ! .

.

.

% .

.

     .

  .

  .

! "  .

    .

.

    .

  .

     .

! #       .

  ! '               .

.

 .

 .

  ! '         .

        .

.

! ) $ .

 .

.

.

             .

  .

!  .

.

      .

 .

         * % .

" 6  .*.

 .

&      ' '      .

 ' .

  .

 .

  .

 .

$ .

   .

!   '  .

 .

 .

 .

    .

'  ' $ * % .

 .

' .

.

    .

  '    .  .

 .

!    .

  ..

 !  .

       .

 .

    .

5 J 'K J-K  J4.

.

$K .

  '   .

 ! .

 .

 .

    .

  $ .

 .

         .

 '  .

  .

    *  '  $        '        .

 .

&   '$ .

            .

$ ) T  U  '  .

 '  '  /2     .

 .!  '.

5 .

  '     .

 ! .

  L .    >  L .

 .6 L .

 L ( .

<   ..

 '     .

$ .

 .

 .

   *        .

$ .

     .

      *  .

 $ "         9   .

  $!  .

.

      .

 .

         * % .

.

 .

   !    .

 .

&   .

$  .

 .

      ' 2  /22  .

 .

    .

 .

5 /22Q       2Q    ' .

    ' .

   .

 .

 .

 '$ 3       .

    .

   .

 .

 L U  .

 L T  .

  .

 !  1AQ '  .

.   L 6 L ( .   . '' L >  L .  .

<    ..

 !  .

  .

 !   .

'       $ 6 .

   '  .

     '  .

 .

 !   #   .

 .

    ' $  '  .

   F ' .

     .

 .

!   '* .

!    .

 4.

  .3A<$ .

 .

 .

  '  .

      .

   .

 &   '           ' .

 V4. .

V    AD<$ " .

9$  .

        7    $ !  $ .

 .

& '   .

     .

   .

  $ .

 '    .

 '  .

 4      .

 &    .

 .

&  !    ! .

 .

    .

$ .

   '     5   &!     '  .

 '       .

   .

        '   .

 & $  .

.

      .

 .

         * % .

   .

   .

       %    ! .

 .

       '       .

 & 5 J4.

$K .K  J.

 4.

          .

   .

  .

  " .

   .

       .

  F  !    $ .

    . .

 .

  "      .

   ' ! $ "  .

 .

 .

 .

      ! +  .

      .

  !  .

.

      .

 .

         * % .

.>..

+$(  % .

 .

         ' .

 '      .

 !$ .

    .

 '   5   .

 ' '' '  .

    .

.

  '     '       .

  $ 3   .

 .

 .

  .

 '        ! ' .

 .

' !$      3      12Q        .

   12Q   $ - !    ' ! .

 '     .

!   .

.

 '   .

     '  12Q$ E  F.

 .

 .

.

  %     $    ! 3 .

 6.

          '   ' !'"  ' .

 .

 '         ' .

 .

& $ G   #  .

 >   .

 .

A  A2Q =A  =AQ<$ 4 . '  .

 .

 .

  .

 '       .

 .

& 3  $ I 5  .

 6.

   .

 .

  .

  !$  .

.

      .

 .

         * % .

($-.$" > .

 4.

3A<   *    .  .

    .

  .

 .

  ' .

  *     $ ) .

   .

    .

      .

$ * %  .

 4.

 '    .

  ! .

$ .

  '  .

  ' .

  .

 .

  .

 .

 .

 .

! !  $ .

 .

 .

  '  .

     .

  .

      .

    $ .

     .

   '    .

 4.

    .

 4.

  '  .  .

  $ .

 .

  !   *         I  . .

         '   .

 J7  4.

$K "           .

 7    .

 .

$ $   !  .

.

      .

 .

         * % .

%  &!   .

.

       !      '         .

 J. I 4.

K    .

   '  .

 $ .

   .

 .

    '"   .

 '   .

 .

   $ 7 .

 .

           '   .

   !     !  .

$ ' .

 J! 4.

K  ' .

 .  '  .

        64(      .

 .

   .

 4.

 '$ G    '* ! .

      .

.

$        .

   &    .

 .

  . '  ' .

   &   <$ .

   H . 4.

$ I'    >C$ 6  .

     .

 '$ +   .

        .

   .

   8 ! * %/" .

           .

 ' .

  .

 .

$   .

   .

.

   !      .

 4.

    .

   .

!              $ (   3 P  3 G '  .

    .

 .

$  (     .

 /22Q  .

.

      .

 .

         * % .

#.

 .

 .

 " .      .

         .

 .

$ G       .

 !    .

          .

 '   .

  .

$ .

 .

  .

    .

'    "  !  .

  !$ .

   ' .

  '         $  #   .

    *  .

 J) ' *K  $ .

    .

      .

.

' .

  .

 .

 '  .

 $ 7  !  .

 '    .

  .

 .

 !  .

' .

 $     .

  .

  &      .

 .

&  '$    /Q E$ 9C        .

! "         B  C .

! "  "    .

.

    .

  !  .

.

      .

 .

         * % .

   ' .

         ' .

      .

 .

$ %  '     .

   .

 .

  $        .

 .

      '$ .

  .

 .

 ' .

     .

     ' !'$       .

.

  .

 .

    .

     ! * %  .

 $ 6 '  .

    .

 4.

         '.

      !$ .

  > 3      .

 (   %     $  '  .

   #   .

   '$ %    & .

!     .

 '.

    ! .

    .

 .

    '   .             $ .!! .

.

 >   .

.

' .

 !  '   .

  .

 .

    .

 .

$ 6.

  .

.

     .

     .

 !  .

.

      .

 .

         * % .

>$ .

 3          .

 '   ! .

.

.

   '    .

  '''$      .

 *     3 .

/2    .

 .

   *  /2Q .

  .

 .

.

 2$ .

    .

.

 *    !   .

$ .

 '  .

         .

 & '''    '    ' $ 3   '     .

 6  3 ' .

 '        .

 .

:=2R$  %  " F +.

.

!  !$ % ' !   .        $        !      '    #  .

 .

    .

   .

 $ .

  '   !    .

   *    $ /.

      8      $      $    .

 .

        .

 ! .

    .

  !   .

    .

   .

 $ .

 .

      .

  .

 !    2Q$ 6    .

  .

 ! $ .

    .

       .

.

      .

 .

         * % .

.

    .

 .

         .

    .

.

.

      .

 $   .

 .

           .

   .

     .

 .

 .

 $ ".

%5.

     ( +.

.

 .

  " .

     % .

.

 .

.

 % .

.

! %     # .

  .

          !  .

     $ .

 '  .

   # .

       .

 .

   .

  !      $ 8    6  .

   .

  .

 #     $ %      (      '   .

      !$ .

      .

.

    $ ?.

.

  .

.

      .

 .

         * % .

.

  . .

  .

 %     .

 .

   ''   $ .

 .

     .

.

    ' ! .

 .

 .

   .

 .

   .

  $  .  " ) .

 .

.

 .

  .

  .

   .

.

  $ .

  .

! .

           .

                .

     .

.

 !  .

  $ "  .

$   .

               ' ) .

 .

.

! ". I  .

   .

!    .

  *      ' !  .

 '$ -  &  .

    F .

.

   .

 '   !      *     $    .

     ! 2Q   .

 .

 "  )% 7  .

.

     .

 $.

 .

   !  .

.

      .

 .

         * % .

'   ' ! .

 .

     .

   .$ $  .

 6    A2Q  ' .

 .

  .&     /E2R<$ ".

  '      ! .

 .

'  .

 .

   .

 ' '    $ .

   .

        5  .   .  $ .

         .

   .

   .

 '     !$ 4  .

    .

 !    .

     . .

 V4 .

6 V .

      .

 ' !   .

 $ .   . .      .

  ' .

 ' '    ! $ .   .

 ' '' '  '   .

 .    ' .

  '  .

    '$ % .

         ! 2Q .

 .

 .     .

 .

     .

.

   J.

!K .

.

F   $      $  .

  .

 .

!  .

.

      .

 .

         * % .

/<%  6       .

 !      .

$ .

 .

               .

 .

$ G   .

 '  .

   ! $ .

    .  '  !     '  .

 ' .

 .

   '  .

.

  !  .

 .

$ 6.

 .

'   .

  '     '    .

      .

$ 3   '     .

 .

  .

       .

.

   '   & .

!  $ - ! .

 .

  '   .

   !  .

 .

 .

 .

    !$ 6  .

 .

 '      .

   .

  $ 4 .

      ' .

 !  .

    ' .

    ! . /22Q<   ' .

2Q<$ . .

     '  '  .

       '  .

  & $ .

 '  .

      .

 .

         .

    ! .

'$ .

 .

        .

   .

 B         .

 .

!  .

 '' .

  .

.

      .

 .

         * % .

.

$ 6 .

 ! ! .

'   ' .

.

 .

   $ %.

'  .* % .

  .

  4.

   .

     '   .

     !  .

   .

$ 6 .

 ' ' .

     .

.

   .

  '$ .

 ' .

    .

 ' .

 .

  .

   .

$ .

  4.

' .

       .

   .

.

    .

 ' '  .

    .

 ' .

$ .

      .

     .     '    '  '    ' .

 $ +.

       8    .

 .

  $ .

  !  .

.

      .

 .

         * % .

.

. .

  ' ' . .

   F  '    !     .

 $ G      .

      .

 3   O4          .

 .

   '  !  .

 -    4 .

 $ .

 3    O 4       .

 '.

 .

            '  .

 .

$ I  .

 .

          .   " F.

 .

.  .

 L  .

   .

.

.

!  < .

       $ .

 ' .

                        .

 ' '     .

$ .

 -    4 .

  ' .

 ' '' '   !     .

       & !   .

$             .

      .

 !  2 .

   .

     ' $ 6 .

 .

  '           /22Q  .

     ' !      !  $ <  .

    L      .

 $.

 .

 .

 .

 .

.

% .

  !  .

.

      .

 .

         * % .

%    .

       $ .

  .

  .

      .

'$ %   2Q     .

 "  ' !  /22Q  ' .

   !   .

'  /22Q$ - !  & ' .

    !     "    .

.

   $      .A2Q  .

/22Q  ' ' !   $ "        .   ! !  ! A2Q     .

 .

    % .

 .  $ ! . .

.

 >.

 ' '    F       ! .

 .

&    $ 4 .

 .

 F   .

 .

&     .

   $ .

  &   .

 .

  " .

  ' .

 '.

    $ .

        ! '.

  .

  .

  $ E  F.

 L  .

     .

        F.

 L  .

    .

.

.

!  .

.

      .

 .

         * % .

. " 6  .

   '   .

 .

  !    .

.

$ .$ 5.

  .

   !    .

 .

 ! .

     $ %     .

 .

   '     .

 JK  $ (  % .

       '   .

 3    '  .

 >  . > 3   6.

 !<$ "  .

  ' .

 .

 !  .

    !    !$  .

  ' .

 .

    .

   $ ./<%  .

  .

 .

 '       ! .

.

  $ .  .

1" I   ..  9 .

' '  .

 4.

       $ .

           .

 .

   .

   .

 .

    '  .

.

      .

 .

         * % .

.

 '  !  .

  $ .

  .

 .

     '    &     .

  .

.

$ 8 .

 4.

  .

 4.             '5 J.

 K  J( 6 7   $K . 4. .

            ' . .

    .

      $ ( 6 7              !.

1/ 7 . $ 0%.

 .

   .

   .

  .

     '  ' .

$ 6    '   .

!    #$ -   ' #   .

     .

 $  %   % .

  '   &         .

  $ % .

 .

''O. ''O.  ...   L C<      . &  ' .   L A<$ -   .

! .

    .

  .

 V  ' I ' 4. V  .

     3.* 4.

$ G      .

     .

* 4. I '  3.

   F  .

.

 J.

 . .

  4.

K  $ +  .

  $ .

    .

.

 .

  !  .

.

      .

 .

         * % .

4  .

  .          .

 4.

!   $ .

  .

    .

   .

 '  .

 .

.

 .

.

!  . .

  L >  L  .6 L ( . 5 .

. L  <  .

  .

  L 6 L ( .. '  . '' L  .   L >  L .

 L  <  ..

  .

 .

$ " 9   .

  .

    ' $ 7 .

 .

 .

  '   .

 .

.

$ 4 .

 .

 .

  .

            0AR  $   .

  .

 &    0AR    F  5       .

 .

.   .

     &     .

   .

   $ +  .

      .

     .

                .

.

!   !. % - .

 .

& .

          .

 .

  .

&  $ .

    ' .

    .

!   !   ' .

  $  .

.

      .

 .

         * % .

3     .

$ .

  .

 .

  .

  "   .

 .

  > . .

   .

.

.

 .

 $ .

     .

   .

       .

      .

$ G   !  .

 '     !     .

    .

  $  .

    .

.

 .

$   .

% $ ! '.

   .

!     .

 D E/ .$ .

 ('' .

 .

 4.

     .

    .

  .

 $ 4  '* .

        ' ! '! $ .

 .

 J  K    .

  '  ' - 4.    5   4    .

 -  4.

 6 -  4.

 '  4 .

% * "!?* > 4.    4    .   ('  B  $ 7  $" .

  (  .

  .

4.

  .$$ 4.

  ('  < .   .

  .

 4.

   .

.

      .

 .

         * % .

 &+  % !!' "!?. ?"!?D?E&(.  &+  % ' "!?.* %" F G "!?F "!?G .  &+  % ' .  &+  % !!' .

?"!?D?E' . ?"!?D2E&(.

?"!?D2E' DE DHE "!?DE "!?DHE .

1  . .

? .

.1&82.

-  .1'$..

?"!? .

1&"!?82..

-  .1' $..

 ? &(.?.

?82.

1 $ '$..-  .

' % .

'  .

.

  1AQ % .

.

  1AQ  .

 .

&   .

 .

&   .

 .

&   .

 .

&  I   '  !   '  !  .

I  .

3 .

7 .

     I '   4  .

 # .

' 4.

 '  ' .

  .

 .

& '  .

.

      .

 .

         * % .

 .

 ? $?  &  .?.

?(.

?82.

1$ '$ .- ..

  .

 .

& .

  "!?  .

.%  "!? .1 -.

.1 .  .

 .

 0AR    .

   ' .

    .

    B.

 / .

 . &(.

' "!?. &"!?(.

' $&  .

' $?. &  .

?(.

 '  .' ".

     '  .

 .   '   '  .

  !       '  .

 -    .

.

      .

 .

         * % .

+  3 /   6.

      .

   .

   $.

      .

.

 .

.

! ".

    .

$.

   .

  .

      .

    ! 5$   .

      .

 ! 6 %$    .

          .

  $      .

    .

   .

    .

$         .

   ! .

.

      $.

%  .

 .

 .

     ! .

      .

 .

 .

9  .

  ! 6  7.

 .

  .

  6        <"#1 .

.

.

      .

     .

   .

 +! '     % .

 .

.

.

%  .

.

  .

$   .

 C  .

 %     !  .

.

      .

 .

         /   .

(  !// .

.

 .

&       .

 $ .  .

  '         .

.

       .         $ .

  $ G   !    .

  .

    .

$ .

 ''   ! '  .

!  ' '   $ /<            ' .

.

.

    .

    $ .

      ' .

        '    "     .

 .

   .

.

! $ .

   '  .

  .

   ' .

               .

$$   . .

 .

<$ %  .

         '  '.

    .

 '$ 3'   .

.

 *    .

    .

  .

           .

$   /< 4       .

      .

  .

    '  !   .

     .

   $ .

 !  .

    .

        $  .

.

      .

 .

         /   .

/  .

    .

    .

.

   5   .

       '    .

$  .

   .

 &     .

.

    '  ! .

 .

$ .

   #  .

    .

   '  #   ! $ .  .

 .

  &  .

 .

     .

   .

 .

$ 6  '' .

''O.  ..   L <     .

 .

     ' ! .

         .

 J K    !    .

   ' .

    .

   .

   '$ %     .

           '..

    $ ($)5 /<     '    &  6                      $ %  ''    .

    .

  !       .

    $ I .

     .

      .

    &   $ .

  '  '      .

 '       $ 6  .

 .

 !      F       ' .

  &      .

$  .  .

 .

 .

           .

&  .

 $ %  ! !.

       .

  .

       .

   .

 .

 !       !   $ ) .

  .

     .

    ' '    $  .

.

      .

 .

         /   .

.

.

.

% +    : > .

   .

 .

 .

.

! "   .

    .

 .

 .

 .

 .

 .

  .

 .

 .

! >  6  .

.

        ' .

   ' .

.

      .

 $ .

 !   .

   ' .

.

 .

          !  .

 '$ 6   .

! .

    .

  .  '       !      .

  & !$ .

 '  # .

 !   .

 .

      !   ' $ " .

 $ .

9.

   $  .

   .

      .

  .

 !  .

.

      .

 .

         /   .

"4$".    .

  '           .    .

 *    .

 $ .

    .

 *  .

       .

.

!   '  $ I     .

   .

.

 .

        $ .

  .

!   .

.

   .

    .

$    .

  .

    .

'  .

 '  .

  !   .

 .

    ' ! .

' .

 $ %    ' .

  '  .

           .

  .  .

   >$   ! .

     .

 .

      ! .

 .

$ >      .

 .

 .

$ $   J8K          J K<$ .    .

     .

    $ 7       .

   .

    ' E         .

       .

    .

/ .

  #  ! .

$ .

 .

                ! .

$ .

*.

 ."!$" .

              $ &  .

.

     .

  $ .

         '  . .

      .

.

      .

 .

         /   .

.

   $  .

     .

  .

 .

.

 .

      ' .

 $ .

 .

     .

        .

   '    $ 6   !  .

   $ .

  F   $ >%<$=  ) .

   ' 6  .

       .

 !   #    ''   $ 6    .

'  .

 .

  '   .

' '  !  .

    $ .

 6 .    .

   .

 .

"  '      .

.

  #!$ .

 )  .

  .

      .

 .

   .

!     .

     .

  .

 !   .

 $ .

 '     .

   .

      .

 .

 ! $ .

$ 4      .   3 4  3 %    ' .

   .

       *     '     !$ .

 .  !           ' .

.

' .

  .

   *  .

 .

 !   .

    .

$ F '    .

   .

 .

   .

 !     .

    .

!  .

.

      .

 .

         /   .

.

        .

 ' $ .

  '.

       .

     .

   $ %  ''  % & +.

  .

   .

 ! .

$ %        '  .

 .

  '$ %  .   !  .

!   .

 .

 .

.

         !$ %  !  !  &     .

    $ (2(.

 6.6    .

  .   .

$ %  ' .

 .

    .

  ! .

    $ .

 .

  ! !  .   .

.

'   !  !   .

'   F  .

.

  '&   $ )     .

              .

 3  '      .

 &       !   .

  .

'   '  $ .

     '       '    !  .

    .

 $ 4      !  ' $ B  F ". .

 .

.

 .

 .

 .

    .

.

$  9!  .

.

      .

 .

         /   .

($)"%<.

8$  !      '      .

  ' 5       $ .

  .

  .

 .

           .

 ' *    .

 .

    .  ! !   .    $  .

 .

        $       .

 !  .

    '       .  .

 !     .

 '  $ .

         !  .

  '  .

    .

      ' .

  ' '$ .

    .

    .

         .

 !   .

    .

$ )  .

 .

           .

 '    !   '.

  .

  $   ?       .

 .

.

       $   .

.

 .

   $ ! B.

  F '    .

 .

.

.

 .

 .

   .

 .

   .

   .

 ! !     .

    .

!  .

.

      .

 .

         /   .

6  6     .

 I   .

 ! '          *  D  /E$ *   .

       .

    *     .

  .

  ! F   $   .

    ''     *    .

 ' .

 .

   .

     .

 .

 .

$ 3   ' /0  6  /2   .

 .

.

 .

 .

  E  $ 6  /:    /2   .

 .

 .

  .

 .

   ?      .

  ! ! $ .

  .

  .

  ' .

  # '     '           .

.

$ ..  (              9 ! "  .   .

 .

   !  .

 .    .

     .

 $ .

      .

.

   ! '  .

 .

 I     .

'            ' .

 $ %      .

        .

      .

  'F        !  ' I   .

$  .

.

      .

 .

         /   .

.

 .

  .

 .

  .

 .

  ' .

 '   ' .

     .

  .

  .

$ .

 .

     '   .

 !   '    ''     '$        '       '       $  .

  ' '. .

 .

  &    .

  !     '  .

       .

   .

   .

.

         *$ .

.

 .   .

!    .

     .

   .

 . $ "  .

              .

       ! .

 '   ' .

 .

   .

  !   /=  . :1 .

 $ . .

 !    .

.

   '  .

 .

   .

 '  '$      .

   .

 .

 .

! ! .

  $ "  .

 ' .

  .

    .

  . .

  '   .

   .

.

$ .

  .

*         .'     ''.

.

      .

 .

         /   .

  !  .

     '   *$ %  .

        *   .

      F .

           ' $ >.

 %   /<.   .

          .

     !  .

. *   $ "$ $= .

8 (.

 %        !   .

       .

     .

$ - !     .

  8 ( ' 6 '    .

 .

      .

   .

 '     .

/   .' D2R$ .

    '  >  ' .

  !$ .

   ' !    .

  !     '    .

  ! !$   .

  .

     .

  .

  !     ' $  .

.

      .

 .

         /   .

! 5   ''  .

  '  .

    ' .

$ (.

 @.

 .

'   .

   HH  HH  !  .

.

5 .

  .

   .

 .

   .

'   $    .

  .

        .

$ !  .

.

      .

 .

         /   .

  "! 5  .

  '   .

  &      .

    ' .

$ (.

 @.

 .

%  .

 &  ! #5   .

 .

'   ! .

!$    .

 .

  ! .

".

5 .

    .

  $ @. .

 E    .

9        .

   !  .

.

      .

 .

         /   .

".

 .

5   ! !    .

$    .

     .

   &   !& .

.

5  '    .

    .

   *$ ).

 1"  <       :.

.

>                    .

  ! $5 .

   .

 .

.

  ' .

 ' $ (.

 @.

 .

  .

.

 !  .

.

      .

 .

         /   .

 .

5  .

  '  .

 JK JK  JK    .

J/K J1K  J:$K (.

 @.

 .

% .

      ! % 5 .

       .

.O< .

.

 '    '  !   .

 .

.

  $ (.

 @.

 .

.

    .

   .

   .

   ! > . .

5$ .

    '' .

 .

      '   *$ . .

.

    .

     !     $ .

     *     ' .      .

  .

     .

      ' *$  .

       .

   .

   ! .

.

' .

   .

  ' $ .

  .

  '    $  .

.

      .

 .

         /   .

"9 % ' 7       .

 .

   ' .

         '$ C     2 .

 .   .

   I   3  .

   $ 6 * 1 I 4 !   '    ! .

.

  .

.

    .

  $ 4       I 4    .

 .

    !  .

.

$ G     .

 .

'       .

  .

 ' $ %    & ' .

    .

    .

!     .

 .

 .

.

  .

  .

  .

 .

 .

 .

        I 4 .

.

    .

$ 8  .  .

 ( .

    .

         $ 3  *       !.

   .

 .

    $    .

 .

  .

  '  '   F $ .

    '   .

         .

  .

    .

     .

    $ I%!.  .

 .

  ! !  F   5 .

      .

$ .

  .

        5 .     .

 $ ..

  !    .

      .

   .

 ' ' .

 .

       .

  $ %  .

.

      .

 F $ .

 .

       7 7   .

.

      .

 .

         /   .

7 .  7 ( .

   6   !  .

 .

       .

  .

.

    .

    .

$ .

 F      .

    ! .

     .

  .

&   '$ .

        .

.

   '    .

 .

    '   .

  F .

 .

$ 6.

!  !          .

 '  .

   .

           .

  .

   $ E 7.

     $  .

  .

     .

  .

.

   .

 ! .

.

 7    .

 .

 .

 .

         .

.

 ! &   .

     $ E2Q /22Q  /12Q    "  '.

.

   .

        $ %   .

       $ ! 5    .

 '      ! .

$ .

      .

WAQ   <$ .     '   .

".

5 .

*   .

       ' .

  .

 .

 $ .

 .

        . '  .

   W1Q<$  .

.

      .

 .

         /   .

! 5  .

 '     .

 .

 7    .

 .

     6 $ B  .

 .

.

    .

.

         .

       F     $ G   '  .

 .

.

    .

.

 -.

     .

  .

&   '$ &! 5  .

 ''' '      '     .

.

$ )  '''  !      .

'$ % 5    .

 '''    .

 .

 .

.

$   .

  .

 '''   .

$ '!5    .

 ''' '      !  .

   $ .

    ''' .

$ .

 !.   !  .

   ! .

   $ ("! $ 5  .

 ' '' '   ! .

.

  $ 6!  < .

  .

$ 7.

  .

 .

  .

$      .

$ ! '  .

 .

$ (" )5     ' .

  .

      .

.

 .

.

 .

.

  .

 $  .

.

      .

 .

         /   .

(" .

*&5    .

.

   *  $ %  !  .

.

    $ $ .

  .

     .

  .

5 % 7   % ( .

    % 3 7$ .

    .

    .

 '          .

 '     .

  $ .

  .

    #    .

  .  .

$ .

 % 3 7     .

    !  .

$ %         .

 .

 % 3 7              .

$ 6  .

        ! !"        .

 $ (  9   .           !      ! .

     $ 9      .

       9  !  .

.

      .

 .

         /   .

   .".

    .

   .

     $ %  & ' .

    . -7 &    X OY  XY      .

$ %        .

    '    .

    .

 '.

'  $ .

     .

  .

 ' .

  '.

  '   $ "  .

.

 $ .

     .

.

 .

$    .

        ! .- 29   -H".

29   .

    .

.

    .

    '  .

&     J ' $K .

 .

     .

 .

'   . !.7 .

  . ' $ .7 .

 ! .

 .

     .

.

 F   .

.

  .

.

  ' .

     $ .

 !.7 . '  * !     .

  .

 '    .

 .

7 .  . '        ' .

     $ .

  '    .

    .

  .

    .

    .

  .

'    . '   ' .7 .7 . !.

  .

&   '$  .

.

      .

 .

         /   .

%  -       .8 B %.

#   '    '' $<  .$ %      .

         .

 ' $ 4 .

 !  .

       .

 .

  ' ! .

 .

 '   .

$ .

 .

   ' .

   .

    ( ' -     .

   '  .

  .

$ < .

 .

$     .

 9   .

 ! 0%.1/ ..

 "4!  -$(2(.

  .

 ' .

    .

     '   *  .

       '    *  &    '  .

   $ 4  '   *  .

 .

 ' .

   .              $  .

.

      .

 .

         /   .

"9 (2(.

 % .

 .

& .

  .

'        '   '  .

     ! . .

    .

 $ .

 !     .

     .

   .

.

 !   .

    .

      .

 .

$ .

         '        ' 5 :1   .

.

 .   .  $ .

 &       &   .

      .

 75        .

 .

 .

&  .

'$ B   $    .

$ 9       .

$ ! ".

.  @. .

 E  .

 (9 (! .

.

-!3  @. .

 E  .

 (9(! " 0%  ' B      .

      .

 #  .

! !$ 7 .

 .

       ' #   '$ > .

   . ''O .   L C<  !   ..

   $  .

.

      .

 .

         /   .

G  .

      .

   .

.

 ) ' B $ .

 .

"    '     #     .

     .

 ' #!$ I 5  '      .

          ''     .! ' # $ B $8% -H" !8% -H   ".

'      .

 .

 ( $ .

    (  .

     .

  $ .

   .

     .

 .

    .

$   ''     .

     .

   .

      .

$ (.

    !   '  .

 '.

'     '  .

   '  .

 6  6  .

   .

  .

$    !  .

  .

  '    $ >   .

    .

 .

   '.

      .

.

.

 '         .

$ .

  .

     ' $ 4  .

 L (       $ .

       .

     .

          .

      .

  .

$ .< A.

 .

      !  .

 .

   .

  $  '  .

 .

    !  >       .

' &$ %   .

   6  %         +.

   !   .

   .

 .

    & .

!    $ G   .

     .

'   .

 .

   $ %    & .

!   %       '      .

$ % > P ! .

 .

   ' '  H % $ .

  .

 .

   .

  .

 8  +.

$  .

.

      .

 .

        /   .

G    .

!   .

 .

             .

 $ %  &     '. !      .

      ' '   .

 .

 H 6  H '   H .  .

 <$ A.

" .% "..

  Z  .  .

 ' .

[ ' \ (  ] .  .

>  L . ^   _   S 4 `  a   b     c %!  '  d %! B  e 3' > f  > >  L .

 L . >  L 1 >  L ( >  L + >  L = >  L ? >  L E >  L " >  L  >  L .

 L ? >  L / >  L N >  L D >  L 2 6 L 2/A2 6 L 2/A/ 6 L 2/A: 6 L 2/?0 6 L 2/=D 6 L 2/=? 6 L 2/E1 6 L 2/0D 6 L 2/:: 6 L 2/:0 6 L 2/:A 6 L 2/=/ 6 L 2/D/ 6 L 2/?2 6 L 2/E=  .

.

      .

 .

         /   .

g 4   6 L 2/==   h 6 j  > k l  >  L .

 L i >  L i >  L .

+'   < >  L . L B >  L B 6 L 2/DE 6 L 21:2 6 L 2/02 6 L 2/A= 9%  m  n  o * .

 L A >  L .

. L = >  L  . p 6  q 6 ' r 6  s 6 ! t 6  p 6 u 4! >  L  .

    >  L % .

    >  L ) .

    >  L s .

    >  L I .

    >  L .

 L  >  L .

 L Y 6 L 2/E2  .

.

      .

 .

         /   .

' v . } >  >  L .  w   % r  s +! x   y >!  z ( t  { .q .

 L % >  L .

 L  >  L .

 L 4 >  L .

 L ) >  L .

 L s >  L .

 L X >  L >  L C >  L .

 L I >  L .

 L | >  L .

 L P 6 L 2/:= 6 L 2/=E 6 L 2/?A 6 L 2/A1 6 L 2/E0 ~ 6     Ä 6  Å   Ç 6 ' É  ' Ñ 6  Ö   Ü 6  >  L .

 L 6 >  L 6 >  L .

 L G >  L   >  L .

 L  >  L %  >  L ) 6 >  L )  >  L I 6 6 L 2/D? 6 L 211D 6 L 2/D: 6 L 211A 6 L 2/D0 6 L 211= 6 L 2/D= 6 L 211E 6 L 2/DA  .

.

      .

 .

         /   .

á   à 6 ! â  ! ä .  ã   å  ! ç  ! é   @   è  ' ê  ' ë   í   ì %  î   ï % ' ñ  ' ó %  ò   ô % ! ö  ! >  L I  >  L s 6 >  L s  >  L .

>  L . >  L s  >  L s  >  L   >  L   >  L %  >  L %  >  L )  >  L )  >  L . L .

 L  >  L   >  L .

 L  >  L %  >  L .

 L 3 >  L )  >  L s % >  L s % 6 L 211? 6 L 2/D1 6 L 2110 6 L 2/DD 6 L 21:/ 6 L 2122 6 L 21:1 6 L 212/ 6 L 21:: 6 L 2121 6 L 21:0 6 L 212: 6 L 21:A 6 L 212A 6 L 21:? 6 L 212= 6 L 21:E 6 L 212? 6 L 21:D 6 L 2120 6 L 21:=  .

.

      .

 .

         /   .

õ I  ú > .

ù .

û >  ü  † > ' ° ' ¢ >  £  § > +! • ! ¶ >  ß  ® )  ©   ™ ) ! ´  ! ¨ ) ' ≠  ' Æ )  Ø   >  L I I >  L .

 L > >  L >  L .

 L - >  L  >  L .

 L  >  L % >  L ) > >  L ) >  L .

 L 7 >  L s >  L I > >  L I >  L .

 L " >  L   >  L s ) >  L s  >  L % ) >  L %  >  L ) ) >  L )  6 L 212D 6 L 21/= 6 L 210E 6 L 21// 6 L 210: 6 L 21/1 6 L 2100 6 L 21/0 6 L 210= 6 L 21/2 6 L 2101 6 L 21/: 6 L 210A 6 L 21/E 6 L 21A2 6 L 21/? 6 L 210D 6 L 21/D 6 L 21A/ 6 L 2112 6 L 21A1  .

.

      .

 .

         /   .

∞ G  ±   ≤   >  L )  6 L 211/ 6 L 21A: 6 L 21AA 0%   i 7   & ( .

   J 7   K ( .

   ≥ 7 ' µ ( .

 ' ∂    ' >  L U >  L .

 L U >  L T >  L .

 L T >  L ¥ 6 L 2/0A 6 L 2/0= 6 L 2/0? 6 L 2/0E 6 L 2/?/ >  L .

 L ¥ 6 L 2/E? >  L .

 L : 6 L 2/:D 6 L 2/AA ∑    .

 ' >  L .

 L 0 ∏   ' >  L .

   >  L A >  L ª >  L . π % ∫ I  # W O' º   º . L + .

 L ª >  L .

 L / '  >  L .

 L /  '  6 L 2/??  .

.

      .

 .

         /   .

Ω 6 ' R   æ   ø !  >  L P >  L .

 L E 6 L 21/A >  L O 6 L 210? 6 L 2/?= ¿ + .

  # >  L Y  ¡ 7 .

  #  >  L X ¬ %  √ I   ƒ 7 *  ≈  ∆  « #   »    …      ' À  / à  1 Õ  : Œ > # œ > .

 >  L 4 >  L 7 >  L .

 L 8 >  L  >  L >  L 8 >  L .

 L D >  L  >  L .

 L ( / >  L .

 L / 0 / >  L .

 L / 1 6 L 2/:? 6 L 2/EA 6 L 2/?E 6 L 2/?D 6 L 2/EE 6 L 2/ED 6 L 2/E: 6 L 2/E/ 6 L 2/?1  .

.

      .

 .

         /   .

– .

 # : >  L .

 — . ‘  ’ 3  ÷ G >  L : >  L 0 >  L . L / 0 6 L 2/D2 % . “  ” .

 L 1 >  L 3 >  L G 6 L 2/=A 6 L 2/=0 6 L 2/=: 6 L 2/=1 6 L 2/1E A 1 ◊  ÿ  ' Ÿ >'  ∆  ⁄  >  L  >  L  >  L | >  L >  L .

% $?B&  . L 7  $" .

   $?8% &  .?B' .

-  . ?8% ' ..

     . '' .

   .

   .

.

      .

 .

         /   .

. ?.

&(.

1.?*.' $?.

&  .

' 8%  "!?8%  .? *.1.

        3       .

        4      % .

  %    =  $?"!?*&  .

?"!?*' $?"!?&  .

?"!?' $?"!?J?K&  .

?"!?J?K' $?"!?J2K&  .

?"!?J2K' $?"!?7&  .

?"!?7' $?"!?B&  .

?"!?B' $?"!?#&  .

?"!?#' $?"!?L&  .

 ) .?"!?L' 4  %   6 . ' .

  .

  $?"!?9&  . I%!.

?"!?9' $?"!? &  .

?"!? ' $?"!?8&  .

?"!?8' $?"!?I&  .

?"!?I' $?"!?>&  .

   ( .?"!?>' 7   .

         .

.

      .

 .

         /   .

$"4 $?"!?M&  .".

?"!?M' $?"!?N&  .

?"!?N' $?. ?"!?M&  .

?(.

 ?"!?N&  .? "!?M' $?.

?(.

 ?# +&(.? "!?M' .

?# +' . ?# +&(.

 ?# +&  .?# +' $?.

?(.

 ?# +&  .? # +' $?.

?(.

 ?9! +&(.? # +' .

?9! +' . ?8 +&(.

?8 +' $?. ?9! +&  .

?(.

 ?9! +' $?. ?8 +&  .

?(.

 ?"!?# +&(. ?8 +' .

 ?"!? + +&(.?"!?#  +' .

?"!?  + +'   *  1  %  *  1    *  /2  %  *  /2  %   1     1  %   /2     /2  C   .12  C   L12  C   ./22  C   L/22  .

  L1  .

  .1  $?. ?"!?# +&  .

 .

  L/2   .

.

      .

 .

         /   .

?(.

?"!?# +' $?. ?"!? + + &  .

?(.

?"!? + +' .

  ./2  8 $?"!?O&  .

 ?"!?O' $?"!?@&  .

 ?"!?@ &  . ?"!?@' $?.

?(.

 ?"!?( &  .?"!?@' $?.

?(.

 )  .?"!?(' (' ! 4  %   6 . ' .

  .

( !   /22Q ( .

6 <  . *    /22Q    .

.

      .

 .

         /   .

+  -     B .

 .

  %$          .

%     .

    $    .

.

 .

! .

.

 .

  6      .

    .

   .

   .

 ! ( .

.

 D   .

    D       %  .

      .

   .

 .

 .

.

 .

$  .

   .

.

  .

.

$   .

 .

 .

 !  .

.

   .

$ .

             .

       .

!  .

 .

  $     % .

   .

   !    .

.

      .

 .

              .

.

.

   .

  .

.

 .

   .

     .

! .

 .

  F!  .

 '  .

 ' $  '  ' .  ''   F '   '.

      .

 .

 #  ''        '   $ % .

   .

 '  ' .

    ! .

  .

'.

   $ .

   .

  .

   !  5  .

 .

 F   .

 '  .

     ''  .

 .

 '    .

      $ 6 !    .

  & .

!   #  '  .

 .

        .

 .

.  $  .

    .  !  '  .

'   $ %              .

   '                 ' $ % .

 .

 &  ! .

        .

 .

    .

 $  .

.

      .

 .

              .

A A .% .

 .

         '*  '  '  .

  .

.

 .

$ - ! .

  '   .

!     '" .

 .

 '  .

  .

$ G    '   .

   '   .

 .

   ' $ 6  F'   .

! !.   '   ! !   .

         ' $ .

       '  !    #  $ .

 .

  & .

   .

.

 '  .

      $ %  &    .

 .

  .

   '    F .

  .

 .

$ %  & .

  .

  '   &          .

.

   $ 84$  .

  (*    .

 '   ''    $ %  &    .

 .

 .

.   .

  .

    .

!    $ .

         '  .

        .

  *$ .

 !     .

    .

 .

     .

  # #$ 6!   .

 *  .

      ! .

 .

   '' ! $ .

.

  &       .

 .

 .

 '   !$ .

      ! .

        $ .

      .

     .

   .

   $ 6  '  ' '        .

      .

.

         $ %  '  ' .

  .

     .

' ' !$  .

.

      .

 .

              .

.

 .

  ! !  '.

     .

      * $ 4       .

 '   .

  $ G   .

  .

    '.

   $ %  &  .

 3  '       .

    .

   $ %  &  .

 %'  *  '' F .

    .

 '  $ 6 6 .

 I I .

  '      '      '   .

  .

 .

   .

.

   $ .

    & ! .

 '   '  !         .

   .

 '  .

 .

   !  .

  .

     .

 ! $ .

    !  ! $ %      .

 '   122Q       .

 .

$$ .       * .

        <$ .

   .

 .

   .

.

     .

.

 &   '     !  . $ *.

 4     !  ' .

        .

 '     .

'   .

 ! $ .

 '.

  #     '    .

 4 '.

  $ M   M .

     .

  .

 .

   !  .

.

      .

 .

              .

*.%. 4   ' .

$ .

 4   .

 .

&    !    '   $ 4 ' '            '.

' .

  '     .

 .

$ *.%."  4    '$ 4 ' .

    .

' '  .

  .

  4  .

'           ' .

         $ .

  '  .

  ' '     .

 $ )   ' ! .

 .

   4 ' .

 .

.

%."  4    $ ) 4 ' .   ''    $ *.

 .

.

       4 .

  !.

   !$ .

      JK .

.

 .

 ! .

   '    .

      $ )  .

    C  .

!   0!  !  . 0//K .

.

   .!   !  .

.

      .

 .

              .

" 2"  .

       ''  .  .

# .

 * '    $ 4 '      '      *     ''  .

  ! $  ' .

 '  /2Q ' .

 '   ''    .

 '.

$ G    !   .

 '      '.

P. .  $ %&   '     $ " .

 .

1&     ' >F  .  .

  .

      *   $ 4  !     ' >F    .

 .

! ' '  '   *       $ .

 ' >F    '.

  '  .

 !      .

   $ ' >F     .!  $ 6   ! '      !   ' >F   .

 ..

   .

!  ' >F$K . 7    J.

    .

   ' .

          ' .

.

 '  .

 '  '$ 4   .

       ' .

   .

 .

   .

   ' .

   ' >F ! '   '     $ 6 '      .

   .

 ' >F     .  .

' .

.

    4  '     .

   .

 '   .

    $ G   '  .

 ' >F      .

  '"  .

  & .

 ' !   .

  '   .

 ' >F        .

 $  .

.

      .

 .

              .

%    ! .

    .

 *  ' >F   .

    $    '        ' >F  '  ' 3$ 6     .

&   .

   .

 7   .

 ' 3  $ .

 .

       .  '$ G   ! .

  .

    .

     .

'    $ 3  &    .

'    .

 ' 3 .

5 .

     ' .

    .

 $ 7    '   .

      .

 ' >F '      .$ %  '.

 .

 '.

  5 ' >F   $ 4  '    ' .

'   ' >F     .

 .

    '   .

  .

7 H ' >F H   <$ .    .

 .

 '   #  '.

      .

.'  ! .

      '  .

' .

.

 .

' '      &   <$  F  .

 .

 .

.

 .

      %  ! A.

  .

    .

       .

   .

     !  .

.

      .

 .

              .

.

$/  .

.

 !   !       F'   '     $ .

        .

 .

 ' '.

.

   .

 $ 6 .

 &    !  '  .

  '     .

   &             .

   ( +  4$ .

 ' F'  &   .

  .

 !  .

 &      ' $ 6F .

         '      .

 !*    !     .

 '$ .

  H - '<  ! '  !*  . - '  .

      ' .

 ' &    $ .

   F  '       " <.

 .

$   $C.

 .

   $ ! ( .

      .

 .

  $    .

 !  .

 '    .

    !$ .

 .

 .

  '    (+4 .  .

!   .

  .   . .

 !<  .

 & !   !$ .

  .

 !  .

   .

 .

   .

   '   '    !  .

  .

 ' !   .

$ .

 ' .

  .

 .

  .

 .

  .  '  ( +  4   .

 .

 .

   .

  .

 !  .

 ! .

 $  .

.

      .

 .

              .

.

 .

 '     .

         '      '  .

 F'  $  .

 !   . '       .

    .

 .

 '$ 6.

 .

.

 .

 '         '   .

   /12  /11   <$ ($P%9  . '. F'5 7!  .! .

 .

      F   ! %'  H 6F'   .

    .!           F' $ 6 .

   '  .

 7   .

    F' K   . J.

.

!     .

   F'$ .

     ' .

       '  .

 F' $ .

 F'  .

         .

           .

. '' L >  L +  .'          ' .   L 6 L +<$ (7    $ .

  .

    .

 .

     7  $ ' N (7 !  .

.

      .

 .

              .

!       .

     F' $ .

   !          '  .

 F'   ' ! .

  H 6F'<$ 6  . 6F'  .

F'          * .

'  .

  .

  $ .

& '  .

 .

 F'   '    '     ' !        ! .

 '' $ * Q   .

 .   F'  '   5    4 .

$ .     .

 4 .

             .

  /A2   .

      ' ./22  /22$ %     #       .

     .

     '   F'$ 9-.

 .

 7! F'  (  .

 .

.

     +.

 7 !  '       '    $ .

 .

 F'     . '.

    !   .

  '   .

$ 4   &  .

.

 (+4 .

 ' .

.

    .

   '5    .

$ .

     !$ 4   2 !   /1E  .

  1AA$  ! .

  F .

 ! !  .

   $  .

.

      .

 .

              .

.

  ' ! .

    .

  .

  !  .

 ' $ 6 !  .

   .

     '  /22Q   .

 !  .

  .

  F  .

    $ .

    .

  .

  .

 $ 4  . '.

    /$22 .

.

  !  .

   .

  $ 6   ' ! .

   .

   .

F  ' .      .

 '  $   .

     .

  .

   .

 '       .

    .

 $ .

 '           .

        .

 .

 '$ 4    .

         .

  .

 !   .

  & !  .

    .

  $ -  >  .6< .

 '  ! .

 !   .

  !   .

  $ .

  !  .

 !    !$ 4  .

    .

      .

  .

    .

  !$ .

    .

 ' '' !     .

 .

.

   2  1AA !$   .

     /1E " 1 $  7  .

 .

 .

  .

.

   .

   .

 $ ! " 7  .

$  .

         .

!  .

.

      .

 .

              .

 .

  !    .

 A2Q$ G &   .

  6       ! .

 .

 '$ .     .

  .

.

 .

   .

   .

   .

.

     .

  '  '   .

      !  .

$ 6 .

  '   .

 .

 .

  '   '       ' F'$ % - .

 .

 7! F'      .

 .

     F '  .

 .

   .

  $ .

  .

 .

 .! F'  '  .

$ >  .

 F'      .

 '  ' $ %          ! !  .

 ' $ " +$  7  .

$  .

9  .

 .

.

 .

$    % $ ! .

! F'   '  7!5 . .

 .

 '      .

    .

     .

.

.

      .

 .

  .

.

      .

 .

              .

     .

$ .

   .!  7!   .

  .

 '$ 6  7! .

       .

  .

  .

'  F'        .  .!    .

 . $ .

   '  .

 .

 '  /22Q   .

    /22Q .

$ .

      ' .

   '.   . .

    .

 .

 !  .

 .

 ' .<     .

<$ %  . F ! .

!     J!K         .

   .

$ 4  .

  .

 !       .

   .

.

  ' !       .

$  ! .

      .

 .

    !  ' !      .

'$    F .

    #    .

< %  4 '  .  $ .

 .

   .

  $ .    .    F' .   >  +''<          '  !.

       .

   '     .

    .

 .

 >  +''        .

  .

  .

 .      $ = .

 8 F'  !    F .

      $ .

    F   '    .

    .

!    .

 ' ''  ''' !  .

$ 8  .

 .

 .

    '   .

$ 4      .

     ! .

 8            .$$ .

!          .

    <$ .

  !  .

   .

     .

  '  '    $  .

.

      .

 .

              .

B%Q"%   6   -O      ' F' .

   `  .

 .

    .  .

  <$ - ! .

. F'  #    !$ %      ..

    .

   $ %  !           .

  .

'$ .

 .

  F !   .

   .

       !  .

  &   !  .

 -4    ' $ 4 .

 *      !    . .

.

  .

 -    7 .

      $ .

     #      .

   $ 4   !  '   .

   $ .

  .

 F'  .

  ' $ G     .

  .

       .

  .   '  ! .

 $ G &   .

         .

 '  .

   '$ .

               $ 4  .

 .

.     .

 .  .

       '  .

        .

  .

  . ' $ G   ! .

 '   .

  .

    .  .  < L     . '' .

  .

 .

.$   < .

 .

+.

.

C .

 .

 .

8    .

.

  !  .

.

      .

 .

              .

.

  .

  .

 F !  .

       .

 '  .

   '  .

  $ .

   '    !  .

 F !   .

   '$ .

   .

   .

 .

      .

   .

       $     .

        .

      .

      .

    $ .

      .

     .

.

.

 F' .

 "  !   .

'  !  F'$ .

      .

    .

 .

.

/22Q  .

 F'   "   .

        !      .

 F'$ .

 .

  '    ' .

   '      .

    .

   F     $   .

     '    .

'    .

       .

       ' !  .

  .

 !$ %   .

  ' !      &    '         .

 .

 .

  ' .

        $ 3   '  .

    ' !           .      .

 .

     ' ( 1$ .

*.

  4     .. .

  '  5       ( +  4  .

    G $ (       !    .   .

 .

   5 .

     - .

 .

$ .

 ! 7'  .

       '     .

   $ .

 F'  .

   #    .

     & '.

.

! .     .

.

 .

! .

 ' $  .

.

      .

 .

              .

*.

1$5 6 '  F'  ' !     '  '   -O  8 +       '  4  ..

$ 4 .

!    ! .

 '.

 .

       .

  '  4  .

 '      '.

'     $ G         .

  $ "  9  .

    7      .

.

9     6 7    .

! M.

  .

$    .

   .

 $ !   >.

 .

 3 ' .

 .

 '  ' .

        .

    .

 '$ .

         '  '        .

$ .

< .

 .

      .

 !  .

.

     !  ' .

 .

$ .

  .

 .

    F'   .

 !$   .

   .

 ' .

  !    '' !    .

.

      .

 .

              .

.

 4  .

 F'     .

 .

 .

     .

      $ 8 .

.

  &  .

. .   '  .

. .

 .

 ' !  F  '    '   ' .

  '.

  '    .

     $ .

     ' ! F   !  ' $ % '    .

    .

  !      .

 .

    .

5OO$O/8|<$ (' !  '.

   ' .

 '   $ 7 .

 .

  !  '     .

 .

.

   '   .

.

 .

 ..      A0<$ .

      '   ' '   .

 '    .

' .

.

   $ .

" .

 .  '  .

     $ %           ' .

          .

   $ G    .

 < .6. .     > .

  .

 !$ )   .

         .

      $ %  &    !   .

 .

  !  .

             .

 .

 '$ 4 .

 '    .

.    '  .

 ( - > 3  .

    '        .

   $ ( .

 3  -  ' ' ' .

 .

 !     .

#   ' '  .

   .

   $ 6   .

   &       !   $ 4  !  !   .

$ .

 .

 .  '  !  .

.

      .

 .

              .

   !       .

    ! .

  '  . '  .

   $        ! .

 .<  &      .

  $ .

  .

 .  4   . '    6 7 .

    <$ I     .

    '  .

      .

  $ .

     '.

     .

 .

     $ % F'   .

   '     .

 J%   F'  .

   K      .

'  ' .

  $ .

 6        .

 .  '  &     ' .

.

 .

     .

  $ .

 .

 .

     '  ' .

  &     #     ' M   $ .

 .

 .

.

.

 .

$   $  .

          ! !  .

   $ 3   ' & ' .

       5/22 5/22  .

      5122 5122$ % .

       511A 511A .

  '      5/1A 5/1A$ .

 .

 6     .

 .

       .

   .

        5/22 5/22$   !     .

  .

.

      .

 .

              .

  '        ..

 .     .   <$ 6 .  H .

    .

   !       .

  # ' $ .    !        .

 & !   '  $ G   .

  '   .

     '  .  $ .

   .

    .

        .

 J>$K G &   .

   &!       ' ! .

     .

 P  G !     .

 $ .

 !         & .

    .

 $   .

    '  !  >  L .

 L  .6 L .

 L  <  .

    $ I   .

 >          .

  $ .

 .

    !5  .

 .

 .

 .

  A2Q    '     .

 *$ 4 .

   -       .

       .

   .

*   !$ %  &     .

 '   '   !      .

 3' > .

.

    .

 '  .

  $ .

        !   !         ' !$ .

 7  3'    .

 !   '  ' .

 ' .

 .

      $ .

   '    .

 .              .

   .

 !$ G     .

 !    .

     '    ' $ .

 .    .

.

 .

    .

   .

 .

.

  .

    .

$ 6 - ' ! .

   !      %! ! .

 !  ..

       !<$  .

.

      .

 .

              .

B.

* % '  .

 .  '   '  ! .

 - 4.

    ' .

    * .

   .

       .

.

    $ .

   .

     '.

'  $ .

   .

 - 4.

 .

   ''       .

   $ .

   !   .

   .

  .

        ' .

 .

    $ % .

  .

 .  '      '   .

   $ .

  .

 - 4.

       &  ''        '   .

 .

.

$ .

   .

 .

       .

 .

 .

 .

 ' .

 $ .

    '  .

&  # '$ 4 '   .

   ! .

  .

    .

    ' .

   .

    .

   $ .

  '             .

.

   $ .

   ' .

  !    !  .

    !    $ <  .

     .

   .

 .

.

 .

      :   .

   >!      .

 .

          !  .

.

      .

 .

              .

" B.

* %/ .

.

   - 4.

  .

  .

 - 4.

$ %  !  '      & #   !      $ .

 .

.  &       .6 .

   * .

    .

 '   ' .

 .

  .

  $ .

   '   ' '    .

   '  .

             $ .

  .

     !   .

 '  ' $ .

      .

   - 4.

 '      . 6  . .

 .

    '  .

       .

!&    .A .

&    .

!   $ .

  '   '     .

  $ .

  '  .

 .6     '   !    . .

 #  $ .

       .

 .

 '  '  .

     .

' ! .

  $ .

   .

   '            $ %   .

       &  ' !   !   .

    $ 6 .

    .

 <    .

$      .

  .

.

      .

   !  .

.

      .

 .

              .

  .

 4     .

    '      .

  $ .

 I '     .

       '  .

 (  ' .

    F   !  $ .

 .

 '  .

  '   "     .

'   .

 .

 '   .

     '   .

 $ ./ .

7 .

  '  - 4. .

 .

 .

         '            $ 4       .

 .

.

 .

  ..

.

    7  <        $ 6 .

    '      .

 .

   & .

  ' < .  ' <  '  ' . '  .

   $ .

 '  .

       .

.

 - 4.

$ %  &  .

 .

            .

    .

6<    '   .    >  .

 L >  ..

 L 6<   .

$ 2(+ >.

.

>  .

 '     .

 .

 .A  .

. .6 3 .

.

 '  !  .

'.

        .

 $ .

 .

     '.

 .

  ' .

  .

   .

$ 4    .

  .

    $ .

 * .

. 3  .

 L 3A<   &   .

 )   .

.6 +.  .

 9( F     .

       !  .

.

      .

 .

              .

 $ . >C  .

 .

 .

    ' $   .

 '        & .

 .

!  '  .

   .

  .

    .

 '$ .

 .

    & ! ' .

    .

    '   & F  '.

    .

  $ %  &   .

  .

 '       '  .

 ! M .

  .

 .

 .

 .

   '    F'   5     .

        .

.

 .  '  - 4.

      $ "  6   .

 *   '  F'  .

 .

    .

$ .

     .

     '    !           .

 $ I  .

 F .

 .

   '    .

  .

  '.

 .

  .

     ' $ "   .

   $   .

   ! "  $     :.

  .

>     .

   !  .

.

      .

 .

              .

   . .

   .

  .

 ! .

   .

          J$K .

 .

  ! !    .

      .

 3 ' .3 H .

$ .<$ " "  $" .

 .

    .

    #      .

 .

   ' $ .

    * '   .

 .

    F    $ +! .

'    '  &     & '.

   ).

   ' .

$ # 1 ).

  .

      .

   .

$ ) .

  .

  ).

       F .

 '   .

 $ B # $  .

   .

.

 .

$   .

 .

      .

    !  .

.

      .

 .

              .

G    '  .

 & (  .

.

$ .

 (     .

 ' $ 7     '  ' .

     .

 $ G &   ! .

   '     .

! .

  $ .

 .

.

 ' .

    .

.

.

 .

  $ 6   2   .

  '  .

    12 ' .

 .

   .

    .

 !     12$ .

 6'  (  .

.

         ! .

.

   .

   .

 '.

  .

     ' .

 .

 .

  .

   .

   .

 $ " "  .

 ).

  .

 ' .

          .

 '   .

   .

.

   .

& .

 .

 ' $ ' .

       ' .

 '  !   '*$ .

 .

     !  .

 (' !   .

.

' .

 .

  .

'$ 4  .

    + 4 .

.

 .

 '  .

' .

 ).

  $ .

 7 4  '  .

    .

    4   .

 ' ! .

   ' ' ! F .    .

 6   '   .

.

    4      .

    .

 ' <$ .

   6 .

         .

 '  '  !" .

   .

       ! .

 $   .

 4    6!  ! .

 5 .

 .

   - .

 .

$ .

 .

  .

   .

    ' .

 4 ' $ .

 .

      .

 ' ' .

    .

 .

 .

    .

    .

 $ .

     .

 .

.

    ).

   .

'   '* $ 4 '  .

        .

.

      .

 .

              .

 .

   .

   .

    $ .

 3 6'   .

 '   .

   .

       .

   - .

 .

$   .

F .

    ! .

 '  .

 .

   - .

 .

$ 8   .

    .

    .

    .

    .

  $ 3 .

 (    .

 '      ! .

 ' .

.

      .

   - .

 .

5 .

 .

 .

 .

 ! .

 ' .

    .

  $ I  .

 '  .

   .

 ( .

    .

 .

    .

 3 6'    .

 .

 .

 2Q$ .

        .

 .

  .

 .

    .

  .

C.

 .

   !   % $     .

 .

 .

       .

.

   :>! B  .

 .

    .

 .

   .

    ''     .

    $ .

 - .

3 H >.   .

 H - .

<   .

!   .

   .

    $ 6 .

 ! .

      A2Q    .

.

          .

   .

$  .

.

      .

 .

              .

6  .

 .

 ' .

 '  '.

    .

 - .

       .

     .

    '   >!   7 .

  - 7 .

  .

 .

 '  .

' $ G    ' .

.

 .

  '   .

 &    .

.

 (   .

 - .

   .

!  '  .

  ).

 $ " .

   : >        <      : >   .

     <      .

E$  :>! 1 .

 .

 '  .

     .

  .!   $ .

 .

  ! '.

 .   ' 5    8   B  .   .

   .

.

    .

  .

   $ .

.

          .

.

'.

    '          ' $  .

.

      .

 .

              .

<.

1   ' '  !     '  .

 ! .

           .

   $ .

 ' .

'    '  ' .

 .

 '  .$ $ .

 .

   '   !   <$   '     /22 .

   .

.

       $ .

   !   #    ' ' .

'  !  $ .

   '    '  .

 &    !  $ 4  .

   '  .

'        $ ' .

!           .

   '$ % .

' !  '    $        .

  .

 .

.

  !   .    '      .

        .

 J6 7 K    .

   '  .

 7 $ 6   .

'     .

  !    !  .

 '$ 4  .

    .

.

      .

 .

              .

 .

$ - !     .

   ! .

  &  .

 ' .

       .

  !  .

 '$ >  '            .

       .

 '& .

'$ G   .

     .

     .

  ! .

'$ .

 '      F'   .

 .! .

.

 ).

   + 4$            .

.

! =+ $ .

   ' .

   '    ! .

6.  . <  . ' $ > .

 .

'    .

 '  .

 !$ .

     .     & .

   .

     &   $    .

.

 '    .

 ' ' ! .

 '   ( !$ '  ¥ .

.

      .

 !   $ .

       .

 !    .

 .    .

 '& .

'$ 6       .

 '     .

  ..

 '& .

'$  .

.

      .

 .

              .

"   .

   .

$  .

      9 ! .

 ! '   .

 '   .

 '  .

   '  .

 .

  .

 .

 $ 3 ' .

    ! .

 .

        .

 .

  .

  . J.

K    .

   '  .

   F   JI .

K  ' .

   '$ G    .

  .

 '& ( !   (  .

    $   $            !  .

.

      .

 .

              .

  . .

 .

& .

'$ 4  '  .

  ' ! .

!  '          .

     .

 . '' L ¥ .     '$  .   L ¥<  .

 '  .  .   L 1<       . '' L 1 .

 1 8  '   .  $ =.

   '  .

$ 4  .

 '& .

  .

 !  '  !    !     $ .

&     .

 .

  $ .

 !   !  '  .

 .

   !   " .

   .

 2  /22$ 3  .

   ' ' F  #  .

 '' $ 4   !  '   .

         '   '   '     !     !   F .

 ' '*  $ = .

 #     .

   9   .

7 !  .

.

      .

 .

              .

     !  '      ' .  ..< . ''. .

 J6 7 K    .

   '  .

 7 $ %  .

  ! .

 '     $ >.

 .

 '   '$ .

  .

     '    .

 '& .

'$ =+ $ 4   .

 8  & .

'  .

 7     .

  .

 .

 .

 !  .

 '$ .

 .

      ' .

 .

     .

    $   .

 '         .

 ..

 .

'$  .

 .

  '   .

 .

   '    .

   .

 .

  .

   .

 !  '  $ G   .

 ! .

 '      .

 J.  .

K    .

   '  .

     J! .

K  ' .

   '$ .

 '  .

     '    .

 .

    .6<  .

  "    '     $ G    #      '  ! .

  L <$ (.. '' L  .   .

 4    !  '      '  *    .

. .

 !  ' .

'  .

 J(* 8  $K % .

   .

    ' .

 .

  '    '   .

        '$ %  .

     .

$$  .  ' .

. .

 .

'  .

 J6 7 K<$  .

.

      .

 .

              .

11 .0%.

 B  '             .       .

 '!    $ .

   '     .

    ' ' .

! $ G    .

 '     .

 JB K    .

       JB$K >  B  '   &       .

  $ %  &    ( ! .

            $ 4   .

 '    ! .

  ! .

 '.    $ G   .

  .

  ' ! .

 !       $ .

 B     '  !      $ .

  !  .

   ' !  ' .

 !    .

  $ O # .

 .

 .

 .

8      .

! .  G   '  .

 .

 . B  '      .

 JB K    .

   $ -    .

  .

        .

.

      .

 .

              .

.

 '    .

.

 .

 '     '    $   %     '  ! .

  '  .

.

 .

 $ "- 6   # '    .

 ''    " O # E.

   .

 .

 .

  .

.

 .

    .

  .

$ !       '  !     $ 4    H !      !        .

        .

$ .

       '   .

 .  .     '  .

 .

  .

 .

       H 7   $ $  O #        !  .

.

      .

 .

              .

.

1 G &       .

.

'  # .

 ' '$ G      .

   ' .

     .

 '          .     $ .

     $ .

 .<  .       '   > .6.

    .

 7  .

 .

.  '   $ 6!      .   L 6 L +<      . '' L >  L + .

    $ 6 '       .

 '             ' $ + #     .

 .

 (7  1 ! .

  . .

      8     .

 .

      ' .

 .

      $ .

   '       # .

 F .

  '         '$ .

 .

 '    .

.

 '        $  .

.

      .

 .

              .

    .

    .

   .

!  .

!"  '    .

    $ G  '  J! .

K  ' .

   '  .

 .

     .

   !$ .

  ' .

   ' .

 J. .

$K G   '&     .

        '  .

  '  %   .

   ''       .

 .

$ 1 .

 .

       .0  .

 .

  .

      '$ 3  .

  '    .

   ' .

   .

A  .   $ % .

!   .

 '         .

!  '  .

     $ Q=+*%  6 .

    .

      .

      .

  '  !  '        &  $ % .

    ' 3 .

  &    3 '  $  .

       .

   .

 ' $ 6 /22Q  '     ' $ .

     A2Q .

 '     A2Q $ " )    .

.

    .

   !  .

.

      .

 .

              .

> 3.

 .

     '   #   + 4 .

.

    .

   ' .

$ .

.

        .

  .

 '   .

   ' .

 ' .

   ' $ 6  F     .

  .

    % .

  .

  ! 1.$ .

    ' !  '   .  .

     '& '$ .

  '  ! .

 .

 .

   F         ' .

 '   $ =+ $ .

 8  .  '         .

 .

 '  !$ .

    '      ' '        '' $ I  .

 !    .

    .

 '$ .

 .

  '  .

 .

JPK<       . ' ! .

 $ .

 (  .

    .

     (   .

.

      .

 .

              .

.

  .

 ( (  $ .

 .

 >      .

   .

 '     .

 (  F'  '$ .  .$.

 (   '  .

      '  .

  & $ .

   .

      ! .

     ' .

$ 4 .

 ' ( .

 .

 ' .

 .

  .

    F .

 (   $  .

   .

             .

 ( (  $ .

 .

.        '   ' !   ' .

 $ 4  .

           ! .

  ('     .

 L      .

 .

    '  .

 >  .6< .

  $ ($P%.$ $ ' .

' .

  '   .

 '&  $ .

      &!  .

 '  .

    #    '   .

 $ % .

 .

  ''     .

  & ' .

  ''    .

  '   .

    .

 '$ .

    .

 ' '  .   $  .

      ' .

.

.

      $ ) .

   F  .

(  .

 ' !    .

 '$   3 ' .

     . .

           .

 .

    .

 '$ .

   '          $  .

.

      .

 .

              .

"  5       .

 .

$   .

.

  !  .

 >         .

 .

 (  F'  $ G    .

 .

    .

 7           !    ' .

.

 '  '   !    '$ .

  ' .       .

    .

 '  ' !       $ .

+ .

 .   (  '    .

 '         '   '  !      $ .

     F' ! .

 '   ' F    '$ 0%..1/ 2( .

 ( .

         .  '  '     !   ' >F$ .

 .

#  .

!   !   .

.

.

 ' '   .

 * '  "      .

.

      .

 .

              .

  '    !$   '  '  ! '     .

  ' .

 .

 .

 ' !  .

 $ .

 .

#   ' .

    .

' !  .

 ' .

  '   ' $   '    !   3 H %'  H 8 3'  7$ > .

   '   .

'    ! .

'   ' >F   .

   ..

   .

 J. !  ' >F$K I  .

 7 H ' >F H    H $ .

81 .

  F       '  !       .'.

 .

    . ! .

 '  < .

 # '   .

  (   ''$ " 5 . .

  .

.

 .

 .

 .

         .

.

 .

!  .

.

      .

 .

              .

3  .

       .

 '      $ .

  .

 J6  'K  J(' !  ' 'K     .

     $ .

 **       .

       $ % .

      .

     .

   ' .

     .

   $ +.

.

 ?   8 .

 .

 .

  !  .

.

      .

 .

              .

1>  .

 6 '  .

    .

 & .

 F     $     '    '      .

 .

      .

   F     $ G  ' .

 !   '  .

  .

    '   7  .GC   ! .

  $ >  &!    .

 .

    .

      $ .   . ''.

  .

      '$ G & .

            .

 '$ 6 .

 '    '  '   .

          '$ G  '     ' '  .

.

 .

$  .

.

      .

 .

              .

/$ .

   '  .

   !    '         '  .

$ 1$ .

  .

 .

 .

  .

      &  . .    .

$ &!           .

 ! $ :$ .

      '  &!  ! .

  .

           .

    $ 0$ 4  .

 4    .

  .

&      !      .

 $ A$ .

    .

       '  .

   ' $ .

 !  .

  '  ' $ <.

Q=. B $1 >F  #  .

!   '   .

      .

  $ % .

   .

     !  ' '  $ >  ''   '  .

      $ G    .

        .

 ' .

    .

  &    .

     '    .

   .

 .

$ %.

.

1 6 '   '    '  .

  '   $ G     .

 '   .

 ..

    J6 7 K  .

.

       '$ .

 .

!      .

  .

 .

 '    $ 6   '.

     ' >F  ' .

   ' .

  $ .

        '    .

   $ %         .

   !  !$  .

.

      .

 .

              .

+.

$     .

  E7  .

 .

 .

    .

 .

 ! 8 -.$>  !   .

 J(  K  ''  .

     '   '         .

      '$ .

  .

  ' ' .

   '  .

$ .

 .

     .

  %  '' .

 - 4.

 '    '     .

    .

.

 F$ 3         .

 ' $ .

       .

  '  $ G      .

 '    .

   " .

       !$ .

  .

 .

& 4     ! .

   .

 $  .

.

      .

 .

              .

+.

.

 F       .

    .

     ! 7  $" .% / .

 "&"!?" ..

. %' I&"!?I .

 %' .  '   '   - 4.

 - 4.

 .

&"!?. .    (    ..

 %'    4       ($P% $?9&  .

?9' $?&  .

?' $?#&  .

?#' $?*&  .

?*' $?. ?"!?*&  .

?(.

   4  .?"! 7! .! -O  .

  .

.

      .

 .

              .

?*' $?"!?#&  .

?"!?#' $?&  .

?' $?"!?9&  .

 ?"!?9&  .?"!?9'  %! 6 .  $?.

?(.

?"!? 6 .  9' $?"!?*&  .

?"!?*' 6 .   1 DRE $?R&  .

?R' $?&  .

 ?R&  .?' $?.

?(.

 ?R' $?. ?A&  .

? (.

?A' (. $?. &  .

 ' $? .?.

.11/%.

 &  .

? .

11/%..

 ? .' $?.

.11 /%.

&  .

?(.

? .

.1 1/%.

'  '  '   8 7    !      7         .  6!  ' 8   .    ' ! !  ' .    ' '  .    ' 7     .

.

      .

 .

              .

 ?"!? . $?.

.1 1/%.

&  .

?(.

? "!? .

11/%..

' 0   B  '  % '  '    .

8.

 . &(.

'   .

 (    .

 J  ' 'K   $&  .

' "!    .

   !  %'  !   .

 J6  'K   9-.

$ % -.

 ? &(.  .

 .?  .

  .

(+4 ( +  4 .

 ' 8!1.

 I .

  .

    = * 5 7 .

  >! >  > .

 4  .

  .

.

      .

 .

              .

. .&"!?.9 8 > .

 .  %' S B >  (!  .

  .

! '  ( (     ('   | '   -   .

"$B.

* % . ? .

1&(..

? .

. ? %.1' .

2.

.1&(.

? %.

2.

1'  '     6    ...  ' < F.

 .

 .

    J .

 .

 .

  ?0$ >.

  $?>&  .

?>' $?. ?>&  .

?(.

?>' $?"!?>&  .

?"!?>' 7  7  .

 3  F   .

.

      .

 .

              .

<  E .+  4 .

%$ .

  $     %  .

  .

 .

 .

 .

 ! "     .

 .

   .

  .

C .

    ! A.

   .

        .

.

  ! "  8   .

 $  $  .

 .

 .

  .

  .

C.

  8 ! '     % .

  .

 .

 .

 .

   $  $ .

 6   ) $ & .

!  .

.

      .

 .

<  .          .

"-! 5$-. ! '  .

      .

  '       .

   .

  .

.

 !     !  $ .

   ! !.

     '*  !   '    .

 $ I      ! '      '  !      ! #     $    .

        & * .

  .

 #  .

 .

  $ .

    '     '   '     .

  ! '  ! .

 '  *  '     ' .

 $ &     ' .

   .

 !     !   .

.

   ! .

 3 '    . '' L >  L .

 L  .   L 6 L ..

 L <$ .

  .

  &     .

   '   $ 4    .

     '  .

.

'    .

   '    $ .

    &  ! .

 '* ! $ .

     !   .

.

  .

   .

   .

)$ .  5 >  >'* 1.)  0. .

 >  ! .

 .

         .

  $ .

 >'* .

 .

   .

   '    .

)  .!  $ 1.)  0.

           ' .

   .

    '* ! $ .

 0.) ! !       '  $ 4     .

    !    .

.

  .

  .

    .

 .

 $ .

   !      ' $ 6 .

   '  .

!     ''  .

       .

.

  *   '    '$ ('' .

  .

    .

  *         .

  .

 #$ G &         .

 ''$ %       .

  .

 '  .

.

      .

 .

<  .          .

          '   .

 &    .

 J    K  $ " .9B $  .

 .

 .

.

     .

 .

     .

  !  .

  .

  .

 !   .

   $ .

  .

      '       $ .

   !    .

   '  &     $ .

.!.  !     !    '5 +%3  + I+.E I+.  A> .10  4 $ > ".

 +.

 %.

+%3<     !      .  3 ' .

 .

 ' $ .

  '      '  ' .

 .

 .

 .

 #  '  .

  $ - ! .

 +%3  '    1A=   $ .

      .

     .

    '  1A=     .

 .

 .

         1A=     ' .

.

.

     .

.

      .

 .

<  .          .

  $ .

 '   .

    .

 .

     '  .

         $ " @'F .

 .

        .

  .

  .

.

       .

 .

.

! .

+  %    .

 >'*   '  .  '  +%3  &   '        .

 .

 +%3    '$ .

 !     .

     .

'$ 4 .

 +%3  '     1A=          .

 .

   .

 '  .

  .

  .

'  ' .

.

     .

.

 $  '  .

 '.

  .   .

 4 .

  +$  '    .

  >    .

.

'  ' .

  '  .

  '$ 6 .

 .

& . ' .

.

    .

       $ .

   .

     &   .

  .

 '   '.

5  ! 6!  (!$  .

.

      .

 .

<  .          .

.

   .

'  *    .

 .

 .

'   '    !               !$ ! ' .

.

     .

 '    .

         .

 .

  '$ .

 ' !   .

   '  ' $ .

 6!   '  !   .

   *     .

  .

 .

   '     .

  .

  .

.

$ 3 .

 (!  ' .

      .

         1/=   $ .

     .

     .

       .

       'F   '  $    &  .

.     .

   '   .

.

 '     .

.

' .

 (!    .

$ .

 6 +%3    1A=               '   $ 7  .

 '      .

  .

 *  .

     ''    .

   .

 ' $ 1  .

.

   .

       C .

 .

   !  .

.

      .

 .

         .<  .

   (       .

.

 '       ! # .

  $ !  '     .

  .

 #       $ 4 '   '  .

         $   ' .

 .

 .

     .

 '  .

  .

 .

  .

' .

.

          .

  .

.

  $ .

  '   '        ' .

      '  $ .

        .

 $ I .

  ' ' ! .

  .

.

      $ .

        .

.

      .

     .

   $      '  !  '  .

.  " .

  '   .

 $ 3 .

 I    '     .

 '     '   '     $ %    .

 .

  .

' .

 .

 .       .

 .

   .

 ' $  @'F    .

 .

 03- .

.

   .

.

  .

 .

      !  .

.

      .

 .

<  .          .

)  .

  .! ).

 0!   ! M.

! M. .

 ! ". .

 +%3  '   /.  ' .

      .

     #$ .

     .

          $ G   '  .

  .

  .

'  .

 ' .

  '  .

    .

&   $ .

    .

!  ' .

 .

 +%3   '   .

        $ ) .

   .  '     .

         .

! $ 3   '     .

    :2Q .

 .

     .

 .

 ?2Q .

.

 '    .

.

      .

/22Q $ .

 .

#    .

 .

  .

.

      .

 .

         .<  .

! M.'   '   !           '       $ .

# .

 .

 0! # .

 .

 ! M.

# .

   .! # .

  ! .

 %    '.

  !  .

    .

      ! '    !  '$ I  .

  'F           .

   $ %    .

  .

  *     $ & .

   .

    .

    .

      .

 1/=      $ I  .

  F    2Q$ !" .

 7    .

 #  .

 '     *$ %     ! .

!  .

  .

     ' .

 .

     & '    '   .

 ' $  .

.

      .

 .

         .<  .

A   .I .

 .

   +  .   /=/  /?2<$ . +<  '      ' +%3  I+  '  .

      .

  +      ' ' .

   '    .

 #  .

 ' $ .

 .

  .

    #    !  .

 .

' $  .

  ' '  +     .

 .

  .

  ' ' $  +     ' '  .

.

       .

  .

  '  .

.

 .

$ L5@ .

 .

      ! 5  $ .

 .

   $   PQP .

   :.

.

>!  .

.

      .

 .

<  .          .

-.

" .

 B   .

 ' '   '   +$ .

   .

   .

 '  .

    '  .

   .

 '   $ )  .

   '  ' .

$ G & .

!  '  F!    .

 '.

  ' .

    .

    #  ' $ " O      .

      .

    C !  .

.

      .

 .

<  .          .

   !  +       '.

  +%3$ .

    .

        .

 '  '  #   !   #$ .

  .

  #  !$ .

 # .

    '    .

   .

 *$ .

  .

    &    $  $ * .

 .

    .

 '  .

  .

    '  .

# .-'   <   .

  * ! .

$ 7! .

      ''   !   * .

  .

 #  .

 ' $ $.

  .

    '   .  +      %..

 .

  .

  $ )   'F      '    .

 '  $ 3    .

      .

"     ! ! &    .

    ' ! .

 !  ' $ '.

 4  .

 .

  +  '          '  '  .

  .

.

    ! $ 3  .

   .

 .

      '   .

      $ >       '   .

  ' .

  !  .

    .

  * F   .

.

   .

   .

 4  +  &          . ' $ .

.

      .

   $  .

.

      .

 .

         .<  .

6A2$ 6A2 .

  I  +.

I+<  '  '   !$ . .

E  ' .   I+.

.

 '  .

   '       1A= !$ . +%3  '$ %   /.

     .

   &   ' $ 3    I+.E      .

 +%3      /=/$ .

10 .   I+  '  I+.

.

 ! .

  #   .

  '   '$ .

    '    ' ' .

 .

 $ 4 . '         ' $ I+.10    E.

     .

     .

     .

    ! $ - ! .

    '      5  .

       E. .

10    '   *$ )  . I+.

  $ .

   .

   '$ G         F  .

 +%3$ G                  $ 5*  4' .4 <   !      '  .

. ' " M@90.

 .

 .

 $      .

    .

$   P9    .

     !  .

.

      .

 .

<  .          .

 !$ .

       .

  $ .

 .

         .

 .

  .

'  '   .

$ .

   & !  .

 " -  8A* %         .  '$ .

 .

 .

 (+4    .

 .

    .

! .

 .

  ! .

 '   (+4       .

 $ %  &!    '  ''   .

 .    ' .

 .  /2<    ! .

   .

$ -+ .

  '  . !  .

 .

 '   .

 '*    $ %   '             .

         .

    .     .

 .

    .

 !  .

  $ G      .

 '    .

                .

       )  '  $  %  &     '  .

    '  '     .

      .

.

    .  '$ .

      .

.

    .

  '    .

.

 3 %  .3 H 3 % <$ .

  '    !    +$ .

/.

 .

   .

E<  &       .      ' .+%3  I+.

.

     '  .

 $ .

    ! . .

  '  ! .

$ .

.

      .

 $ 3 ' .

      ' !     $  .

.

      .

 .

<  .          .

" . .

   .

  .

/ & .      #$  .

 .

   .

 .

            $ %          .

 .

    .

  $ !.

 5 7      .

.

    .

           .

   .

   .

 ' ! $ " +.

.

 " .

   .

.

    $     ! F.

   .

    .

$    .

.

    ! #5 %    ' .

  .

 1A=        .

     .

        .

 $ G &   .

 .

        '     .

"  .

          !  .

   $ .

 .

 .

   .

     .

<  .     ..

 .

  '. .    .

<$  .

.

      .

 .

         .<  .

.

#5  ' !      ' .

      .

 . '' .  <   '   ..

  .

 .

 $ "4 %     *  '             .

.

 %'  *  $ (*    '          .

     .

' .

.

 B  .  '$ - ! %  ''       *   .

 !     !  $ (  .

 '        .

 +%3  '       .

 &      ! .

 ' $ ".

$ 7 .   .    ! '   ' '..

!      $  !   .

        .

  $ .

 #        '  .

  ' .

  .

$   .

     .

    .

 '  F  .

 .

 .

   $ .

 '    !   .

 '  .

    .

    .

 !  '   ' $ %   !    .

 -7    .

 '   .

   $ .

 .

 ! '  '' .

   . ' !  .

  !   $ -7 ' .

   .! '   ! .

.

' .

 .

        .

$    !   .

  $  .

.

      .

 .

<  .          .

.       .

.

C<$ '       $ .    .

             .

$K 6 .     J .      J K   .

   & * .

' "      '  .

'     .

.      .

 L C     .

         <$  .

     ' $ .

         '       '  .

 .

 $ 6       *              ' !      .

    $ %   !  .

 .

   ' .

 .

 '   !$ (    .

  !  .

.

      .

 .

<  .          .

G   '  .

      .

.

        .

      .

   $  .

 .

  .

     ! .

    $ 6        .

 .

       .

 -7    .

 $ .

    .

  .

.

 !     !  $ .

    .

    '  .

 .

  .

   .

$ 6  .

 '   '     .

       ! .

    $ ) .

      .

    . .

      ' $ .

  .

  '     .

   .

.

 &  .

  $ G       .

            ' .

     .

  *   .

 !    '  ' .

      + .

 .

     ' +%3  ' $ .

  .

  ' .

   .

 ' .

 .

 -7   $  .   .

.

       .

  >   $ -    .

  .

 ' '      .

.

   .

 '   & %         !$ G        .

 '     .

 )(7     .

 &     .

.

    $ % .

         '     .

  .

      I %'    & .

        .

 -7  .

 $  .

.

      .

 .

         .<  .

"  E.

 .

     .

  <"#1    ! .

  &! '*   .

   .

 !  $ 6 .

   '  .

 ! >'* 6    &  .

  5 3 '    $ 3 '    .

     .-7  %'    -7  %' <$   ' .

 .

 '   -7    $ 4  >.

       '        .

 .

 -7  P-7   .

 '  .

  '  .

.

      %8  .$ )   !  .

 '       .

 -7  $ .

 .

 .

  !   '  .

 .

 -7   &     F $ G &     '   $  .

.

      .

 .

<  .          .

 %  .

 .

   .

 .

 ' ! .

     !  .

  ' $       .

    .

! !  '$ 4 .

 .

    '  '     #     ' $ G     '   .

     ' .

  "  .

    '  $     .

 .

     .

    $ 3#    .

 .

         $ 4  5 '    &   .

 %   ''  $    .

 .

        .

  .

" .

  .

         $ >    .

 ' %        '$ %!  '     F'  '  '   ' '$ 7 ' .

!    '        !$ .

 .

       $ .

          '  .

  $ 3  ! ! .

.

    ''$  '       .

       .

& '   .

   ' .

 .

$ +  .

    .

.

'$              .

 .

  &! $   .

!  '.

 !     .

 .

     .

        $  .

.

      .

 .

       .

 .

.

    * 1T) ! .

5 .

           ! '   '' .

     '                            $ .

   .

   !    .

    .

    !    '                .

.         $ *%* 1 +! P%U H V * 1T)"%.!%.

> .

.> 5         !    .

        .

$ .

.

    .

!       '  .

! F   '   .

'    '   .   .

   '   .

!& .

   .

 $ 6         .

!     F '        %  $ *%* 1 +! P%U H V  .

.

      .

 .

       .

Sign up to vote on this title
UsefulNot useful