Tất cả về photoshop (adobe photoshop 7 0)

Trong palette Optimize, nh p giá tr màu 32... d ng GIF, Perceptual và 32 màu.. Trong palette Optimize, thay l i giá tr Colors là 32.

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

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

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

© 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

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

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

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

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-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

B t đ u

ImageReady Hãy xem “Ph c h i các thông s m c đ nh” trong trang 5

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ó

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 đ

© 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

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

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)

đ 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

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

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

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

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 đã

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)

t i u hoá c a đ nh d ng JPEG và GIF

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

JPEG Low JPEG High

© 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

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

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

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

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

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

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

· 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:

· 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

Optimize

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

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à

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

t

Windows or Mac OS: S d ng b ng màu m c đ nh c a h th ng 8-bit (256 màu), đây là b ng màu d a

thuy t trong b ng màu, thì n

B n có th tu ch n lo i thông tin xu t hi n t i đây

5 Trong thanh tr ng thái, ch n Image Dimensions t trình đ n m ra v bên ph i

L a ch n này s hi n th kích th c hình nh b ng pixels (đi m nh), đây là đi u quan tr ng khi b n lên

k ho ch làm th nào đ làm kh p m t b c nh vào m t v trí có kích th c đ nh s n trong khuôn m u (template) c a trang Web

Khám phá b ng màu (Color Table)

Palette Color Table hi n th màu s c ch thu t toán gi n l c màu s c đ c ch n hiên t i cho file thao

Trên menu c a palette Color Table, ch n Sort By Hue, và chú ý v s s p x p c a các m u màu đã thay

đ i

Chú ý r ng, màu s c đã thay đ i trong b c nh và palette Color Table, màu s c đã đ c c p nh t các

ph n h i đ n palette Web

b c nh và trên palette Color Table

No Dither và Perceptual (B n có th r i kh i s s p x p màu b ng b t k cách nào: unsorted, by hue, by luminance hay by popularity)

Cho Web site: Xem các giá tr thu c h s s 16 cho màu s c trong palette Info

t

t

Trong Photoshop, gí tr màu c s 16 đ c hi n th trong palette Info khi b n ch n ch đ Web Color cho

m t ho c c hai màu ch th Trong ImageReady, giá tr màu h c s 16 đ c hi n th t đ ng trong

ph n bên pah c a palette Info, k ti p là giá tr màu RGB Palette Info c a c Photoshop và ImageReady

c ng hi n th các thông tin khác, ph thu c vào công c s d ng

xem giá tr màu h c s 16 trong palette Info c a Pho oshop, b n làm nh sau:

1 Ch n Windows > Info ho c Click vào thanh palette Info đ xem palet e

2 Ch n Palette Option t menu palette

3 Trên First Color Readout, Second Color Readout, ho c c hai, ch n Web Color t menu Mode

© 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 12

4 Click OK

nh

Gi n l c màu trong b ng màu

s c

đ m b o ch n Perceptual trong palette Optimization Chú ý v kích th c file hi n t i

Wilderness (vùng hoang vu phía B c) hi n ra trong vùng hình nh hi n th

3 Trong l a ch n Colors c a palette Optimization, gõ ho c ch n 32 t menu c a trình đ n m ra

chi ti t, ví d m t s bóng c a các con v t, có th b m t đi ho c b nh h ng

Khoá màu đ b o toàn chi ti t c a b c nh

con v t b thay đ i màu s c và m t vài cong v t khác g n nh bi n m t vì màu s c m i c a chúng

g n nh màu c a n n phía sau chúng

B n s tìm hi u nh th nào là khoá màu s c đ đ m b o màu s c không b m t đi kh i b ng màu

1 Trong menu phóng đ i c a trình đ n m ra, ch n 100% đ b n có th xem đ c h u h t b c

nh

2 Trong palette Optimizetion, thay đ i giá tr Colors tr l i giá tr 128

đ l y m u màu

Màu nâu s m đ c ch n trong palette Color Table

4 Click vào nút Lock t i ph n gi a c a palette Color Table đ khoá màu đã ch n

Chú ý: b khoá màu đã ch n, ch n m u màu và click vào nút Lock m t l n n a

5 S d ng công c Eyedropper và nút Lock trên palette Color Table, ch n và khoá màu xanh

s m c a bóng con g u trong vùng Northern Wilderness

6 Trong palette Optimize, nh p giá tr màu 32

Chú ý r ng, nh ng màu đã khoá s v n còn l i trong b ng màu sau khi đã gi n l c màu s c và trong b c nh Tuy nhiên, m t s v n đ v màu xu t hi n: V t chân trong vùng Northern Wilderness bây gi t ng t nh màu n n, và các con v t trong Tropicals Rainforest bây gi là màu nâu, thay vì màu xanh lá cây s m

© 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 14

7 Trong palette Optimize, ch n s l ng màu tr l i là 128

8 Dùng l i công c Eyedropper và nút Lock trong palette Color Table, ch n và khoá màu con v t trong Tropical Rainforest và c màu v t chân và màu n n trong Northern Wilderness B n đã có

t t c 5 màu đã b khoá

9 Trong palette Optimize, thi t l p giá tr màu là 32

10 Ch n File > Save

N u b n th nghi m v i s t i u hoá các file nh, b n hãy chú ý r ng s h i nh t màu c a b c nh

cho m t l n gi n l c i v i file nén t t nh t c a m t file nh đ nh d ng GIF, hãy th s d ng v i

Ø i v i hình minh ho c a m t b c nh hãy thi t l p giá tr khác trong palette Optimize, xem hình 14-1 trong ph n màu s c

Ki m soát hoà s c

B n có th đ ý r ng, vùng hi n th i c a b c nh xu t hi n có nh ng đ m màu khi t i u hoá v i b ng

đ c dùng đ mô ph ng màu xu t hi n mà các màu đó không ch a trong b ng màu Ví d , màu xanh da

tr i và màu vàng có th hoà s c trong ki u kh m đ t o ra minh ho cho màu xanh lá cây, mà màu xanh này không có trong b ng màu

Khi t i u hóa m t b c nh hãy luôn nh có hai lo i hoà s c có th x y ra:

ph ng màu s c xu t hi n trong b c nh g c nh ng không th trong b ng màu đã t i u hoá mà b n

Optimize

· Hoà s c trình duy t (Browser dither) có th x y ra khi b sung thêm m t ng d ng hoà s c

M t trình duy t hoà s c có th x y ra khi trình duy t Web c a b n s d ng màu mô ph ng hi n th

trong b ng h th ng đ c s d ng c a trình duy t B n có th ki m soát l ng hoà s c trình duy t

b ng cách thay đ i màu ch n thành màu Web-safe trong palette Color Table

Trong h p tho i Save For Web c a Photoshop và c a ImageReady, b n có th xem hoà s c ng d ng

tr c ti p lên m t b c nh đã đ c t i u hoá B n c ng có th xem tr c hoà s c trình duy t b sung mà

nó s xu t hi n trong b c nh cu i cùng khi b n xem nó trong trình duy t dùng hi n th màu 8-bit

Ki m soát hoà s c ng d ng (Application dither)

Hoà s c t o ra hình th c nhi u màu s c h n và nhi u chi ti t h n, nh ng c ng có th làm t ng kích th c

vi c nén t i u, dùng ph n tr m ng d ng hoà s c th p nh t nh ng v n đ m b o đ c chi ti t màu mà

b n mong mu n

d ng GIF, Perceptual và 32 màu Chú ý v bóng đ d i v n b n

3 Trong palette Optimze, nh p vào các tu ch n sau:

· Ch n Diffusion là thu t toán hoà s c (thay th No Dither)

· Drag con ch y ho c gõ giá tr 100% vào Dither Values

Dùng m t s k t h p màu s c khác, ImageReady s th mô ph ng màu s c và s c đi u xu t hi n

thay th bóng đ d i v n b n M u này là m t c i thi n chút ít và có th ch p nh n đ c Màu

n n xanh lá cây đã đ c hoà s c cho Tropical Rainforest, tuy nhiên không th ch p nh n đ c

bóng đ mà không làm nh h ng đ n n n xanh lá cây

hình 14-2 trong ph n màu s c

5 Thi t l p Dither v 100%

dùng nút Lock ( ) trong palette Color Table đ khoá màu đó l i Trong palette Optimize, thay l i giá tr Colors là 32

© 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 16