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! . 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 28 px 28 px,. với kích thước 25 px x 25 px và toàn bộ document với một black background( #00 000 0). 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. 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