Cắt template PSD thành HTML – giao diện make movie

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

Cắt template PSD thành HTML – giao diện make movie

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

HocWeb | Photoshop To HTML/CSS

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

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

HocWeb | Photoshop To HTML/CSS

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.

HocWeb | Photoshop To HTML/CSS

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

HocWeb | Photoshop To HTML/CSS

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.

HocWeb | Photoshop To HTML/CSS

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

HocWeb | Photoshop To HTML/CSS

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 TOP

Bước 1: Grid cho phần Top

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

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

 Bước 4: Thay thế <!—img p here –> bằng

 Bước 5: Right menu. Thay thế <!– right menu here –> bằng

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

 PHẦN TOP0

 PHẦN TOP1

 PHẦN TOP2

Bước 1: Grid cho phần TOP2

 Bước 2: Thay thế <!– top hinh–> bằng

PHẦN FOOTER

 PHẦN TOOF

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

HocWeb | Photoshop To HTML/CSS

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 chiều cao và hình nên cho top

 Header đã hiển thị đúng như mẫu PSD, chúng ta tiếp tục với các nội dung trong top

 Tiếp theo là phần top0. Ta định dạng hình nên, chiều cao cho top0

 Kế tiếp là phần top1

 Tiếp theo là phần chính top2

 Kế tiếp là phần foot

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

 Hoàn thành trang web

HocWeb | Photoshop To HTML/CSS

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/fdl6gmw69srs7af/Make-movie.psd

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

1 Comment

Tùng Dương

November 19, 2013 @ 14:24

mình đang định làm trang web dạng giống vậy nek, cám ơn add nhiều

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="">


*