• Hiện tại trang web đang trong quá hình chuyển đổi và tái cấu trúc lại chuyên mục nên có thể một vài chức năng chưa hoàn thiện, một số bài viết và chuyên mục sẽ thay đổi. Nếu sự thay đổi này làm bạn phiền lòng, mong bạn thông cảm. Chúng tôi luôn hoan nghênh mọi ý kiến đóng góp để chúng tôi hoàn thiện và phát triển. Cảm ơn

Sửa icon đơn giản bằng Inkscape - Một số file template

boy_online01

New Member
Mục đích của topic này là:
- Hướng dẫn cách vẽ, chỉnh sửa icon bằng phần mềm Inkscape.
- Giải đáp thắc mắc gặp phải trong quá trình sử dụng Inkscape (cái này thì mình ít kinh nghiệm nên nhờ mấy bác hay dùng phần mềm này giải đáp hộ vậy)
- Tự vẽ được icon, không phải phụ thuộc vào người khác.
- Chia sẻ file template (file mẫu) để các bạn tự tạo icon hàng loạt. (Có lẽ là mình sẽ làm cái này)
Các bài hướng dẫn mình sẽ không để ở #1 vì có quá nhiều hình ảnh.
Quan trọng nhất nè:​
Không nhờ vả kiểu như themes này thiếu mất icon UCweb, X-plore, Ovi Maps bla bla..., vẽ hộ mình nhé
ah.gif
. Mục đích của mình là muốn các bạn tự vẽ chứ không phải nhờ vẽ, muốn có icon đó thì sang bên topic post themes đó nhờ vẽ hộ.



Tại sao lại dùng Inkscape mà không dùng Adobe Illustrator?
- Vì Inkscape là phần mềm miễn phí, nhẹ hơn và trực quan hơn Adobe Illustrator.

inkscape.jpg



Download phần mềm Inkscape tại trang chủ.


Tut đây:
- Một số lưu ý cơ bản khi dùng Inkscape
- Phần chính: Cách chỉnh sửa icon đơn giản
-File mẫu của icon Satellite
-Viết chữ vào file svg
Một vài thao tác trên Inkscape (ace_hp7)
[URL="www.pdaviet.net/showthread.php?196427-Sửa-icon-đơn-giản-bằng-Inkscape-Một-số-file-template/page7/#64"]- Cập nhật file mẫu nền Icon vết loang 2 - Dragon459

[/URL]
 
Last edited by a moderator:

boy_online01

New Member
Một số lưu ý cơ bản khi dùng Inkscape:

- Không kéo thả file vào Inkscape mà phải thao tác File > Open hoặc Ctrl + O để mở file.
- Chú ý hình này nhé:
anna2x.jpg


Không được vẽ ra ngoài ô vuông đó. Bất cứ thứ gì bên ngoài ô vuông thì sẽ không hiển thị được trên điện thoại.

Tạm thời thế đã. Sẽ bổ sung sau :-?
 

boy_online01

New Member
Phần chính: Cách chỉnh sửa icon đơn giản:
Mình sẽ hướng dẫn cách đơn giản nhất trong các cách đơn giản để làm một icon.
Mình sẽ ví dụ với icon này: Entry77.svg + Entry52.svg = abc.svg
87520987.png


Bước 1: Lấy dấu hỏi chấm (?) từ Entry77.svg.
1.1 - Bấm Ctrl + O để mở Entry77.svg.
1.2 - Bấm vào phần cần xóa.
71228802.jpg

1.3 - Bấm nút Del hoặc Ctrl + X tùy bạn. Ta sẽ được hình như thế này:
91530989.jpg

Trong một số trường hợp khi bạn bấm nút Del hoặc Ctrl + X nó sẽ mất luôn cả phần mình muốn giữ lại. Giải quyết bằng cách bấm giữ Ctrl + chọn phần cần xóa, sau đó bấm Del hoặc Ctrl + X.
Thế là ta đã có được dấu chấm rồi.



Bước 2: Lấy phần khung màu xanh từ Entry52.svg.
89457839.jpg


Tương tự như bước 1 thôi, bạn chỉ cần chọn phần cần xóa rồi bấm Del. Cuối cùng ta được hình này:
83511905.jpg




Bước 3: Chèn dấu hỏi chấm (?) vào khung màu xanh:
3.1 - Quay trở lại Entry77.svg vừa nãy chỉ còn dấu hỏi chấm (?), bạn bấm Ctrl + A rồi bấm Ctrl + C để copy dấu hỏi chấm (?).
3.2 - Chuyển qua Entry52.svg giờ chỉ còn khung xanh, bấm Ctrl + V. Ta sẽ được như hình này:
39339884.jpg

3.3 - Giờ thì gặp vấn đề là dấu hỏi chấm (?) nhỏ quá muốn nó to ra thì có 2 cách: Hoặc là bạn kéo dãn nó ra nhưng như thế dấu hỏi chấm (?) sẽ bị mất tỉ lệ ban đầu. Muốn nó to ra mà vẫn giữ nguyên tỉ lệ thì chú ý hình dưới nhé:
97789563.jpg

Bạn sẽ thấy một cái khoá, nếu bật cái khóa này thì khi resize sẽ không bị mất tỉ lệ. Sau khi resize xong thì được hình này:
11525536.jpg

Bây giờ chỉ việc di chuyển vào chính giữa là được:
57641945.jpg


Done. Giờ thì lưu nó lại. Trước khi add icon vào themes thì bạn nên cho vào điện thoại xem trước xem có bi lỗi ko, vì nhiều khi svg hiện trên máy tính một kiểu nhưng trong điện thoại một kiểu.

Cuối cùng là mình thay tạm icon trên cho UCWEB được như hình dưới:

superscreenshot0037.jpg
 

boy_online01

New Member
File mẫu của icon Satellite
(ý tưởng từ icon Satellite của bác dragon459)

Các bạn mở bằng Inkscape, sau đó bấm Ctrl + A (khung màu trắng nên ko nhìn thấy gì) để copy phần khung mình làm, rồi Ctrl + V vào icon Anna là được:

Mình làm ví dụ với icon Easy KeyLock:

superscreenshot0038.jpg


DOWNLOAD
 
Chỉnh sửa cuối:

JohnyNguyen

New Member
Ngon ghê >:) Nhưng mà tính người VN ta thích xài sẵn chứ mấy ai chịu bắt tay vào làm đâu :p Hy vọng là mình nói sai và sẽ có nhiều "Ai cừn Đì zai nờ" hơn sau khi tham khảo topic này :))\-/
 

w2k

New Member
bài biết rất hay, có thể thay I... cho đỡ nặng máy rồi :)
 

LeKhangAn

New Member
Khi chỉnh sửa xong , lưu lại mặc định đuôi Svg hả bác boy >>> cái này mớ quan trọng ý
 

ganang1234

New Member
a Boy ơi e có 1 số icon ko bằng nhau muốn chỉnh nó bằng nhau thì làm ntn ah? e thử chỉnh tỷ lệ gần cái ô khoá giống nhau nhưng khi vào theme nó lệnh đi và có cả viền trắng xung quanh nữa!
 

damhuytho

New Member
đã dùng cái íncape này từ lâu, nhưng không biết vé sao cho đẹp nên rất mong chờ cái template của bác:D
 

Dragon459

Manager
a Boy ơi e có 1 số icon ko bằng nhau muốn chỉnh nó bằng nhau thì làm ntn ah? e thử chỉnh tỷ lệ gần cái ô khoá giống nhau nhưng khi vào theme nó lệnh đi và có cả viền trắng xung quanh nữa!
trường hợp này thì lấy khung viền anna của 1 loại thôi. chỉ copy phần icon bên trong khung anna thôi.
 

Luu_Tan_Vu

New Member
1 số video hướng dẫn vẽ icon từ nokia
[video=youtube_share;1D0lH_4QiMo]http://youtu.be/1D0lH_4QiMo[/video]
[video=youtube_share;epgzsrSKCtU]http://youtu.be/epgzsrSKCtU[/video]
[video=youtube_share;TvrICzjTkn0]http://youtu.be/TvrICzjTkn0[/video]
[video=youtube_share;B1dfzR6wQkc]http://youtu.be/B1dfzR6wQkc[/video]
 
Chỉnh sửa cuối:

boy_online01

New Member
đã dùng cái íncape này từ lâu, nhưng không biết vé sao cho đẹp nên rất mong chờ cái template của bác:D

Gọi là file mẫu nhưng thực ra là file svg vì Inkscape ko giống AI. Kiểu như là mình sẽ làm một cái khung, bạn chỉ việc copy - paste vào icon có sẵn. Ở đây mình dùng icon Anna vì mình chỉ có mỗi icon loại này thôi. Đang ngâm cứu cái icon Anna bóng của bác Gon, tí nữa sẽ có phần khung cho các bác sản xuất đại trà.
 

blackpetal

New Member
Việc edit icon bằng việc copy tự icon này sang icon khác thì mình chỉ toàn dung AI không thôi vì AI dung lượng sau khi save lại nó nhỏ hơn Inkscape,mình thì thấy như vậy,ko biết mọi người thấy như thế nào nữa.:D
 

Dragon459

Manager
Nói là hướng dẫn làm nhưng số người làm chỉ tính theo đầu ngón tay. và trong khi làm còn khá nhiều vấn đề nảy sinh.
Nói chung để từ lúc vẽ icon trên máy tính đến khi add hoàn chỉnh vào theme thì khá rắc rồi vs những người mới làm. Không đam mê thì khó làm tiếp.
Bên Symbian dùng dạng vector chứ bên AND giao diện toàn là PNG. tha hồ mod miếc.
Nhưng svg có rất nhiều ưu điểm hay mà file ảnh thông thường k có được
 

deconleonui

New Member
Nói là hướng dẫn làm nhưng số người làm chỉ tính theo đầu ngón tay. và trong khi làm còn khá nhiều vấn đề nảy sinh.
Nói chung để từ lúc vẽ icon trên máy tính đến khi add hoàn chỉnh vào theme thì khá rắc rồi vs những người mới làm. Không đam mê thì khó làm tiếp.
Bên Symbian dùng dạng vector chứ bên AND giao diện toàn là PNG. tha hồ mod miếc.
Nhưng svg có rất nhiều ưu điểm hay mà file ảnh thông thường k có được
rồng ơi , làm sao bạn add hình con rồng vào icon anna red dragon của bạn đc ?
hướng dẫn mình với ;;)
 

boy_online01

New Member
Việc edit icon bằng việc copy tự icon này sang icon khác thì mình chỉ toàn dung AI không thôi vì AI dung lượng sau khi save lại nó nhỏ hơn Inkscape,mình thì thấy như vậy,ko biết mọi người thấy như thế nào nữa.:D

Me too.

Nói là hướng dẫn làm nhưng số người làm chỉ tính theo đầu ngón tay. và trong khi làm còn khá nhiều vấn đề nảy sinh.
Nói chung để từ lúc vẽ icon trên máy tính đến khi add hoàn chỉnh vào theme thì khá rắc rồi vs những người mới làm. Không đam mê thì khó làm tiếp.
Bên Symbian dùng dạng vector chứ bên AND giao diện toàn là PNG. tha hồ mod miếc.
Nhưng svg có rất nhiều ưu điểm hay mà file ảnh thông thường k có được
Công việc nào cũng thế bác ạ.

rồng ơi , làm sao bạn add hình con rồng vào icon anna red dragon của bạn đc ?
hướng dẫn mình với ;;)
Tách con rồng ra từ 1 icon, sau đó paste sang các icon còn lại.

Cập nhật file mẫu đầu tiên.
 

MinhThang

Manager
Bài hướng dẫn rất cụ thể dễ thực hành, anh em tha hồ sáng tạo Icon cho ý thích của mình. =D>=D>=D>
 
Top