Menu Điều Hướng

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

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

Bước 10: Nhấn Ctrl + J (4 lần) để sao chép các nút và di chuyển nó xuống và sắp xếp như hình

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

Bước 11: Sử dụng Công cụ Text tool để vẽ đường line ngăn cách giữa các nút. Bạn thiết lập cho nó các thông số như sau

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

Bước 12: Nhấn Ctrl + J (4 lần) để sao chép các đường line của bước 11 và di chuyển nó xuống và sắp xếp như hình (như bước 10)

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 13: Tiếp tục tạo các tiêu đề menu cho web với các thiết lập trong character như  sau:

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

Sử dụng Text tool để nhập tiêu đề menu cho web

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

Bước 14: Bây giờ, tới phần tên cuả trang web, thiết lập các thông số này trong bảng character

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

 Sử dụng công cụ Text tool để nhập tên trang web và áp dụng thêm 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

Các thông số chữ cho lịch

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

Thông số đại diện các thứ trong ngày

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

Và đây là tiêu đề của lịch

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

Các thông số này đại diện cho một vài menu ở phần trên của trang 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

Bước 15: Sử dụng Line Tool (U) để vẽ hai sọc phân chia giữa các menu

Hướng dẫn thiết kế web phong cách với photoshop
Thiếp lập các thông số cho dòng chữ đậm hiển thị nội dung

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

Dành cho phần mô tả nội dung

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 16: Tạo một layer mới và đánh dấu một khu vực nhất định với Rectangular Marquee Tool (M), bằng cách sử dụng brush màu trắng, kiểu brush như ở bước 5 để làm nổi bật cạnh phả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

Bước 17: Nhân đôi layer của bước 17. Sử dụng phím Ctrl + T và di chuyển nó đối xứng. Chọn công cụ Burn (O) để làm tối các vùng biên của brush.

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 18: Phần này chúng ta phải làm là làm tối phần bên dưới khung nội dung, vẽ một vùng chọn như hình

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

Dùng Burn Tool (O) để làm tối phần phản chiếu này

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

Bước 19: Đến đây có thể nói chung ta đã hoàn thành việc thiết kế layout, song để chúng hoàn thiện hơn nữa mình sử dụng tiếp công cụ Brush tool màu trắng, vẽ nó trên một layer  mới

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

Đặt layer này bên dưới layer tên của website. Và đây cũng là bước cuối cùng để bạn hoàn tất một layout vô cùng phong cách thế này.

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

 Không mất nhiều thời gian, chỉ với 19 bước đơn giản kết hợp những kiến thức mới và cũ bạn sẽ học hỏi được nhiều điều thú vị từ thiết kế này. Chúc các bạn thành công!.
template web pseudo-elements

Tin Tức Liên Quan

Tạo icon RSS bóng bẩy
Tạo icon RSS bóng bẩy

Trong bài viết này chúng ta sẽ tạo một biểu tượng rss đầy màu sắc và cực kỳ bóng bẩy cho blog của bạn

Tạo chữ màu bạc tỏa sáng bằng photoshop
Tạo chữ màu bạc tỏa sáng bằng photoshop

Trong bài viết này bạn sẽ có thể tự tay làm một hiệu ứng chữ đẹp mắt cho website hay blog của bạn, với chữ màu bạc tỏa sáng cực kỳ đẹp mắt.

Tạo chữ phát sáng nhiều màu sắc
Tạo chữ phát sáng nhiều màu sắc

Với hướng dẫn này mình sẽ chỉ các bạn tạo hiệu ứng chữ phát sáng với nhiều màu sắc lấp lánh như hình dưới, chỉ với 5 bước đơn giản thui, nào bắt đầu bạn nhé

Mẹo ghép ảnh cực cool bằng Photoshop
Mẹo ghép ảnh cực cool bằng Photoshop

Bài hướng dẫn giúp bạn có được những bức ảnh ghép ấn tượng với thao tác đơn giản

Tự tay làm danh thiếp cực pro bằng Photoshop
Tự tay làm danh thiếp cực pro bằng Photoshop

Thủ thuật này sẽ giúp bạn thiết kế danh thiếp có giao diện chuyên nghiệp, hiện đại mà không cần phải có quá nhiều kiến thức về đồ họa mà chỉ bằng Photoshop và vài bước thao tác đơn giản

Tạo button đơn giản cho web bằng Photoshop
Tạo button đơn giản cho web bằng Photoshop

Trong bài viết này chúng ta sẽ tự tay làm một button đơn giản cho website hay blog của bạn chỉ với vài bước đơn giản

Mẹo tạo chữ kim loại 3D
Mẹo tạo chữ kim loại 3D

Chỉ với vài bước đơn giản mình sẽ giúp các bạn tạo logo chữ kim loại hiệu ứng 3D cho website của mình, rất chi là dễ dàng lun, cùng thực hiện theo nhé

Tạo Abstract Wormhole Background
Tạo Abstract Wormhole Background

Hôm nay, mình sẽ chỉ các bạn cách sử dụng brush và điều chỉnh các lớp trong photoshop cs5, bạn có thể bạo ra một hình nền trừu tượng

Hiệu ứng chữ băng
Hiệu ứng chữ băng

Hôm nay, hy vọng rằng những hướng dẫn sau đây sẽ truyền cảm hứng cho bạn để tạo thêm một số hiệu ứng ice cho thiết kế của bạn

Tư vấn thiết kế website giá rẻ

Chat FB
Tư vấn thiết kế website giá rẻ
Chat Zalo

Điện Thoại