Hướng dẫn Convert Photoshop thành HTML/CSS kết hợp Bootstrap Trang Exponet

Xin Chào Các Bạn!

Hôm nay Hocweb.com.vn sẽ hướng dẫn các bạn Convert một file mẫu website PSD thành HTML/CSS. Mẫu trang chúng ta sẽ thực hiện là trang Exponet.

Yêu Cầu

– Căn bản HTML/CSS – Bootstrap
– Căn bản Photoshop
– Thời gian thực hiện 1h~1h30p

CẮT ẢNH PHOTOSHOP

Các bạn tải file PSD của trang Exponet tại đây. Sau khi tải về các bạn mở file bằng Photoshop. Chúng ta sẽ sử dụng công cụ Crop Tool để cắt ảnh. Công việc đầu tiên đó là xác định các thành phần cần cắt cho trang web, ví dụ: logo, background banner, icon v.v

Chúng ta cùng thực hiện cắt Logo.

Bước 1: Chọn công cụ Crop Tool trên thanh công cụ, phím tắt C. Chọn một vùng quanh Logo cần cắt. Sau đó bấm Enter để hoàn thành

HocWeb | Photoshop To HTML/CSS

Công cụ Crop Tool, chọn vùng Logo.

Bước 2: Ẩn hết tất cả các Layer khác, giữ lại Group Logo Box.

HocWeb | Photoshop To HTML/CSS

Ẩn hết các Layer khác, trừ Group Logo box

Bước 3: Để bỏ phần thừa xung quanh Logo, chúng ta chọn menu Image -> Trim. Hộp thoại Trim xuất hiện, chọn thông số như hình, bấm Ok để hoàn thành

HocWeb | Photoshop To HTML/CSS

Hộp thoại Trim

Bước 4: Lưu file với định dạng tối ưu cho website. Chọn menu File -> Save for Web… . Phím tắt Alt + Shift + Ctrl + S. Hộp Thoại Save for Web xuất hiện, chọn định dạng như hình sau đó 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 cắt các hình cần thiết, chúng ta sẽ được một thư mục chứa hình ảnh cho website.

HocWeb | Photoshop To HTML/CSS

Thư mục hình ảnh của website

XÂY DỰNG CẤU TRÚC HTML KẾT HỢP BOOTSTRAP

Sau khi đã chuẩn bị xong hình ảnh, bước tiếp theo chúng ta xây dựng cấu trúc HTML kết hợp với Bootstrap

Đầu tiên chúng ta phải lên cấu trúc cho file HTML.

Trên là cấu trúc căn bản của một trang HTML. Chúng ta sẽ lần lượt code từng phần và theo trình tự từ trên xuống.

PHẦN HEADER

Bước 1: Cấu trúc Grid của phần Header.

Bước 2: Phần Logo, thay thế <!– logo here –> bằng

Bước 3: Phần menu, thay thế <!– main menu here –> bằng

Phần Header sau khi đã hoàn chỉnh

 PHẦN BANNER

Bước 1: Cấu trúc Grid của phần Banner

Bước 2: Phần nội dung chính của banner, thay thế <!– Text Content –>

Bước 3: Phần hình ảnh của banner, thay thế <!– Banner IMG –>

Phần Banner hoàn chỉnh

 PHẦN MAIN

Bước 1: Cấu trúc Grid

Bước 2: Cột bên trái

Bước 3: Phần nội dung chính <!– Main Box 1 –>

Bước 4: Phần <!– Main Box 2 –>

Hoàn thành phần main

 PHẦN FOOTER

Bước 1: Cấu trúc Grid

Bước 2: Phần <!– sugestion –>

Bước 3: Phần <!– last-blog –>

Bước 4: Phần <!– recent-work –>

Bước 5: Phần<!—footer nav –>

ĐỊNH DẠNG STYLE CSS

Đầu tiên chúng ta import Boostrap và thiết đặt một số style áp dụng tổng thể như thẻ <a>, thẻ <ul>. Lưu ý file bootstrap.min.css các bạn đặt cùng thư mục với file styles.css

 PHẦN HEADER

 PHẦN NAVIGATION

 PHẦN BANNER

Đầu tiên chúng ta định dạng hiển thị cho phần viền, wrapper

Sau đó định dạng phần nội dung bên trong

 PHẦN MAIN

Định dạng riêng cho các box nằm bên left-side

Danh sách các dịch vụ nằm trong Main Box 2

 PHẦN FOOTER

Định dạng tiêu đề của các box

Box đầu tiên của Footer: Sugesion

Box tiếp theo: Last Blog

Box cuối cùng Recen Work

Phần cuối cùng trong Footer là Menu footer.

Chúng ta đã hoàn thành trang Exponet

TỔNG KẾT

Qua bài viết này, các bạn đã biết được các bước cơ bản để hoàn thành một trang HTML/CSS kết hợp với Bootstrap, các bước này gồm cắt hình, xây dựng cấu trúc HTML và định dạng CSS. Các bạn có thể tải source code trang Exponet tại đây.

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

14 Comments

  1. giang 19/03/2014 Reply
    • Thuc 07/04/2015 Reply
  2. nguyen van hai 01/04/2014 Reply
  3. minh 11/04/2014 Reply
    • Duy Lùn 12/04/2014 Reply
  4. dung 13/04/2014 Reply
  5. nguyen van hai 14/04/2014 Reply
  6. thanh dien 18/04/2014 Reply
  7. NHAN 27/10/2014 Reply
  8. Nam Le 29/10/2014 Reply

Leave a Reply


*