Craphlc sllclng & cropplng ups

for moblle appllcauon

1he plxel-perfecL way
[2x -> [1x graphlcs
All graphlcs for lCS are usually deslgned aL [2x resoluuon for obvlous reason. lL ls
necessary Lo reslze Lhe asseLs Lo [1x uslng hoLoshop raLher Lhan slmply dump [2x
graphlcs dlrecLly lnLo [1x devlces. 1hls ls because hoLoshop's !"#$!"# "&'()*+,-.+& ls
much beuer Lhan lCS's on-Lhe-y &(-)(/'0&("12!+) lnLerpolauon, especlally for graphlcs
wlLh some LexLual conLenL and/or ner deLalls.
8esldes, when uslng nauve [1x graphlcs, lCS doesn'L need Lo do on-Lhe-y reslzlng,
hence beuer performance (aL Lhe cosL of larger app leslze, no free lunch)
Cn-Lhe-y nearesL-nelghbor by
lCS, hard edges & mlsslng deLalls
8eslzed by hoLoshop
cropplng [2x graphlcs
When cropplng [2x graphlcs, always produce (3(& 4"5(&/"+&/ lmages. 1hls ls because
coordlnaLes ln lCS ls coded and/or operaLes aL [1x resoluuon "&'(1() numbers. lL ls
beuer Lo have exacL maLch beLween [1x and [2x resoluuon asseL Lo avold auLo-reslzlng
by lCS, hence lmprove on performance.

Lxample: aer cropplng, an [2x lmage ls 123 x 40. lf we sLop here and reslze Lo [1x
resoluuon. 1he dllemma now ls should lL be 61 x 20 or 62 x 20 (lnLeger only)?
1herefore, do Lake +&( (6')- /'(* and expand Lhe Canvas Slze ln hoLoshop Lo 124 x 40 ln
whlchever dlrecuon LhaL make sense. Aer LhaL, down scale Lhe lmage Lo [1x resoluuon.

7)+1)-55()8/ &+'(9 lL ls posslble (by defaulL) Lo use oaL/double number whlle codlng,
buL lL doesn'L make sense Lo have a 0.3 plxel. As a slde eecL, uslng non-lnLeger frames on
LexLboxes/labels causlng Lhe LexL Lo be blurry. lurLhermore, uslng lnLeger numbers
generally glves beuer performance.

1hls ls a 2-)4 rule, should be followed all Lhe ume.
1he remalnlng rules ln Lhls documenL are /+: rules and need noL be applled all Lhe ume.
8uuon sLaLes
ulerenL sLaLes of a buuons (normal, pressed, selecLed, dlsabled) should have Lhe exacL
same slze & maLchlng posluon of Lhe maln graphlc conLenL. 1hls ls Lo avold Lhe graphlc Lo
'[ump' when pressed due Lo Lhe maln elemenL ln Lhe conLenL shls away from Lhe orlglnal
posluon.
noL same slze &
maLchlng posluon
Same slze buL noL same
maLchlng posluon
Same slze & same
maLchlng posluon
noL same slze &
maLchlng posluon
Same slze & same
maLchlng posluon
Shadow compensauon
Addlng drop-shadow Lo an elemenL causlng lLs overall slze Lo lncrease & Lhe cenLer
posluon of Lhe maln graphlc conLenL Lo shl. When cropplng, deslgner should add exLra
paddlng Lo brlng Lhe cenLer of Lhe conLenL back Lo lLs orlglnal cenLer.
Common approach, exacL crop. Lasy
for deslgner Lo sllce, buL programmer
needs Lo add hard-coded margln Lo
allgn Lhe conLenL back Lo cenLer.
ueslgner add exLra paddlng Lo allgn
Lhe conLenL ln Lhe cenLer
LxLra paddlng added
(expand Canvas Slze ln hoLoshop)
MusL be Lhe same spaclng
occupled by Lhe shadow
Margln compensauon
1hls ls a generallzauon of Lhe prevlous Shadow Compensauon rule.
rogrammer needs Lo allgn Lhe
LexLbox wlLh Lhe Lop/bouom
edge, hence needs Lo know Lhe
Lop/bouom margln. 1hls requlres
exLra work Lo be done by
deslgner Lo creaLe 0reference
le.
blah blah blah blah blah blah blah blah
rogrammer [usL need Lo allgn Lhe
LexLbox Lo Lhe cenLer, no exLra
margln needed.
blah blah blah blah
blah blah blah blah
blah blah blah blah
blah blah blah blah
blah blah blah blah
blah blah blah blah
unlform gradlenL
MosL moblle app plauorm should have Lhe ablllLy Lo sLreLch an unlform gradlenL lmage Lo
a deslred slze wlLhouL aecung quallLy. 1herefore, lL ls noL necessary Lo keep a unlform
gradlenL aL lLs orlglnal fullslze. noLe: Lhls ls LoLally dlerenL from 9-paLch Lechnlque
ldeally, Lhe gradlenL should be crop down Lo 1px
wldLh (or 1px helghL ln case of verucal gradlenL)
for smallesL leslze. Powever, for easy prevlewlng
ln Mac's llnder or Wlndows' Lxplorer, 20px or so
ls small enough or
1hese examples are noL a unlform gradlenLs, hence noL appllcable.
9-paLch
Large, unlform and mosLly recLangular graphlc asseL can be scaled down by a blg facLor by
uslng 9-paLch Lechnlque nauvely supporLed on boLh lCS and Androld plauorms.
Androld programmer's gulde: hup://radleymarx.com/blog/slmple-gulde-Lo-9-paLch/
lCS programmer's gulde:
hup://sLackoverow.com/quesuons/2924408/lphone-sLreLchablelmagewlLhlecapwldLh-only-makes-ds
noL necessary Lo keep such
a large asseL llke Lhls box
Make use of 9-
paLch graphlc
supporL
8eslde Lhe obvlous advanLage ln smaller
asseL leslze, Lhls Lechnlque also allows
sLreLchlng Lhe ul elemenL Lo any varlable
slze, lnsLead of havlng Lo creaLe dlerenL
and large asseL for each supporLed slzes.
lull LuLorlal:
hup://www.ulnnoblog.com/sms-bubble-
ul-ln-lphone-apps.hLml
SLreLchable graphlcs
All varlable-slze buuons can share Lhe same graphlc asseL lnsLead of uslng separaLe asseL
for each buuon. noLe: Lhls ls [usL a speclal case of 9-paLch Lechnlque
Androld programmer's gulde: see 9-paLch Lechnlque
lCS programmer's gulde: hup://ldevreclpes.com/2010/12/08/sLreLchable-lmages-and-buuons/
1oo long, doesn'L caLer for shorLer buuons
!usL rlghL, Lake Lhe mlddle llne as sLreLch polnL
ldeal, buL unnecessarlly shorL. Pard Lo nd Lhe
rlghL sLreLch llne (noL cenLer).
noL necessary Lo keep
large asseL llke Lhese
Make use of sLreLchable
graphlc supporL
1abbar
All buuons belongs Lhe same '-!!-) should have Lhe same wldLh & helghL.
Common approach, exacL crop. Lasy for deslgner Lo sllce, buL
programmer needs Lo add hard-coded number for Loolbar's
helghL. Small Louch-able area ls bad for users.
SllghLly beuer. Same helghL as Lhe Labbar, programmer
doesn'L need Lo worry abouL verucally cenLer, buL need Lo
hard-code for dlerenL spaclng beLween buuons. Slze of
Louch-able areas are sull noL good enough for users.
8esL approach. Same helghL as Lhe Loolbar, same spaclng
beLween buuon, reasonably blg Louch-able area for users.
Common approach, exacL crop. Lasy for deslgner Lo sllce.
rogrammer need Lake care of excepuonal case.
lf Lhey appear Lo be Lhe same, make Lhem Lhe same.
1oolbar
All lcons belong Lo a Loolbar should be padded Lo Lhe same helghL and opuonally wldLh
Common approach, exacL crop. Lasy for deslgner Lo sllce, buL
programmer needs Lo add hard-coded number for Loolbar's
helghL. Small Louch-able area ls bad for users.
SllghLly beuer. Same helghL as Lhe Loolbar, programmer
doesn'L need Lo allgn verucally cenLer, buL need Lo hard-
code for dlerenL spaclng beLween buuons. Slze of Louch-
able areas are sull noL good enough for users.
8esL approach. Same helghL as Lhe Loolbar, same spaclng
beLween buuon, reasonably blg Louch-able area for users.
CusLom 1abbar / 1oolbar
lor Labbars LhaL really need cusLom posluons and/or slzes of lndlvldual lLems, Lhe lLems
should have aL leasL 1 common allgnmenL for easy placemenL. usually Lhls ls Lhe bouom
edge or Lop edge.
Common approach, exacL crop.
Lasy for deslgner Lo sllce, dlmculL
for programmer Lo posluon each
lLem lndlvldually. Lven more
Ledlous wlLhouL uslng a graphlcal
lnLerface 8ullder
8euer approach. 1o have aL leasL 1
common allgnmenL, bouom edge
ln Lhls case.
8esL approach [lf appllcable]. 1o
have more Lhan 1 common
allgnmenL beLween Lhe lLems,
bouom edge, Lop edge & helghL ln
Lhls case.
ressed buuons
lCS and Androld sysLem wlll auLomaucally dlms a buuon's brlghLness on *)(//(4 or
4"/-!,(4 (when a cusLom lmage ls noL specled). lL ls noL necessary Lo creaLe such asseL
unless Lhe buuon's color/hue/conLenL changes on pressed/dlsabled.
use auLo-dlm by Lhe
sysLem, no need Lo
creaLe exLra asseL
Color or conLenL
changes, lL's necessary Lo
creaLe exLra asseLs
ConLenL changes, lL's
necessary Lo creaLe exLra
asseLs
Color/gradlenL changes,
lL's necessary Lo creaLe
exLra asseLs
8uuons ln a cusLom Labbar
Same-klnd lLems
A group of same-klnd or same-conLexL lLems should have Lhe exacL same slze. 1hls ls more
general Lhan Lhe rules for Loolbar and Labbar.
Common approach, exacL crop. Lasy
for deslgner Lo sllce, dlmculL for
programmer Lo posluon each lLem
lndlvldually. Lven harder wlLhouL
uslng a graphlcal lnLerface 8ullder
8euer approach. Lach lndlvldual lLem
Lo have Lhe exacL same slze as oLhers.
1hls approach ls 5+)( sulLable lf
cusLom posluons of lndlvldual lLem ls
requlred as ln example below.
8esL approach. erfecL grld. ueslgner
should use Culdes or Sllces ln
hoLoshop Lo acceleraLe Lhls.
rogrammer can slmply wrlLe a for-
loop Lo baLch-posluon all Lhe lLems.
SmooLh gradlenLs
AlLhough capable of dlsplaylng 16 mllllons dlerenL colors, LCu screen ln general are noL
capable of dlsplaylng smooLh gradlenL beLween 2 very slmllar colors as lllusLraLed below,
on Lhe le. 1hls ls due Lo lnLeger lnLerpolauon beLween Lhe sLarL & end colors.
use ulLher opuon ln hoLoshop's CradlenL Lool Lo geL rld of Lhls arufacL.
60,60,60
61,61,61
62,62,62
63,63,63
64,64,64
ulLherlng: how does lL work?
;
&
'
(
1
(
)

"
&
'
(
)
*
+
,
-
.
+
&

4"'2()(4 &+&04"'2()(4
near edge graphlcs
When a graphlc ls near Lo Lhe edge(s) of Lhe screen or edge(s) of anoLher elemenL, crop lL
all Lhe way Lo Lhe edge(s) Lo avold havlng a hard-coded margln when placlng lL ln Lhe app.
rogrammer needs Lo know Lhe Lop margln
above Lhe buuon & hard-code lL ln. 1hls also
cause exLra work requlred for deslgner Lo
creaLe 08eference le
Crop lL all Lhe way Lo Lhe edge, no
need for exLra Lop margln. 1hls
also usually lncrease Louch-able
area, easler for user Lo Louch lL
lf appllcable, balance ouL Lop &
bouom margln Lo brlng Lhe buuon
back Lo Lhe cenLer of Lhe graphlc
asseL. See earller sllde on Shadow
Compensauon
near edge(s)
When a graphlc ls near Lo Lhe edge(s) of Lhe screen or edge(s) of anoLher elemenL, crop lL
all Lhe way Lo Lhe edge(s) Lo avold havlng a hard-coded margln when placlng lL ln Lhe app.
rogrammer needs Lo know Lhe Lop & le
marglns & hard-code Lhem ln. 1hls also
cause exLra work requlred for deslgner Lo
creaLe 08eference le
Crop all Lhe way Lo Lhe edges,
apply Margln Compensauon, Lhen
apply 9-paLch opumlzauon
9-paLch graphlc
embeds all exLra
marglns needed
SmarL sllclng
Large graphlc asseL LhaL cannoL be sllced & opumlzed as 1 plece uslng any Lrlcks above
can be broken down and opumlzed uslng a comblnauon of rules. rogrammer needs Lo
dlvlde 1 orlglnal ul elemenL lnLo smaller ul elemenLs.
unlform gradlenL
unlform gradlenL
9-paLch
SLauc elemenLs
Comblne as many sLauc elemenLs lnLo 1 graphlc asseL as posslble. 1hls wlll reduce Lhe
number of marglns, asseLs, fonLs, eLc LhaL programmer needs Lo conslder
1oo many non-useful
asseLs Lo be placed
Comblne asseLs & apply
near Ldge opumlzauon
8ad cropplng
1hese are slmply bad, avold aL all cosL.
8elow are samples LhaL has shadow belng cuL-o. MosL programmers & cllenLs can'L even
Lell Lhe dlerenL, buL Lhls dlerenuaLes Lhe average deslgners from Lhe beuer ones.
ulmenslon reference le
lL ls very '(4"+$/ and &+0!)-"&() for deslgners Lo exLracL dlmenslons from a graphlc le.
ueslgners should spenL more ume perfecung Lhe graphlcs & ul deslgns raLher Lhan dolng
reference le.

Applylng Lhe above rules wlll reduce, lf noL compleLely ellmlnaLe, Lhe need for reference
le. Moreover, non-sLreLchable graphlcs should always be kepL Lo Lhelr orlglnal slze and
should never be sLreLched. 1herefore, dlmenslons of such graphlcs should be obLalned
dlrecLly from Lhe asseLs Lhemselves & noL from anoLher reference source.

Powever, when dlmenslons are really needed, Lhe bullL-ln revlew app ln Mac CS or
MsalnL ln Wlndows ls good enough Lo exLracL baslc dlmenslons from a graphlc screen.
rogrammers, please use Lhem Lo measure your own dlmenslons as needed. 8euer Lools
are avallable, nd your own preference. Aer all, Lhe nal app wlll be evaluaLed based on
Lhe provlded graphlc screens and noL from deslgners' dlmenslon reference les.
AuLo roLauon (lCS only)
lCS has a bullL ln feaLure Lo auLomaucally reposluon & reslze ul elemenLs (any ulvlew-
derlved class) upon devlce roLauon accordlng Lo some dened conLralnsLs. Lg: allgn Lo
mlddle, or allgn 10px Lo Lhe Lop & sLreLch Lhe helghL, or sLreLch Lhe wldLh whlle leavlng
20px gap on each slde, eLc.
rogrammers should nC1 wrlLe code Lo handle roLauon manually. 1hls ls because when
posluon/slze of a ul elemenL needs Lo be xed/changed, Lhls has Lo be changed ln many
places ln Lhe code. Moreover, lCS auLomaucally lnLerpolaLes Lhe posuons/slzes from one
posluon/slze Lo anoLher durlng Lransluon. lL ls much smooLher Lo leL Lhe CS handle Lhls
raLher Lhan uslng code Lo creaLe manual anlmauons.
1hls can be done elLher uslng code durlng seLup phase or ln
lnLerface 8ullder depends on Lhe pro[ecL naLure. Powever,
noLe LhaL Lhey are opposlLe of each oLher.
- uslng code, we speclfy Lhe varlable margln(s)
- uslng l8, we speclfy Lhe xed margln(s)
AuLoreslzlng mask ln lnLerface 8ullder