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

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

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!