Hướng dẫn thiết kế VBB Style

Author:Kusanagi – StylesVN

Lesson3 : Images in Vbulletin

Chào các bạn hôm nay có lẽ là 1 ngày đẹp trời và khá rảnh rỗi ,tranh thủ viết tiếp luôn phần còn lại của bài hướng dẫn .Chúng ta sẽ bắt
đầu lesson3 : Images in vbulletin
Thật ra theo đúng quá trình có lẽ bài này nên viết trước bài css nhưng nó khá nhiều chuyện để nói và cũng ko còn dừng ở mức độ đơn
giản dễ nuốt..... Thường thì nên vẽ giao diện trên PS trước khi coding và chỉnh css ,vẽ được giao diện xem như ta đã định hình xong
css chỉ việc thay màu mà thôi .Xem 1 ví dụ :

Trong bài 3 và 4 chúng ta sẽ thiết kế hẳn luôn 1 cái giao diện ,ở đây kus đã vẽ trước 1 giao diện trống trên ps ,các bạn có thể tham
khảo qua bố cục ,việc này rất cần thiết và ko thể bỏ qua nếu bạn muốn tạo 1 skin "của mình" .Còn psd sẽ là cái chứng minh thành quả

Author: Kusanagi - StylesVN

 lao động là "của bạn" do đó hãy chuẩn bị 1 cái thật tốt vào .... Kus sẽ ko đề cập đến kĩ thuật photoshop nó đã là 1 lĩnh vực khác rồi

Sau khi vẽ xong hãy dùng công cụ Slice Tool trong photoshop để chia nhỏ các img ,save đó vào File / Save for web.... để save ra
các mảng nhỏ .Xem hình

Sau khi đã save đủ số img cần thiết ta sẽ tiến hành 2 công đoạn chủ chốt

I/Chuẩn bị images
-Hãy tạo 1 folder trên host của bạn ,nơi mà sẽ chứa cái skin bạn muốn làm .Ở đây kus sẽ đặt là styles/media/ (nên đặt các skin vào 1
folder điều này sẽ rất tiện về sau nhất là khi site bạn setup quá nhiều skin hãy sét 1 folder riêng "chỉ để chứa skin"
-Vào thư mục images của forum và copy ra 3 foder buttons,misc,statusicon ; copy nó vào thư mục chứa skin vừa tạo của bạn .Và đối
với những người mới sử dụng img cho sẵn sẽ giúp bạn cảm thấy dễ dàng hơn ,trước khi có thể thiết kế toàn bộ img cho mình .... riêng
các img đã vẽ trong giao diện trắng trên ps ,cắt nó ra và thay thế tương ứng với các img trong giao diện gốc hãy làm thế nó sẽ ko sót
img .Và sau đây là 1 số chuyện về img cần quan tâm
*Buttons:
-Nhóm buttons lớn (3 cái):

Author: Kusanagi - StylesVN

 +threadclosed.gif
+newthread.gif
+reply.gif
-Nhóm buttons nhỏ (9 cái):
+edit.gif
+email.gif
+find.gif
+reply_small.gif
+quickreply.gif
+quote.gif
+forward.gif
+home.gif
+sendpm.gif

*Statusicons
-Statusicons forum(5 cái):
+forum_link.gif
+forum_new.gif
+forum_new_lock.gif
+forum_old.gif
+forum_old_lock.gif
-Statusicons sub-forum(3 cái):
+subforum_link.gif
+subforum_old.gif
+subforum_new.gif

*Misc(4 cái):
+stats.gif
+whos_online.gif
+navbits_start.gif
+birthday.gif

Trên thực tế con số img cần thay thế sẽ ko phải chừng này mà là toàn bộ ,việc chuẩn bị img sẽ rất quan trọng ,chất lượng ,số lượng và
sự đồng bộ của img sẽ quyết định chất lượng skin ,hãy làm sao img nhẹ mà chất lượng vẫn tốt,việc phối màu và chọn hay thiết kế icon
,button nên có sự chọn lựa kĩ càng ,ko nên sử dụng quá nhiều màu trong 1 skin mà thay vào đó là điều chỉnh mức độ đậm nhạt ,các sắc
thái của 1 tông màu sẽ giúp site khá hơn ,thường thì 1 giao diện người ta chỉ dùng khoảng 3->5 màu và luôn hướng tất cả img về 1
màu chủ đạo ,VD skin này có màu xanh biển pha với trắng . Ngoài ra kus cũng nói thêm về sự tương phản đậm và nhạt , để skin được
hài hòa các tiêu đề đầu mục thường người ta sẽ pha những màu nhạt , nếu thiết kế dạng skin sáng như skin media này thì
background(bg) chính nên pha màu nhạt nhất ,hãy pha xen kẽ vào nhau ,đậm ở ngoài nhạt ở trong và ngược lại .VD như cái bg tiêu đề
màu pha vào là xanh đậm thì text nên để màu trắng hoặc xanh nhac ,sự tương phản sẽ làm nổi bật được nội dung,cũng như bg ở các
box pha nhạt nhưng nên đậm hơn bg nền chính sẽ giúp nội dung nổi được lên trên thay vì pha cùng màu hoặc nhạt hơn thì giao diện sẽ
có xu hướng bị chìm xuống rất khó coi ... Cái này cũng chỉ là kinh nghiệm cá nhân thấy sao nói vậy mong các bạn thông cảm nếu thấy
khiếm khuyết kus cũng chỉ mới đến với đồ họa, PS chừng nửa năm nay thôi
II/Sửa đường dẫn vào img đã chuẩn bị

Giờ sau khi đã chuẩn bị xong img các bạn hãy vào admincp/styles & template/Style Manager
Vào skin vừa tạo ở thanh sổ chọn StyleVars .Ở 3 mục "Button Images Folder ","Item Status Icon Folder ","Miscellaneous Images
Folder "
Hãy sửa lại đường link img đến thư mục chứa images đã tạo .Vậy là xong !
Ví dụ ở skin media đang làm đường dẫn của kus sẽ là
-styles/media/misc
-styles/media/statusicon
-styles/media/buttons

Cũng cần lưu ý 1 chút về chuyện đặt tên img .Các img sẽ sử dụng make skin nên đặt thật dễ hiểu ,tiếng việt luôn cũng được

Author: Kusanagi - StylesVN

 (khungtrai.gif,khungphai.gif ... đại loại thế).Ngoài ra đối với banner khi làm cần chú ý đến trường hợp co giãn ,có thể chia banner làm
3 phần hần trái ,phải và 1 cái background ở giữa ,điều này sẽ vô cùng hữu ít khi skin co vào hoặc giãn ra thì banner cũng ko bị vỡ , nói
trước luôn cho các bạn để sau này coding dễ dàng hơn ^^ Vậy là được rồi phần này có thể thông qua ,chúng ta sẽ đi vào lesson 4 :
Coding vbb template !

Author: Kusanagi - StylesVN