Tên blog

Sửa Đóng

QuangBi's Blog

ENTHUSIASTIC - SMILE

QUY AN GIANG HO

Trả lời

Bài mới nhất

Sửa Đóng

Trích dẫn Báo cáo

15/06/2009 TỰ LÀM ICON CHO MODULE TÂM TRẠNG

Thư mục: Thủ thuật máy tính, mạng, blog |

Quan trọng
Đăng ngày: 16:46 15-06-2009

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)

Bước 7:

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 :

Photobucket

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

Trích dẫn (0)

Tìm tag: 360, blog, plus, tu lam, icon

Tổng cộng 4 lời bình