Thiết kế layout web trên photoshop chỉ với 10 bước

26/09/2012

Đôi khi một bố cục đơn giản thôi nhưng mang lại một hiệu quả bất ngờ. Chính vì thế, hôm nay mình sẽ lại tiếp tục hướng dẫn các bạn tự mình thiết kế layout cho web trên nền photoshop. Tất cả những bước này thật sự đơn giản nhưng khi kết hợp sẽ mang lại cho bạn một kết quả sự  ngạc nhiên đến không ngờ………..Nào, bắt đầu nhé!

Thiết kế layout web trên photoshop

Bước 1: Bạn tạo tài liệu mới với kích thước 800 x 600px, độ phân giải 72dpi, tô màu # E2C89F.

Thiết kế layout web trên photoshop

Bước 2: Dùng công cụ Rectange tool vẽ môt hình chữ nhật, màu trùng với background, sau đó sử dụng công cụ Convert point tool để điều chỉnh hình ảnh sao cho giống bên dưới.

Thiết kế layout web trên photoshop

Và áp dụng hiệu ứng Drop shadow:
Thiết kế layout web trên photoshopStroke:
Thiết kế layout web trên photoshopLúc đó bạn sẽ được kết quả:

Thiết kế layout web trên photoshop

Bước 3: Tiếp theo chúng ta sẽ tạo bóng cho cạnh dưới bên phải. Tạo một layer mới, sử dụng công cụ Brush tool, vẽ một chấm tròn đen, sau đó bạn sử dụng công cụ Smudge tool (R) để làm mờ nó và có thể sử dụng thêm Eraser (E) để xóa bỏ các yếu tố không cần thiết.

Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop

Bước 4: Bây giờ chúng ta sẽ làm menu cho chúng. Tiếp tục sử dụng công cụ Rectangle tool, hình dạng của chúng sẽ được sửa chữa bằng công cụ Convert Point.

Thiết kế layout web trên photoshop

Sau đó cho chúng hiệu ứng Drop Shadow:

Thiết kế layout web trên photoshopGradient Overlay:
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshopStroke:
Thiết kế layout web trên photoshop

Bước 5: Copy chúng thêm 4 bảng, hiệu chỉnh màu khác nhau và thay đổi kích thước sau cho menu thứ 2 = menu thứ 4, menu thứ 3 = menu thứ 5, và cả 4 menu này phải cao hơn menu đầu tiên.

Thiết kế layout web trên photoshop

C0py 1:

Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshopC0py 2:
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshopC0py 3:
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshopC0py4:
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop

Lúc này chúng ta sẽ được 5 menu với những màu sắc khác nhau

Thiết kế layout web trên photoshop

Bước 6: Sử dụng công cụ Custom Shape Tool (U) để vẽ một số  ngôi sao với nhiều màu sắc khác nhau

Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop

Tuy nhiên chúng đều có chung phần bóng đổ Drop shadow:

Thiết kế layout web trên photoshopDành cho ngôi sao nhỏ hơn
Thiết kế layout web trên photoshopVà đây là kết quả
Thiết kế layout web trên photoshop

Bước 7: Cũng lại tiếp tục sử dụng Custom Shape Tool (U) để đính thêm một vài ngôi sao chỉ có đường viền

Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop

Drop shadow:
Thiết kế layout web trên photoshopChúng ta sẽ được
Thiết kế layout web trên photoshop

Bước 8: Và bây giờ chúng ta cần viết tiêu đề cho website, bạn dùng (T) gõ tên trang web của mình với các thiết lập

Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop

sau đó cho nó một số hiệu ứng Gradient Overlay:

Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshopStroke:
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop

Tiếp tục đính thêm một hình ngôi sao cho nó với màu #D1C5B0.

Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop

Hiệu ứng Stroke cho ngôi sao
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop

Bước 9: Tiếp tục bạn đính kèm bên trong ngôi sao một ngôi sao nhỏ nữa

Thiết kế layout web trên photoshop

Và cho  nó hiệu ứng Stroke:
Thiết kế layout web trên photoshop

Và đây là kết quả sau những gì chúng ta đã thực hiện

Thiết kế layout web trên photoshop

Sau khi hoàn tất chúng ta sẽ được

Thiết kế layout web trên photoshop

Bước 10: Tiếp tục, chúng ta viết tiêu đề cho menu, trong quá trình canh chỉnh bạn có thể sử dụng thêm Free Transform để hỗ trợ

(Home)
Thiết kế layout web trên photoshop(About us)
Thiết kế layout web trên photoshop(Service)
Thiết kế layout web trên photoshop(Portfolio)
Thiết kế layout web trên photoshop(Contacts)
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop

Để cho các tiêu đề menu này có độ khắc nhẹ, bạn có thể sử dụng add layer  mask, tiếp theo sử dụng công cụ brush màu tối hơn cho những chỗ khắc tối, giảm opacity 90% trên mỗi layer chữ.

Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop

Tiếp theo chúng ta sẽ chèn văn bản cho web

Văn bản in đậm bạn thiết lập:

Thiết kế layout web trên photoshopVăn bản thường:
Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshopChèn các thống kê khác:
Thiết kế layout web trên photoshop

Phần này, bạn có thể sử dụng tương tự  như ở hướng dẫn trên

Thiết kế layout web trên photoshop
Thiết kế layout web trên photoshop

Với hình ảnh,bạn có thể cho stroke:

Thiết kế layout web trên photoshop

Kết thúc quá trình sáng tạo chúng ta sẽ được một template lạ mắt và ấn tượng thế này

Thiết kế layout web trên photoshop

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é !
  • Kiến Hâu

    không có demo hả bạn? kích thước như thế liệu có ổn không?