Hướng dẫn chuyển PSD thành HTML/CSS trang Creativo

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

HocWeb | Photoshop To HTML/CSS

Hướng dẫn chuyển PSD thành HTML/CSS trang Creativo

Hôm nay Hocweb.com.vn sẽ hướng dẫn chuyển PSD thành HTML/CSS trang Creativo. 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 Tools

Bước 2: Ẩ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

Ẩn các layer khác

Bước 3: 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

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ư sauHocWeb | Photoshop To HTML/CSS

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 HEADER

Thay thế phần <!—header–>:

PHẦN CONTENT

Thay thế phần <!- – content – -> :

 Thay thế phần <!- – content1 – ->:

 Thay thế phần <!- – search – ->:

PHẦN FOOTER

Thay thế phần <!- – footer – ->

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

HocWeb | Photoshop To HTML/CSS

Trang HTML

ĐỊNH DẠNG CSS

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

 Quy định chung cho toàn bộ trang web:

 Quy định css cho phần heahder:

 Quy định css cho phần content

 Quy định css cho phần footer:

 Tiếp theo import file .js:

 Kết quả đạt được của bạn sau khi thực hiện

HocWeb | Photoshop To HTML/CSS

Kết quả

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ăn bản.

các bạn có thể lấy file PDS tại đây

http://www.mediafire.com/download/fhdn19l6x9sx806/web2-mockup-psd.psd

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

No Comments

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


*