Bài giảng Photoshop - Chương 14: Tối ưu hóa hình ảnh cho trang web và bản đồ ảnh

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

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

đượ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

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:

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

Trong hộp thoại Save Workspace, gõ Optimize_14 và click OK.

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.

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á

Kích thước của ảnh gốc và ảnh đã được tối ưu hoá

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.

10 trang yennguyen 42721 Free

Download

Bạn đang xem tài liệu "Bài giảng Photoshop - Chương 14: Tối ưu hóa hình ảnh cho trang web và bản đồ ảnh", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

bai_giang_photoshop_chuong_14_toi_uu_hoa_hinh_anh_cho_trang.pdf