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

Author:Kusanagi – StylesVN

Lesson 5 : Tips and Tricks In Vbstyle

(Không dành cho newbie)
Chào các bạn như kế hoạch dự tính kus viết tiếp thêm phần 5 này ,và có lẽ đây là phần hướng dẫn cũng như cái style cuối cùng của
kus trong suốt thời gian sắp tới ,dù muốn hay ko cũng phải lấy được tấm bằng đại học rồi mới tính tiếp chứ biết sao giờ lol …. Ở phần
này yêu cầu các bạn phải có các kiến thức cơ bản về css,html,ps… và nắm bắt được toàn bộ kiến thức ở 4 phần trước .Kus sẽ đề cập
đến những gì tinh túy nhất mà mình tìm tòi được trong suốt thời gian qua.. Bài viết có tên là … : NGŨ ÂM DESIGN TOÀN TẬP .Hé
hé luyện quyền căn bản rồi giờ phải có tuyệt chiêu mới “đánh nhanh diệt gọn” được chứ (^0^) .Chương 5 sẽ bao gồm 2 phần “THIÊN
THỦ” và “THIÊN NHÃN” :

I.Bắc phái thiên thủ thần công :

“Quyền” mà kus sẽ đề cập ở đây là cách thức coding .Code style trong VBB nó ko khó nhưng code làm sao cho gọn ,dễ nhìn mà đạt
được cái hiệu quả cao nhất sẽ là vấn dề mà ta nên quan tâm .Nên nhớ kĩ ko rườm rà và phải chính xác đó là tiêu chí quan trọng nhất.
Muốn làm được thế đầu tiên phải đánh trúng “huyệt” .Lấy VD ở cái style ipod nhé ,kus sẽ điểm sơ các “huyệt” (slice) để các bạn biết
chỗ mà “đánh” (code)

Bây giờ ta sẽ “điểm chỉ” (div) ngay các huyệt cần thiết,hầu như dùng div là tối ưu nhất vì rất dễ quản lý và code sẽ gọn hơn xài table
nhiều.Giờ chắc các bạn cũng nắm qua cấu trúc cái style này rồi chứ .”Huyệt” sẽ phân bố qua các khu vực và có 3 vấn đề cần lưu ý
1. Tên Class
2. Vị trí
3. Thuộc tính lặp
Cụ thể từng phần như sau:

1.Tên Class:
Rà soát toàn bộ style sẽ có 12 cái class ,trong đó 8 cái ở ngoài chứa 4 cái ở trong,xác định rõ mục tiêu ,tiến hành code sơ bộ
trước để thống kê những chỗ cần điểm chỉ hé hé ^^.Ta sẽ code như sau:

<!-----Phần Khung----->
<div class=”khung2”>
<div class=”khung1”>
<div class=”khung3”>
</div></div></div>

<div class=”khung4”>
<div class=”khung5”>

<!-----Banner----->
<div class=”banner2”>
<div class=”banner1”>
<div class=”banner 3”>
</div></div></div>
<!-----/Banner----->

</div></div>
<div class=”khung7”>
<div class=”khung6”>
<div class=”khung8”>
<!-----Menu----->
<div class=”menu”></div>
<!-----/ Menu ----->
</div></div></div>

<!-----/Phần Khung----->

2&3.Vị trí & Thuộc tính lặp:

Phần này nói nôm na chỉ là mấu chốt cơ bản và dĩ nhiên “quyền” phải luyện qua CSS rồi ^^ Còn đây là bài ,cứ bê nguyên
khuôn mà biến hóa đảm bảo kết quả sẽ ko khiến ta thất vọng đâu

.Tên Class
{
Background: #Mã màu url(file chọn làm background) vị trí thuộc tính lặp ;
Height: number ; Width: number;
Padding-left: number;
Padding-right: number;
Padding-top: number;
Padding-bottom: number;
}

Author: Kusanagi - StylesVN

 Hơi nhiều chi tiết và đây cũng chỉ là “1 phần rất nhỏ” nhưng phần cần luyện thì nhiêu đây dư xài rồi ,khi thiết lập cho font hay trong
những trường hợp cần thiết khác thì kus sẽ nói thêm. Riêng việc code để làm khung cho style kus sẽ chia nó làm 2 loại

-Trên và dứơi: khung truyền thống khu vực trên và dứới sẽ có 3 phần
+Góc trái phải :hai phần này này nằm sát góc các góc trên và dưới nó sẽ ko lặp (no-repeat)
+Phần giữa: Lặp theo chiều ngang (repeat-x)

-Trái và phải: Lặp theo chiều dọc (repeat-y) và ở đây ta sẽ phải cách lề ,vì là background nên phần này sẽ bị lớp trên đè lên,nên phải
dùng thêm padding-left và padding-right bóp cái style lại

Chắc sẽ hông có gì ghê gớm đáng phàn nàn nhỉ ,làm 1 ví dụ sẽ hiểu ngay ấy mà.Nhớ kĩ nhé : tên gì?,nằm chỗ nào?,lặp lại thế nào? Và
lưu ý là phân lặp nghĩa là background là các img tương đồng xếp liên tiếp nhau nên cắt mỏng thôi cho nhẹ nhé.Còn đây là trường hợp
cụ thể cho cái style ipod

VD ở phần bộ khung ta code như sau:

.khung1 { background: url(khung1.gif) top left no-repeat ; height:48px }

/*background là khung1.gif ,ko lặp nằm góc trái trên , chiều cao 48px*/

.khung2 { background: url(khung2.gif) top left repeat-x ; height:48px }

/*background là khung2.gif ,lặp ngang từ trái qua, nằm góc trái trên , chiều cao 48px*/

.khung3 { background: url(khung3.gif) top right no-repeat ; height:48px }

/*background là khung3.gif ,ko lặp nằm góc phải trên , chiều cao 48px*/

.khung4 { background: #F4F6F9 url(khung4.gif) top left repeat-y ; padding-left:45px }

/*background là khung4.gif ,lặp dọc từ trên xuống, cách lề trái 45px*/

.khung5 { background: #F4F6F9 url(khung5.gif) top right repeat-y ; padding-right:45px }

/*background là khung5.gif ,lặp dọc từ trên xuống, cách lề phải 45px*/

.khung6 { background: url(khung6.gif) top left no-repeat ; height:256px }

/*background là khung6.gif ,ko lặp nằm góc trái trên , chiều cao 256px*/

.khung7 { background: url(khung7.gif) top left repeat-x ; height:256px }

/*background là khung7.gif ,lặp ngang từ trái qua, nằm góc trái trên , chiều cao 256px*/

.khung8 { background: url(khung8.gif) top right no-repeat ; height:256px }

/*background là khung8.gif ,ko lặp nằm góc phải trên , chiều cao 256px*/

Dùng div để code chủ yếu dựa vào các lớp “background” xếp chồng lên nhau .Cái lợi là gọn ,có thể đặt đối tượng khác như text img
,flash lên trên background và dễ dàng thay đổi vị trí các lớp,tuy nhiên vì là background nên dễ bị các phần khác đè lên ngoài ý muôn
,việc đặt height,width hay cách lề cũng chính là tránh tình trạng bị những phần khác đè lên lớp background này
Còn table thì các “đối tượng” sẽ đặt cạnh nhau, chỉ phiền ở chỗ code rất dài ,mặc dù nó cố định đối tượng tốt hơn cả div .
Do đó nên phối hợp dùng cả 2 sẽ tạo hiệu quả rõ rệt ,dùng table giữ chỗ còn div sẽ có đất sử dụng .He he “song kiếm hợp bích” mà
(^0^)

Vậy là phần này ổn rồi nhé ,nói chung chỉ cần nắm vững khúc này thì không còn ngán cái gì hết ,giờ kus sẽ nói qua luôn cái vụ fixed
và fluided style .nghĩa là style có kích thước cố định hoặc tự giãn đầy màn hình. Rồi vậy thế này nhé .Bản thân khi dùng div thì nó đã
tự giãn rồi ,ngay cái phần repeat ấy ,còn muốn làm fixed thì cứ dùng 1 cái table bóp nó lại thôi ,cũng ko khó khăn gì hết ,ở dưới kus
làm luôn cái sườn rồi cứ vậy mà làm tiếp.Cần lưu ý một chút đối với style fixed cho các độ phân giải ,đa số người ta sẽ làm cho
800*600 .Và để cái bề rộng nó khít đầy màn hình ko bị giãn ra chiều dài thường người ta sẽ chọn là 760px->778px ,riêng kus hay
dùng kích thước 770px ko quá rộng cũng như quá khít với lề ,còn bạn muốn thế nào thì tự chọn lấy cũng tùy trường hợp chứ đừng quá
cứng ngắc. Cũng nói luôn khi dùng table ở đây kus chỉ đưa ra cấu trúc tổng quát còn khi bạn dùng cũng nên bổ sung vài chỗ như
border=”0” cellpadding=”0” cellpacing=”0” chắc cái này cũng chỉ đơn giản là bỏ đi cái viền ngoài và ko cách lề vậy thôi .
Cách nào cũng có cái hay cái dở của nó và tùy theo gu mỗi người nhưng tốt nhất ta nên hướng tới mọi đối tượng sử dụng và site phải
xem tốt ở mọi độ phân giải .800*600 là thông dụng nhất nhưng số lượng người xem ở 1024*768 cũng ko nhỏ ,fixed style 800*600
xem ở 1024*768 thì vẫn tốt nhưng bạn có nghĩ nếu cao hơn nữa thì nó còn giũ được chất lượng ko ? Mặt khác fluided style tuy có thể
giãn đầy mọi độ phân giải nhưng nếu giãn quá nhiều thì cũng ko đẹp mắt cho lắm …..Vì vậy bạn hãy quyết định và lựa chọn kĩ nhé.

Còn bây giờ kus sẽ nói về việc convert một style,vấn đề này cũng khá nhiều bạn hỏi rồi giờ giải đáp luôn để các bạn “múa” cho đã.
Khẩu quyết cần nhớ để convert là : “Giữ lại images ,bóc vỏ template ,sửa sang css” (^0^)

1. Imges: images các phiên bản hầu như ko đổi,ta giữ toàn bộ ,các ver mới sẽ có các images mới nên ta sẽ copy các images của
skin mặc định rồi chép đè images skin convert lên => ko lo làm sót
2. Template:
Về phần này sẽ có nhiều chuyện để nói ,công đoạn đầu sẽ là so sánh để phân biệt phần ruột và vỏ .Bạn làm thế này nhé: ta cần
2 bản vbb,1 cũ 1 mới , vbb bản cũ vô phần edit template trong styles manager ở skin sắp convert đó ,chú ý phần template màu
đỏ .Đó là những template đã thay đổi và công việc của ta là tìm phần vỏ trong những template đó.
Bình thường nó sẽ nằm trong các template sau: header ,footer ,headinclude , forumhome ( level ,level1nopost ,level2
,level2nopost…) ,navbar, forumdisplay,showthead , postbit ,postbit_legency v.v….
Còn phần vỏ là phần nào thì kus sẽ nói nó là những phần khung bao quanh box ,kết cấu của style v.v… như ở phần trên vừa
chỉ bạn code đó ,nó là phần code mà người ta “thêm vào” ,bạn lọc ra phần đó(nó thường nằm ở đầu hoặc cuối các template) và
bỏ đi phần ruột tức là phần code mặc định có sẵn. Sau khi lọc ra rồi thì cứ theo đúng vị trí tương ứng mà đưa qua thôi

Author: Kusanagi - StylesVN

 3. Css: nếu như bạn chọn theo phương án của kus là tách riêng css thì phần này sẽ kho có vấn đề gì đáng nói cả ,các class trong
vbb ko có gì khác so với các ver cũ ,dĩ nhiên sẽ có 1 vài thay đổi nhỏ nhưng chỉ “thêm vào” chứ ko bớt ra ,so sánh với bản mới
rồi thêm chút xíu nữa là ok thôi .Mặt khác nếu style cũ của bạn ko dùng riêng css bạn có thể tạo 1 file mới và copy toàn bộ nội
dung trong cặp tag <style> (mở view/source ở vbb bản cũ) sau đó load nó vào ver mới ,load thế nào thì bài 1 có đề cập rồi
,hoặc có thể chọn giải pháp khác là sửa lại trong maincss từ từ nhưng cái này cũng phê lắm à

Thông thường vbb đã có tính năng revert template ,nếu style ko có thay đổi gì nhiều bạn có thể revert từ từ các template cũ nhưng
tưởng tượng xem nếu hơn cả trăm cái thì sẽ thế nào nhỉ .Do đó việc làm mới sẽ nhanh và tiện hơn .Convert style về hình thức nó gần
giống như rip hay code mới lại style vậy ,cũng ko nhất thiết phải làm y xì như code cũ mục đích thì chỉ cần nhìn giống thôi ,nên sửa
code nếu code cũ quá dài và rắc rối ,đồng thời việc này cũng thu lại cho bạn 1 mớ kinh nghiệm đấy

II.Nam tông thiên nhãn tâm pháp :

He he ta tiếp tục nào …. Phần đầu luyện chiêu rồi phần hai sẽ nói về các kĩ năng . Khi đã làm chủ được template thì việc “đánh” vào
con mắt của người xem cũng là 1 phần vô cùng quan trọng.Kus sẽ nói thêm 1 chút .Thật ra phần này cũng ko có gì ghê gớm nếu ko
muốn nói có nhiều vấn đề nhỏ nhặt ,tuy nhiên vì nhỏ nhặt mà nhiều người phớt lờ luôn nên các bạn cũng chú ý nhé.Style để làm được
ko khó ,nhưng làm đẹp thì ko được bỏ qua bất kì chi tiết nhỏ nhặt nào .Các bạn xem hình mẫu trước đã,nói về PS thì quá rộng nên kus
chỉ nhấn mạnh những phần liên quan đến việc thiết kế.

1.Text:
Phần này kus sẽ nói về style cho text và các đối tượng ,sở dĩ kus nói về phần này vì thấy phần nhiều bạn vẫn còn sử dụng các style khá
tùy tiện ,nó ko những làm xấu giao diện tổng thể mà còn gây phản cảm .Các bạn có thể chỉnh phần này ở mục Blending Options..
trong PS .Như ở hình trên ta cũng có thể nhận thấy rõ việc sử dụng các style sẽ tạo ra những hiệu ứng tích cực ,tùy từng trường hợp cụ
thể mà ta sẽ tạo 1 cái style cho thích hợp với tổng thể.
-Font: Chọn font cũng là 1 vấn đề kus muốn nói đến,nó có ảnh hưởng ko nhỏ .Font thì tải trên dafont.com vô số hoặc ra tiệm mua đại
1 CD font collection cũng ko khó .Còn việc dùng nó ta có thể chọn những loại font cong ,mượt đối với những style giải trí,music hay
các pixel font cho style IT ,computer ,font thư pháp với các style về lễ hội ,văn hóa ,tết v.v…..
-Color: Màu sắc cũng ảnh hưởng rất nhiều,và hầu như chọn màu tốt style cũng sẽ đổi khác ,site giải trí ta có thể chọn những tông màu
sáng nhạt ,tươi trẻ thậm chí sặc sỡ nếu cần ( xanh biển,xanh lá chuối,xanh lơ ,trắng , tím nhạt ,hồng v…) , đối với những gam màu tối
nên chọn những màu đậm có độ “tương phản” cao (trắng đen – đỏ đen – vàng cam v.v…) Mảng style business thì chọn ít màu đơn
giản và nghiêm túc nghĩa là ko quá chói cũng như quá nổi loạn hãy thử những màu xám nhạt ,xanh đậm v.v… Kus sẽ gửi kèm các bạn
1 vài cái tool giúp phối màu hi vọng nó sẽ giúp nhiều cho các bạn
Chú thích phần 1 tấm hình: (phần này chỉ nhằm mục đích tham khảo)
(1).Font chữ kết hợp sự tương phản màu sắc nổi bật lên nội dung
(2).Kết hợp thêm bóng cùng gam màu với bg (màu đậm hơn 1 chút) tạo độ nổi cho text
(3).Sử dụng thêm Bevel Emboss làm bề mặt text tròn + smooth hơn
(4).Đơn sắc + viền trắng : 1 kiểu phối hợp làm nổi nội dung khác
(5).Đa sắc + viền trắng và bóng nổi : tạo cảm giác smooth và 1 chút gì đó tươi trẻ
2.Background:
Cái này chắc ai cũng biết rồi .Gồm 2 loại: background images và background color .Vì đây là phần đề cập kĩ năng nên kus sẽ nói đến
images thôi
Vấn đề đầu tiên kus muốn đặt ra là :”Background để làm cái gì?” .Nó là nền và nền thì là phần chìm ,mục đích background giúp làm
nổi bật phần nội dung ,trang trí thêm cho tổng thể styles.Vì thế thường ta nên chọn màu nhạt hơn so với gam màu các đối tượng,về
hình ảnh cũng phải là những hình ảnh chìm và thích hợp chứ ko phải kiểu bạ đâu bốc vô đó và tùy tiện được.Trên thực tế khá nhiều
trang ở VN có thể kể tới những trang “nhạc” html cá nhân lol …. Phải nói hơi bị “choáng” vì 1 số trang y như “thập cẩm” ,tập hợp của
1 lô images và các script html tổng hợp, mặc dù phải xem rõ “đẹp trong hoàn cảnh nào,điều kiện nào”,làm style theo kiểu xào nấu
không chọn lọc là 1 điều cấm kị ,nhất là background vì nó chiếm 1 diện tích không nhỏ và tránh để trường hợp background át nội
dung => phải đơn giản ,phải chìm
Vấn đề số 2 là độ co giãn .Chắc khỏi phải bàn về 2 tiêu chí cho 1 cái style : Quality (chất lượng) và Capacity (dung lượng) .Nếu dùng
background quá lớn sẽ làm style nặng thêm ,còn ko dùng thì sẽ ảnh hưởng chất lượng Tuy nhiên ta có thể lợi dụng thuộc tính repeat
của background mà vẫn đảm bảo cả 2 .Cách sử lý làm 1 background lặp vô tận thì bạn xem hình ,ngoài ra kus cũng còn 1 cách khác là
nhân đôi tấm gốc lên làm 2 tấm và xễp cạnh nhau sau đó lật ngang tấm số 2 lại ,đơn giản hơn cách trên nhưng nó hơi bị ….. bạn làm
thử đi là sẽ hiểu .
3.Aqua Layer:
Với trào lưu của giới trẻ hiện nay là trẻ trung , mới mẻ việc sử dụng aqua cho các đối tượng sẽ ảnh hưởng ko nhỏ tới phong cách style
Chú thích phần 3 tấm hình: (phần này chỉ nhằm mục đích tham khảo)
-Tô lớp mỏng: Tạo độ mượt ,giúp màu nhẹ và thanh hơn
-Tô đậm : Tạo cảm giác hiện đại ,cứng cáp
-Tô ngược : Tạo độ lõm
-Tô 2 lớp : Tăng độ bóng lên cường độ cao hơn => Phát triển ứng dụng làm icons ,buttons
Hiện nay việc tô bóng và sử dụng aqua cho thiết kế là khá phổ biến ,đem lại nhưng hiệu quả tích cực nhưng sử dụng sao cho đúng cho
đẹp mới là điều đáng để quan tâm. Nếu bạn tô aqua cho các thanh tiêu đề thì kus có 1 số đề nghị như sau .
+Màu trắng alpha chuyển từ 70%->20%
+Lớp tô alpha có 1 khoảng cách nhỏ so với lớp màu gốc
+Nếu tô 2 lớp thì lớp màu dưới sẽ có gam màu sáng hơn màu gốc 1 chút : Vd gam màu chủ đạo xanh lơ ,2 lớp alpha thì 1 lớp trắng
như đã đè cập tô từ trên xuống và 1 lớp xanh lơ tô ngược dưới lên
+Nếu tô cho nút thì lớp aqua có kích thước nhỏ hơn so với nút cách vào 2 bên 1 khoảng và chiều cao bằng 1/2 đến khoảng 60% cái nút
,nếu tô lớp số 2 thì chỉ cần khoảng 20% thôi
Riêng việc tô cho đối tượng hay icon cụ thể thì xin miễn ko đề cập vì chuyên môn có giới hạn (^0^) Nhưng theo nhận xét của kus thì
phần aqua sẽ là phần tô ở những chỗ ánh sáng đập vào nhiều nhất khi đặt đối tượng đứng trên 1 không gian xác định ,nó còn tùy thuộc
vào nhiều yếu tố lắm :hình dạng (VD đối tượng tròn lớp qua hình tròn nhỏ hơn hoặc elip,đối tượng HCN thì lớp aqua HCN bo góc
tròn hay đơn giản mang 1 phần hình dạng của vật …..) , góc độ chiếu sáng (trên xuống ,trái qua ,dưới lên v.v… tùy từng trường hợp
mà có vị trí đặt lớp layer này đúng theo hướng ánh sáng chiếu vào,tô toàn phần nửa phần hoặc chỉ 1 góc nhỏ),cường độ chiếu sáng
(phần nhận nhiều ánh sáng tô đậm hơn phần nhận ít ) … v.v…
.
Về cái máy ipod thì các bạn cũng có thể tham khảo thêm 1 cái tút khác của kus để có cái nhìn khái quát về cách thực hiện:

Author: Kusanagi - StylesVN

Author: Kusanagi - StylesVN
 Xong rồi đó giờ hãy ngắm nhìn thành quả đi nào ^^ “Có công học võ có ngày thành … Lý Tiểu Long “ …lol .lol...

III.Lời kết:

Đầu tiên xin có lời cảm ơn đến tất cả mọi người ( Đặc biệt là: Anh2,Sai,Sin,Tnguy3n,Ran,Baby,Kenzin,Member ITVN,Vbviet….) đã
quan tâm giúp đỡ ,góp ý và chỉ dẫn cho Kus rất nhiều trong suốt thời gian qua .Hi vọng qua bài viết Kus có thể chia sẻ trao đổi phần
nào vốn kiến thức của mình .Và đây cũng có thể là bài viết cuối cùng trong suốt thời gian tới ,năm nay phải thi ĐH chương trình rất
căng và nặng nên dù có thích vbb cỡ nào đi nữa cũng đành gác lại và hẹn tái ngộ mọi người trong tương lại ko xa ,dĩ nhiên với 1 mớ
style rồi :D
Mặc dù đã hết sức cố gắng viết thật bao quát dí dỏm với hi vọng giúp các bạn tiếp thu tốt hơn nhưng dĩ nhiên thiếu sót là không tránh
khỏi .Kus hi vọng sẽ nhận được những ý kiến đóng góp từ các bạn để rút thêm kinh nghiệm cho mình .Mọi thắc mắc góp ý xin gửi về
địa chỉ kyoflash@gmail.com hoặc qua YIM : kusanagi.naruto
Qua đây cũng xin có đôi lời với những bạn muốn tập thiết kế ,những bài hướng dẫn chỉ có thể giúp định hướng để bám sát được 1 vấn
đề nào đó chứ ko phải để theo đó làm răm rắp , sẽ ko ai có thể dẫn bạn đi đến đích ngoài chính bản thân bạn.Bên cạnh đó thiết kế cũng
đồng nghĩa với phong cách riêng của mỗi cá nhân ,hãy tự tạo cho mình 1 phong cách hơn là cứ chạy theo phong cách của người khác
như trào lưu hiện nay.Những thứ mình làm ra sẽ ko bao giờ chán , đối với “hot” skin của người khác thì thời gian sau cũng vứt xó khi
đụng hàng :D Wchild,Baby đó ,bạn nghĩ thử xem kus nói phải ko ? Chỉ cần 1 chút cố gắng là được thôi làm nhiều sẽ thấy dễ ,thật
đấy.Chúc các bạn sẽ thành công

THE END

Author: Kusanagi - StylesVN