Hướng dẫn thiết kế website nhà hàng

Trong hướng dẫn này, mình và các bạn sẽ dùng Phopshop tạo ra một bản thiết kế web nhà hàng đúng chuẩn. Nào chúng ta bắt đầu !
 

Bạn tạo các 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 Horizontal, bạn thiết lập các thông số như sau 200px, 875px, 1750 px, 2250px. Tại Vertical, thiết lập các thông số 420 px, 840px, và 1260px để tạo các đường Guide thẳng đứng.
 

 

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 #006075. Bạn thêm Text với Font Courier –Viết hoa – Font size 55 pt có nội dung như sau Home, About, Menu, Contact. Bạn tiến hành vẽ thêm hai đường thẳng đứng cạnh chữ Home bằng Line Tool (U).
 

Ta tiến hành tạo phần cập nhật tin tức cho bản thiết kế 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 tấm 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.
 

 

 

Bạn tiếp tục thêm hai dòng Text với nội dụng “CHICKEN COMBO” (Font Courier, 111 pt, Regular cho Chicken, Bold cho Combo). ORDER (Font Courier, Bold, 42 pt). Sau đó, bạn thêm hai mũi tên và 4 hình tròn nhỏ bằng Ellipse Tool (U), giữ phím Shift để vẽ hình tròn.
 

Phần này là nơi giới thiệu món ăn cho bạn cách lập website nhà hàng của bạn.

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

Tiến hành thêm Text với nội dung như sau MENU (Courier, Bold, 126 pt); one day one new (courier, regular, 42 pt); MORNING – AFTERNOON – EVENING (Courier, Bold, 55 pt); ORDER ( Courier, Bold, 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 món ăn. 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 còn lại
 

 

 
 

Tại bước này chúng ta sẽ thêm hình ảnh về Nhà hàng vào phần About us để định hình bản thiet ke website của bạn trong tâm trí khách hàng.

Bạn tạo một Group có tên là About us. Tiếp theo bạn thêm dòng Text có nội dung là ABOUT US (Courier, Bold, 73 pt), OUR RESTAURANT (Courier, Bold, 30pt).  Sau đó, bạn thêm hai mũi tên và 4 hình tròn nhỏ bằng Ellipse Tool (U), giữ phím Shift để vẽ hình tròn.
 

Chúng ta thêm thông tin liên lạc để tăng độ tin cậy của bản thiet ke 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 #006075.  Bạn thêm Logo, địa chỉ và Email (Font Courier, Regular, 23 pt).
 

 

Các bạn đã hoàn thành bài Hướng dẫn thiet ke website nha hang. Bạn hãy dựa vào bài viết này để làm nền tảng cho những ý tưởng trong tương lai các bạn. Cám ơn các bạn đã chú ý theo dõi ! Chúc các bạn thành công !