Cắt template PSD thành HTML – giao diện Six Studios

Hôm nay Hocweb.com.vn sẽ hướng dẫn các bạn Cắt template PSD thành HTML – giao diện Six Studios. 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

 Step 1

Công cụ Crop Tool – Cắt hình

Sau khi cắt chúng ta được một hình như sau

Step 2

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.

Step 3

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

Step 4

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.

Step 5

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

Step 6

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

 Bước 2: Hình hinh. Thay thế <!—img hinh here –> bằng

 Bước 3: Menu. Thay thế <!–  main menu here –> bằng

  Phần Row1 sau khi đã hoàn thành 

 

 PHẦN ROW2

 

 PHẦN ROW3

 

 PHẦN ROW4

 

PHẦN ROW5

 

 Trang HTML sau khi hoàn thành sẽ như sau

Step 7

Trang sau khi xong cấu trúc HTML

Sau khi hoàn thành trang HTML, chúng ta cùng nhau định dạng CSS cho trang web

ĐỊNH DẠNG CSS

Đầu tiên chúng ta import Bootstrap và định dạng một số thẻ

 Tiếp theo thiết lập  cho Row1

 Tiếp theo là phần Row2

 Kế tiếp là phần Row3

 Sau đó là phần Row4

 Cuối cùng là phần Row5

 

 Hoàn thành trang web

Step Web

Trang web sau khi hoàn thành.

TỔNG KẾT

Sau bài viết này, các bạn đã biết được các bước để tạo thành trang web tĩnh, từ cắt hình bằng photoshop đến định dạng css. 

 Các bạn lấy file PSD tại đây

http://www.mediafire.com/download/i1dhcm9amcc6z5j/Six-Studios.psd

Leave a Reply


*