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

[boy_online01]

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é

. 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.

​

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]​

 

[boy_online01]

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

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]

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

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.

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

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.

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:

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:

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

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:

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

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:

 

[boy_online01]

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:

DOWNLOAD

 

[JohnyNguyen]

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 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]

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

 

[LeKhangAn]

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 ý

 

[Dragon459]

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 ý

đúng rồi. lưu bằng đuôi svg

 

[ganang1234]

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]

đã 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

 

[Dragon459]

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.

 

[hieuna]

nên dùng bản cài hay protable vậy các bác

 

[Luu_Tan_Vu]

1 số video hướng dẫn vẽ icon từ nokia
[video=youtube_share;1D0lH_4QiMo]http://youtu.be/1D0lH_4QiMo[/video]

Spoiler

[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]

 

[boy_online01]

đã 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

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]

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.

 

[Dragon459]

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]

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]

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.

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]

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>

 

[deconleonui]

Me too.


Công việc nào cũng thế bác ạ.


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.

làm sao để lấy đc các file .svg từ thêm mà mình thíck hả bạn :-?