Tải bản đầy đủ - 0 (trang)
Chapter 15.  Elements and the Web

Chapter 15.  Elements and the Web

Tải bản đầy đủ - 0trang

15.1.ImageFormatsandtheWeb

BackintheWeb'searlydays,makingyourgraphicfilessmall

wasimportant,becausemostInternetconnectionswereabout

asquickascamels.Nowadays,filesizeisn'tasimportant;your

mainobligationwhencreatinggraphicsfortheWebisensuring

they'recompatiblewiththeWebbrowserspeopleusetoview

yourWebpages.Thatmeansyou'llprobablywanttouseeither

ofthetwomostpopularimageformats,JPEGorGIF:

UsetheJPEG(JointPhotographicExperts'Group)format

forimageswithlotsofdetailandwhereyouneedsmooth

colortransitions.Forexample,photosarealmostalways

postedontheWebasJPEGs.



Note:JPEGscan'thavetransparentareas,althoughthere

isaworkaroundforthat:fillthebackgroundaroundyour

imagewiththesamecolorastheWebpageyouwantto

postiton.ThebackgroundblendsintotheWebpage,

givingtheimpressionthatyourobjectissurroundedby

transparency.

GIFs(GraphicsInterchangeFormat)aregreatforimages

withlimitednumbersofcolors,likecorporatelogosand

headlines.TextlooksmuchsharperintheGIFformatthanit

doesasaJPEG.GIFsalsoallowyoutokeeptransparency

aspartofyourimage.

ThePNG(PortableNetworkGraphic)formatisanotherWeb

graphicsformatthatwascreatedtoovercomesomeofthe

disadvantagesofJPEGsandGIFs.(PNGfileshave.pngat

theendoftheirfilenames.)There'salottolikeaboutPNG



files.Theycanincludetransparentareas,andtheformat

reducesthefilesizeofphotographswithoutthelossofdata

thathappenswithJPEGfiles.ThebigdrawbacktoPNGfiles

isthatonlynewerWebbrowsersdealwiththemverywell.

OlderversionsofInternetExplorerarenotoriousfornot

supportingthePNGformat,soifyou'vegotpotential

viewerswithancientcomputers,youprobablywon'twantto

usePNG.

Elementsmakesiteasytosaveyourimagesinanyofthese

formats.YoudosobyusingtheSaveforWebdialogbox,which

iscoveredinthenextsection.



15.2.SavingImagesfortheWeborEmail

IfyouplantoemailyourphotosorputthemuponyourWeb

site,SaveforWebisaterrifictoolthattakesanyopenimage

andsavesitinaWebfriendlyformat;italsogivesyoulotsof

optionstohelpachievemaximumimagequalitywhilekeeping

filesizetoaminimum.ThegoalofSaveforWebistocreateas

smallafileasyoucanwithoutcompromisingtheimage's

onscreenquality.

SaveforWebcreatessmallerJPEGfilesthanyougetbymerely

usingSaveAs,becauseitstripsouttheEXIFdata,the

informationaboutyourcamera(seepage39).Togetstarted

withSaveforWeb,gotoFile SaveforWeborpress

Ctrl+Alt+Shift+Save( -Option-Shift-Save).Thedialogbox

showninFigure15-1appears.

Themostimportantpointtorememberwhensavingimagesfor

theWebisthattheresolution(measuredinpixelsperinch,or

ppi)iscompletelyirrelevant.Allyoucareaboutaretheimage's

pixeldimensions,e.g.,400x600.Ifyouhaveaphotothat

you'veoptimizedforprint,you'llalmostcertainlyneedto

drasticallydownsizeit.ThisiseasytodoinSaveforWeb.

TherearealotofusefultoolsinSaveforWeb.Inthetopleft

cornerisaToolbox,featuringtheHand,Zoom,andEyedropper

tools,withacolorsquarebelowtheEyedropper.TheHandand

ZoomworkthesamewaytheydoelsewhereinElements.



Figure

15-1.

The

Savefor

Web

dialog

box



makesit

easyto

getthe

exact

image

sizeand

quality

you

want.

Theleft

preview

shows

your

original

image

(thesize

changes,

ifyou

resize,

butthe

quality

always

reflects

the

image's

original

state).

Theright

preview

shows

both

changes

toimage

sizeand

quality.



Beloweachimagepreview,you'llseethefilesizeandthe

estimateddownloadtime,whichyoucanadjust(bymodifying

yourassumptionsaboutyourrecipientsInternetconnection

speed,asexplainedinFigure15-2).Youcanalsoadjustthe

zoompercentage(usingtheZoommenuatthebottomofthe



window),butusuallyyou'llwanttostickto100percent,

becausethat'sthesizeyourimagewillbeontheWeb.

Intheupper-rightcornerofthewindowareyourfileformatand

qualitychoices.Whatyouseevariesabitdependingonwhich

formatyou'vechosen.Belowthatareyouroptionsforresizing

yourimage.IfyouwanttocreateanimatedGIFs,thosetiny

movingimagesyouseeonWebpages,yousetupthe

animationatthebottomofthesettingspanel.Howtocreate

animatedGIFsisexplainedlater.



15.2.1.UsingSaveforWeb

Whenyou'rereadytouseSaveforWeb,followthesesteps:

1. LaunchtheSaveforWebdialogbox.

GotoFile SaveforWeborpressCtrl+Alt+Shift+S( Option-Shift-S).TheSaveforWebdialogboxappears.

2. Choosetheformatandqualitysettingsyouwantfor

yourWebimage.

Yourchoicesareexplainedinthefollowingsection.



Figure

15-2.The

Savefor

Webwindow

givesyouan

estimateof

howlongit's

goingto

taketo



download

yourimage.

Ifyouwant

tochange

the

download

assumptions

(for

example,

thespeedof

theInternet

connection),

gotothe

upper-right

cornerofthe

preview

areaand

clickthe

arrowbutton

forthepopoutlist

shownhere.



3. Ifnecessary,resizeyourimagesothatitfits

onscreenwithouthavingtoscroll.

Ifyouwanttomakesurethatanyonecanseethewhole

image(nomatterhowsmallthemonitor),enter650pixels

orlessforthelongestsideofyourphotointheNewSize

area.(650pixelsisaboutthelargestsizethatcanfiton



smallmonitorswithoutscrolling,butifyou'resendingto

someonewithanoldermonitoryoumaywanttostaybelow

500pixels.)AslongasConstrainProportionsisturnedon,

youdon'thavetoenterthedimensionfortheotherside.

Youcanalsoresizeyourimagebyenteringapercent(for

example,entering90shrinksyourimageby10percent).

Whenyou'refinishedenteringthenewdimensions,click

Apply.

4. Checkyourresults.

Lookatthefilesizeagaintoseeifit'ssmallenoughand

takeacloselookattheimagequalityinthepreviewarea.

UseElementsfilesizeoptimizationfeature,ifnecessary,as

explainedinFigure15-3.Youcanalsopreviewyourimage

inyouractualWebbrowser(seethesection"Previewing

ImagesandAdjustingColor"onpage391).

5. Wheneverythinglooksgood,clickOK.

You'reaskedtonamethenewfileandchoosealocationto

saveitin.



Figure15-3.When

youclickthetrianglenext

tothePresetmenu,

Elementsgivesyoua

dialogboxthatletsyou

enteradesiredfilesize.

UseK(kilobytes)andMB

(megabytes)asyour

unitsofmeasurement.

Onceyou'veentered

yournumbers,clickOK.

Elementsreducesyour

imagetothesizeyou

requested.



15.2.1.1SaveforWebfileformatoptions

Onewaytoreduceyourfilesizeistoreducethephysicalsize,

asexplainedinstep3.Butyoucanalsomakeyourfilesmaller

byadjustingthequalitysettings.Yourqualityoptionsvary

dependingonwhichformatyou'reusing.

JPEG.Elementsoffersyouavarietyofbasicqualitysettings

foryourJPEGs:Low,Medium,High,VeryHigh,and

Maximum.Youcanfurtheradjustthequalitybyenteringa

numberintheQualityboxontheright.Ahighernumber

meanshigherquality.Generally,Mediumisoftenenoughif

you'resavingforWebuse.IfyouuseSaveforWebtomake

JPEGfilesforprinting,you'llwantMaximum.

IfyouturnontheProgressivecheckbox,yourJPEGloads

fromthetopdown.Thiswaspopularforlargefileswhen

everyonehadslowdial-upconnections,butitdoesmakea

slightlylargerfile,soit'snotaspopulartoday.TheICC

profilecheckboxletsyoukeepanycolorspaceprofile

embeddedinyourimage.(Seepage162formoreabout

colorprofiles.)Matteletsyousetthecolorofanyareathat

istransparentinyouroriginal(seeFigure15-4).Ifyou

don'tsetamattecolor,yougetwhite.



Figure154.The

JPEGformat

doesn't

preserve

transparent

areaswhen



yousave

yourimage.

ButElements

helpsyou

simulate

transparency

bylettingyou

choosea

mattecolor,

which

replacesthe

transparency.

Whenyou

choosea

mattecolor

that's

identicalto

yourWeb

page's

background,

youcreatea

transparent

effect.

Elements

givesyou

threewaysto

selectyour

color:click

thearrowon

therightside

ofthematte

box,sample

acolorfrom

yourimage

withthe

eyedropper

tool,orclick

thecolor

squareinthe

matteboxto

callupthe

ColorPicker.

(Seepage

175formore

aboutusing

theColor

Picker.)The



blackmatte

aroundthis

lizardwill

blendintothe

black

background

ofthepageit

goeson.



GIF.GIFsgetsmallerthefewercolorstheycontain.

ElementsGIFformatnamestellyouthenumberofcolors

thatwillbeinyourGIF.Forexample,whenyouseeGIF128,GIF-32,andsoon,thenumberisthenumberofcolors

intheGIF.Youcanalsousethecolorsboxtosetyourown

numberofcolors.Usethearrowsontheleftedgeofthe

boxtoscrolltothenumberyouwant,orjusttypeitintothe

box.

IfyouturnonInterlacing,yourimagewilldownloadin

multiplepasses(sortoflikeanimagethat'sslowlycoming

intofocus).Withtoday'scomputers,interlacingisn'tas

usefulasitusedtobeonslowermachines.Ifyouwantto

keeptransparentareastransparent,leaveTransparency

turnedon.Ifyoudon'twanttransparency,youcanchoosea

mattecolorthewayyoudoforaJPEG.IfyoucreatedaGIF

youplantoanimate,turnonAnimate(seepage392).

Ditheringisanimportantsetting.TheGIFformatworksby

compressingandflatteninglargeareasofcolors.Ifyou

choosedithering,Elementsblendsexistingcolorstomakeit

lookliketherearemorecolorsthanthereactuallyarein

yourGIF.Forinstance,Elementsmightmixredandblue

pixelsinanareatocreatepurple.Youcanchoosehow

muchditheryouwant.Sometimesyoudon'twantany

ditheringitdependsontheimage.



PNG-8.PNG-8isthemorebasicofyourPNGchoicesin

Elements,andyougetprettymuchthesameoptionsasyou

doforaGIF.

BothPNG-8andGIFalsogiveyouadvancedoptionsforhow

todisplaycolors(generatingthecolorlookuptableifyou're

aWebdesignmaven).Youcantotallyforgetthisoption

evenexists,butifyou'recurious,theseareyourchoices:

Selective,thestandardsetting,favorsbroadareasofcolor

andkeepstoWebSafecolors;Perceptualfavorscolorsthe

humaneyeismoresensitiveto;Adaptivesamplescolors

fromthespectrumappearingmostcommonlyintheimage;

andRestrictivekeepseverythingwithintheold216-color

Webpalette.

PNG-24.ThisisthemoreadvancedlevelofPNG,whichlets

youusetransparency.Yoursaveoptionsarethesameas

thoseforJPEGfiles.



Tip:TheElementsColorPickerletsyoulimityourchoicesto

"WebSafeColors,"butdoyouneedtosticktothislimitedcolor

paletteforWebgraphics?Notreally.Youneedtobeseriously

concernedaboutkeepingtoWeb-safecolorsonlyifyouknow

themajorityofpeoplelookingatyourimagewillbeusingvery

oldWebbrowsers.AllmodernWebbrowsershavebeenableto

copewithanormalcolorrangeforseveralyearsnow.Getting

colorstodisplayconsistentlyinallbrowsersisanotherkettleof

fishentirely.Seethenextsection,"PreviewingImagesand

AdjustingColor."



15.2.2.PreviewingImagesandAdjustingColor



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 15.  Elements and the Web

Tải bản đầy đủ ngay(0 tr)

×
x