Giáo trình photoshop - Chương 14

Chia sẻ: Phan Minh Thuat | Ngày: | Loại File: DOC | Số trang:33

Thêm vào BST

Báo xấu

146
lượt xem 39
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Để 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....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Giáo trình photoshop - Chương 14

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 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á. 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 trướ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. 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 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 (Perceptual) hay Web). 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. 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. 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 1. 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 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 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. 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 1. ImageReady.
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. Trong ImageReady, chọn Windows > Workspace > Reset Pallette Loactions đ ể đ ảm b ảo r ằng t ất c ả các Pallette đ ều 2. được đặt ở vị trí mặc định của chúng. 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 3. gồm: Palette Info (từ nhóm palette Optimize) · Palette Color Table (từ nhóm Palette Rollovers) · Click vào hộp đóng trong nhóm các palette để ẩn các palette: 4. Nhóm palette Color (gồm palette Color, Swatches và Styles) · Nhóm palette Rollovers (gồm palette Rollovers và Layer Option) · 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 5. lại kích thước của chúng cho thuận lợi khi bạn làm việc. Chọn Windows > Workspace > Save Workspace 6. Trong hộp thoại Save Workspace, gõ Optimize_14 và click OK. 7. 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 8. 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. 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. 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 trên s ự l ấy m ẫu nguyên gốc của chế độ màu RGB. 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, thì n Thanh trạng thái nằm giữa của cửa sổ hiển thị hình ảnh s ẽ hiển thị hình ảnh phóng đ ại và các thông tin h ữu ích khác v ề b ức ảnh gốc và bản đã tối ưu hoá của bức ảnh Kích thước file và thời gian tải về của bức ảnh đã được tối ưu hoá A. Kích thước của ảnh gốc và ảnh đã được tối ưu hoá B. Bạn có thể tuỳ chọn loại thông tin xuất hiện tại đây. Trong thanh trạng thái, chọn Image Dimensions từ trình đơn m ở ra về bên ph ải. 5. 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 tác, trong tr ường h ợp này, thuật toán được chọn là Perceptual cho bức ảnh bản đồ vườn thú. Màu xuất hiện đ ược chỉ ra là th ứ t ự ng ẫu nhiên palette. Tổng số màu được chỉ ra tại phần giữa của palette. Bạ có thể định lại kích th ước cho palette ho ặc dùng thanh cu ộn đ ể xem t ất cả các màu. Bạn cũng có thể thay đổi các màu dạc sắp xếp trong palette. Trong palette Color Table, một ít màu có thể có m ột chấm nh ỏ hình hình thoi màu tr ắng t ại tâm c ủa m ẫu. Hình thoi đó ch ỉ ra rằng đó là màu Web-safe. 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 1. Trong palette Optimize, chọn Web từ menu Color Reduction Algorithm. 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. 2. Thử nghiệm bằng cách chọn các thông số tối ưu hoá khác nhau và chú ý t ới các hi ệu ứng trên b ức ảnh và trên palette Color Table. 3. Khi đã kết thúc thử nghiệm, hãy nhập vào lại các l ựa chọn mà b ạn thực hi ện đ ầu tiên: GIF 128 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 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 Photoshop, b ạn làm nh ư sau: Chọn Windows > Info hoặc Click vào thanh palette Info để xem palette 1. Chọn Palette Option từ menu palette 2. Trên First Color Readout, Second Color Readout, hoặc cả hai, ch ọn Web Color t ừ menu Mode. 3. 4. Click OK Palette Info hiển thị các giá trị tương đương của hệ cơ s ố 16 của chế đ ộ RGB ở d ưới con tr ỏ trong hình ảnh Giản lược màu trong bảng màu Để so sánh kích thước file, bạn có thể giảm tổng s ố màu trong palette Color Table. Thang màu đ ược gi ảm th ường gi ữ ch ất lượng hình ảnh tốt trong khi giảm độp ngột khoảng trống file đồi h ỏi l ưu trữ thêm màu s ắc. 1. Đảm bảo rằng bản hình ảnh đã tối ưu hoá được chọn, phóng to đến 200% hoặc cao h ơn, và hãy đ ảm b ảo ch ọn Perceptual trong palette Optimization. Chú ý về kích th ước file hi ện t ại. 2. Giữ phím cách và Drag bức ảnh để ít nhất phần chữ Tropical Rainforest và một ít vùng Northern Wilderness (vùng Bắc) hiện ảnh hiển thị. hoang vu phía ra trong vùng hình
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. Để ý rằng có sự giảm nhẹ trong kích thước file, nhưng chất lượng hình ảnh th ấp hơn nhi ều ở m ột vài 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 Trong thao tác trước, bạn đã được xem việc giản lược số lượng màu sắc làm mất đi chi ti ết c ủa hình minh ho ạ nh ư th ế nào. Đ ặc biệt là khi bạn giảm số lượng màu từ 128 xuóng 32 màu, bóng của vài 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. 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. 1. Trong palette Optimizetion, thay đổi giá trị Colors trở l ại giá trị 128 2. Chọn công cụ Eyedroper ( ) và llick vào bóng của con lạc đà trong vùng African Savannah để l ấy m ẫu màu. 3.
Màu nâu sẫm được chọn trong palette Color Table. Click vào nút Lock tại phần giưũa của palette Color Table đ ể khoá màu đã ch ọn. 4. Một hình vuông nhỏ xuất hiện trong gốc phải bên dưới của mẫu màu ch ỉ ra rằng màu đã b ị khoá. 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. 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 5. trong vùng Northern Wilderness. Trong palette Optimize, nhập giá trị màu 32. 6. 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. Trong palette Optimize, chọn số lượng màu trở lại là 128. 7. 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 8. 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á. Trong palette Optimize, thiết lập giá trị màu là 32. 9. 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 có th ể x ảy ra khi palette Optimize giảm màu xuống dưới 32 màu. Trên thực tế, là giảm trong t ất cả trường h ợp cho dù v ới m ột b ức ảnh đ ơn gi ản nh ất, thậm chí ngay cả khi 32 màu có thể là quá nhiều 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 số lượng màu ít nhất mà vẫn giữu được chất l ượng hình ảnh b ạn muốn. Đố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 màu khác và s ố l ượng màu khác. Các đốm màu xuất hiện làm kết quả của việc hoà s ắc, k ỹ thuật này đ ượ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: Hoà sắc ứng dụng (Application dither) xảy ra khi ImageReady hoặc Photoshop cố gắng mô 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 ch ỉ đ ịnh. B ạn có th ể ki ểm soát l ượng ứng d ụng hoá sắc bằng cách Drag thanh trượt trong palette 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 ị 8-bit (256 màu) xu ất hi ện trong b ảng màu c ủa b ức ảnh đã được tối ưu hoá nhưng khô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 file ảnh. Tuỳ ch ọn Dither kiểm soát dải màu mà ImageReady mô phỏng bằng quá trình hoà s ắc. Đ ối v ới 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. 1. Nếu cần, hãy mở file 14Start2.psd và phóng to nó đến 200% hoặc cao h ơn. 2. Đảm bảo rằng bản hình ảnh được chọn đã được tối ưu hoá, t ại palette Optimize hãy thi ết l ập đ ịnh 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 trong ảnh g ốc nh ưng không mô tả trong bảng màu 32 màu. Để ý về các mẫu có các đốm màu 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. 4. Drag con chạy của Dither đến 50%, và thử nghiệm với phần trăm Dither khác. ImageReady t ối thi ểu hoá l ượng hoà s ắc trong hình ảnh, nhưng không có gí trị % nào của Dither s ẽ gi ữ nguyên bóng đ ổ mà không làm ảnh h ưởng đ ến n ền xanh lá cây. Đối với một minh hoạ của các hiệu ứng với % hoà sắc khác trên b ức ảnh, b ạn hãy xem trong hình 14-2 trong ph ần Ø màu sắc. 5. Thiết lập Dither về 100%. 6. Thay đổi số lượng màu về 128. 7. Sử dụng công cụ Eyedropper ( )để chọn màu nền màu xanh lá cây trong Tropical Rainforest và 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. 8. Trong cửa sổ hình ảnh, thay đổi sự phóng đại về 100% Mặc dù thay đổi này có thể khá tinh vi, nhưng vẫn không chấp nh ận đ ược. Tối thiểu hoá hoà sắc trình duyệt (Browser dither) Như bạn đã tìm hiểu, bức ảnh chứa màu Non-Web safe (không an toàn cho trang Web) ph ải tr ải qua m ột quá trình hoà s ắc khi hiển thị trong một trình duyệt Web dùng hiển thị màu 8-bit, vì trình duy ệt mô ph ỏng các màu s ắc mà chúng không x ảy ra trong bảng hệ thống màu 8-bit. Từ ImageReady, bạn có thể xem trước m ột b ức ảnh đ ược t ối ưu hoá s ẽ nhìn nh ư th ế nào khi đ ược
hoà sắc trong một trình duyệt Web. Để bảo vệ một màu từ hoà sắc trình duyệt, bạn có thể chuyển dịch màu Web, chuy ển đ ổi nó thành các giá tr ị màu t ương đ ương gần nhất trong palette Web. Vì palette Web bao g ồm các t ập h ợp con c ủa màu s ắc xu ất hi ện trong b ảng màu h ệ th ống c ủa Windows và Mac OS, nên màu palette Web sẽ hiển thị không hoà s ắc trong trình duy ệt trên n ền này. 1. Với bức ảnh đã được tối ưu hoá 14Start2.psd mở, chọn View > Preview > Browser Dither (đ ể d ấu ch ọn xu ất hi ện trong lệnh kế tiếp). Để ý rằng, hoà sắc trình duyệt xảy ra trong nền màu nâu c ủa African Savannah. B ạn s ẽ di chuy ển màu Web mà màu này làm giảm lượng hoà sắc của trình duyệt trong b ức ảnh. Chú ý: Nếu bạn không nhìn thấy hoà sắc, hãy làm tăng độ phóng đ ại lên 300 l ần ho ặc t ắt c ửa s ổ xem tr ước c ủa trình duy ệt hoà sắc và sau đó quay lại xem các hiệu ứng. Bạn có thể bật tắt qua lại ch ức năng xem tru ớc b ằng cách ấn t ổ h ợp phím Ctrl + Shift + Y (Windows) hoặc Command + Shift + Y (Mac OS) 2. Chọn công cụ Eyedropper ( ) và click vào bất kỳ vị trí nào trên nền màu nâu. Màu l ấy m ẫu xu ất hi ện trong palette Color Table. 3. Click vào nút Web-shift ( ) tại phần giữa của palette Color Table. Mẫu màu thay đổi vị trí trong palette và một hình thoi nh ỏ xuất hiện trong tâm c ủa m ẫu màu ch ỉ ra r ằng màu này đã đ ược chuyển tương đương gần nhất với màu trong palette Web. Bằng việc chuyển màu Web màu nâu c ủa nền hình, b ạn đã thay đ ổi màu của bức ảnh thành màu có thể thiển thị mà không hoà sắc bằng trình duy ệt Web trên h ệ th ống màu 256 màu. 4. Chọn File > Save Chú ý: Trong Photoshop 7.0 và ImageReady 7.0, b ạn cũng có th ể th ực chuyển nhanh m ột màu thành m ột màu khác
hoặc thành trong suốt. Đây là tính năng gán trở l ại t ất c ả các đi ểm ảnh mà chúng đã xu ất hi ện trong màu ch ọn thành một màu mới hoặc trong suốt. Để hiểu rõ hơn, bạn hãy xem thêm Hỗ trợ trực tuyến Adobe Photoshop 7.0 Chỉ định nền trong suốt Nền trong suốt sẽ giúp bạn đặt những đối tượng đồ hoạ không có hình ch ữ nh ật mà t ương ph ản v ơi n ền c ủa trang Web. Vùng nằm ngoài của đối tượng được xác định là trong suốt, cho phép màu nền c ủa trang Web nhìn xuyên qua. B ạn có th ể ch ỉ đ ịnh nền trong suốt cho cả hai định dạng ảnh GIF hay PNG. Chuyển đổi lớp nền thành một lớp gốc Trước khi bạn sử dụng một file có thể ở định dạng GIF để bảo toàn đ ộ trong suốt, b ạn ph ải t ạo m ột vài đi ểm trong su ốt trong bức ảnh của bạn. Bạn sẽ thực hiện bằng cách bỏ đi các ph ần màn màu tr ắng xung quanh b ản đ ồ ảnh. Đ ể b ắt đ ầu, b ạn hãy chuyển đổi layer nền thành một layer bình thường. 1. Hãy mở file 14Start2.psd trong ImageReady 2. Chọn bảng Original at đỉnh của cửa sổ hiện thị hình ảnh. 3. Chọn Fit on Screen từ menu Zoom Level trong góc trái bên dưới của cửa sổ hình ảnh. 4. Trên menu của palette Layers, chọn Layer Options. Không thay đổi các thông s ố m ặc đ ịnh (Bao g ồm tên, Layer 0), click OK. Bây giờ lớp này xuất hiện trong palette Layer là Layer 0. Một lớp nền không thể chứa bất kỳ thông tin rỗng nào bởi vì, theo định nghĩa, không có gì sau nó đ ể có th ể nhìn th ấy. N ếu b ạn thử dùng một trong số các kỹ thuật mà thường thay thế các đi ểm ảnh màu b ằng các đi ểm ảnh trong su ốt, k ết qu ả ch ỉ ra r ằng các điểm ảnh gốc sẽ biến đổi thành màu nền đã được chọn hiện t ại thay vì trở thành các đi ểm ảnh trong su ốt.
Sử dụng công cụ Magic Wand tạo phần trong suốt Một phần của bài học này, bạn sẽ dùng công cụ Magic Erase đ ể chuy ển đ ổi nhanh màu n ền c ủa b ản đ ồ v ườn thú thành các điểm ảnh trong suốt. Công cụ Magic Eraser sẽ xoá đi tất cả các điểm ảnh của một chi tiết màu ch ỉ v ới m ột l ần click chu ột. B ạn s ẽ dùng nhóm công cụ này để xoá đi tất cả các điểm màu trắng trong lớp này. Tuy nhiên, b ạn ch ỉ mu ốn xoá đi các đi ểm màu tr ắng bên ngoài c ủa bản đồ vườn thú (không xoá màu trắng của các chữ), vì vậy, đ ầu tiên, b ạn s ẽ t ạo m ột vùng ch ọn ngăn ph ần tr ắng phía trong của bức ảnh không bị xoá. 1. Chọn công cụ Rectangular Marquee ( ) 2. Vẽ một vùng chọn hình chữ nhật chứa tất cả các chữ trong vùng năm màu của bản đ ồ v ườn thú, nh ư ch ỉ ra trong hình minh hoạ phía dưới. 3. Chọn Select > Inverse để chọn tất cả các phần nằm ngoài vùng chọn hình ch ữ nh ật. 4. Chọn công cụ Magic Eraser ( ), ẩn dưới công cụ Erase ( ) 5. Trong thanh tuỳ chọn của công cụ, hãy bỏ đi tuỳ chọn Contigous để tất cả các đi ểm màu trắng trong vùng ch ọn s ẽ đ ược kể cả mỗi phần trắng biệt những chiếc xoá, màu riêng trong lá. 6. Click nền trắng bản đồ vườn vào màu bên ngoài thú.
Bây giờ, tất cả nền màu trắng đều bị xoá bỏ, thay vào đó là các đi ểm trong su ốt vì v ậy mà b ạn có th ể nhìn th ấy m ẫu ô hình bàn cờ bên dưới bức ảnh. Duy trì và xem trước vùng trong suốt Bây giờ, bạn sẽ xác nhận rằng vùng trong suốt trong bức ảnh sẽ phải chứa các điểm ảnh trong su ốt trong file ảnh đã t ối ưu hoá định dạng GIF. Sau đó, bạn sẽ xem trước nó trong trình duyệt của bạn. Vì tính năng xem trước của ImageReady hiển thị bức ảnh trên trang Web v ới màu n ền màu tr ắng, nên b ạn s ẽ thay đ ổi màu s ẫm của bức ảnh để có thể xem được phần trong suốt. Trên palette Optimize, hãy chọn hộp thoại Transparency (Nếu bạn không nhìn th ấy h ộp tho ại này, ch ọn Show Options 1. trên menu của palette Optimize). Việc chọn Transparency sẽ chuyển đổi các vùng của bức ảnh gốc nếu có độ mờ đ ục d ưới 50% thành nền trong su ốt trong b ức ảnh được tối ưu hoá. Chọn Select > Deselect, sau đó chọn File > Save 2. Click vào Matte trong palette Optimize để mở bảng màu, sau đó ch ọn bất kỳ màu nào lo ại tr ừ màu tr ắng. Click OK đ ể 3. đóng bảng màu.