Thiết kế 1 Website layout đơn giản bằng photoshop

Trong bài hướng dẫn này, chúng ta sẽ thiết kế 1 website kinh doanh với phong cách clean & professional bằngPhotoshop. Bài hướng dẫn cũng khá dài nhưng rất chi tiết, nó giúp cho những bạn mới học về thiết kế Web có thể thiết kế được 1 layout cực chuyên nghiệp.

....................................................................................................................... thiết kế website

Kết quả đạt được

 

Tài nguyên

• PT Sans Bold – FontSquirrel



• Free App Icons for Developers – WebAppers

Bước 1

 

Bật Photoshop và tạo document mới với kích thước 1200 x 1200 pixels, độ phân giải 72 dpi, và RGB Color. Fill layer với màu trắng. (Ctrl+Backspace)

Bước 2

 

Và bây giờ tạo 1 hình chữ nhật (sử dụng rectangle tool) ở phía trên cùng và fill nó bằng màu ghi nhạt, rồi sử dụng “Gradient Overlay” trong Blending Options (Layer>Layer Style>Blending Options>Gradient Overlay). Điều chỉnh thông số giống trong ảnh. Bạn có thể chèn 1 logo nào đó tùy thích vào phần trên cùng này.

Bước 3

 

Vẫn với layer này, tạo hiệu ứng đổ bóng bằng Drop Shadow với thông số như trong hình.

Bước 4

 

Giờ chỉnh “Gradient Overlay” trong layer style với mã số màu như trong hình

Bước 5

 

Vẫn trong Layer Style, thêm viền ngoài cho hình chữ nhật đó bằng Stroke. Chỉnh thông số giống trong hình.

Bước 6

 

Tạo thêm 1 hình chữ nhật mới bằng Rectangle tool ở phía bên phải, và fill nó với màu trắng, tạo viền bằng Stroke giống trong hình – Đây chính là khung tìm kiếm của Webstie.

Bước 7

 

Lại thêm 1 hình chữ nhật khác ở bên cạnh khung tìm kiếm vừa rồi, fill màu xanh. Điều chỉnh inner shadow trong layer style giống trong hình, đây chính là nút tìm kiếm. Màu xanh này sẽ kết hợp với màu ghi, trắng và ghi sáng. Màu xanh sẽ được dùng xuyên suốt trong quá trình ta thiết kế Website này.

Bước 8

 

Sử dụng Gradient Overlay cho nút tìm kiếm như trong hình.

Bước 9

 

Thêm Stroke như trong hình dưới, bằng việc sử dụng Layer Style qua các bước, ta đã tạo được 1 button hoàn toàn khác biệt.

Bước 10

 

Thêm chữ vào button đó, điều chỉnh Drop Shadow cho chữ như trong hình, sử dụng font PT Sans Bold. Đó là bước cuối cùng để ta hoàn thành nút 'Search' này. Ngoài ra bạn còn có thể thử dùng font chữ khác, nhưng tôi thấy PT Sans Bold thực sự tốt đối với 1 button nhỏ.

Bước 11

 

Tạo thêm 1 hình chữ nhật ở dưới header, đây chính là vùng Menu chính. Gradient Overlay như dưới.

Bước 12

 

Thêm chữ vào đây với màu ghi xám, sau đó sử dụng “drop shadow” với màu trắng. Hiệu ứng cho chữ ở phần này giống với ở nút tìm kiếm phía trên.

Bước 13

 

Vẽ những đường thẳng đứng 1px bằng Line tool, để chúng nằm giữa mỗi link.

Bước 14

 

Vẽ 1 hình chữ nhật đè lên button đầu tiên, fill nó bằng màu xanh #223f8b rồi chỉnh Gradient Overlay cho Layer style như hình dưới.

Bước 15

 

Cho layer này nằm dưới layer text, sau đó điều chính Drop Shadow như dưới. Chỉnh màu trắng cho chữ 'Home', Drop Shadow như hình dưới.

Bước 16

 

Tạo 1 hình chữ nhật màu xám lớn ở dưới phần navigation, chiếm khoảng 30% diện tích layout. Fill nó với màu #eaeaea

Bước 17

 

Bây giờ tạo 1 hình chữ nhật lớn, màu trắng và đổ bóng cho nó.

Step 18

 

Chèn 1 tấm ảnh tùy thích tại đây. Để bức ảnh này chiếm khoảng 80% diện tích vùng hình vuông trắng. Bạn có thể chọn từ 1 website stock.

Bước 19

 

Thêm 1 vài chữ, dùng PT SANS Bold font.

Bước 20

 

Ở khoảng trắng còn lại, fill nó với màu #eeeeee, tại đây sẽ thêm một số chữ tùy thích.

Bước 21

 

Thêm chữ tại vùng này. Sử dụng Drop Shadow style như dưới.

Bước 22

 

Thêm vài dòng chữ demo, đoạn chữ này dùng để mô tả cho nội dung.

Bước 23

 

Tạo thêm 1 vùng màu xám ở dưới, tại sẽ sẽ có 1 vài icon. Điêu chỉnh Drop Shadow cho vùng này như trong hình.

Step 24

 

Tiếp tục điểu chỉnh Gradient Overlay

Bước 25

 

Và bây giờ, các bạn add thêm vài icon tại đây, kèm theo text ở dưới và nhớ có đường kẻ ngăn cách giữa các icon nhé.

Bước 26

 

Vẽ 1 hình tròn nhỏ bằng Elip tool tại đây (giữ shift ghi kéo để được hình tròn). Điều chỉnh Drop Shadow.

Bước 27

 

Tiếp tục điều chỉnh Inner Shardow như dưới.

Bước 28

 

Điều chỉnh Gradient Overlay.

Bước 29

 

Dùng Custom Shape Tool (U), tạo 1 hình mũi tên. Cũng điều chỉnh Drop Shadow như hình.

Bước 30

 

Fill mũi tên đó bằng màu xanh, sử dụng Color overlay như hình.

Bước 31

 

Thêm 1 video screenshoot tại khoảng trống phía dưới.Trong bài này, tôi chụp ảnh màn hình tại Youtube để chèn vào đây.

Bước 32

 

Thêm nội dung tùy ý tại đây sao cho phù hợp, lưu ý phần này phải được phân chi, bố cục rõ ràng, tương tự như trong hình.

Bước 33

 

Cuối cùng, tạo 1 khoảng ở phía dưới, thêm thông tin Webstie, thông tin liên hệ, Email ... tùy thích tại đây.

Bước 34

 

Đừng quên 1 phần cực kì quan trọng của Website, đó là Bản quyền, tại vùng này điều chỉnh Gradient Overlay như trong hình.

Hoàn thành! Nếu bạn có gì thắc mặc về bài hướng dẫn này có thể Comment ở dưới, tôi sẽ giải đáp tận tình.

Để nghiên cứu dễ hơn, các bạn có thể download file PSD

(267 KB)

http://upload.lpstore.net/product/42/299/webtut-psd.html

Cuối cùng, tôi mong các bạn sẽ thích bài hướng dẫn này!