Tối ưu hóa hình ảnh trên trang web

Tối ưu hóa hình ảnh trên trang web

Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Chọn cơng cụ Zoom phóng lớn để bạn dễ nhìn thấy vùng nằm vùng chọn (khoảng 300%) Chọn công cụ Magic Eraser cẩn thận bấm vào màu trắng chữ “O” Các điểm ảnh màu trắng chữ “O” chuyển đổi thành điểm ảnh suốt, tương tự điểm ảnh chữ “A” “R” chữ “Travel” chữ “O” chữ “of” có tác dụng Chọn Select > Deselect chọn File > Save Hoàn tất bảng Color Table Mặc dù người ta nghĩ độ suốt màu, không xem 32 màu bảng màu hình ảnh.Điều có nghĩa bạn cần lại hình ảnh lần để tìm độ hồ sắc khơng thể chấp nhận gây chuyển dịch sang độ suốt Cuộn chọn công cụ bàn tay kéo để xem xét tất vùng ảnh Chú ý có độ hồ sắc nặng vùng màu xanh xung quanh dương www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 27 Chương 16: Tối ưu hoá hình ảnh trang web Photoshop CS Chọn ảnh tối ưu hoá nằm bên phải cửa sổ ảnh Trong tuỳ chọn Color palette Optimize, chọn trị số 128 Chọn công cụ Eyedropper bấm chọn vùng màu xanh vừa góc bên phải ảnh dương Trong bảng Color Table, bấm vào biểu tượng ổ khoá để khoá màu Trong palette Optimize, chọn trị số 32 số lượng màu Cuộn sử dụng công cụ bàn tay để xem hình lần nữa, xác định ảnh có cân hài hoà độ hoà sắc kích thước tập tin Chọn File > Close Xem trước độ suốt Bây bạn xem trước độ suốt trình duyệt bạn Vì đặc điểm xem trước ImageReady thể hịên hình ảnh trang web với trắng, bạn thay đổi màu ảnh để thấy độ suốt Trong cửa sổ ảnh, chọn ảnh tối ưu hoá (nằm bên phải) Trong bảng Optimize, đảm bảo hộp kiểm Transparency chọn www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 28 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Chọn Transparency chuyển đổi vùng ảnh gốc với độ mờ đục nhỏ 50% sang độ mờ đục ảnh tối ưu hoá Chọn mẫu Matte palette Optimize để mở color picker chọn màu trừ màu trắng Bấm OK để đóng color picker Chọn File > Preview In chọn trình duyệt web từ menu Chú ý: Để sử dụng lệnh Preview In, bạn phải có trình duyệt Web cài hệ thống bạn Nếu ảnh chưa mở ra, trình duyệt bắt đầu ảnh tối ưu hố góc trái cửa sổ trình duyệt Trình duyệt cho biết kích thước điểm ảnh, kích thước tập tin, dạng tập tin thiết lập tối ưu hoá cho ảnh với mã HTML dùng để tạo phần xem trước www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 29 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Thốt khỏi trình duyệt bạn kết thúc phần xem trước ảnh Xén vùng thừa Dù phần ảnh tổ chức du lịch giả tưởng có chứa điểm ảnh trơng suốt khơng thể hiện, điểm ảnh cịn chiếm khơng gian tập tin, tăng thêm kích thước ảnh Bạn xén phần vùng không cần thiết để cải thiện bố cục ảnh tối ưu hoá kích thước tập tin Trong ImageReady, chọn Image > Trim Bạn sử dụng lệnh Trim để xén ảnh theo độ trông suốt màu điểm ảnh vùng biên thừa Trong hộp thoại Trim, chọn điểm ảnh trông suốt chưa chọn bấm OK www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 30 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS ImageReady xén vùng trông suốt thừa khỏi ảnh Chọn File > Save Optimized As Trong hộp thoại Save Optimized As, dùng tên mặc định (16Start2.gif) bấm chọn Save Trong hộp thoại Replace Files, bấm Replace (nếu xuất hiện) Chọn File > Close Bạn nhắc để lưu tập tin 16.Start2.psd trước đóng lại Đối với học bạn kết thúc với tập tin nên không cần lưu thay đổi cuối Tạo suốt hoà sắc Trong phần học 16, bạn tạo độ suốt hoà sắc cho ảnh đồ hoạ dùng vùng khác Web site cho tổ chức du lịch giả tưởng Bằng cách tạo độ hồ sắc từ bóng đổ mờ đục thành trơng suốt, bạn tạo chuyển dịch uyển chuyển từ ảnh sang phông thuộc màu trang mà làm lại việc Bạn làm điều thủ tục Đầu tiên bạn áp dụng hiệu ứng bóng đổ vào ảnh Tiếp đến bạn thêm độ hồ sắc vào bóng đổ để pha trộn thành màu cho trang Web Bạn làm điều Photoshop ImageReady, sử dụng phương pháp điều khiển giống vị trí khác chút Thêm bóng đổ Tập tin bạn làm việc có tác dụng ảnh mà người sử dụng bấm vào để mở www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 31 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS trang khác Web site Bạn thêm bóng đổ vào nút để làm cho ảnh lên phần nền, nhấn mạnh thành phần tương tác trang Chọn File > Open chọn tập tin 16Start3.psd thư mục Lesson16 thư mục Lesson Nếu cần, chọn Window > Layers để mở bảng Layers chọn layer1 chưa chọn Chọn nút Add A Layer Style cuối bảng layers chọn Drop Shadow từ menu Trong hộp thoại Layer Style, nhập vào giá trị sau: • Đối với mục Opacity kéo trượt gõ vào giá trị 65% • Đối với mục Distance, kéo trượt gõ vào trị số15px • Đối với mục Spread, kéo trượt gõ vào trị số 10% • Đối với Size, kéo trượt gõ vào trị số 15px Bấm chọn OK để đóng hộp thoại Drop Shadow Chọn File > Save Thêm độ hoà sắc suốt vào bóng đổ Như bạn biết, hồ sắc phương pháp tạo chuyển tiếp màu bảng màu giới hạn Điều hữu ích trang Web bạn bắt chước giảm màu liền lạc mà không làm ảnh hưởng đến kích cở tập tin tải xuống nhanh (Chỉ áp dụng Photoshop) Với tập tin 16Start3.psd mở, chọn File > Save For Web để mở hộp thoại Save For Web Bước không cần thiết ImageReady www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 32 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Bấm thẻ Optimized hộp thoại Save For Web (Photoshop) cửa sổ ảnh (ImageReady) thiết lập tuỳ chọn sau bên phải hộp thoại Save For Web (Photoshop) bảng Optimize (ImgeReady): • Trong menu Preset, chọn GIF 128 Dithered • Chọn hộp kiểm Transparency hộp chưa chọn • Trong menu Dither dành cho Transparency, chọn Diffusion • Trong tuỳ chọn Amount, dùng trượt nhập trị số 64% Bấm Matte swatch để mở hộp Color Picker Chọn màu khác màu trắng bấm OK (Chúng chọn R=250, G=234, B=212), màu nâu nhạt làm bật màu xanh ảnh hộp thư Để thấy hiệu ứng thiết lập lưới (matte), cố gắng phóng lớn khoảng 400% chí tới 1600% tối đa để bạn nhìn thấy điểm ảnh riêng rẻ độ hoà sắc Chú ý điểm ảnh nằm sát rìa hộp thư vùng khung màu xanh màu sậm,và màu khác gia tăng độ hồ trộn với màu matte vị trí nằm xa rìa Thu nhỏ lại cịn 100% www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 33 Chương 16: Tối ưu hoá hình ảnh trang web Photoshop CS Làm việc sau: • (Trong Photoshop) Ở đáy hộp thoại Save For Web, bấm vào nút có biểu tượng trình duyệt bấm mũi tên để chọn trình duyệt từ menu • (Trong ImageReady) Sử dụng nút Preview In Default Browser menu Preview In menu File để mở tập tin trình duyệt Trong trình duyệt, Chú ý cách bóng đổ hồ trộn vào màu matte Khi xem xong tài liệu, đóng trình duyệt trở Photoshop hay ImageReady Bấm nút Save hộp thoại Save For Web (Photoshop) chọn File > Save Optimized (ImageReady) Trong hộp thoại Save Optimized, chấp nhận thiết lập mặc định tên tập tin (16Start3.gif) www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 34 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS lưu tập tin Lessons/Lesson16 folder Chọn File > Save để lưu tập tin 16Start3.psd đóng tập tin lại khơng cần lưu Tối ưu hoá tập việc xử lý hàng loạt tập tin ImageReady hỗ trợ việc xử lý hàng loạt qua việc sử dụng Droplets - biểu tượng chứa hoạt động dành cho ImageReady để thực nhiều tập tin Droplets dễ tạo dễ sử dụng Để tạo droplet, bạn kéo biểu tượng droplet khỏi bảng Optimize vào desktop Để sử dụng nó, bạn kéo tập tin thư mục qua biểu tượng droplet desktop Trong ImageReady, chọn File > Open, mở tập tin thư mục đích Lessons/Lessons16 Thử nghiệm với dạng tập tin khác thiết lập khác bảng Optimize bạn muốn bạn hài lòng với kết (Chúng sử dụng định dạng , JPEG, High cho chất lượng tuỳ chọn Progressive.) Kéo biểu tượng Droplet khỏi bảng Optimize đặt nơi Desktop (Nếu bạn sử dụng Window, bạn phải lấy lại kích thước cửa sổ ImageReady để thấy desktop.) Đóng tập tin lại (không lưu) Từ Desktop kéo thư mục đích từ thư mục Lesson16 thư mục Lessons thả vào droplet để xử lý hàng loạt ảnh đồ hoạ thư mục ImageReady tối ưu hoá ảnh thêm ảnh Web vào thư mục đích www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 35 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Trong ImageReady, mở tất tập tin có định dạng JPEG thư mục đích Chú ý tất tối ưu hoá theo thiết lập xác định droplet tạo Thoát ImageReady Bây bạn kết thúc chương trình học www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 36 Chương 16: Tối ưu hoá hình ảnh trang web Photoshop CS Các câu hỏi ơn tập Đố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? Color Table gì? 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? Mục đích việc gán matte color cho ảnh GIF gì? Các câu trả lời ơn tập 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 hố.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 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 Hoà 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 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 độ hồ sắc thành suốt © www.vietphotoshop.com - Nguyễn Tấn Sĩ |Trang chủ| |Photoshop CS| |Chương 17| www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 37 ... Sĩ 34 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS lưu tập tin Lessons/Lesson16 folder Chọn File > Save để lưu tập tin 16Start3.psd đóng tập tin lại khơng cần lưu Tối ưu hố tập việc xử... www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 36 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Các câu hỏi ôn tập Đố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?... điểm ảnh, kích thước tập tin, dạng tập tin thiết lập tối ưu hoá cho ảnh với mã HTML dùng để tạo phần xem trước www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 29 Chương 16: Tối ưu hố hình ảnh trang web