Cách thiết kế 1 website như thế nào phần 1. Trước khi thực hiện tạo một giao diện website chuyên nghiệp bằng Photoshop. Bạn cần có một website template và đương nhiên là công cụ chỉnh sửa. Thiết kế hàng đầu hiện nay Adobe Photoshop.
Bước 5: Cách thiết kế 1 website – Thêm Biểu Logo Type (Kiểu Chữ)
Thêm logo type. Trước khi thực hiện điều này, thêm điểm nổi bật vào phía sau logo. Chọn brush mềm có mã màu #19535a và thêm một điểm chấm.
Tiếp theo thêm Type. Font chữ sử dụng trong ví dụ đưới đây là Bebas. Nếu muốn sử dụng font chữ này bạn có thể tải về máy và cài đặt, ngoài ra, có rất nhiều font chữ đẹp tiếng Việt khác dành cho các bạn, tải Font chữ đẹp về máy tính
Thêm hiệu ứng Subtle cho logo.
Bước 6: Đường Dẫn
Thêm các link đường dẫn.
Tạo nút đường dẫn. Sử dụng công cụ Rectangular Marquee Tool và fill bằng bất cứ màu sắc nào. Sau đó giảm Fill Opacity xuống 0.
Kích đúp chuột vào hình thumb thu nhỏ của layer, chọn Gradient Overlay.
Bước 7: Cách thiết kế 1 website – Content Slider
Chọn một khu vực có kích thước 580 x 295 pixel.
Fill khu vực bằng tone màu xám.
Thêm hình ảnh mà bạn muốn sử dụng, dán vào layer mà bạn vừa tạo ở trên.
Bây giờ là bước thêm hiệu ứng đổ bóng (shadow) cho slider. Tạo một layer mới, chọn công cụ Brush Tool được thiết lập đường kính 400 pixel. Mở bảng Brushes và giảm kích thước các chấm tròn, sử dụng thiết lập như dưới đây.
Thiết lập mã màu brush #000000 và thêm các chấm tròn.
Áp dụng Gaussian Blur để làm mềm các cạnh.
Chọn nửa phần dưới của bóng và xóa phần đó đi.
Thay đổi vị trí của bóng ngay trên slider.
Co bóng theo chiều dọc. Tiếp theo căn giữa trên thanh slider. Chọn cả 2 layer và trên bảng Options Panel, bạn click chọn nút Align Horizontal Centers.
Nhân đôi bóng và xoay theo chiều dọc, đặt vào cạnh dưới cùng của thanh slider.
Tạo nút điều khiển thanh slider bằng cách sử dụng thanh công cụ Rectangular Marqee Tool và fill mã màu #000000.
Giảm nút Opacity xuống 50%.
Mở AutoShapes trên bảng Option Panel, chọn biểu tượng mũi tên như dưới đây. Thêm biểu tượng đó vào nút.
Tiếp theo tạo một thanh như hình dưới đây và fill màu #000000.
Giảm Opacity xuống 50%.
Tại đây bạn có thể thêm miêu tả cho dự án của mình.
Bước 8: Thêm Các Dòng Chào Mừng Cho Trang Web
Thêm các dòng chào mừng và miêu tả trang web tại đây. Để gõ được tiếng Việt trong Photoshop có dấu rất đơn giản, chỉ cần cài đặt phần mềm hỗ trợ gõ tiếng việt. Và lựa chọn các kiểu font tiếng việt có dấu là xong.
Bước 9: Cách thiết kế 1 website – Hoàn Tất Header
Đến đây gần như đã sắp hoàn thành header. Để hoàn thành header, bước cuối cùng là thêm hiệu ứng đổ bóng cho header. Tạo một bóng như hướng dẫn ở phần trên bằng cách sử dụng công cụ brush.
Để khoảng cách giữa header và bóng là 1 pixel.
Bước 10: Cách thiết kế 1 website – Áp Dụng Gradient Cho Background
Tạo một màu xám nhạt thành gradient trắng sử dụng các thiết lập như dưới đây.
Tạo một layer mới đặt dưới header sau đó vào áp dụng gradient trên.
Bước 11: Thêm Nút Slider Xoay
Tạo nút điều khiển xoay.
Áp dụng Inner Shadow trên từng nút để biết được các mục đang hoạt động trên thanh slider.
Bước 12: Tạo Content Divider
Chọn công cụ Pencil Tool và vẽ 1 đường kẻ. Chọn màu xám nhạt (mã màu #aaaaaa).
Sử dụng gradient mask để ẩn các cạnh.
Bước 13: Cách thiết kế 1 website – Thêm Main Content (Nội Dung Chính)
Bây giờ nhiệm vụ của bạn là thêm các phần nội dung. Layout dưới đây được chia làm 3 cột bằng nhau và có padding ở giữa. Để làm được điều này bạn có thể tính toán và chia không gian có sẵn thành 3 hộp bằng nhau có chiều rộng 25 pixel và có padding ở giữa.
Thêm đường guide line vào các hộp. Sau đó xóa các hộp này đi và phần còn lại là các cột bằng nhau.
Thêm một số dịch vụ đặc trưng. Thả các biểu tượng từ bộ biểu tượng Function. Duy trì khoảng cách giữa các đối tượng đồng bộ.
Tiếp theo tạo nút Read More (đọc thêm). Chọn công cụ Rounded Rectangle Tool để vẽ các hình dạng khác nhau. Hãy chắc chắn rằng đó là layer Shape.
Áp dụng Gradient Overlay và Stroke cho nút “Read More”.
Nhân đôi nút này.
Bổ sung thêm các mục hoạt động gần đây. Trong ví dụ dưới đây là vẽ 3 hộp để thêm 3 hình ảnh và áp dụng 3 stroke.
Dán các hình ảnh vào các hộp.
Tạo bóng như ở các bước trên và đặt ở các hộp.
Thêm một số miêu tả cho dự án.
Bây giờ là bước tạo một giao diện web chuyên nghiệp bằng Photoshop với các tiện ích mạng xã hội như Twitter Feed. Kéo biểu tượng Twitter hình con chim vào.
Tạo một thông báo Twitter.
Tạo một nút More Tweets.
Áp dụng các style dưới đây:
Thêm text, cách chèn text hay chính là chèn chữ vào ảnh trong Photoshop được thông qua công cụ Type Tool, khi lựa chọn công cụ này cùng với việc chọn font chữ, kích thước (size), các bạn bắt đầu tiến hành thêm text hay chèn chữ vào ảnh trong Photoshop
Bước 14: Cách thiết kế 1 website – Tạo Footer Và Hoàn Tất Quá Trình
Tạo một khu vực cho footer và fill khu vực đó bằng màu xám.
Áp dụng Color Overlay.
Cuối cùng thêm link danh mục footer và thông tin bản quyền. Và như vậy là bạn đã hoàn tất quá trình tạo một giao diện web bằng Photoshop.
Webvocuc
Cảm ơn bạn đã theo dõi bài viết của Webvocuc.com! Cập nhật các bài viết khác từ Webvocuc để biết thêm nhiều thông tin mới nhất về thiết kế website chuyên nghiệp và marketing online.
- Tham khảo các gói dịch vụ thiết kế website tại webvocuc.vn
- Tham khảo thêm gói chăm sóc web và chạy quảng cáo hiệu quả tại webvocuc.com
