Cách sử dụng Công cụ Photoshop Save for Web

Mục lục:

Cách sử dụng Công cụ Photoshop Save for Web
Cách sử dụng Công cụ Photoshop Save for Web
Anonim

Điều cần biết

  • Mở hình ảnh trong Photoshop. Chọn Hình> Kích thước Hình. Nhập chiều rộng mới, rồi chọn Pixels> OK.
  • Chọn Tệp> Lưu cho Web và Thiết bị. Chọn tab 2-Upđể xem các hình ảnh gốc và hình ảnh được tối ưu hóa cạnh nhau.
  • Thay đổi giá trị Chất lượngvà xem kết quả. Thực hiện các điều chỉnh đối với kích thước hoặc loại tệp nếu cần. Chọn Lưuvà đặt tên cho hình ảnh mới.

Bài viết này giải thích cách sử dụng công cụ Save for Web của Photoshop để tối ưu hóa hình ảnh để sử dụng trên web. Thông tin này áp dụng cho Photoshop 20.0.10 trở lên. Các lệnh và tùy chọn menu có thể khác nhau giữa các phiên bản.

Cách Lưu cho Web trong Photoshop

Nhà thiết kế đồ họa, nhà thiết kế web và những người khác tạo nội dung cho web, cũng tạo hình ảnh sẵn sàng cho web như ảnh cho trang web và quảng cáo biểu ngữ. Trước khi tải lên những hình ảnh này, họ tối ưu hóa hình ảnh để tải xuống và hiển thị nhanh chóng trong trình duyệt web.

Đây là cách sử dụng công cụ Save for Web trong Photoshop để có được sự cân bằng phù hợp về chất lượng hình ảnh và kích thước tệp cho hình ảnh của bạn.

  1. Mở hình ảnh bạn muốn lưu trong Photoshop.
  2. Chọn Hình> Kích thước Hình. Hoặc, đối với PC, nhấn Alt + Ctrl + I,đối với macOS, nhấn Command + Option + Itrên bàn phím.

    Image
    Image
  3. Trong trường Width, nhập chiều rộng mới, chọn Pixels, sau đó chọn OK.

    Thay đổi kích thước ảnh thành kích thước nhỏ để có thể sử dụng trên trang web.

    Image
    Image
  4. Chọn Tệp> Xuất> Lưu cho Web (Kế thừa). Hoặc, sử dụng phím tắt: Alt / Option + Command + Shift + S.

    Trong các phiên bản Photoshop khác, đường dẫn là File> Export> Save for Web. Mục này có thể được gọi là Lưu cho Web hoặc Lưu cho Web và Thiết bị.

    Image
    Image
  5. Trong cửa sổ Save for Web, chuyển đến Original,Optimized,Các tab 2-Up4-Up. Các tab này chuyển đổi giữa chế độ xem ảnh gốc, ảnh được tối ưu hóa với cài đặt Lưu cho web được áp dụng cho ảnh đó hoặc so sánh hai hoặc bốn phiên bản của ảnh.

    Chọn 2-Upđể so sánh ảnh gốc với ảnh đã được tối ưu hóa. Điều này hiển thị các bản sao cạnh nhau của hình ảnh.

    Image
    Image
  6. Thay đổi giá trị Chất. Khi bạn hạ thấp chất lượng, hình ảnh trông mờ hơn và kích thước tệp giảm xuống. Các tệp nhỏ hơn có nghĩa là các trang web tải nhanh hơn.

    Tìm một phương tiện hài lòng giữa kích thước và chất lượng tệp. Chất lượng từ 40 đến 60 là một phạm vi tốt. Sử dụng các mức chất lượng đặt trước (Ví dụ: JPEG Medium) để tiết kiệm thời gian.

    Image
    Image
  7. Thay đổi loại tệp, nếu cần, thành JPEG, GIF, PNG-8, PNG-24 hoặc WBMP.

    Image
    Image
  8. Thay đổi kích thước của hình ảnh, nếu cần. Nhập chiều rộng hoặc chiều cao hoặc chia tỷ lệ theo phần trăm.

    Nhấp vào biểu tượng chuỗi liên kếtđể thay đổi tỷ lệ của hình ảnh. Nếu không, hãy nhập chiều rộng hoặc chiều cao khác để thay đổi giá trị khác theo tỷ lệ.

    Image
    Image
  9. Các giá trị bên dưới bản xem trước hình ảnh hiển thị loại tệp, kích thước và thời gian hình ảnh sẽ mở trên trang web. Những con số này cập nhật khi bạn thực hiện thay đổi.

    Image
    Image
  10. Khi bạn hài lòng với bức ảnh, hãy chọn Lưu.

    Image
    Image
  11. Nhập tên cho ảnh, sau đó nhấp vào Lưu.

    Image
    Image

Điều gì tạo nên tính năng sẵn sàng cho web đồ họa?

Hầu hết các đồ họa sẵn sàng cho web đều có chung các đặc điểm:

  • Độ phân giải là 72 dpi.
  • Chế độ màu là RGB.
  • Các tệp được giảm kích thước để tải các trang web nhanh hơn.

Đề xuất: