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

Bây giờ chúng ta bắt đầu !

Bạn bấm Ctrl + N để tạo một tập tin với thông số như sau.
 

Để tạo sự cân đối cho bản thiết kế website cà phê , 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, sau đó thêm Logo vào phần đầu trang ngay đường Guide chính giữa. Bạn thêm Text với Font Calibri – Regular – Font size 35 px có nội dung như sau Home, Product, About us, Contact.
 

 

 

 

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

 

 
 
 

 

 
 
 Bạn tiếp tục thêm hai dòng Text với nội dụng GOOD TASTE, GOOD HEALTH (Font Calibri, Font size: 91 px và 50 px).
 

 

 

Phần này là nơi giới thiệu sản phẩm cho bản thiet ke website của bạn.

Bạn tạo một nhóm tên là Product. Sau đó thêm Text với nội dung là PRODUCT (Kiểu hoa, Calibri, Font size 35, Bold) và  dùng công cụ Line Tool (U) để tạo hai đường Line cạnh chữ với kích cỡ như hình mẫu.
 

 

 
Bạn chọn lệnh View > Guide… Tại Horizontal thiết lập lần lượt hai thông số 420 px, 1260 px để tạo hai đường Guide thẳng đứng. Chọn Vertical thiết lập thông số 1285 px nhằm tạo một đường Guide nằm ngang.

Mở công cụ Elipse Tool (U), nhấp vào bất cứ điểm trên bảng vẽ sẽ xuất hiện hộp thoại, bạn thiết lập 300 px cho Height và Width. Bạn tạo 3 hình tròn rồi xếp vừa với điểm giao nhau của các đường Guide như hình.
 

 

 
 Bạn chép một tấm hình Ly cà phê 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à hình Ly cà phê. 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 cho tấm hình.
 

 

 
Bạn làm tương tự với hai hình tròn còn lại.
 

 

 
 

 

 
 Ta được
 

 

 
 
 Bạn dùng công cụ Type Tool  để thêm giá cả và thông tin cho sản phẩm (Font Helvetica, Font Size 35 pt, Bold).
 
 

 

 
 Bạn mở công cụ Polygon Tool (U) và thiết lập thông số như trong hình để tạo một hình tam giác.
 

Bạn bấm Ctrl + T để điều chỉnh kích thước và giữ Shift để xoay chiều của hình tam giác. Sau đó, bạn bấm Ctrl + J để tạo một hình tam giác khác phía đối diện.
 

 

 

Tại bước này chúng ta sẽ thêm hình ảnh về Quán cà phê vào phần About us để định hình bản thiết kế 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 (Kiểu hoa, Calibri, Font size 35, Bold) và dùng công cụ Line (U) để vẽ hai đường thẳng cạnh chữ với kích cỡ như hình mẫu.
 

 

 
Thêm hình chữ nhật vừa với hai đường Guide nằm ngang.
 

 

 
Bạn chép hình quán cà phê vào trong Photoshop và đặt phía trên Layer chứa hình chữ nhật. Sau đó, tiến hành tạo Clipping Mask cho tấm hình.
 

 

 

Chúng 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 công cụ Type Tool (T)để thêm Text (Font Calibri, Font size 35 pt, Bold) và sắp xếp như hình mẫu. Sau đó, bạn thêm Icon của Facebook, Twitter, Skype làm tăng tính cộng đồng cho bản thiết kế Website. Cuối cùng bạn dùng Rectangle Tool (U) tạo một hình chữ nhật đánh dấu kết thúc trang.

 

    

 

 

  

Chúng ta đã hoàn thành xong bài hướng dẫn thiết Kế website cà phê. Mình mong rằng bài viết này sẽ giúp bạn tăng cường kỹ năng Design và định hình được ý tưởng cho những dự án sau này. Cám ơn các bạn đã chú ý theo dõi ! Chúc các bạn thành công !