Làm thế nào để lưu hình ảnh cho Web trong Photoshop

Một trong những chức năng quan trọng hơn mà Photoshop cung cấp là tính năng Save for Web / Devices .

Tại sao lại sử dụng nó? Mặc dù bạn chỉ có thể lưu tệp của mình theo một phương thức chuẩn, chẳng hạn như Tệp / Lưu dưới dạng , tính năng Lưu cho Web / Thiết bị thực hiện ba điều quan trọng.

Công cụ này hoạt động tuyệt vời để xuất biểu tượng Twitter, ảnh hồ sơ Facebook, tệp sản phẩm, hình ảnh blog và tệp nguồn cho favicon.

  • 01 - Mở tệp nguồn của bạn

    Tập tin / Mở Photoshop. Ảnh chụp màn hình của Bryan Haines

    Để bắt đầu, bạn cần truy cập Tệp / Mở để mở tệp của mình. Nó có thể ở bất kỳ định dạng nào - jpg, gif, psd, png hoặc các định dạng khác. Miễn là Photoshop có thể mở nó, bạn có thể xuất nó cho web.

  • 02 - Lưu tệp của bạn cho Web

    Lưu tập tin Photoshop CS5. Ảnh chụp màn hình của Bryan Haines

    Chúng tôi sẽ bỏ qua để tiết kiệm cho Web, giả sử rằng bạn đã thực hiện bất kỳ điều chỉnh nào bạn yêu cầu. Rõ ràng, nếu bạn cần chỉnh sửa hình ảnh, hãy làm điều đó trước và tiếp tục với bước này sau.

    Chuyển đến Tệp / Lưu cho Web / Thiết bị và nhấp vào. Đó là khoảng một nửa xuống trình đơn thả xuống.

    Quá trình này hoàn toàn không thay đổi tệp gốc của bạn. Bạn đang tạo một tệp mới. Một khi bạn hoàn thành hướng dẫn này và quay trở lại hình ảnh ban đầu của bạn trong Photoshop, bạn sẽ cần lưu tệp đó nếu bạn đã thực hiện bất kỳ thay đổi nào đối với nó. Điều quan trọng là đặt tên cho hình ảnh mới của bạn khác với hình ảnh ban đầu. Thường thì việc thêm _web vào tên tệp sẽ hoạt động tốt. (ví dụ: filename_web.jpg)

  • 03 - Điều chỉnh chế độ xem so sánh thành 2-Up

    So sánh theo từng khía cạnh Photoshop CS5. Ảnh chụp màn hình của Bryan Haines

    Tùy thuộc vào cài đặt của bạn, bạn có thể cần điều chỉnh chế độ xem tại đây. Những gì bạn muốn là một so sánh trái và phải của hình ảnh của bạn. Phía bên trái sẽ hiển thị bản gốc, bên phải sẽ hiển thị chất lượng hình ảnh ở cài đặt hiện tại.

    Nếu bạn nhìn dọc theo đầu cửa sổ, bạn sẽ thấy các tùy chọn sau: Gốc, Tối ưu hóa, 2-Up, 4-Up. Đối với hầu hết các mục đích, 2-Up là những gì bạn sẽ muốn.

  • 04 - Đặt kích thước xem của bạn thành 100%

    Điều chỉnh chế độ xem thành 100% trong Photoshop CS5. Ảnh chụp màn hình của Bryan Haines

    Để đảm bảo bạn đang xem ở mức 100%, hãy chọn tùy chọn ở góc dưới bên trái của màn hình.

    Điều quan trọng cần nhớ là nếu bạn xem hình ảnh của mình cao hơn 100%, nó sẽ trông có hạt hoặc thậm chí không thể giải mã được. Luôn làm việc với hình ảnh ở mức 100%.

  • 05 - Kích thước tệp được chọn

    Chọn kích thước tệp trong Photoshop CS5. Ảnh chụp màn hình của Bryan Haines

    Kích thước cho web hầu như luôn ở pixel (px). Điều quan trọng là giữ tỷ lệ đúng. Bên cạnh hộp hình ảnh là một hình ảnh nhỏ của một liên kết chuỗi. Những gì mà không quy mô chiều rộng khi bạn điều chỉnh chiều cao. Ví dụ: hình ảnh có kích thước 600px x 400px. Nếu bạn giảm chiều rộng xuống 300px, tệp sẽ tự động chia tỷ lệ thành chiều cao 200px. Nếu không được chọn, hình ảnh sẽ bị méo.

    Bạn cũng có tùy chọn để chia tỷ lệ hình ảnh theo phần trăm.

  • 06 - Chọn loại tệp để xuất

    Chọn loại tệp để xuất trong Photoshop CS5. Ảnh chụp màn hình của Bryan Haines

    Trong tùy chọn này, loại tệp gốc không quan trọng. Bạn có thể chọn bất kỳ tập tin nào bạn cần.

    Lưu ý: để bắt đầu quá trình, bạn cần phải nhấp vào hình ảnh ở bên phải. Hình ảnh cần phải được chọn để được xử lý.

    Phổ biến nhất là jpg cho web - đó là định dạng tệp nhỏ nhất có nghĩa là nó tải xuống nhanh hơn cho khách truy cập trang web của bạn. Nếu bạn đã minh bạch chọn png-24. Nếu bạn không biết tính minh bạch nghĩa là bạn nên chọn jpg.

  • 07 - Chọn chất lượng hình ảnh

    Chọn chất lượng hình ảnh trong Photoshop CS5. Ảnh chụp màn hình của Bryan Haines

    Mỗi tùy chọn trong số ba tùy chọn jpg (Cao, Trung bình, Thấp) đều có cài đặt chất lượng đặt trước - tất cả đều có thể được điều chỉnh theo cách thủ công. Nếu bạn đang xem ở mức 100%, bạn có thể quyết định chất lượng nào bạn cần. Để điều chỉnh mức thu phóng, xem Bước 5. Hình ảnh sẽ trông giống như trên cửa sổ xem trước.

    Nếu bạn chọn bất kỳ thứ gì ngoài jpg, bạn có thể bỏ qua bước này.

  • 08 - Lưu tệp của bạn

    Lưu tệp của bạn trong Photoshop CS5. Ảnh chụp màn hình của Bryan Haines

    Khi bạn đã thực hiện các điều chỉnh cần thiết, bạn đã sẵn sàng để lưu tệp. Nhấp vào "Lưu" và chọn thư mục và tên tệp bạn muốn cho hình ảnh mới này.

    Xin chúc mừng! Tệp mới của bạn đã sẵn sàng để sử dụng trực tuyến.