Theo nhu cầu làm Blog ngày càng nhiều và cách thiết kế đa số cũng còn hạn chế vì ít ai hướng dẫn về phần này, và cũng phần ít hiểu biết về Photoshop...nên hôm nay mình sẽ hướng dẫn bài này, mong sao các bạn sẽ dễ hiểu hơn và tự làm Theme Plus cho mình luôn nhé...Và mình cũng mong sao hằng ngày mình sẽ ko còn bị tra tấn nữa
Với bài viết này thì mình cũng xin nói trước là ai biết sữ dụng chút ít Photoshop thì hãy làm nhé..Còn những ai chưa hiểu gì hay chưa biết gì về Photoshop thì qua đây nhé .... ==>> http://teen-9xpro.com/home/category/31/
Thiết kế Theme theo dạng 3 mãnh + 3 cột :
Khi thiết kế ta cần lưu ý đến Code nữa nhé :
Thường thì mình dùng code chia làm 3 phần " Head + BG + Footer " hoặc " Top + BG + Bottom " .
Phần 1 : Thiết Kế Theme và nền cho Blog.
Đầu tiên chúng ta mở một file New với kích thước " 1004 x1000"...Đừng làm theo nhiều ngừi cứ chia từng phần ra rùi làm , sau này ráp vào nó trật lất rùi ngồi đó mà khóc...
Thiết kế " Head " cho Blog :
Mình xin nói rõ về phần Header , Header là phần trên cùng của Blog , thường người ta gọi đó là phần Top hoặc Banner của Blog...Nói chung cho nó dễ chứ nhiều người nói header là gì cũng chẳng biết...
Đầu tiên ta chọn một hình để làm điềm chú trọng cho Blog và cũng như phong cách của Blog..Với kích thước tùy ý nên các bạn sẽ dễ dàng tạo ra phong cách riêng và sắc thái riêng hơn cho Blog của mình...
Bây giờ là phần cắt và ghép để tạo Header cho Blog...Sau khi hoàn tất cắt ghép ta sẽ được như hình sau :
Và với vài thao tác cơ bản tùy chỉnh độ trong sáng cho hình ảnh và thêm chữ cho phần Head, ta sẽ được như thế này :
Thế là hoàn tất phần Head, bây giờ chúng ta sẽ cắt phần BG ra , cái này thì dễ rùi , chỉ cần dùng Tool Crop( C ) là có thể cắt ra ..và lưu ý là cắt cho chính xác để sau này rap Code vào mà nó không bị lệch nhé ...
Tiếp theo ta bắt đầu đến phần Footer : Footer là phần cuối cùng ghi bản quyền cảu Plus..Nếu ai ko làm phần " Footer" thì cũgn có thể thay vào đó là Code của phần " Bottom " cũng được..Cái này tùy ý nhiều bạn thích làm thôi, bởi vì module tự tạo thì ko thể nào đè lên Footer được , chỉ có phần Bottom thì module tự tạo mới bỏ lên được thôi nhé,.. Nên đừng ai thắc mắc cái vụ này naữ nhé , cứ hỏi tại sao phần cuối có nhiều ngừi bỏ Flash lên hình dc mà mình thì ko bỏ Flash lên hình dc...
Với vài hình ảnh có sẳn mình sẽ tạo ra phần cuối cùng của Theme..Sau những bước đơn giản thế là phần cuồi Theme cũng đã hoàn thiện rồi nhé.. Và chúng ta sẽ được ảnh như thế này..Hình này là hình lúc chưa cắt ra làm 3 phần, các bạn nhìn thấy sẽ dễ hiễu hơn về cách thiết kế Theme 3 mãnh như thế này...
https://2img.net/r/ihimizer/img801/3484/84999297.jpg
Thế là chỉ vài thao tác đơn giản trong Photoshop thì chúng ta cũng đã làm dc ra cái Theme cho mình rồi...các bạn hãy lưu ý về vài điều khi thiết kế phải cần sự chính xác của kích thước cũng như về màu sắc phải phù hợp nữa nhé, đừng có như ngừi khác lấy râu ông này mà cắm cằm bà kia thì chẵng ra cài gì cả...
Về phần code của Theme , các bạn sữ dụng code này ... Code này sẽ sữ dụng cho tất cả các Theme với kích thước 1004px .
- Code:
-
body.blog_my,
body.blog_my_index,
body.comment_listing,
body.trackback_listing,
body.blog_archives_folder,
body.blog_archives_date,
body.blog_archives_all,
body.post_rte, body.post_doodle,
body.guestbook,
body.comment_list,
body.subscribe_list,
body.post_gb,
body.profile_view,
body.gallery,
body.photo_big,
body.slideshow,
body.photo_upload_pc,
body.photo_upload_gallery{text-align:center;background:url(link header) center 0px no-repeat;font-weight:bold;}
#head {background:transparent;height:Xpx;}
html{background:#000 url(link BG) center top repeat-y;}
#ft{background:transparent;font-size:0px;}
#ft{background:transparent url(link footer) no-repeat center;height:Xpx;}
Code này sẽ sữ dụng cho tất cả các Theme với kích thước 950px .
body.blog_my,
body.blog_my_index,
body.comment_listing,
body.trackback_listing,
body.blog_archives_folder,
body.blog_archives_date,
body.blog_archives_all,
body.post_rte,
body.post_doodle,
body.guestbook,
body.comment_list,
body.subscribe_list,
body.post_gb,
body.profile_view,
body.gallery,
body.photo_big,
body.slideshow,
body.photo_upload_pc,
body.photo_upload_gallery{text-align:center;background:transparent;font-weight:bold;}
#head {background:url(linkanh phần header) center 0px no-repeat;height:Xpx;}
html{background:#FFF url(linkanh BG) repeat fixed center top;}
PHAN GIUA{}
#bd {background:transparent url(linkanh) repeat-y center top;}
PHAN CUOI{}
#tail{background:transparent url(linkanh) no-repeat center bottom;height:Xpx;}
Các bạn lưu ý giữa 2 Code này mà thiết kế theme cho phù hợp bạn nhé, cách thiết kế theme vẫn như thế ...
Thay hình ảnh vào phần chữ bôi xanh nhé .
X : là kích thước chiều cao .
by:nhocpro