Đô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é!
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.
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.
Và áp dụng hiệu ứng Drop shadow:
Stroke:
Lúc đó bạn sẽ được kết quả:
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.
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.
Sau đó cho chúng hiệu ứng Drop Shadow:
Gradient Overlay:
Stroke:
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.
C0py 1:
C0py 2:
C0py 3:
C0py4:
Lúc này chúng ta sẽ được 5 menu với những màu sắc khác nhau
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
Tuy nhiên chúng đều có chung phần bóng đổ Drop shadow:
Dành cho ngôi sao nhỏ hơn
Và đây là kết quả
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
Drop shadow:
Chúng ta sẽ được
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
sau đó cho nó một số hiệu ứng Gradient Overlay:
Stroke:
Tiếp tục đính thêm một hình ngôi sao cho nó với màu #D1C5B0.
Hiệu ứng Stroke cho ngôi sao
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
Và cho nó hiệu ứng Stroke:
Và đây là kết quả sau những gì chúng ta đã thực hiện
Sau khi hoàn tất chúng ta sẽ được
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)
(About us)
(Service)
(Portfolio)
(Contacts)
Để 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ữ.
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:
Văn bản thường:
Chèn các thống kê khác:
Phần này, bạn có thể sử dụng tương tự như ở hướng dẫn trên
Với hình ảnh,bạn có thể cho stroke:
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
web layout template web design layout
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
