Cách cắt layout web bằng photoshop
|
Hôm nay Hocweb.com.vn sẽ hướng dẫn các bạn chuyển file thiết kế Photoshop trang naturetour thành HTML/CSS. Với bài viết này, các bạn sẽ biết được các bước để tạo thành trang web tĩnh, chuyển từ một thiết kế photoshop thành một trang web HTML và định dạng CSS. Yêu Cầu - Căn bản HTML - Căn bản Photoshop - Thời gian thực hiện: 1h ~ 2h CẮT PHOTOSHOP Bước 1: Chọn công cụ Crop Tool ( Phím tắt C ), chọn vùng có hình cần cắt, sau đó bấm enter để hoàn thành  Công cụ Crop Tool – Cắt hình Sau khi cắt chúng ta được một hình như sau Sau khi cắt hình Bước 3: Ẩn hết các Layer nên, giữ lại layer mà chúng ta cần cắt. Sau khi ẩn các layer không cần thiết Bước 4: Bỏ phần thừa xung quanh hình cần cắt, chọn menu Image -> Trim… Hộp thoại Trim xuất hiện, chọn như hình và bấm OK
Hộp thoại Trim Bước 5: Lưu file với định dạng tối ưu cho Website. Vào menu File -> Save for Web… Hộp thoại Save for Web xuất hiện, chọn các thông số như hình, bấm Save… và lưu vào thư mục chứa hình ảnh của Website. Hộp thoại Save for Web… Sau khi chúng ta đã cắt các hình ảnh cần thiết cho website, chúng ta sẽ được một thư mục hình như sau
Thư mục các hình cho Website Sau khi đã chuẩn bị xong các hình dành cho website, chúng ta lên cấu trúc HTML CẤU TRÚC HTML Cấu trúc chung cho trang HTML của chúng ta
PHẦN ROW1 Bước 1: Grid cho phần Row1 For Friendly, Expert advice call 12 (0) 1234 567890 Home
Bước 2: Hình hinh. Thay thế bằng Bước 3: Menu. Thay thế bằng
Phần Row1 sau khi đã hoàn thành Home
|
