Hướng Dẫn Thiết Kế Trang Web 2.0 trong Photoshop (phần 2)

Tạo một button tròn
12. Dưới đây là một bài giới thiệu ngắn gọn, với việc sử dụng Rounded
Rectangle Tool, bán kính 28px 28px, tạo ra một button gọi là“Learn
More”. Điều này là rất hữu ích nếu người dùng muốn tìm hiểu thêm về
công ty của bạn, thông tin này được tiếp cận một cách dễ dàng.

Áp dụng một Gradient Overlay cho button bằng cách sử dụng các cách
thiết lập ở trên với # 086da0 màu của bottom và #23a7ea.
Tạo một call-to-action box
13. Sử dụng Rounded Rectangle Tool một lần nữa với bán kính 16px, tạo
ra một hình chữ nhật 300px. Vào Blending Options và add một Drop
Shadow với các giá trị giống như Bước 6.

14. Chọn hình chữ nhật chúng tôi vừa tạo ra (Cmd / Ctrl + Click) và tạo
một layer mới phía trên hình chữ nhật này. Add ánh sáng màu xanh
(#96e3fc) để gradient trong suốt trên hình chữ nhật.

15. Di chuyển gradient pixel này lên. Có thể mất một phút nhưng đừng
quan tâm đến điều đó. Bằng cách nào đó hãy làm cho nó trông khác biệt
một chút.

Phác thảo một call-to-action button
16. Box này sẽ dùng như một call-to-action button. Điều này rất hữu ích
nếu bạn muốn người dùng tìm kiếm thông tin quan trọng trên toàn bộ
trang web của bạn chỉ trong nháy mắt. Hãy add heading, một vài mô tả,
và một icon cho các button. Các icon nhỏ có thể mang lại sức hấp dẫn
hơn cho thiết kế của bạn. Chúng cũng giúp người dùng nhanh chóng tìm
thấy những gì họ đang tìm kiếm bởi vì các icon truyền đạt các messages
đến người dùng.


22. Ẩn layer này với black background và vào Edit> Define Pattern.
Layer với black background chỉ được tạo ra để làm cho màu trắng dễ nhìn
thấy hơn. Đặt tên brush của bạn ” diagonals ” và nhấn OK.
23. Bây giờ chúng ta quay trở lại mô hình chúng ta vừa tạo. Tạo một
layer mới phía trên gradient background. Go to Edit> Fill và trên Con-
tents dropdown, sử dụng Pattern. Click vào Custom Pattern và tìm (pat-
tern) mô hình chúng ta vừa tạo ra có tên là “diagonals” và nhấn OK. Bạn
sẽ thấy một cái gì đó như thế này:

24. Đặt Blend Mode của layer này lên Overlay và Opacity của nó là 4%

25. Sử dụng tẩy, xóa thông thường từ bottom lên top, xóa bỏ khoảng
60% các đường chéo để làm cho nó trông như thế này: 26. Voila! Chúng tôi đã có một Web 2.0, rất rõ ràng, và đẹp mắt!