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………..
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:
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
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%.
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) .
Sau đó cho hiệu ứng Stroke:
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
Để 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.
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)
Sau đó, áp dụng hiệu ứng Stroke:
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
Đế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.
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)
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
Sau đó cho nó một số hiệu ứng như sau
Drop shadow:
Gradient Overlay:
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
Sau đó, áp dụng cho nó hiệu ứng Stroke
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)
Áp dụng hiệu ứng Gradient Overlay
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
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
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)
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:
Sử dụng Text tool để nhập tiêu đề menu cho web
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
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:
Các thông số chữ cho lịch
Thông số đại diện các thứ trong ngày
Và đây là tiêu đề của lịch
Các thông số này đại diện cho một vài menu ở phần trên của trang web
Bước 15: Sử dụng Line Tool (U) để vẽ hai sọc phân chia giữa các menu
Thiếp lập các thông số cho dòng chữ đậm hiển thị nội dung
Dành cho phần mô tả nội dung
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.
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.
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
Dùng Burn Tool (O) để làm tối phần phản chiếu này
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
Đặ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.
template web pseudo-elements
Tin Tức Liên Quan
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
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
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
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
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
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
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
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
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
