Tìm kiếm
 
 

Display results as :
 


Rechercher Advanced Search

Latest topics
A8 Family
Đoàn kết
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! 43
Vui vẻ
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! IMG0662A_01
Duyên dáng
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! 50-1
Đẹp trai
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! 002-1
Ăn chơi
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! 7-2
Hồn nhiên
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! Copy2ofCopyofDSC04348
Và ....
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! 29032009089
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! 29032009090
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! 29032009095
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! A
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! Copy2ofCopyofDSC04348
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! Copy2ofDSC04352
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! Copy3ofDSC04351
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! 28e8b48a-453b-4e09-9fee-07c94ca1549
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! 7-2
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! PICT0008
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! H001
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! B78d7c10-8f60-44db-a1e9-9235fddcd4c
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! 50-1
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! 002-1
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! PICT0009-1
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! Fxv0otV
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! 64n34
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! Ccef2884-f258-4732-9a53-52b4e336383

Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! Cuoinay
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! B5bce6fb-18a3-4984-b96f-3f1c22e1339
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! 000
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! IMG0657A
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! 43
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! SDC10078

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

Go down

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

Bài gửi by meocon on Fri Jun 05, 2009 6:44 pm

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 .

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

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 !

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

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 )

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

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 :

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

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

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

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

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

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)

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

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]

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


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 ;))

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

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

Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! Smile-50Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! Smile-50_2Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! Mathong-dephia-50
Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! Smile-25Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! Smile-25_2Hướng dẫn tự làm & [Share] icon cho Module tâm trạng !! Mathong-dephia-25

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

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

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

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

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


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

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

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

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ỉ ? )
meocon
meocon
Admin


Về Đầu Trang Go down

Về Đầu Trang


 
Permissions in this forum:
Bạn không có quyền trả lời bài viết