Tối ưu hình ảnh cho trong thiết kế web

r r r y Tôi un hình ánh cho trôna thiêt kê web ( phân 1 ) Phần 1 : Tối ưu hóa hình ảnh định dạng JPEG trong Photoshop FF mở bức ảnh này Bạn chọn File > Save for web, như hình 1 V 1 Edit Image Layer Select Filter Vie- New... ctrl-tf\| r 1 Open... Ctrl40 Browse... Alt+Ctrl+O 1 Open As... Alt+Shift+Ctrl+O Open Recent > Edit in ImageReady Shift+Ctri+M Close Ctrt+W Alt+Ctrl+W Close and Go To Bridge... Shift+ctrl+w Save Save As... Shift+ctrl+s Save for Web... Alt+Shift+Ctrl+S www.vietphotoshop.com _ n i . . . Bạn thấy là hình ảnh của bạn trông rất xấu vì mặc định của PTS là tối ưu định dạng .gif. Bạn hãy đối thành jpeg như hình 2 www.vietphotoshop.co n preset: I GIF 32 I PNG-24 WBMP Bạn có thể thay đổi đế chọn 2-up hay 4-up, hình 3 là FF chọn 4-up. Bạn hãy để ý một chút về các thông số bao gồm: ở hình gốc chi có kích thước file, các hình còn lại có: định dạng ảnh, kích thước file, thời gian tải (mặc định cho tốc độ 28.8kbps) và bên góc phải là chất lượng file sau khi tối ưu (Optimize). Bạn cũng sẽ có vài cách đế optimize, bạn sẽ theo dõi sau đây 2 phương pháp. Tùy từng loại ảnh, bạn sẽ chọn phương pháp phù hợp. Phương pháp 1: Việc tối ưu là làm giảm thời gian load, và đảm bảo chất lượng ảnh như bạn mong muốn. Bây giờ, trong hình 4, bạn sẽ đê ý thấy một số thông số như Quality: bạn sẽ thay đổi được từ 0 - 100 và quality càng thấp, kích thước file càng nhỏ, load càng nhanh nhưng chất lượng càng kém, thông số thứ 2 là Blur, Blur càng lớn, ảnh càng mờ nhưng thoài gian load càng nhanh. Save c c Cancel Done Preset | [Unnamed] © JPEG ^ Optimized (High *1 Cj , - a c ^ >60 V j Oj Progressive C B jS f >.3 ► | Q ICC Profile Matte: | g ) www.vietphotoshop.com Công việc cùa bạn là điều chỉnh Quality và Blur để đạt chất lượng ảnh Jpeg như mong muốn với thời gian tải là nhỏ nhất. Với tấm hình này, FF chọn các thông số như hình 5, EEEEEĨ§^EEEEE3 c c Cancel Done Preset: I [Unnamed] ị) (à JPEG Optiwa«0 Low □ Progressive Blurf p . l 3 ►rocessive □ ICC Profile 8L'^ n Matte: m vww.vjetphotoshop.com và bạn có thế so sánh kết quả trước và sau trong hình 6. Tru-ớc Orig'n»: 'Hnfwnacjpog.jpg'’ 829K www.vietphotoshop.com Như vậy là tạm chấp nhận được, khi so sánh một bức hình 829Kb còn lại 39Kb. Nếu bạn đã hài long, click vào nút Done. Tuy nhiên, nếu bạn không hài lone vì thời gian load còn cao, hãy giảm chất lượng đi chút ít của ảnh gốc, ví dụ chinh lại Brighness/Contrast và Hue/Satuation. Ví dụ sau khi FF chỉnh lại một vài thông số của ảnh gốc. FF giảm Satuation và giảm Contrast. (Cái này là để giảm chất lượng ảnh gốc thôi). Các công cụ này nằm trong Image > Adjustment. Ket quả là FF giảm thời gian load còn 13s. Như trong hình 7. Click Done nếu bạn thấy hài lòng. Hoặc Save lại nếu bạn muốn sử dụng sau. C h ú ý : Hình mà FF mở là hình có màu sắc tươi sáng nên kích thước file khó giảm nhiều, tuy nhiên với các hình ảnh màu sắc thấp độ tương phản, bạn có thể tăng hơn thời gian load mà vẫn đảm bảo chất lượng, bạn hãy nhìn vào những quả nho xanh, sẽ thấy gần như chất lượng không thay đổi nhiều, trong khi các quả nho tím, lại giảm hẳn chất lượng hình ảnh. Phương pháp 2: Bạn mờ hình mầu 2, đây là một hình có màu nền có một mảng màu tối, do đó sẽ thích hợp cho bạn sử dụng Alpha Chanel để tối ưu. Các bạn xem hình FF đã tạo, có 2 vùng rõ ràng như trong hình 8. Bây giờ, hãy giữ Ctrl và click chuột tó i vào Layer dưới, có chứa hình hoa và con bướm. Một vùng chọn hình thành như hình 9. Chọn Select > Save Selection (hình 10) và đặt tên, FF đặt là o p tim ize l. Như hình 11. Destination Document: Channe I Hinhmaujpeg2.psd fî^ New Operation © New Channel Add to Channel Subtract from Channel Intersect with Channel OK ( Cancel ) www.vietphotoshop.com Jm Hãy kiểm tra trong Chanel Pallet, đã có thêm một chanel mới có tên Optimize 1 (hình 12). oe I Layers'1 channels °aths \P aragraph , 9 Optim cel www.vietphotoshop.com Ấn Ctrl + D để bỏ vùng chọn, chọn File > Save for web. Bạn thấy là các thông số đã được lưu như lần trước. Giờ hãy tăng Quality lên làm cho ảnh đẹp hơn tý. FF chọn Quality là 50, Blur là 0.1 và chất lượng thu được khá tốt, nhìn đôi cánh con bướm là biết, thời gian load là 21 s và kích thước file là 57kb. Bây giờ, bạn click vào cái ô nhỏ tròn bên cạnh Quality, như hình 13, 16 M atte: I Ị g 0 //ww.vietphotoshop.corrx») Chọn Chanel là cái bạn mới lưu hồi nãy (hình 14), Optimize 1. Modify Quality Setting Use C All Text Layers □ All Vector Shape Layers Channel: None None Quality www.vietphotoshop.com Bạn sẽ thấy có 2 con trượt để bạn điều chỉnh Quality, như hình 15. Use ( o k ) □ All Text Layers CJ All Vector Shape Layers ( Cancel ) Channel: i ' ?! Preview Quality =■ Minimum: ị í 0% Maximum:it 40% vw.vietphotoshop.com r Hãy điều chỉnh một cách khéo léo, sau khi đã hài long, click OK và theme chút Blur nữa và kết quả của FF như hình 16. www.vietphotoshop.com Oriynal: 'Hrhr*.;pe5 2 .psc' 1.MM JPEG 41.43K IS sec ậ' 26.8 Kbps 37qujSty Thời gian load bây giờ là 16s và kích thước file là 45kb. Tối ưu hình ảnh cho tronữ thiết kế web (phần 2) Phần 2: Tiếp theo cho .GIF. Chúng ta sẽ bắt đàu với việc bạn tạo ra một Logo, và FF sẽ sử dụng Logo Vietphotoshop.com Car cho Tut của mình. Việc design logo sẽ không nói cách làm thế nào vì phụ thuộc vào bạn. Việc tối ưu hình .gif sẽ dễ hơn trong ImageReady (IR), vì vậy FF sẽ thực hiện trong m. Ấn Ctrl + Shift + M để chuyển sang IR. Logo của FF như hình 17. Vietphotoshop.com Bạn cũng chọn Optimize, cũng có các tùy chọn như bạn đã làm hồi nãy với ảnh jpeg. Bạn chú ý vài thứ ở đây như trong hình 18. Gồm: Format: gif (chỉ có nhiều nhất 256 màu thôi), Reduction (để chọn phương pháp tối ưu cho bạn), color (chọn số lượng màu), Dither (phương pháp dither), Transparency (bảo toàn trong suôt hay không), Matter (chọn một màu nền, tý nữa bạn sẽ thấy nó hiệu quả thế nào với hình gif có transparency), ngoài ra còn có Lossy, ... _F_ ỉ 1 GIF 0% díther 6.44ÍK Selective paiette l ssc # 2Ỉ.Ẽ Kbps 244 colors Ca GIF 100%. dither 6.441K Seect ve paSette 3 sec ® 2S.S Kbps 244 colors Ỉ,441KGỈF ▼ ®J1 Info ếo p trm i:® ^ Lay&rComps’ Presets I [Unnãnf*dj s i $0r Formats B ã T ^ Co lor Reducl'ic" Cob 'Web Snap: I 0% V 5 D ith e r Method c jj j o D'ithsr Z J * Aim ju V. I ỹyý; Í : I o I ’'^ ¡EraTSpãrerrcy -s. v i j naraparency Matte! I None I ij) i T 'V 'O p tio n s 2 ĩnterisceá Lossy: Ị~õ Pĩ^ Q I [J Use U'nifierf Coior Tsbia 'V' Add Mstsdste ị Settings... Bạn chọn 2-Up để xem và so sánh kết quả cho dễ. Ở đây, FF chọn Reduction là Selective (Bạn tùy chọn loại Reduction miễn là bạn thấy chất lượng ảnh và file size nhỏ là được) vì nhìn nó có vẻ “ngon” nhất. Bạn sẽ lần lượt thay đổi các thông số khác cho file size là nhỏ nhất. Trong tut này, FF sẽ tập trung vào vụ số lượng màu sao cho thời gian load là nhanh nhất. Hiện tại như trong hình 19, bạn thấy là thời gian laod là 3s, kích thước file là 6.5Kb. Vậy là lâu cho một logo có kích thước 300x200pixels. '¿'Ce Vietphotoshop V Ce Vietphotoshop Original: "VPTSCarLc-go. pst£r 213K GIF 3% dither í,441K SEíScti'we patette 3 see ^ 2E.S Kbps 244 colare Trong ó Color, ban hay lán luort giám so máu bang cách chon sé máu sao cho nhó nhát má logo cüa ban nhin vin dep. Ó day FF chon sé máu la 16 va kích thuóc file la 4kb. Tuy nhién ban có thé chon 8 máu vói thoi gian load la 2s vá file size la 3.2Kb. Hinh 20. Origins! Optimized 2-Up : 4-Up '■ ______________________________________________ r C - G * ' Vietphotoshop r w C Vietphotoshop O rig iné : "V PTSCs r Log o , psd " 219K G IF 0% drther 3.916K Selective pelette 1 sec £ 2S.5 Kbps 16 ccfors Ban cung có thé thay dói các giá tri tmg Dither dé có file size la nhó nhát. Nhung cái nay phu thuQC vao ban. Hay dé y ve các máu trong bang máu, các máu ban nhin tháy trong dó lá các máu trinh duyet có thé hién thi. (hinh 21). Néu máu khong thé hien thi boi trinh duyet, ban sé tháy có mot ó nhó trong tám cüa ó máu. ^7 C olor T a b le Reduction: j Seiecl ’.s t ^ 1 Q | Cobra; | Ife ^ Web Snap-; | 0% t 1 Drtber Method: No Dither £ 1 I y lO \ www.vietphotDshop.com 0 Web Conient Co lo r Ta b le <53 H I M 1 1 I I | | | | | | Trong mót sé tnrong hop, ban cán pháí giu mot só máu nao dó. Vi du trong hinh, khi FF chon sé máu la 4. Máu o hinh chiéc xe da bién mát, thay váo dó la mot hinh dam hon. FF cán phái gitr máu sác náy. Nhu hinh 22 Vietphotoshop Origin-al: uVPT3CairL*go.p®d0 2:1? K G IF 0%. drtH&r2.E15K Seiectve paietts 2 sec 28 ,S Kips 4 cob rs Vietphotoshop Chon lai 16 máu, su dung cóng cu EyeDrop Tool, vá click váo máu ban cán giü. Nhu hinh 23. c' Vietphotoshop G IF 0% tfthar 3.916K Selective palette 2 sec @ 28.8 Kbps 16 colors 9 Ban de y mau ban chon trong bang mau. Hinh 24. Web Content C o lo r Tab le . 1 I I I I I I I I I I I I www.vietphotoshop.com Ban hay click vao hinh cai o khoa, nhu hinh 25. I ° I Web Content C o lo r T a b le ' i i i i i i i i i i i i www.vietphotoshop.com 16 □ 0 ^ ^ Vay la mau da khoa, hinh 26. C7 Web C o r terit Co lor Tab le (tJ www.vietphotoshop.com i6 □ c a ii 9 ^ Bay gio, hay chon lai 4 mau. Ban se thay mau sac do duoc giu nguyen nhu trong hinh 27. Bạn hãy so sánh nó với hình 22. jOCi Vietphotoshop Originals 1 'VPT SCarLcrg ữ. psd Í1ĨK r S c Vietphotoshop GIF dtther 2.Ĩ15K Selective ps*&tte 2 see 2S.S Kbps 4 colors Đạn có thể khóa với các màu bị mất ừong quá trình bạn chọn ít màu. Vậy là xong nhé, vói các hình .gif lớn mà không có Transparency. Tối ưu hình ảnh cho trong thiết kế web (phần 3 ) Phần 3: Tiếp theo, chủng ta sẽ tối ưu hóa một hình gif với nền transparency. Trở lại với cái Logo, FF tạo ra cái logo với nền trong suốt (transparent background). Bạn hãy xem trong hình 28. p i l a rVietphotoshop.com Ấn Ctrl + Shift + M để chuyển sang IR. Trong IR, chọn 2-Up bạn sẽ thấy là cái hình được optim ize có nhiều vết răng cưa. Như hình 29 bạn thấy. Ü S 3 ¡ N M Ületphotoshop.comf l u i i / i T . v y S v lv K w p íK v S v f f l ị \ t f " C a r rietphotoshop.com n b m m m Original: "VPTSCarLogoN.psd" 328K GIF 2.806K 2 sec @ 0% dither Selective paiette 28.8 Kbps 32 colors Nhiệm vụ của chúng ta là làm giảm răng cưa đi để cái logo nhìn trong trình duyệt được đẹp nhất. Công việc của bạn như trong phần 2 là lựa chọn các thông số trong bảng Optimize đế có kích thước file nhỏ nhất và thời gian load nhaxih nhất với chất lượng ảnh như bạn mong muốn. Hình 30 Info í Optimize Layer Comps * Preset: I [Unnamed] Format: I GIF Reduction: Selective 3 E 0 ] Colors: 16 Web Snap: I 0% ' Method: Diffusion J § Amount: 0% V T ransparency [ ^ Transparency Matte: I None í ' Dither: No Dither w w w .^ietphO toshop.com Bây giờ, hãy xem trước sản phẩm của bạn trong trình duyệt hiển thị thế nào. Từ File > Outphut settings > HTML. Như hình 31. I E dit Im age Layer Slices Select F ilte r V iew W in do w Help New... C tr l+ N O pen._ C tr l+ O O pen Recent ► Edit in P h o to s h o p C tr l+ S h if t+ M C lose C tr l+ W Save C tr l+ S Save A s... C tr l+ S h ift+ S Revert w w w .v ie tphotoshop.com 1 Save O p tim iz e d C tr l+ A lt+ S Save O p tim iz e d As... C tr l+ S h if t+ A lt+ S 1 O u tp u t S e ttings D I U pdate HTML... Saving HTML... Sliri»s t r Của sô của tùy chọn Output xuât hiện. Hình 32 Output Settings Preset: Custom ( OK ) I Background View Document As [ Image^ Background Image Path: c Background ( c h o o s e . . . 1 C ancel Prev N e x t Load.. Save... Color: w w w .v ie tphotoshop.co m Bạn chú ý vào các điếm, như sau: 1. Bạn tích chọn Image, nghĩa là Logo sẽ là một hình ảnh của web. 2. Bạn tích chọn Background, nghĩa là logo của bạn sẽ là hình nền của web, background. 3. BG color là màu nền, FF chọn màu nền là màu xanh nhạt sang như bạn thấy. 4. Bạn cũng có thể chọn hình nền theo ý bạn trong phần background Image. Ớ đây FF không chọn, mà chi chọn logo FF tạo là một đối tượng trên trang web. Sau khi đã xong, bạn click Ok. Click vào cái hình IE như hình 33 để xem trước hình của bạn hiển thị như thế nào. Hình 33 100% ▼ 2.67K / 2 see §íãỉ h J ____________________ 9 □ jp re v ie w in lEXPLORE (C tr l+ A lt+ P ) | r r Và kêt quả bạn thây trong hình 34 ịT C a r Vietphotoshop.com Format GIF Dimensions: 300\v X 200h Size: 2.67K Settings: Selective, 16 Colors, 0% Diffusion Dither, Transparency on. No Transparency Dither, Non ^ VFTSCarLogoN cbody bgcolor="#CCFFCC"> 7 ietphctoshop.com NÓ CÓ thêm các thông tin, đoạn c o d e ,... như bạn thấy. Nhưng hình ảnh thì xấu quá. Quá tệ phải không. Chúng ta sẽ cải thiện nó, như lúc trước FF nói, chúng ta sẽ cần “Matte” trong Optimize Pallete. Bây giờ, bạn hãy chọn cho bạn màu của Foreground là màu của màu nền trong khi bạn chọn màu nền cho trang web. Ở đây, FF chọn màu nền là màu xanh sang nhạt, CCFFCC. Bạn có nhiều cách chọn màu, cái đó phụ thuộc vào bạn, FF chọn cách đồi màu foreground cho họp với màu nền của trang web. Trong Optimize palette, di chuột đến Matte và chọn Foreground. Hình 35 ■^ 7 Transparerx^ Ị5Ị) Transparency f Matte: None Dither: 1 No D'ftl None Foreground Color 1 [___ Background rotor hoöQfchop.comwww.vietp^7 Options c Interlaced _________ : £ ■ ■ ■■■■■■■■■■■■■ Bạn nhìn thấy logo trở nên mịn hơn rất nhiều ở viền. FF phóng to đê bạn nhìn cho rõ, hãy để ý là xung quanh viền chi tiết có màu foreground bao phủ. Hình 36 So sánh với nó khi không qua bước “Matte”, ở hình 37 Và hãy xem thử kết quả của bạn trong trình duyệt xem bây giờ logo của bạn hiển thị thế nào. Hình 38 Vietphotoshop.com w w w .v ie tphotoshop .com Format GIF Dimensions: 300w x 200h Size: 4.02K Settings: Selective, 16 Colors, 0% Diffusion Dither, Transparency on; No Transpare VPTSCarLcgoN <metfi http-equ±v=nContent-Typen content="text/html; char3et=iso <img src=nimages/VPTSCarLcgoN.gif" width="300" heighu="200" ale. So sánh với hình ban nãy không qua Matte xem nhé, Hình 34 íTÊar Format GIF Dimensions: 300w X 200h Size: 2.67K Settings: Selective, 16 Colors, 0° o Difiusion Dither, Transparency on, No Transparency Dither, Non ^ VPTSCarLogoN cbody bgcolor="*CCFFCC"> Cl mg src="i:nages/VPTSCarLogoN.gif " width="300" he ight= "200" a l t “ "" /> .. w .v ie tp h o to s h o p .c o m Bạn đã có một kết quả rất tuyệt. Nhưng, hãy thử cải thiện thêm chút xíu bằng cách bổ sung thêm một màu đệm trước cho các chi tiết của Logo, bạn sẽ còn thu được kết quả ấn tượng hơn. Cái này phụ thuộc vào bạn. Rây giờ, FF sử dụng Outer Glow trong Layer Style, hình 39 B lend ing O p tio n s ... D ro p Shadow... Layers Hist In n e r Shadow... 1 Normal Lock: □ In n e r G low ... Bevel an d Em boss... Satin...' i ế C o lo r O verlay ... C ra d ie n t O verlay... P a tte rn O verlay... www.vietphoStrotaGp.com -<I 1» I J L a - J a a , Nhưng trước khi thao tác với nó, hãy trả lại tùy chọn Matte là None Mục đích của Outer Glow là tạo ra một lóp phủ ngoài các chi tiết ở rìa của Logo nhằm tạo ra sử chuyển tiếp nhẹ nhàng hơn cho logo. Kết quả cùa FF sau khi thao tác với Outer Glow, hình 40 Layers History Actions T 1 Opacity:Normal 100% Lock: □ j Ỷ â Unify: ® J H w w w .v ie tphotoshop .co m » ©. ISI -I ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■■■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ A f Bạn sẽ thấy có một lớp màu xanh bao bọc ngoài. Công việc tiếp thao là chọn lại Matte với màu là màu hồi nãy, nếu bạn không thay đổi gì, đó là màu Foreground. Màu FF đã chọn là CCFFCC Kết quả bạn thấy sau khi Matte là: Hình 41 Đừng lo gì cả nếu bạn nhìn cái logo của bạn như thế, giờ hãy xem kết quả trong trình duyệt Format GIF Dimensions: 300w x 200h Size: 5.302K Settings: Selective. 1 6 Colors, 0 ° o Difiusion Dither, Transparency o il N o Transparency Dither, Nor VPT5CarLogoN Hình 42: Vietphotoshop.com w w w .v le tph o to sh op .co m Quá tuyệt, bạn đã có một logo cực đẹp. Bây giờ hãy xem FF thao tác lại chút xíu với bước Outer Glow nhé. Chọn lại màu và tăng size trong Outer Glow. Bạn thấy Logo có thêm một màu vàng nhạt khá đẹp. Hình 43. ^ Ịằ ạ r Vietphotoshop.com www.vietphotoshop.com Format GIF Dimensions: 300\v X 200h Size: 6.104K Settings: Selective, 16 Colors, 0° 0 Difiusion Dither, Transp Công việc cuối cùng là save nó lại, hãy chọn Save optimized As, và chọn html and Image (HTML). Như hình 44 www.vietphotoshop.com Fée name: VPTSCarLogoN.html Save as type: HTML and Images (*.html) 3 Và bạn hãy xem là có một folder với một trang web đã xuất hiện, hãy mờ và xem kết quả của bạn. H ìn h 45 im ages jVPTSC arLogoN .h tm lj www.vietphotoshöp!com