Cắt layout sao cho chính xác?

Trong bài giới thiệu "cắt layout photoshop sử dụng CS phần 1" tôi đã đã upload file templae dạng PSD để các bạn cùng tìm hiểu và chia sẽ cách cắt layout để đưa lên web, các bạn xem kỹ lại phần 1 để áp dụng cho bài viế này.

Như trong phần 1 tôi gọi vùng trên cùng của website là header-menu1. Trong phần này chỉ có lá cờ Việt Nam và lá cờ Anh là thuộc dạng ảnh, phần còn lại "www.interiordeco.com" và menu " About, Contact, Register" là thuộc dạng text nên ta chỉ cần tách các hình lá cờ ra làm file riêng là có thể tạo được template. Phần nền xám nhạt trong header-menu1 ta dùng background-color trong CSS.

Để giao diện được cân đối và đẹp mắt, trong khi thiết kế, chúng ta nên chọn kích thước cho 2 hình này là bằng nhau. Nếu lỡ chênh lệch một ít thì trong quá trình cắt CSS cũng nên chỉnh lại. Để tách hình lá cờ cho chính xác ta làm như sau:

1 - Mở file ảnh layout dạng PSD lên.

2 - nhấp chuột phải vào ngay hình lá cờ Việt nam, một menu sẽ xuất hiện ngay trỏ chuột, ta chọn dòng đầu tiên. Ở đây dòng này có tên là layer 8 (chính là layer chứa hình lá cờ Việt Nam), lúc đó trên bảng layer ta thấy layer 8 sẽ có nền màu xanh.

3 - Bấm giữ Ctrl đồng thời nhấp vào hình thumbnails của layer 8 để load vùng chọn, khi đó sẽ có một vùng chọn bao quanh hình lá cờ Việt Nam.

4 - Bấm Ctrl - C để copy hình lá cờ đó, xong bấm Ctrl - N để tạo file mới và cuối cùng bấm Ctrl - V để paste. Khi đó ta sẽ có file mới chứa hình lá cờ VN có kích thước bằng đúng như trong thiết kế layout.

5 - Việc còn lại là lưu file vừa tách ra vào folder chứa web template dưới dạng file GIF hay PNG rồi dùng CSS để gọi file này ra sử dụng mà thôi.

Chú ý: Nếu trong quá trình design mà hình lá cờ VN và cờ Anh không bằng nhau thì sau khi paste vào file mới, chúng ta chỉnh Image Size lại cho bằng nhau trước khi lưu.

Phần lá cờ Anh cũng cắt hoàn toàn tương tự như thế nhé.

Xem thêm bài cắt hình làm background tại đây: Cắt lấy nền background

Trở về trang chủ Trở về trang mục lục Top