8 bước đơn giản để tạo template sức khỏe với photoshop

11/09/2012

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………..

Cách tạo template sức khỏe

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.

Cách tạo template sức khỏe

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:

Cách tạo template sức khỏe

Outer Glow:

Cách tạo template sức khỏe

Color Overlay:

Cách tạo template sức khỏe

Stroke:

Cách tạo template sức khỏe

Và đây là kết quả

Cách tạo template sức khỏe

Bước 4: Tiếp theo, bạn dùng hoa và giấy gim bố trí nó như hình

Tạo template blog sức khỏeTạo template blog sức khỏeCách tạo template sức khỏe

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:

Cách tạo template sức khỏe

Inner shadow:

Cách tạo template sức khỏe

Để 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ả:

Cách tạo template sức khỏe

Để 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

Cách tạo template sức khỏe

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.

Cách tạo template sức khỏe

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

Cách tạo template sức khỏe

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

Cách tạo template sức khỏe

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.!

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é !
  • tuanhung

    cảm ơn a rất nhiều,rất bổ ích