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[r]
(1)Chương 14: T i u hố hình nh cho trang Web và B n đ nhố ả ả ả
Để việc xuất Web đạt hiệu quả, ảnh bạn cần đảm bảo có cân tốt kích thước file chất lượng hiển thị Với việc sử dụng Adobe Photoshop ImageReady, bạn tối ưu hố kích thước hình ảnh bạn, bức ảnh có thời gian tải hợp lý từ máy chủ trang web mà không làm chi tiết, màu sắc, sáng thành phần định hướng cần thiết đồ ảnh chẳng hạn.
Trong chương này, bạn học cách thực hiện:
Tối ưu hoá file ảnh dạng JPEG GIF, điều chỉnh thơng số tối ưu hố để đạt cân mong muốn kích thước file chất lượng hình ảnh.
Hiệu chỉnh lượng phối màu áp dụng cho ảnh. Tạo suốt cho ảnh.
Tạo đồ ảnh siêu văn bản.
Xử lý bó file để tự động thực q trình tối ưu hố.
Bạn tìm hiểu học khoảng ba mươi phút Bài học biên soạn cho Adobe Photoshop ImageReady Cũng học trước (chương 13), bạn ghi lại file mở đầu Nếu bạn muốn phục hồi file mở đầu, copy từ Học Adobe Photoshop CD kèm theo
(2)
Tối ưu hoá ảnh Photoshop ImageReady
Adobe Photoshop 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 file ảnh tối ưu hoá chất lượng hiển thị hình Các lụa chọn cho nén file ảnh phụ thay đổi thuộc vào định dạng file mà bạn lưu ảnh
Định dạng JPEG thiết kế để bảo toàn dải màu lớn biến đổi ánh sáng tinh tế ảnh tín hiệu số liên tục (như ảnh chụp hình ảnh với độ dốc) Định dạng 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 cao nén ảnh dạng màu đặc ảnh với vùng màu lặp lặp lại (ví dụ nghệ thuật vẽ nét đơn, logo hình minh hoạ có văn bản) Định dạng sử dụng bảng màu có 256 màu để hiển thị hình ảnh có hỗ trợ suốt.
Định dạng PNG mang lại hiệu nén ảnh có màu đặc bảo tồn chi tiết sắc nét Định dạng PNG-8 sử dụng bảng màu có 256 màu để 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ũ khơng hỗ trợ file định dạng PNG.
Trong chuơng bạn học cách sử dụng Adobe Photoshop ImageReady để tối ưu hoá lưu file ảnh định dạng JPEG GIF cho việc xuất Web Bạn thao tác với tập hợp ảnh thiết kế cho Web site ảo với vườn thú ảo
Photoshop (qua hộp thoại Save For Web) ImageReady (qua bảng Optimize) mở nhiều khả cho việc tối ưu hố hình ảnh, file bạn nhỏ hiệu quan sát tốt.Ví dụ bạn dùng ứng dụng để chọn từ tập hợp lớn định dạng phân bố file, để đạt mục đích cho cơng việc bạn Bạn dùng ứng dụng để so sánh với file tối ưu theo cách khác đặt cạnh Sử dụng tối ưu hoá nét đặc trưng bảng màu dùng Photoshop dùng ImageReady, bạn bào tồn tối đa màu sắc kích thước file bạn tối thiểu
Bắt đầu
Trước bắt đầu học này, bạn phục hồi thông số mặc định cho Adobe Photoshop Adobe ImageReady Hãy xem “Phục hồi thông số mặc định” trang
1 Khỏi động Adobe Photoshop
(3)2. Chọn Open > Browser click vào bảng File Browser in bảng để mở nó.
3. Trong File Browser, dùng bên trái phía để chọn thư mục Lesson/Lesson14 chọn thư mục Lession14.
Hình nhỏ file Start End xuất bên phải, nhiều file xuất hồn tồn tương tự Bạn chọn thư mục Photos thư mục Lesson14 đẻ xem ảnh mà bạn dùng để làm cho file 14Start1.psd, sau nhớ chọn lại thư mục Lesson14
4. Chọn hình nhỏ file 14Start1.psd, hình nhỏ biến liệu file xuất ô bên trái trình duyệt file (File Browser) Nếu cần, bạn định lại kích thước cho File Browser để có hình nhỏ lớn
Đây file phiên sửa chữa cho đồ vườn thú, file mà bạn sử dụng sau chuơng Phiên đồ bổ sung ảnh chụp động vật quét vào máy chế tác Photoshop Trong ô thấp bên trái File Browser, cuộn xuống biến liệu ý kích thước file thực lớn
5. Chọn hình nhỏ file 14End1.psd Chú ý kích thước file biến liệu nhỏ ảnh nhìn hình ảnh file 14Start1.psd
6. Lần lượt, chọn file Start End khác đánh số thư mục Lesson14 để xem trước chúng. Click đúp file 14Start1.psd để mở Photoshop
(4)
Trong học này, bạn tối ưu hoá file định dạng JPEG GIF Bạn sử dụng Photoshop ImageReady để nén file định dạng JPEG GIF
Hiện tại, kích thước file 14Start1.psd lớn để dùng cho trang Web, bạn so sánh với định dạng file nén khác để xem file nén tạo cho bạn hình ảnh nén tố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 Photoshop có đầy đủ tất tính tối ưu hố ImageReady Bạn so sánh hai hay nhiều file bạn làm việc, bạn điều chỉnh lựa chọn tối ưu hố bạn có phối hợp tốt giưũa kích thước file chất lượng hình ảnh
1. Với file Start1.psd mở kích hoạt Photoshop, chọn File > Save for Web 2. Trong hộp thoại Save for Web, click vào bảng 4-Up để có hình ảnh.
Photoshop tự động tạo ba tập hợp lựa chọn tối ưu hoá khác bên cạnh hình ảnh gốc Các thơng tin quan trọng đặt hình ảnh xem trước, bao gồm kích thước file, thời gian tính giây để tải hình ảnh Ơ hình ảnh file gốc Các ô thứ hai, ba bốn diễn giải ba lụa chọn tối ưu hoá khác bao gồm định dạng file (JPEG hay GIF) 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 hộp thoại Save for Web, chọn 200% lớn trình đơn Level Zoom mở để bạn quan sát chi tiết ảnh, sau click để xem trước phía bên phải ngừng kích hoạt lựa chọn cho phóng đại hình ảnh.
(5)4. Giữ phím cách (Space), trỏ chuột trở thành hình bàn tay, drag hình ảnh đến vị trí có dòng chữ Tropical Rainforest (ở tâm ảnh, vẹt xanh) để dòng chữ bốn phần xem trước ảnh Một lần nữa, xem xét cách thật tỷ mỷ để thấy khác biệt hình ảnh xem trước tối ưu hố.
So sánh định dạng JPEG, GIF PNG tối ưu hố
Bạn tối ưu hố hỉnh ảnh hình ảnh mà bạn quan sát thấy hộp thoại Save for Web Để thực điều này, bạn chọn ảnh tối ưu hoá để xem trước chọn thiết lập cạnh bên phải hộp thoại Bằng việc thử nghiệm với thiết lập nén khác nhau, bạn rút thiết lập tốt để đạt mục đích bạn
Trước bắt đầu, bạn đảm bảo hình ảnh xem trước tối ưu hố nằm phía bên phải chọn
1 Trong phần Settings trình đơn mở phía bên phải hộp thoại Save for Web, chọn GIF 128 Dithered (Nếu thực chưa chọn)
(6)Hãy ý nhóm điểm ảnh tối xung quanh phần văn mỏ vẹt (Có thể bạn phải giữ phím Shift Drag ảnh để xem phần mỏ vẹt)
Bạn dùng thứ hai để so sánh tối ưu hoá GIF 128 Dithered với tối ưu hoá định dạng JPEG GIF
2 Click vào phiên thấp bên trái ảnh để chọn chọn theo lựa chọn dạng thức JPEG, thời điểm này, phần Settings trình đơn mở ra, có lựa chọn sau:
JPEG Low: ý chi tiết ảnh văn biến đổi cách chấp nhận được. JPEG High: chất lượng hình ảnh cải thiện, kích thước ảnh tăng lên chút.
JPEG Low JPEG High
JPEG Medium: thiết lập này, chất lượng hình ảnh chấp nhận kích thước file nhỏ so với trường hợp dạng thức JPEG High hay GIF
Chú ý: Bạn lựa chọn mức độ trung bình khác cho chất lượng file định dạng JPEG cách gỗ Drag trượt lựa chọn Quality phần bên phải hộp thoại Save for Web.
Bây bạn thử thay đổi thiết lập khác định dạng JPEG GIF, bạn dùng ảnh xem trước thú tư để thử với định dạng khác
3. Chọn phiên hình ảnh thấp bên phải chọn menu Settings để chọn PNG-8 128 Dithered
Mặc dù lựa chọn mang lại kích thước file nhỏ ảnh gốc chất lượng hình ảnh không tốt trường hợp JPEG Medium (trường hợp JPEG Medium cho kích thước file nhỏ hơn), nữa, nhiều trình duyệt cũa lại khơng thể đọc file có định dạng PNG Để làm cho ảnh tương thích với trình duyệt cũ, bạn se lưu file dùng tối ưu hoá JPEG Medium cho mục đích sử dụng cho Web
(7)chọn hộp chọn Progressive.
Chú ý: Khi Progressive chọn, tải xuống hình ảnh thành cơng với lần làm tăng chất lượng hình ảnh.
Progressive JPEG tải xuống
5.
Click Save Trong hộp thoại Save Optimized As, sử dụng tên mặc định 14Start1.jpg lưu vào thư mục với hình gốc.
6. Chọn File > Close, không lưu lại thay đổi.
Tối ưu hố hình ảnh định dạng GIF
Bây giờ, bạn tối ưu hố hình ảnh màu phẳng định dạng GIF so sánh với kết bảng màu khác chế độ hoà sắc khác Mặc dù bạn thực tồn học Photoshop bạn dùng ImageReady Photoshop ImageReady chia sẻ nhiều tính năng, vài cơng việc thích hợp sử dụng Photoshop cơng việc khác lại thích hợp với ImageReady phụ thuộc vào mục đích sử dụng file ảnh bạn Cũng có việc thực Photoshop có việc thực ImageReady Đó lý hai cơng cụ có cách thuận lợi để chuyển đổi lẫn Nếu bạn mở file bạn chuyển từ Photoshop sang ImageReady ngược lại, file mở ứng dụng mà bạn chuyển qua Nếu bạn mở nhiều file, file bạn mở kích hoạt mở ứng dụng mà bạn chuyển qua Nếu khơng có file mở, bạn chuyển đổi qua lại từ ứng dụng sang ứng dụng khác
Chuẩn bị vùng làm việc với ImageReady
(8)việc với ImageReady cho công việc mà bạn thực học
1 Trong Photoshop, click vào nút Jump To ImageReady phần hộp công cụ để chuyển từ Photoshop sang ImageReady
Chú ý: Nếu bạn khơng có đủ nhớ để chạy hai ứng dụng lúc, đóng Photoshop bắt đầu với ImageReady.
2 Trong ImageReady, chọn Windows > Workspace > Reset Pallette Loactions để đảm bảo tất Pallette đặt vị trí mặc định chúng
3 Hãy Drag nhãn Palette khỏi nhóm palette để tách riêng chúng thành 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 nhóm palette để ẩn palette:
· Nhóm palette Color (gồm palette Color, Swatches Styles) · Nhóm palette Rollovers (gồm palette Rollovers Layer Option)
5 Drag palette Optimize, Color Table Layers để xếp lại chúng vùng làm việc mong muốn định lại kích thước chúng cho thuận lợi bạn làm việc
6 Chọn Windows > Workspace > Save Workspace
7 Trong hộp thoại Save Workspace, gõ Optimize_14 click OK
8 Vùng làm việc đặt tên Optimize_14 xuất menu Windows > Workspace, tên giúp bạn nhớ bạn tạo vùng làm việc cho chương 14 để làm việc việc tối ưu hoá (Optimize) Bạn 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 palette quay trở lại với vùng làm việc mặc định lúc cách bạn chọn tên mà bạn muốn dùng menu phụ Workspace
(9)
Phần trước học này, bạn sử dungj thông số tối ưu hoá Photoshop cách sử dụng hộp thoại Save For Web Trong ImageReady, lựa chọn tương tự xuất palette Optimize
1. Trong ImageReady, chọn File > Open, mở file 14Start2.psd từ thư mục Lesson/Lesson14 Bức ảnh tạo từ Adobe Illustrator sau raster (mành) hố Photoshop Bức ảnh chứa nhiều vùng màu đặc.
2. Click vào bảng 2-Up sổ chứa hình ảnh.
Bản tối ưu hoá ảnh họn nằm bên phải của sổ 3. Trong trình đơn mở palette Optimize, chọn GIF 128 No Dither.
4. Trong menu Color Reduction Algorithm, chọn Perceptual.
(10)Một cách để giảm kích thước file giảm số màu ảnh Photoshop tính tốn số màu cần thiết cho bạn, dựa thuật tốn Bạn cần định thuật tốn sử dụng cách tạo vùng chọn từ menu Color Reduction Algorithm, bao gồm lựa chọn sau:
Perceptual: Tạo bảng màu tuỳ chọn cách đưa ưu tiên màu dành cho mắt nguời có độ nhạy cao
Selective: Tạo bảng màu tương tự bảng màu Perceptual, vùng màu phổ biến giữ nguyên màu sắc trang Web Đây bảng màu thường tạo ảnh với tính nguyên vẹn màu sắc cao Selective chọn làm mặc định.
Adaptive: Tạo bảng màu tuỳ chọn cách lấy mẫu màu từ dải màu xuất phổ biến ảnh Ví dụ ảnh với hai màu xanh xanh da trời tạo bảng màu gồm hai màu xanh da trời phổ biến Đây tuỳ chọn tốt để mô tả màu sắc tập trung vùng riêng biệt phổ màu.
Web: Dùng bảng màu chuẩn 256 màu phổ biến bảng màu Windows Mac OS 8-bit (256 màu) Hệ thống đảm bảo khơng có hồ sắc trình duyệt ứng dụng màu sắc ảnh hiển thị sử dụng 8-bit màu (bảng màu gọi palette Web-safe) Nếu ảnh bạn có màu tổng số màu lý thuyết bảng màu này, những màu không sử dụng bị loại bỏ.
Custom: Bảo toàn bảng màu bảng màu hồ trộn bảng màu khơng cập nhật thay đổi đến ảnh.
Windows or Mac OS: Sử dụng bảng màu mặc định hệ thống 8-bit (256 màu), bảng màu dựa lấy mẫu nguyên gốc chế độ màu RGB Nếu ảnh bạn có màu tổng số màu lý thuyết bảng màu, n
Thanh trạng thái nằm cửa sổ hiển thị hình ảnh hiển thị hình ảnh phóng đại thơng tin hữu ích khác ảnh gốc tối ưu hoá ảnh
A Kích thước file thời gian tải ảnh tối ưu hoá B Kích thước ảnh gốc ảnh tối ưu hố
Bạn tuỳ chọn loại thông tin xuất