Cắt template PSD thành HTML/CSS – giao diện Naturetour

Over 0 working discount & coupon codes is active for 61 users, enjoy!

Cắt template PSD thành HTML/CSS – giao diện Naturetour

Hôm nay Hocweb.com.vn sẽ hướng dẫn các bạn chuyển file thiết kế Cắt template PSD thành HTML/CSS – giao diện Naturetour. 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 ~ 2hCẮ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

1 

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

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

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.

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

 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.

6

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

 7

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

 

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

8 

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

 

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

 

 Hoàn thành trang web

bg 

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 có thể lấy file PSD tại đây

http://www.mediafire.com/download/irbqz45z64k7i5g/naturetour.psd

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

2 Comments

Trung

January 11, 2015 @ 21:00

phần css thật là tệ hại

Tuan Nguyen

February 26, 2015 @ 13:31

Bài tutorial nhìn hấp dẫn, nhưng có 1 vài điểm nên bổ sung để bài tutorial có chất lượng hơn. Phần HTML không thấy định nghĩa class vậy ad? Phần CSS bị thiếu thì phải? không canh trang ở giữa được. Phần chiều cao của trang web set cứng vậy không ổn lắm!

Leave Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">


*