Tối ưu hóa hình ảnh cho trang web và bản đồ ảnh

Tối ưu hóa hình ảnh cho trang web và bản đồ ảnh. Với việc sử dụng Adobe Photoshop và ImageReady, bạn có thể tối ưu hoá kích thước các hình ảnh của bạn, vì vậy các bức ảnh này có thời gian tải về hợp lý từ máy chủ của trang web mà không làm mất các chi tiết, màu sắc, sự trong sáng và các thành phần định hướng cần thiết như các bản đồ ảnh chẳng hạn.

Tt c v Photoshop (Adobe Photoshop 7.0) www.vietphotoshop.com Ni dung ca trang này thuc bn quyn ca © Bá tc Monte Cristo - Final Fantasy và www.vietphotoshop.com Nhng bài vit trong này có th đc in ra đ dùng vi mc đích cá nhân và phi thng mi. Nu bn mun phát hành li trong trang web ca bn làm n liên lc vi chúng tôi hoc ít nht phi trích dn li ngun là: Bá tc Monte Cristo - Final Fantasy và www.vietphotoshop.com Chng 14: Ti u hoá hình nh cho trang Web và Bn đ nh © Copyright 2004-2005 bantayden.com, All rights reserved. Ghi rõ ngun khi bn phát hành li thông tin t trang này. 1  vic xut bn Web đt hiu qu, nhng bc nh ca bn cn đm bo có s cân bng tt gia kích thc file và cht lng hin th. Vi vic s dng Adobe Photoshop và ImageReady, bn có th ti u hoá kích thc các hình nh ca bn, vì vy các bc nh này có thi gian ti v hp lý t máy ch ca trang web mà không làm mt các chi tit, màu sc, s trong sáng và các thành phn đnh hng cn thit nh các bn đ nh chng hn. Trong chng này, bn s hc cách thc hin: • Ti u hoá file nh dng JPEG và GIF, điu chnh các thông s ti u hoá đ đt đc s cân bng mong mun gia kích thc file và cht lng hình nh. • Hiu chnh lng phi màu áp dng cho mt bc nh. • To nn trong sut cho mt bc nh. • To mt b n đ nh siêu vn bn. • X lý bó các file đ t đng thc hin quá trình ti u hoá. Tt c v Photoshop (Adobe Photoshop 7.0) www.vietphotoshop.com © Copyright 2004-2005 bantayden.com, All rights reserved. Ghi rõ ngun khi bn phát hành li thông tin t trang này. 2 r Bn s tìm hiu bài hc này trong khong mt gi ba mi phút. Bài hc này cng đc biên son cho Adobe Photoshop và ImageReady. Cng nh trong bài hc trc (chng 13), bn s ghi li file m đu. Nu bn mun phc hi file m đu, hãy copy nó t Hc Adobe Photoshop trên CD kèm theo. Chú ý: Ngi dùng Windows s phi gii nén các file bài hc t c khi s dng chúng.  hiu rõ hn, hãy tham kho “ Copy các bài hc t CD ” trên trang 4 . Ti u hoá mt bc nh bng Photoshop và ImageReady Adobe Photoshop và Adobe ImageReady mang li cho bn di kim soát tt cho vic nén kích thc ca file nh trong khi vn ti u hoá cht lng hin th trên màn hình. Các la chn cho s nén các file nh ph thay đi thuc vào đnh dng file mà bn đã lu bc nh. • nh dng JPEG đc thit k đ bo toàn di màu ln và s bin đi ánh sáng tinh t ca nhng bc nh tín hiu s liên tc (nh các bc nh chp hoc các hình nh vi đ dc). nh dng này có th biu th hình nh vi hàng triu màu sc. • nh dng GIF mang li hiu qu cao khi nén các bc nh dng màu đc và các bc nh vi các vùng màu lp đi lp li (ví d ngh thut v nét đn, các logo và các hình minh ho  có vn bn). nh dng này s dng mt bng màu có 256 màu đ hin th hình nh và có h tr nn trong sut. • nh dng PNG mang li hiu qu khi nén các bc nh có màu đc và bo toàn chi tit sc nét. nh dng PNG-8 s dng bng màu có 256 màu đ hin th hình nh, đnh dng PNG-24 h tr màu 24-bit (hàng triu màu). Tuy nhiên, nhiu trình duyt ng dng c s không h tr file đnh dng PNG. Trong chung này bn s hc cách s dng Adobe Photoshop và ImageReady đ ti u hoá và lu file nh  đnh dng JPEG và GIF cho vic xut bn trên Web. Bn cng s thao tác vi mt tp hp các bc nh đc thit k cho mt Web site o vi mt vn thú o. Photoshop (qua hp thoi Save For Web) và ImageReady (qua bng Optimize) s m ra nhiu kh nng cho vic ti u hoá hình nh, vì vy các file ca bn nh hn và hiu qu hn nhng vn đc quan sát tt.Ví d bn có th dùng các ng dng đ chn t mt tp hp ln ca các đnh dng và phân b file, đ đt đc mc đích cho công vic ca bn. Bn cng có th dùng mt ng dng đ so sánh vi mt file đc ti u theo mt cách khác đt cnh nhau. S dng s ti u hoá các nét đc trng và các bng màu hoc dùng Photoshop hoc dùng ImageReady, bn có th bào toàn ti đa màu sc trong khi kích thc file ca bn là ti thiu. Tt c v Photoshop (Adobe Photoshop 7.0) www.vietphotoshop.com Bt đu Trc khi bt đu bài hc này, bn hãy phc hi các thông s mc đnh cho Adobe Photoshop và Adobe ImageReady. Hãy xem “Phc hi các thông s mc đnh” trong trang 5. 1. Khi đng Adobe Photoshop Nu mt chú ý xut hin hi bn có ti u hoá các thông s màu sc hay không, hãy click No 2. Chn Open > Browser hoc click vào bng File Browser in bng đ m nó. 3. Trong File Browser, dùng ô bên trái phía trên đ chn th mc Lesson/Lesson14 và chn th mc Lession14. Hình nh ca 4 file Start và End xut hin trong ô bên phi, nhiu file xut hin hoàn toàn tng t nhau. Bn cng có th chn th mc Photos trong th mc Lesson14 đ xem 5 bc nh mà bn s dùng đ làm nn cho file 14Start1.psd, nhng sau đó nh chn li th mc Lesson14. 4. Chn hình nh ca file 14Start1.psd, vì vy hình nh và bin d liu ca file xut hin trong ô bên trái ca trình duyt file (File Browser). Nu cn, bn hãy đnh li kích thc cho ô File Browser đ có ô hình nh ln hn. ây là file ca phiên bn đã đc sa cha cho bn đ vn thú, là file mà bn s s dng sau trong chung này. Phiên bn ca bn đ này đã đc b sung các bc nh chp đng vt đc © Copyright 2004-2005 bantayden.com, All rights reserved. Ghi rõ ngun khi bn phát hành li thông tin t trang này. 3 Tt c v Photoshop (Adobe Photoshop 7.0) www.vietphotoshop.com © Copyright 2004-2005 bantayden.com, All rights reserved. Ghi rõ ngun khi bn phát hành li thông tin t trang này. 4 t quét vào máy và đã đc ch tác bng Photoshop. Trong ô thp hn bên trái ca File Browser, hãy cun xung bin d liu và chú ý rng kích thc file đã thc s ln hn. 5. Chn hình nh ca file 14End1.psd. Chú ý rng kích thc file đc ch ra trong bin d liu nh hn mt nhng bc nh nhìn vn nh hình nh ca file 14Start1.psd 6. Ln lt, hãy chn các file Start và End khác đã đc đánh s  trong th mc Lesson14 đ xem trc chúng. 7. Click đúp file 14Start1.psd đ m nó trong Photoshop Ti u hoá mt bc nh đnh dng JPEG Trong bài hc này, bn s ti u hoá các file  c đnh dng JPEG và GIF. Bn có th s dng hoc Photoshop hoc ImageReady đ nén các file trong mt đnh dng JPEG hoc GIF. Hin ti, kích thc file 14Start1.psd là quá ln đ dùng cho trang Web, bn hãy so sánh vi mt đnh dng file nén khác đ xem file nén nào s to cho bn hình nh nén tt nht mà không làm gim nhiu cht lng hình nh. S dng hp thoi Save For Web Hp thoi Save For Web ca Photoshop có đy đ tt c các tính nng ti u hoá nh ImageReady. Bn có th so sánh hai hay nhiu bn ca mt file khi bn làm vic, vì vy bn có th điu chnh các la chn ti u hoá cho đn khi bn có đc s phi hp có th tt nht gia kích thc file và cht lng hình nh. 1. Vi file Start1.psd đã đc m và kích hot trong Photoshop, chn File > Save for Web 2. Trong hp thoi Save for Web, hãy click vào bng 4-Up đ có 4 bn ca hình nh. Photoshop s t đng to ra ba tp hp la chn ti u hoá khác nhau bên cnh hình nh gc. Các thông tin quan trng đc đt ngay di mi hình nh xem trc, bao gm kích thc file, thi gian tính bng giây đ ti hình nh. Ô đu tiên là hình nh file gc. Các ô th hai, ba và bn din gii ba la chn ti u hoá khác nhau bao gm đnh dng file (JPEG hay GIF) và thut toán gim thiu màu sc (nh La chn (Selective) , Cm quan (Percep ual) hay Web). Tt c v Photoshop (Adobe Photoshop 7.0) www.vietphotoshop.com 3. Trong góc trái bên di ca hp thoi Save for Web, hãy chn 200% hoc ln hn trong trình đn Level Zoom m ra đ bn có th quan sát đc chi tit ca bc nh, sau đó click đ xem trc  phía trên bên phi ngng kích hot các la chn cho s phóng đi hình nh. So sánh vi các la chn ti u hoá đnh sn khác. 4. Gi phím cách (Space), con tr chut tr thành hình bàn tay, hãy drag hình nh đn v trí có dòng ch Tropical Rainforest ( tâm ca bc nh, trên con vt xanh) đ dòng ch này hin ra trong c bn phn xem trc ca bc nh. Mt ln na, hãy xem xét mt cách tht t m đ thy đc s khác bit trong các hình nh ti các ô xem trc đã đc ti u hoá. So sánh các đnh dng JPEG, GIF và PNG đã ti u hoá Bn có th ti u hoá bt k hnh nh nào trong các ô hình nh mà bn quan sát thy trong hp thoi Save for Web.  thc hin điu này, bn hãy chn mt bc nh đã đc ti u hoá đ xem trc và hãy chn các thit lp ca nó  cnh bên phi ca hp thoi. Bng vic th nghim vi các thit lp nén khác nhau, bn s rút ra đc thit lp nào là tt nht đ đt đc mc đích ca bn. © Copyright 2004-2005 bantayden.com, All rights reserved. Ghi rõ ngun khi bn phát hành li thông tin t trang này. 5 Tt c v Photoshop (Adobe Photoshop 7.0) www.vietphotoshop.com Trc khi bt đu, bn hãy đm bo rng hình nh xem trc đã ti u hoá nm  phía trên bên phi đã đc chn. 1. Trong phn Settings ca trình đn m ra  phía bên phi ca hp thoi Save for Web, chn GIF 128 Dithered (Nu nó thc s cha đc chn) Thông tin ch ra bên di dành cho các thay đi trong phn xem trc ca bc nh đc chn. Hãy chú ý v nhóm các đim nh ti xung quanh phn vn bn và trên m ca con vt (Có th bn s phi gi phím Shift và Drag bc nh đ xem phn m ca con vt) Bn s dùng bn th hai  di cùng đ so sánh gia s ti u hoá ca GIF 128 Dithered vi s ti u hoá ca đnh dng JPEG và GIF. 2. Click vào phiên bn thp hn bên trái ca b c nh đ chn nó và chn theo các la chn ca dng thc JPEG, ngay ti thi đim này, trong phn Settings ca trình đn m ra, s có các la chn sau: • JPEG Low: hãy chú ý rng chi tit ca bc nh và vn bn bin đi mt cách không th chp nhn đc. • JPEG High: cht lng ca hình nh đc ci thin, nhng kích thc ca bc nh tng lên mt chút. JPEG Low JPEG High • JPEG Medium: trong thit lp này, cht lng hình nh có th chp nhn đc và kích thc file thì nh hn so vi trong trng hp dng thc JPEG High hay GIF © Copyright 2004-2005 bantayden.com, All rights reserved. Ghi rõ ngun khi bn phát hành li thông tin t trang này. 6 Tt c v Photoshop (Adobe Photoshop 7.0) www.vietphotoshop.com Chú ý: Bn có th la chn mc đ trung bình khác cho cht lng file  đnh dng JPEG bng cách g hoc Drag con trt ca la chn Quality trong phn bên phi ca hp thoi Save for Web. Bây gi bn s th thay đi các thit lp khác ca đnh dng JPEG và GIF, bn s dùng bc nh xem trc thú t đ th vi mt đnh dng khác. 3. Chn phiên bn ca hình nh thp hn bên phi và chn menu Settings đ chn PNG-8 128 Dithered Mc dù la chn này mang li kích thc file nh hn bc nh gc nhng cht lng hình nh không tt nh trong trng hp JPEG Medium (trng hp JPEG Medium cng cho kích thc file nh hn), hn th na, nhiu trình duyt ca li không th đc đc file có đnh dng PNG.  làm cho bc nh này tng thích vi các trình duyt c, bn se lu file này dùng ti u hoá JPEG Medium cho mc đích s dng cho Web. 4. Chn phiên bn JPEG Medium ca bc nh đã ti u hoá (nó nm  góc bên trái thp hn trong hp thoi), bn hãy chn hp chn Progressive. Chú ý: Khi Progressive đã đc chn, bt c s ti xung nào ca hình nh thành công thì vi mi ln đu làm tng cht lng hình nh. Progressive JPEG đc ti xung 5. Click Save. Trong hp thoi Save Optimized As, s dng tên mc đnh là 14Start1.jpg và hãy lu vào cùng th mc vi hình gc. 6. Chn File > Close, và không lu li các thay đi. Ti u hoá hình nh đnh dng GIF © Copyright 2004-2005 bantayden.com, All rights reserved. Ghi rõ ngun khi bn phát hành li thông tin t trang này. 7 Tt c v Photoshop (Adobe Photoshop 7.0) www.vietphotoshop.com Bây gi, bn s ti u hoá hình nh màu phng trong đnh dng GIF và so sánh vi kt qu ca các bng màu khác và các ch đ hoà sc khác. Mc dù bn có th thc hin toàn b bài hc này trong Photoshop nhng bn s dùng ImageReady. Photoshop và ImageReady chia s nhiu tính nng, nhng mt vài công vic có th thích hp hn nu s dng Photoshop và công vic khác li thích hp hn vi ImageReady ph thuc vào mc đích s dng file nh ca bn. Cng có nhng vic ch thc hin đc bng Photoshop và có nhng vic ch thc hin đc bng ImageReady. ó là lý do gia hai công c có nhng cách thun li đ chuyn đi ln nhau. Nu bn m mt file khi bn chuyn t Photoshop sang ImageReady hoc ngc li, thì file đó cng đc m trong ng dng mà bn đã chuyn qua. Nu bn m nhiu hn mt file, thì ch file bn m đang đc kích hot đc m trong ng dng mà bn chuyn qua. Nu không có file nào đc m, bn vn có th chuyn đi qua li t ng dng này sang ng dng khác. Chun b vùng làm vic vi ImageReady Trc khi bn bt đu vi mt file mi, bn s chuyn đi t Photoshop sang ImageReady và sau đó xác đnh mt vùng làm vic vi ImageReady cho công vic mà bn s thc hin trong bài hc này. 1. Trong Photoshop, click vào nút Jump To ImageReady ti phn gia ca hp công c đ chuyn t Photoshop sang ImageReady. © Copyright 2004-2005 bantayden.com, All rights reserved. Ghi rõ ngun khi bn phát hành li thông tin t trang này. 8 Chú ý: Nu bn không có đ b nh đ chy c hai ng dng cùng lúc, hãy đóng Photoshop và bt đu vi ImageReady. 2. Trong ImageReady, chn Windows > Workspace > Reset Pallette Loactions đ đm bo rng tt c các Pallette đu đc đt  v trí mc đnh ca chúng. 3. Hãy Drag các nhãn trong các Palette ra khi các nhóm palette đ tách riêng chúng thành các palette riêng bit, bao gm: · Palette Info (t nhóm palette Optimize) · Palette Color Table (t nhóm Palette Rollovers) 4. Click vào hp đóng trong nhóm các palette đ n các palette: Tt c v Photoshop (Adobe Photoshop 7.0) www.vietphotoshop.com · Nhóm palette Color (gm palette Color, Swatches và Styles) · Nhóm palette Rollovers (gm palette Rollovers và Layer Option) 5. Drag các palette Optimize, Color Table và Layers đ sp xp li chúng trong vùng làm vic nh mong mun và đnh li kích thc ca chúng cho thun li khi bn làm vic. 6. Chn Windows > Workspace > Save Workspace 7. Trong hp thoi Save Workspace, gõ Optimize_14 và click OK. 8. Vùng làm vic đt tên là Optimize_14 bây gi xut hin trên menu Windows > Workspace, cái tên này s giúp bn nh rng bn đã to ra vùng làm vic cho chng 14 đ làm vic v vic ti u hoá (Optimize). Bn có th xác lp li vùng làm vic cho bn vi cu hình làm vic ca các palette này hoc quay tr li vi vùng làm vic mc đnh ngay bt c lúc nào bng cách bn chn mt tên mà bn mun dùng trên menu ph ca Workspace. Chn các thông s ti u hoá c bn trong ImageReady Phn trc trong bài hc này, bn đã s dungj các thông s ti u hoá trong Photoshop bng cách s dng hp thoi Save For Web. Trong ImageReady, các la chn tng t cng xut hin trong palette Optimize. 1. Trong ImageReady, chn File > Open, và m file 14Start2.psd t th mc Lesson/Lesson14. Bc nh này đc to ra t Adobe Illustrator và sau đó đc raster (mành) hoá bng Photoshop. Bc nh này cha nhiu vùng màu đc. 2. Click vào bng 2-Up trong ca s cha hình nh. Bn đã đc ti u hoá ca bc nh đc hn nm  bên phi ca ca s. 3. Trong trình đn m ra trên palette Optimize, chn GIF 128 No Dither. © Copyright 2004-2005 bantayden.com, All rights reserved. Ghi rõ ngun khi bn phát hành li thông tin t trang này. 9 Tt c v Photoshop (Adobe Photoshop 7.0) www.vietphotoshop.com 4. Trong menu Color Reduction Algorithm, chn Perceptual. La chn mt thut toán gin lc màu (Color reduction algorithm) Mt trong nhng cách đ gim kích thc file là gim s màu trong bc nh. Photoshop có th tính toán s màu cn thit nht cho bn, da trên bt k thut toán nào có th. Bn cn ch đnh thut toán nào đc s dng bng cách to ra mt vùng chn t menu Color Reduction Algorithm, nó s bao gm các la chn sau: Perceptual: To mt bng màu tu chn bng cách đa ra các u tiên màu dành cho mt ngui có đ nhy cao - Selective: To ra mt bng màu tng t bng màu Perceptual, nhng các vùng màu ph bin hn và gi nguyên màu sc trên trang Web. ây là bng màu thng to ra nh vi tính nguyên vn màu sc cao nht. Selective đc chn làm mc đnh. Adaptive: To mt bng màu tu chn bng cách ly mu màu t di màu xut hin ph bin nht trong bc nh. Ví d mt bc nh ch vi hai màu xanh lá cây và xanh da tri s to ra bng màu gm hai màu xanh lá cây và da tri là ph bin. ây là tu chn tt nht đ mô t màu sc tp trung trong các vùng riêng bit ca ph màu. Web: Dùng bng màu chun 256 màu ph bin ca bng màu trong Windows và Mac OS 8-bit (256 màu). H thng này đm bo rng không có s hoà sc ca trình duyt đc ng dng đi vi các màu sc khi bc nh đc hin th s dng 8-bit màu. (bng màu này gi là palette Web safe). Nu bc nh ca bn có ít màu hn tng s màu lý thuyt trong bng màu này, thì nhng màu không s dng đã b loi b. Custom: Bo toàn bng màu hin ti nh mt bng màu đã hoà trn và bng màu này không cp nht các thay đi đn bc nh. © Copyright 2004-2005 bantayden.com, All rights reserved. Ghi rõ ngun khi bn phát hành li thông tin t trang này. 10