Hướng dẫn kiểm tra kích thước hình ảnh trên web, cách cắt hình ảnh đúng tỷ lệ

Dưới đây có khá nhiều thao tác. Tại sao phải làm kì công như vậy? Ai mà chả thích cái đẹp, nhất là khách hàng của bạn, vì vậy, để tăng chuyển đổi và trải nghiệm người dùng, bạn nên cho nhân viên quản trị web của mình (hoặc chính bạn) làm kĩ các bước dưới đây để ảnh trên web hiển thị đẹp hơn.

1. HƯỚNG DẪN KIỂM TRA KÍCH THƯỚC HÌNH ẢNH TRÊN WEB

Để up tấm hình lên web mà vừa khung hiển thị đẹp, bạn cần biết kích thước của khung web
Sau đây là hướng dẫn kiểm tra kích thước của khung hình web bằng trình duyệt chrome/ coccoc

Kiếm tra kích thước khung Logo: Nhấn chuột phải vào tấm hình cần kiểm tra, ở menu xổ ra, chọn dòng cuối cùng của menu tên “kiểm tra”

kiểm tra hình ảnh trên web 1

 

Lập tức khung logo chứa hình được tô phủ 1 lớp mờ đen và kich thước 200 * 126 hiện ra
Còn nếu vẫn chưa thấy nó hiện ra thì bạn rê chuột rà rà lên từng dòng mã lệnh ở khung khoanh xanh lá cây bên dưới cho đến khi nào thấy khung logo bị tô mờ và kích thước khung hình hiện ra như khung khoanh đỏ dưới đây là được.
kiểm tra hình ảnh trên web 2
2. HƯỚNG DẪN CẮT ĐÚNG TỶ LỆ HÌNH BẰNG PHOTOSHOP CS6
( Bạn tự tải và cài Photoshop trước khi xem hướng dẫn này )
Ví dụ tấm hình sản phẩm dưới đây bị kéo dãn cao, tức là hình không phù hợp với khung web
cắt hình trong photoshop cs6-1
Và sau khi kiểm tra thì ta biết khung hình này là 140 x 121
Vậy nên ta cần cắt tấm hình là 140 x 121 bỏ vào
Mở Photopshop lên, chọn NEW
cắt hình trong photoshop cs6-2
cắt hình trong photoshop cs6-3
cắt hình trong photoshop cs6-4
cắt hình trong photoshop cs6-5
cắt hình trong photoshop cs6-6
cắt hình trong photoshop cs6-7
Chú ý Lúc này bạn nhấn giữ phím Shift rồi mới được kéo nhé, và chỉ được kéo ở góc vuông hình thôi.
cắt hình trong photoshop cs6-8
Xong thì nhấn Enter. Và ta đã có 1 tấm hình đẹp đẽ đúng khung để up vào web
cắt hình trong photoshop cs6-9

Click để quay lại bài chính: Hướng dẫn sử dụng web

Trả lời

Email của bạn sẽ không được hiển thị công khai.