Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS

7 12 0
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS

Đang tải... (xem toàn văn)

Thông tin tài liệu

Adobe Photoshop và Adobe ImageReady sẽ cho bạn một phạm vi điều khiển hiệu quả đối với việc nén kích thước tập tin của một ảnh trong khi tối ưu hoá chất lượng ảnh thể hiện trên màn hình[r]

(1)

trong in để dùng với mục đích cá nhân phi thương mại Nếu bạn muốn phát hành lại trang web bạn làm ơn liên lạc với phải trích dẫn lại nguồn là: Bá tước Monte Cristo - Final Fantasy www.vietphotoshop.com

Để có hình ảnh hiệu trang Web, hình ảnh bạn phải có cân hài hồ kích thước file ảnh chất lượng ảnh Sử dụng Adobe Photoshop Adobe Image Ready, bạn tối ưu hố hình ảnh bạn để hình ảnh tải xuống nhiều lần từ máy chủ mà không bị chi tiết quan trọng, độ trông suốt, thành phần chuyển dịch chẳng hạn đồ ảnh (image map)

Trong học này, bạn học cách làm sau:

• Tối ưu hố tập tin dạng JPEG GIF, điều chỉnh xác lập tối ưu hố để đạt cân kích cở ảnh chất lượng ảnh

• Xác định độ suốt cho ảnh

• Xử lý hàng loạt tập tin nhằm tự động hoá trình tối ưu hố

Bài học cần tiếng 30 phút để hoàn tất Bài học soạn dành cho Adobe Photoshop Adobe ImageReady

(2)

Sử dụng Photoshop ImageReady để tối ưu ho hình ảnh

Tối ưu hố q trình chọn dạng, độ phân giải, xác lập chất lượng ảnh để ảnh có hiệu quả, bắt mắt

và tiện ích cho trang duyệt web Nói cách đơn giản, hài hồ kích cở ảnh chất lượng ảnh Khơng có tập hợp xác lập đơn lẻ tối ưu hố mức hữu hiệu loại ảnh, tối ưu hố địi hỏi nhận xét mắt thẩm mỹ người

Các tuỳ chọn nén thay đổi tuỳ theo dạng tập tin lưu Bạn nên làm quen với loại dạng tổng quát

• Dạng JPEG thiết kế để giữ lại độ màu rộng độ sáng rõ ảnh có tơng màu liên tục (chẳng hạn ảnh chế độ tơ màu gradient) Dạng tiêu biểu cho ảnh

sử dụng hàng triệu màu

• Dạng GIF hiệu ảnh nén màu đặc ảnh có vùng màu lập lại (chẳng hạn nghệ thuật đường thẳng, biểu tượng hình minh hoạ có chữ) Dạng sử dụng bảng gồm 256 màu để thể hình ảnh hỗ trợ cho độ suốt

• Dạng PNG hiệu ảnh nén màu đặc giữ chi tiết sắc nét Dạng PNG-8 sử dụng bảng 256 màu để thể ảnh Dạng PNG-24 hỗ trợ màu 24 bit (hàng triệu màu), nhiên nhiều ứng dụng trình duyệt trước khơng hỗ trợ tập tin dạng PNG

• Dạng WBNG dạng chuẩn cho việc tối ưu hố hình ảnh thiết bị di động chẳng hạn điện thoại di động Dạng WBMP hỗ trợ màu bit, có nghĩa ảnh dạng WBMP chứa điểm ảnh màu đen màu trắng

Chú ý: Để có thơng tin việc sử dụng dạng PNG WBNG, xem phần Trợ Giúp Photoshop Adobe Photoshop Adobe ImageReady cho bạn phạm vi điều khiển hiệu việc nén kích thước tập tin ảnh tối ưu hoá chất lượng ảnh thể hình Bạn áp dụng tập hợp thiết lập tối ưu cho tập hợp ảnh, ảnh rời, lớp (layer) hay phim chụp (slice)

(3)

dùng hai chương trình để so sánh ảnh đặt kế bên có mức độ tối ưu hoá khác tập tin Sử dụng đặc điểm tối ưu hoá bảng màu Adobe Photoshop ImageReady, bạn làm tối đa tính trọn vẹn màu sắc làm cho kích thước tập tin ảnh giảm tối thiểu

Bắt đầu

Bạn làm phần học Photoshop đồng thời làm chương trình ImageReady Khi bắt đầu bạn phục hồi lại thiết lập ứng dụng mặc định cho Photoshop để mô tả phần dẫn phù hợp với thiết lập vùng làm việc Photoshop

Bài học xoay quanh đồ hoạ trang chủ cho tổ chức du lịch giả tưởng

1 Khởi động Photoshop nhấn phím Ctrl+Alt+Shift (window) Command +Option+Shift (Mac OS) để phục hồi ưu tiên mặc định (Xem “Phục hồi ưu tiên mặc định” trang 4) Khi dòng thông báo xuất hiện, chọn Yes để xác định bạn muốn thiết lập lại ưu tiên, chọn No để hỗn lại việc thiết lập hình màu bạn,và chọn Close để đóng lại hình

Welcome

2 Bấm nút File Browser tuỳ chọn cơng cụ để mở

3 Trong bảng thư mục File browser, xác định chọn thư mục Lesson 16 thư mục Lesson

Những ảnh nhỏ tập tin bắt đầu kết thúc khác xuất bảng chứa ảnh nhỏ, nhiều ảnh số ảnh hồn toàn giống

(4)

5 Chọn ảnh nhỏ có tên 16End1.jpg Chú ý kích thước tập tin liệt kê phần metadata nhỏ ảnh giống ảnh 16Start1.psd

6 Lần lượt chọn xem trước tập tin Start End khác thư mục Lesson 16

7 Nhấp đúp tập tin ảnh 16Start1.psd để mở Photoshop Đóng File Browser lại cách bấm vào nút có biểu tượng File Browser tuỳ chọn cơng cụ lần (một lần để đưa phía trước lần để đóng lại) bấm nút Close cửa sổ File Browser

Tối ưu hoá ảnh JPEG (Photoshop)

(5)

Hộp thoại Save For Web Photoshop cho bạn thấy ảnh đặt bên cạnh khác việc sử dụng thiết lập tối ưu hố khác Bạn so sánh phiên làm việc, chỉnh thiết lập tối ưu tìm xem khác biệt bạn có kết hợp kích thước chất lượng ảnh

1 Với tập tin ảnh 16Start1.psd mở kích hoạt Photoshop, chọn File >Save for Web Chú ý : Nếu thẻ 4-up chưa chọn cửa sổ ảnh, chọn

Photoshop tự động đưa thiết lập tối ưu ngồi ảnh gốc Chú ý thơng tin trình bày ảnh gồm có kích thước tập tin thời gian (tính giây) cần thiết để tải ảnh xuống Bảng cho thấy ảnh gốc Các bảng thứ 2, 3, thể kết hợp khác việc thiết lập tối ưu ảnh bao gồm dạng tập tin (như GIF JPEG) giải thuật giảm màu (như Selective, Perceptual hay Web)

2 Ở góc trái hộp thoại Save For Web, chọn 300% từ menu pop-up Zoom Level để bạn nhìn thấy chi tiết ảnh

So sánh ảnh với thiết lập tối ưu khác

3 Bấm vào ảnh để trỏ biến thành biểu tượng hình bàn tay kéo ảnh để bạn thấy khác biệt ảnh tối ưu hoá ảnh gốc

4 Nhìn cẩn thận vùng sau đây: văn góc phải ảnh, vùng nắp hộp thư tương phản với trời màu xanh, bóng cánh cửa rỉ sét

(6)(7)

1 Đối với việc tối ưu hố hình ảnh, đâu ưu điểm việc sử dụng ImageReady so với Photoshop?

2 Color Table gì?

3 Khi hồ sắc trình duyệt xảy làm bạn giảm thiểu số hồ sắc trình duyệt ảnh?

4 Mục đích việc gán matte color cho ảnh GIF gì? Các câu trả lời ơn tập

1 Thật có nhiều lợi điểm sử dụng trình ứng dụng trình ứng dụng khác việc tối ưu hoá.Cả Photoshop lẫn ImageReady thực phạm vi rộng rãi thao tác nhằm tối ưu hố ảnh ImageReady có nhiều đặc điểm chun Web mà bạn khơng tìm thấy Photoshop, tối ưu hố hình ảnh khơng phải đặc điểm

2 Color Table bảng chứa màu sử dụng ảnh bit Bạn chọn color table cho ảnh GIF PNG-8, thêm, bớt chỉnh sửa màu Color table

3 Hồ sắc trình duyệt xảy trình duyệt Web nhái màu xuất bảng màu ảnh không xuất hệ thống hiển thị trình duyệt

Để bảo vệ màu khỏi hồ sắc trình duyệt, bạn chọn màu bảng Color Table bấm chọn nút Web-shift cuối bảng để dịch chuyển màu sang màu

tương đương gần bảng Web

4 Qua việc xác định lưới màu (matte color), bạn pha trộn phần điểm ảnh suốt ảnh với màu trang Web bạn Với lưới (matting), bạn tạo ảnh GIF với rìa mềm mại khơng có cưa hồ sắc nhẹ nhàng vào màu trang Web Bạn xác định độ hoà sắc

thành suốt

© www.vietphotoshop.com - Nguyễn Tấn Sĩ

Ngày đăng: 10/03/2021, 14:45

Tài liệu cùng người dùng

Tài liệu liên quan