Hướng dẫn thiết kế website du lịch bằng Photoshop

Trong bài hướng dẫn này mình sẽ cùng các bạn thiết kế một Website du lịch đơn giản, rõ ràng chonhững công ty mới bắt đầu khởi nghiệp.

Tạo một tập tin mới (File>New…) theo thông số như sau:

Để làm website du lịch đúng chuẩn thì chúng ta phải thiết lập hệ thống Guide thích hợp để cân đối không  gian trang Web. Chia Layer của bạn thành hai phần theo chiều dọc để cân xứng các đối tượng của Website theo vị trí trung tâm. Chọn View > New Guide… và bắt đầu thiết lập hệ thống Guide.  Khi xuất hiện hộp thoại New Guide, bạn chọn Vertical và nhập vào ô Position thông số 1200 px để tạo một đường Guide theo chiều dọc tại vị trí 1200 px của Ruler rồi nhấp OK. Sau đó bạn làm tương tự với thông số 200px, 260px, 700px và 1140px.

Để việc thiết kế Website được thuận tiện và dễ dàng,  các bạn nên tạo những Group để nhóm các Layer lại với nhau theo từng chỉ đề Header, Features, Social Proof, Final CTA and Footer. Để thực hiện việc đó, các bạn chọn Layer > New Group… hay nhấp vào icon được khoang tròn như trong hình.
 

Phần Header rất quan trọng trong thiết kế website du lịch. Đây là phần mà khách hàng nhìn thấy đầu tiên và ảnh hưởng rất nhiều đến quyết định ở lại trang Web của khách hàng. Ở đây các bạn cần phải sử những hình ảnh thật nổi bật và thông điệp rõ ràng để khách hàng nắm bắt được ngay những nội dung cần thiết.

Hãy thay đổi màu sắc của phần nền để cho dễ nhìn hơn. Tôi sử dụng màu Xám sáng cho bố cục chung của Website như thông số #ebebeb. Sau đó, mở Header group và sử dụng Rectangle Tool (U) để vẽ một hình chữ nhật có kích thước 1000x600px và đặt nó chính giữa hai đường Guide.

Bạn mở tấm hình BikeTraveler và đặt nó lên phía trên Layer chứa hình chữ nhật mới tạo.

Sau đó, bạn giữ phí  ATL và chuột trên Layer hình cho tới khi bạn thấy được những điểm mũi tên phía dưới, rồi điều chỉnh sao cho thích hợp với những đường guide. Bạn tạo một Clipping Mask, bấm tổ hợp phím Ctrl + T để điều chỉnh kích thước ảnh cho phù hợp (trong quá trình điều chỉnh bạn có thể giữ phím Shift để giữ lại tỉ lệ ban đầu của khung hình).

Và sau đó bạn sẽ được:

Tạo một Layer mới phía trên tấm hình và thêm vào một Clipping Mask cho nó. Tiếp theo, bạn phủ một lớp màu đen lên Layer vừa tạo  và chuyển Opacity xuống 20% để chúng ta có thể thất được tấm ảnh rõ ràng. Tấm ảnh bây giờ nhìn rất nghệ thuật phải không các bạn.

Bây giờ, các bạn sử dụng công cụ Horizontal Type Tool (T) để tạo chữ trong bản thiết kế web của chúng ta. Các bạn tạo tiêu đề ở phía bên phải và Logo ở phía bên trái như hình. Hầu hết mọi website nếu không đặt Logo ở giữa thì cũng đặt ở bên trái để khách hàng có thể dễ dàng nhìn thấy. Bạn có thể dùng Font Helvetica hoặc những Font khác tùy thích.

Thêm thông điệp chính cho Website của chúng ta “Chang the way you travel” với kích cỡ là 32px, dùng hiệu ứng Bold của công cụ để tô đậm hai chữ “you travel” để làm cho dòng chữ thêm sống động. Tiếp theo, bạn chèn thêm dòng chữ “SOCIAL TRAVELING IS THE NEXT BIG THING” với kiểu chữ in hoa và kích thước nhỏ hơn thông điệp chính như hình.

Thêm dòng chữ “Sign up to newsletter to get the access first” kiếu chữ nghiêng và dùng những Font Serif túy thích như hình mẫu.

Sử dụng Rounded RectangleTool (U) với 3px Radius để tạo ra một hình chữ nhật bo tròn các góc với kích cỡ theo mẫu.

Thêm dòng chữ “ENTER YOUR EMAIL” phía trên khung màu trắng đã tạo tại bước 6 với kích thước 13 px màu xám (#bdbdbd). Tạo một nút màu xanh (#51a200) chồng lên khung trắng phía trên là dòng chữ “SIGN UP” màu trắng viết hoa.

Đây là phần nêu chi tiết những gì mà bạn muốn gửi đến khách hàng trong bản thiết kế website.

Dùng Retangle Tool (U) tạo một hình chữ nhật màu trắng, chiều ngang bằng với chiều ngang và ngay phía dưới tấm hình của Header.

Thêm nội dung vào bản thiet ke website của bạn với màu xám tối (#343434) cho tiêu đề và xám sáng (#a2a2a2) cho nội dung.

Đây là vùng nội dung thứ 2 trong bản Thiết kế Website, nơi mà khách hàng sẽ để lại nhận xét cho dịch vụ của bạn

Dùng Retangle Tool (U) tạo một hình chữ nhật màu trắng chiều ngang bằng với chiều ngang và ngay phía dưới tấm hình của phần Feature.

Thêm nội dung vào bản thiết kế web du lịch của bạn với màu xám tối (#343434) cho tiêu đề và xám sáng (#a2a2a2) cho nội dung.

Các bạn cần thêm Avatar cạnh tên của những khách hàng để tăng độ tin cậy của lời nhận xét. Mở công cụ Elipse Tool (U) và giữ phím Shift để vẽ một hình tròn . Copy và chép hình khách hàng lên phía trên hình tròn. Giữ phím Alt chính giữa hai Layer hình khách hàng và hình tròn khi thấy con chuột trở thành hình mũi tên hướng xuống thì bạn nhập chuột để tạo một Clipping Mask.  Bây giờ hình Avatar của khách đã nằm trong hình tròn, bạn kéo nó lại gần bên trái phần tên như hình mẫu.

Khách hàng có thể chưa thấy được được thông điệp của công ty ở phần Header. Thì trong một bản thiết kế Website cần lập lại thông điệp một lần nữa để khách hàng nắm bắt dễ dàng những lợi ích mà bạn có thể mang lại cho khách hàng.

Để tạo phần viền xanh của khung SIGN UP bạn nhấp chuột phải vào Layer chứa hình chữ nhật chọn Blending Options > Stroke rồi thiết lập thông số như hình mẫu.

Trong một bản thảo thiết kế Website, phần Footer chứa tiêu đề giống như Header và lập lại tên công ty cũng như địa chỉ.
 
 Như vậy chúng tao đã hoàn thành một bản thảo thiet ke website du lịch đơn giản và rõ ràng giúp cho khách hàng có thể cập nhật được thông tin và dịch vụ mà công ty muốn gửi đến. Cám ơn các bạn đã theo dõi !