Hướng dẫn thiết kế website du lịch tổng hợp

Trong bài hướng dẫn này, mình và các bạn sẽ cùng nhau thiết kế website du lịch tương tác tốt với màn hình PC lẫn Smartphone.

Nào chúng ta cùng bắt đầu !
 

 

Bạn tạo tập tin với thông số như sau.
 

Để tạo sự cân đối cho bản thiết kế Website, bạn chọn View > New Guide…Tại Vertical, bạn thiết lập các thông số như sau 400 px. Tại Horizontal, thiết lập các thông số 100px, 600px, 1000px để tạo các đường Guide nằm ngang.
 

Bây chúng ta sẽ tạo phần Header cho bản thiết kế web. Các bạn tạo một nhóm tên Header, dùng rectangle Tool (U) vẽ hình chữ nhật với màu #01e19a. Bạn thêm Logo phía bên trái và thêm Text ( Home, Service, About us, Contact) với Font Calibri, Regular, 25pt.
 

Ta tiến hành tạo phần cập nhật tin tức cho bản thiet ke website của bạn.

Bạn dùng Rectangle Tool (U) tạo một hình chữa nhật vừa đủ hai đường Guide.
 

 

Sau đó Copy một hình phía trên Layer chứa hình chữ nhật. Bạn giữ phím Alt và trỏ con chuột vào đường thẳng giữa hai Layer khi xuất hiện mũi tên hướng xuống, bạn nhấp chuột để tạo một Clipping Mask cho hình.
 

 
  

 
Chúng ta sẽ bắt đầu thêm phần điền Email cho khách hàng. Đây là phần quan trọng trong bản thiết kế website du lịch của bạn, nó giúp bạn liên lạc với khách hàng và PR khi có sản phẩm mới. Bạn thêm hai dòng Text với nột dung ALWAYS BESIDE YOU (Font Helvetica, Bold, 71pt); Let we know you (Font Georgia, Regular, 33pt).

Bạn dùng Rectangle Tool (U), vẽ hình chữ nhật với màu #e5e5e5. Thêm dòng chữ your email here…(Font Helvetica, Oblique, 28pt). Bạn vẽ tiếp một hình chữ nhất nhỏ màu #00b074 chồng lên hình chữ nhật vừa tạo và thêm chữ OK.
 

 

Phần này là nơi giới thiệu các gói du lịch cho bản thiết kế website của bạn.

Tạo một nhóm có tên là Service. Bạn dùng Rectagle Tool vẽ hình chữ nhật với màu #b3e7d7. Tiến hành thêm Text với nội dung như sau SERVICE (Font Calibri, Regular, 50 pt); TOUR – CAMPING – RESORT (Font Calibri, Regular, 30 pt). Khởi động Ellipse Tool (U), giữ phím Shift để vẽ 3 hình tròn.
 

Bạn chép một tấm hình lên phía trên Layer hình tròn thứ nhất.
 

 
 

 
Bạn trỏ chuột vào đường kẻ ngang giữa Layer hình tròn và tấm hình chiếc xe. Giữ phím Alt, khi xuất hiện dấu mũi tên hướng xuống bạn nhấp chuột để tạo Clipping Mask. Bạn làm tương tự với hai hình tròn còn lại.
 

 

 
 

 

 
 

 

Chúng ta thêm thông tin liên lạc để tăng độ tin cậy của bản thiết kế Website.

Bạn tạo một nhóm có tên là CONTACT.

Dùng Rectangle Tool (U) vẽ hình chữ nhật với màu # 01e19a. Bạn Copy Logo và phần “your email here…” ở bước trên rồi trình bày như hình.
 

 

Chúc mừng bạn! Bạn đã hoàn thành xong bản thiet ke website du lich cho PC và cả Smartphone. Mình mong rằng bài viết này sẽ cung cấp cho bạn những kiến thức về giao diện để ứng dụng cho những dự án sau này. Cám ơn các bạn đã theo dõi !