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

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.

Các awesome icons mà tôi đang sử dụng trong hướng dẫn này là từ Wil-
son Ink trên deviantART. Bạn có thể kiểm tra và download chúng; Bộ
icon này được gọi là Green and Blue Icon Set. Các icon này chỉ miễn phí
cho sử dụng cá nhân.

17. Sao chép cái box mà chúng tôi vừa tạo ra cùng với nội dung của
nóhai lần, , sau đó sắp xếp chúng bằng nhau trên grid. Thay đổi nội dung
của hai box mới.

18. Để add nội dung vào thiết kế, chúng ta có thể thêm một vài text dưới
ba box này, ví dụ, một mục thư thông báo (newsletter) sẽ là tuyệt vời.
Nhưng đừng quên giữ cho mọi thứ nằm bên trong grid!

Last but not least… the footer
19. Kế tiếp, chúng ta tạo footer, nơi có thể add bản quyền và các thông tin
liên lạc cho trang web.

Icing on the cake: creating the diagonal lines
20. Tạo một document mới trong Photoshop với kích thước 25px x 25px
và toàn bộ document với một black background(#000000).

21. Trên top của layer với black background, tạo một layer mới. Sử dụng
Zoom Tool (Z), zoom trong document có kích thước tối đa. Thiết lập
Pencil Tool: 1px và foreground color: màu trắng(#FFFFFF). Vẽ các line
trên document của bạn giống như hình dưới đây. Hãy lưu ý bạn cần phải
vẽ bao nhiêu pixel và vẽ chúng vào đâu trong các areas trên document.

Kết nối các lines như thế này:

Lấp kín các khu vực trống với màu trắng để đạt được kết quả này:

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!