Có thể nói yếu tố nhìn đóng vai trò không nhỏ trong việc làm nên một trang web thành công. Việc sử dụng các màu sắc chan hòa, nhã nhặn hay bố cục hợp lý, không rối rắm…giúp chủ nhân trang web truyền tải được hết những điều mình muốn đến người dùng và ngược lại, website cũng sẽ thu hút và giữ chân người dùng lâu hơn so với những trang web “loạn xà ngầu” màu sắc, bố cục lộn xộn….Và hôm nay, với những gì mình biết, mong rằng sẽ giúp được những bạn có niềm đam mê học hỏi thiết kế web có thể tự mình phát thảo một trang web hoàn chỉnh trên nền photoshop sau đó gắn vào web của mình.
Với hướng dẫn này, các bạn có thể tự mình thiết kế trang trang web, blog chuyên về sức khỏe, làm đẹp…tùy ý mình. Cùng bắt tay nào………..
Bước 1: Bạn tạo kích thước 1024 x 1174px, độ phân giải cho web bạn nên dùng 72dpi, tô màu background: #817B74
Bước 2: Tiếp tục, tạo layer mới cũng với kích thước 1024 x 270px
Lưu ý: các bạn có thể tự mình thay đổi kích thước miễn sao phù hợp với web của các bạn nhé
Tô màu gradient cho nó: #827B75 và #928D88.
Để tạo đường khắc nối giưã background và layer mới này bạn tạo thêm layer mới nữa, với kích thước là 1024 x 2px.
Với 1px đầu tiên bạn tô màu: #827D79, 1px còn lại tô màu #8F8A86.
Bước 3: Lúc này bạn sẽ tạo thân chứa nội dung cho web. Thân web có chiều rộng tùy thuộc kích thước mà bạn muốn có cho web, có thể 900, 950px…
Mình tạo một kích thước tùy ý, và đặt nó vào vị trí như hình, sau đó thiết lập cho nó các hiệu ứng:
Inner shadow:
Outer Glow:
Color Overlay:
Stroke:
Và đây là kết quả
Bước 4: Tiếp theo, bạn dùng hoa và giấy gim bố trí nó như hình
Bước 5: Để tạo menu (menu này sẽ lưu giữ những tin như forum, liên hệ, sitemap)
Dùng công cụ (U), vẽ hình chữ nhật với kích thước 350 x 30px, cho nó hiệu ứng:
Color Overlay:
Inner shadow:
Để tạo thêm bóng cho nó, bạn có thể dùng Polygonal Lasso tool vẽ một hình tam giác nhỏ, sau đó right click vào Create new fill or adjusment layer, chọn Brightness/ Contract
Brightness: -20
Contract: -36
Bạn sẽ được kết quả:
Để hoàn tất menu này, bạn dùng công cụ (T) gõ chữ cho nó
Để ngăn cách các menu với một đường khắc, bạn tạo layer mới với kích thước 2 x 23px
1px đầu tô màu #BDB6B0
1px còn lại: #747060
Bước 6: Bước này chúng ta sẽ hoàn tất phần nội dung
Dựa vào nội dung của trang web mà bạn nên show những phần quan trọng ra trang chủ
Chỗ tờ giấy gim, bạn có thể đặt một thông điệp hoặc những phần nhấn mạnh
Bên cạnh chỗ hoa hướng dương là logo của web (hnay mình không chỉ các bạn cách làm logo, hẹn hướng dẫn sau nha)
Tiếp đến là menu chính của website, cuối cùng là một hình ảnh minh họa cho chủ đề của web
Phần sau các bạn có thể tự mình sắp đặt. Bạn nên cho hiển thị ra trang chủ những thông tin quan trọng tùy theo chủ đề web của mình.
Bước 7: Tiếp theo, chúng ta tạo footer cho web
Với bố cục này, bạn cần tạo một footer đơn giản để tránh gây rối cho web
Bạn tạo một đường line phân cách giữa nội dung và footer, cho nó màu #74706C
Bên trái, bạn có thể thêm vài icon
Bên phải là tittle của web và người thiết kế
Để tạo cho nó cái bóng về phía sau, bạn làm như bước 5
Bước 8: Để tạo bóng đổ xuống cho footer, bạn gom tất cả các layer ở bước 7, nhấn ctrl + T, right click chọn Flip vertical và giảm opacity.
Chỉ với 8 bước đơn giản thui, bạn có được một template cho web hoàn hảo thế này rùi
Hy vọng rằng với hướng dẫn này các bạn sẽ có thêm nhiều ý tưởng trong việc thiết kế template cho riêng mình.
Nếu thấy hướng dẫn này hay, hãy comment khen mình cái, để mình có thêm động lực hướng dẫn các bạn tiếp nhé.
Chúc các bạn thành công.!
template web web template create web template health template how to create health template tao template trong photoshop template suc khoe
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
