Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !!

Sau khi nhóm MTF công bố Code thay đổi icon cho Module Tâm Trạng, thì có lẽ khá nhiều bạn gặp vấn đề ở kỹ thuật thiết kế icon nhỉ ? Bởi vì thực ra mà nói, làm ra 1 bộ icon tâm trạng ko phải là dễ đối với 1 số bạn đúng không ? Bởi vì vậy, hôm nay mình sẽ hướng dẫn các bạn tự làm cho mình 1 bộ icon tâm trạng nhé ( Hy vọng ai xem bài viết này xong cũng đều làm được, và cũng sẽ có 1 số bạn sẽ mở đơn đặt hàng làm icon sau bài viết này nhá ). Bài viết hướng dẫn sẽ sử dụng chương trình Adobe Photoshop ( CS2 hay 3 đều được), do chương trình quá nặng ( > 500 Mb) nên mình ko thể up lên cho các bạn, vì vậy khuyến cáo các bạn chạy ra điệm dĩa mua về nhé ^^. Nhưng ai ko muốn dùng Photoshop cũng có thể xài chương trình Paint có sẵn, tuy nhiên sẽ hơi khó xài hơn 1 chút .



Chuẩn bị :

* 1 bộ icon kích thước 50x50 cho mỗi tấm hình.
* Chương trình Adobe Photoshop CS (1, 2, 3)
* 1 host ảnh để up lên, photobucket.com hoặc imageshack.us chẳng hạn.


Sau đây là cách thực hiện :

Bước 1 :
Khởi động Photoshop lên.
Click File > New > Gõ kích thước là 50 x 600 . Phần màu nền là transparent !



Bước 2 :
So sánh các icon có sẵn của Yahoo Plus để chọn kiểu icon tâm trạng cho giống ( Muốn xem bạn Click vào Viết Blog ở trong Blog bạn )



Bước 3 :

* Xác định kiểu tâm trạng cho icon, sau đó mở icon lên ( File > Open > đường dẫn đến icon đó )
* Tiếp theo Click Image > Mode > chọn RGB Color ( Nếu có sẵn thì thôi )
* Cuối cùng bạn chọn công cụ Move bên bảng tool phía trái của Photoshop. Click vào hình icon và kéo sang bên ảnh trống :







Bước 4 : Làm tương tự cho 12 icon còn lại :



Bước 5 :

* Sau khi đã làm xong 12 icon bạn sẽ được như hình :
* Sau đó save lại định dạng Gif ( tên emo-50 chẳng hạn)



Bước 6 : (Resize ảnh thành 25x300)

* Click vào Image > Image Size
* Gõ vào kích thước : 25 x 300. Ok
* Save lại định dạng Gif ( tên emo-25 chẳng hạn)

[/img]https://2img.net/h/i286.photobucket.com/albums/ll107/wdephia/Blog/Post/emoticon/8.jpg[/img]




Up 2 ảnh đó lên 1 host và thế vào đọan Code sau vào CSS : ( Chú ý : ảnh cỡ to là ảnh emo-50, còn cỡ nhỏ là emo-25 như mình ví dụ )
Code :

#mod_lifeline .list td a.blog_emo_25_1{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 0;}
#mod_lifeline .list td a.blog_emo_25_2{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -25px;}
#mod_lifeline .list td a.blog_emo_25_3{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -50px;}
#mod_lifeline .list td a.blog_emo_25_4{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -75px;}
#mod_lifeline .list td a.blog_emo_25_5{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -100px;}
#mod_lifeline .list td a.blog_emo_25_6{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -125px;}
#mod_lifeline .list td a.blog_emo_25_7{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -150px;}
#mod_lifeline .list td a.blog_emo_25_8{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -175px;}
#mod_lifeline .list td a.blog_emo_25_9{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -200px;}
#mod_lifeline .list td a.blog_emo_25_10{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -225px;}
#mod_lifeline .list td a.blog_emo_25_11{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -250px;}
#mod_lifeline .list td a.blog_emo_25_12{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -275px;}
#mod_lifeline .list td a.blog_emo_50_1{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 0;}
#mod_lifeline .list td a.blog_emo_50_2{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -50px;}
#mod_lifeline .list td a.blog_emo_50_3{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -100px;}
#mod_lifeline .list td a.blog_emo_50_4{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -150px;}
#mod_lifeline .list td a.blog_emo_50_5{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -200px;}
#mod_lifeline .list td a.blog_emo_50_6{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -250px;}
#mod_lifeline .list td a.blog_emo_50_7{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -300px;}
#mod_lifeline .list td a.blog_emo_50_8{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -350px;}
#mod_lifeline .list td a.blog_emo_50_9{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -400px;}
#mod_lifeline .list td a.blog_emo_50_10{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -450px;}
#mod_lifeline .list td a.blog_emo_50_11{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -500px;}
#mod_lifeline .list td a.blog_emo_50_12{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -550px;}

.mod-alist-full .main-hd h1 em,
.mod-alist-titlebar-1 h2 a em,
.mod-alist-titlebar h2 a em,
.mod-alist-brief table a em,
#myblog-article-compose
#mood li em{background:transparent url(URL ảnh tâm trang nhỏ) no-repeat;}

Vậy là xong rồi đó, bạn đã có 1 bộ icon made in by yourself ;))



Sau đây là 1 số icon tâm trạng làm mẫu :( có thể tùy bạn sử dụng) (Rê chuột vào hình để phóng to nhé )




Icon do Juς†¡ηε'ς ßl☻g đóng góp :



Đây là Icon do bạn Mi5sB đã đóng góp !!!



Bộ này do Sexy'sBlog đóng góp :




Icon do ((¯`•._.• vu$on •._.•´¯)) đóng góp :



Cách sử dụng các icon này :

Các bạn Click chuột phải vào icon và chọn Copy Image Link , sau đó bỏ link đó vào đọan Code trên theo từng loại ảnh nhỏ và lớn . Cuối cùng là Copy cả đọan Code (đã được thay link) vào CSS nhé ! Rê chuột vào ảnh để phóng lớn !

Lưu ý : Những bạn nào muốn mình làm giúp Icon thì nhớ send luôn 12 icon định làm và đặt tên theo số thứ tự từ 1 đến 12 để mình còn biết mà set tâm trạng cho phù hợp nhé !

Trước khi viết bài này, mình cũng đã có làm sẵn vài bộ icon, nếu bạn nào thích có thể comt ở chế độ tin nhắn riêng, mình sẽ share. Tiện đây mình cũng muốn nói với 1 số bạn sau khi đọc bài này và viết entry nhận làm emo, xin vui lòng ghi rõ nguồn giùm nha .( Ghi thêm vài dòng chữ đề nguồn đâu phải là vệc làm khó khăn gì đâu nhỉ ? )