Hướng dẫn thiết kế layout web thật phong cách với photoshop

14/10/2012

Với những kiến thức đã học được từ chuyên mục Thủ thuật photoshop mà website thuthuatweb.net mang lại, các bạn hoàn toàn có thể tự mình thiết kế một layout thật sự phong cách như mẫu bên dưới. Tuy nhiên, với hướng dẫn này các bạn cũng hãy tham khảo và từng bước làm theo bởi ngoài những kiến thức cũ thì một số thủ thuật mới vô cùng thú vị sẽ giúp bạn hoàn thiện thêm không những cho thiết kế này mà còn ở những thiết kế mới trong trong tương lai của chính các bạn. Cùng xem qua và từng bước làm theo các bạn nhé, chúng ta bắt đầu nào………..

Hướng dẫn thiết kế web phong cách với photoshop

Bước 1: Tạo file mới với kích thước 820x790px, độ phân giải 72dpi. Dùng Rectangle tool (U) vẽ một hình chữ nhật đúng với kích thước ấy, sau đó áp dụng hiệu ứng Gradient Overlay:

Hướng dẫn thiết kế web phong cách với photoshop
Hướng dẫn thiết kế web phong cách với photoshop

Hướng dẫn thiết kế web phong cách với photoshop

Bạn dùng Pen Tool (P) để vẽ một số tia như hình dưới, mỗi một tia tốt nhất bạn hãy cho nó hiển thị trên một layer mới để dễ dàng sửa đổi

Hướng dẫn thiết kế web phong cách với photoshop

Hướng dẫn thiết kế web phong cách với photoshop

 Sau đó áp dụng hiệu ứng Color Overlay và merge tất cả các layer chứa các tia lại với nhau, sau đó giảm opacity xuống còn 64%.

Hướng dẫn thiết kế web phong cách với photoshop

Bước 2: Dùng Rounded Rectangle Tool (U) vẽ một hình chữ nhật với góc bo là 10px, màu: #E3E3E3, đặt chính giữa background. hình chữ nhật này đại diện cho thân wesb (main body) .

Hướng dẫn thiết kế web phong cách với photoshopSau đó cho hiệu ứng Stroke:
Hướng dẫn thiết kế web phong cách với photoshop

Bước 3: Tạo layer mới, đặt tên “Brush _white“, sử dụng Brush Tool (B) để tô một vài điểm trắng như hình dưới

Hướng dẫn thiết kế layout thật phong cách với photoshop

Để loại bỏ những điểm mảng trắng bên ngoài, sao cho những đốm trắng chỉ xuất hiện bên trong main body bạn làm như sau: bạn chọn layer “Brush_whie”, đặt chuột giữa layer “Brush_white” và shape của bước 2,sau đó nhấn phím Alt + click chuột. Lúc này các phần thừa màu trắng sẽ biến mất.

Hướng dẫn thiết kế web phong cách với photoshop

Bước 4: Sử dụng lại Rounded Rectangle Tool (U), vẽ một hình chữ nhật màu trắng, với chiều chộng bằng 2/3 chiều rộng của main body (phần này sẽ đại diện cho văn bản)
Hướng dẫn thiết kế web phong cách với photoshopSau đó, áp dụng hiệu ứng Stroke:
Hướng dẫn thiết kế web phong cách với photoshop

Bước 5: Tạo layer mới, sử dụng Brush tool (B), click chọn kiểu và thông số như bên dưới

Hướng dẫn thiết kế web phong cách với photoshop

Đến đây chúng ta nên dùng công cụ Eyedropper tool (I) để hút màu và sử dụng brush ở những nơi mà chúng ta muốn.

Hướng dẫn thiết kế web phong cách với photoshop

Bước 6: Sử dụng công Line tool(U) để tạo nên ra một bảng lịch màu trắng (giữ phím shift để vẽ đường thẳng)

Hướng dẫn thiết kế web phong cách với photoshop

Bước 7: Ở bước này, chúng ta sẽ sử dụng công cụ Rectangle tool(I), màu: #F2F2F2,  để vẽ một hình chữ nhật, bo góc 10px, để dùng làm bảng chứa các thanh menu của web

Hướng dẫn thiết kế web phong cách với photoshop

Hướng dẫn thiết kế web phong cách với photoshop

Hướng dẫn thiết kế web phong cách với photoshop

Sau đó cho nó một số hiệu ứng như sau
Drop shadow:
Hướng dẫn thiết kế web phong cách với photoshopGradient Overlay:
Hướng dẫn thiết kế web phong cách với photoshop
Hướng dẫn thiết kế web phong cách với photoshop

Hướng dẫn thiết kế web phong cách với photoshop

Bước 8: Sao chép layer ở bước 7 nhưng loại bỏ hiệu ứng Drop shadow và Gradient tool bằng cách right click vào mũi tên đi lên trên bảng điều  khiển ở layer bước 7 và chọn Create layer

Hướng dẫn thiết kế web phong cách với photoshop
Hướng dẫn thiết kế web phong cách với photoshop

 Sau đó, áp dụng cho nó hiệu ứng Stroke

Hướng dẫn thiết kế web phong cách với photoshop
Hướng dẫn thiết kế web phong cách với photoshop

Bước 9: Bây giờ chúng ta sẽ làm các nút bằng cách sử dụng công cụ Ellipse Tool (U)

Hướng dẫn thiết kế web phong cách với photoshop
Hướng dẫn thiết kế web phong cách với photoshop

Áp dụng hiệu ứng Gradient Overlay

Hướng dẫn thiết kế web phong cách với photoshop
Hướng dẫn thiết kế web phong cách với photoshop

Pages: 1 2

Chuyên Mục:

Bài viết được đăng bởi tracy

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !