bgware

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

Với thời đại Smartphone bùng nổ, nhiều kích thước chuẩn của Website phải thay đổi để phù hợp với diện tích màn hình của thiết bị thông minh.

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 !
 
Template.png
 

Bước  1

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

Bước 2

Để 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.
 
2 guide.png

Bước 3

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.
 
3 header.png

Bước 4

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.
 
4 hình chữ nhật.png
 
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.
 
5cf8b62b.jpg
 
  
6 Clipping mask.png
 
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.
 
7 Always.png
 

Bước 5

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.
 
8 service.png

Bạn chép một tấm hình lên phía trên Layer hình tròn thứ nhất.
 
bf_pack-car-go.jpg
 
 
9 chèn hình.png
 
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.
 
 
 
 
 
 
 
 

 Bước 6

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 !
Tác giả: Nguyễn Ngọc Hữu Huy
Nguồn tin: Ngôi Sao Số
Tổng số điểm của bài viết là: 0 trong 0 đánh giá
Click để đánh giá bài viết

Mới đăng

Hướng dẫn thiết kế Logo và Business Card cho bộ nhận diện thương hiệu

Hướng dẫn thiết kế Logo và Business Card cho bộ nhận diện thương hiệu

Logo và Business Card là hai yếu tố không thể thiếu của một sản phẩm Thiết kế bộ nhận diện thương hiệu thành công. Trong bài hướng dẫn này, mình và các bạn sẽ cùng nhau tạo ra Logo và Business Card bằng công cụ vẽ mình họa Adobe Illustrator.

Hướng dẫn thiết kế website bán Cà phê

Hướng dẫn thiết kế website bán Cà phê

Nếu bạn đang tìm kiếm một bản thiết kế website chuyên về lĩnh vực Coffee thì bài hướng dẫn này sẽ rất phù hợp với bạn. Ở đây, tôi muốn đi sâu vào sự đơn giản của không gian để tạo cảm hứng cho bất cứ ai khi xem bài viết.

Top 7 yếu tố tạo nên thương hiệu thành công

Top 7 yếu tố tạo nên thương hiệu thành công

Thương hiệu là mục tiêu cạnh tranh mà các doanh nghiệp phải đối mặt trong hầu hết các ngành công nghiệp, nó chưa bao giờ là quan trọng hơn để nổi bật và phát triển một bản sắc độc đáo và đề xuất giá trị xây dựng thương hiệu thông qua chiến lược.

Quay lại trang Blog
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây