Changes

Jump to navigation Jump to search

Development Team/Almanac/Making Icons (view source)

Revision as of 18:15, 25 January 2014

3,879 bytes added ,  18:15, 25 January 2014
→‎The Script: update links
Line 1: Line 1: −
{{TOCright}}
+
Save yourself some time. Don't make the mistake I made. Before you make an icon, see if it's already on the laptop!
 +
 
 +
/usr/share/icons/sugar/scalable on the laptop contains a bunch of icons for your use. Also, [[olpc:Svg-grabber.py|svg-grabber]] is a python script that will download ~800 non-sugar svg's for you to work from.
 +
 
 +
--[[User:Bjordan|Bjordan]] 16:48, 15 July 2008 (UTC)
    
==Icon Format==
 
==Icon Format==
Line 5: Line 9:  
====Scalable Vector Graphics====
 
====Scalable Vector Graphics====
   −
Icons designed for Sugar should have the [http://www.w3.org/Graphics/SVG/ SVG] file format.  This Scalable Vector Graphic format allows Sugar to dynamically scale and color the icons without any degradation in quality. Thus, variably sized representations of particular icons may exist depending on their context in the interface. Additionally, this provides support for dynamic coloring of activity and object icons based upon a child's chosen XO colors, [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Colors#Imbuing%20Color%20with%20Meaning|imbuing them with identity]].
+
Icons designed for Sugar must use the [http://www.w3.org/Graphics/SVG/ SVG] file format.  This Scalable Vector Graphic format allows Sugar to dynamically scale and color the icons without any degradation in quality. Thus, variably sized representations of particular icons may exist depending on their context in the interface. Additionally, this provides support for dynamic coloring of activity and object icons based upon a child's chosen XO colors, [[Human_Interface_Guidelines/The_Sugar_Interface/Colors#Imbuing%20Color%20with%20Meaning|imbuing them with identity]].
    
====Defining Entities====
 
====Defining Entities====
Line 27: Line 31:     
Unfortunately, no suitable vector editing tools are available as activities for the XO laptops at present.  We acknowledge this omission, and hope to provide a vector-based "Draw" activity (to supplement the bitmap-based "Paint" activity) in order to provide the proper tools for icon generation on the laptops themselves in the future.
 
Unfortunately, no suitable vector editing tools are available as activities for the XO laptops at present.  We acknowledge this omission, and hope to provide a vector-based "Draw" activity (to supplement the bitmap-based "Paint" activity) in order to provide the proper tools for icon generation on the laptops themselves in the future.
 +
 +
Kidscape aka inkscape child friendly version(olpc): https://bugs.launchpad.net/inkscape/+bug/170488 please cc yourself to this bug, and comment as appropriate.
 +
 +
There is also the start of a vector icon-drawing activity at http://dev.laptop.org/git/users/cscott/icon-draw-activity/ -- please adopt it and finish it off!
    
====Templates====
 
====Templates====
Line 33: Line 41:     
=====Downloads=====
 
=====Downloads=====
−
 
+
These are pointers to the wiki pages for the template icons. Click through to these pages (don't "save as", yet!)
−
* [[:image: icon_template.inkscape.svg | icon_template.inkscape.svg]]
+
* [[OLPC::image: icon_template.inkscape.svg | icon_template.inkscape.svg]]
−
* [[:image: icon_template.illustrator.svg | icon_template.illustrator.svg]]
+
* [[OLPC::image: icon_template.illustrator.svg | icon_template.illustrator.svg]]
−
* [[:image: icon_template.generic.svg  | icon_template.generic.svg]]
+
* [[OLPC::image: icon_template.generic.svg  | icon_template.generic.svg]]
    
=====Guide=====
 
=====Guide=====
Line 50: Line 58:  
====Designing Icons====
 
====Designing Icons====
   −
Sugar icons should all follow the [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Icons | icon design guidelines]] set forth in the Sugar Human Interface Guidelines.  For information about the various types of icons and their appearances including size, colors, and layout, please refer to the HIG.
+
Sugar icons should all follow the [[Human_Interface_Guidelines/The_Sugar_Interface/Icons | icon design guidelines]] set forth in the Sugar Human Interface Guidelines.  For information about the various types of icons and their appearances including size, colors, and layout, please refer to the HIG.
    
=====Default Colors=====
 
=====Default Colors=====
Line 68: Line 76:  
===The Script===
 
===The Script===
   −
In order to streamline the process of creating sugar compatible icons, we provide the [[media: sugar-iconify.py | sugar-iconify]] script.  This script takes an SVG file as input and outputs a new SVG (or SVGs) containing the proper entity definitions.  It offers a number of command-line flags for performing variations on this process to fit smoothly into your workflow.  You can view all of the available options by running <tt>sugar-iconify -h</tt> from the command line, or by viewing the dedicated [[Sugar-iconify | usage page]].  Some specific examples and use cases are illustrated below in more detail.
+
In order to streamline the process of creating sugar compatible icons, we provide the [https://github.com/GhostAlgorithm/sugariconify/blob/master/sugariconify.py sugariconify] script.  This script takes an SVG file as input and outputs a new SVG (or SVGs) containing the proper entity definitions.  It offers a number of command-line flags for performing variations on this process to fit smoothly into your workflow.  You can view all of the available options by running <tt>sugariconify -h</tt> from the command line, or by viewing the dedicated [[Sugar iconify | usage page]].  Some specific examples and use cases are illustrated below in more detail.
    
=====Download=====
 
=====Download=====
   −
* [[media: sugar-iconify.py | sugar-iconify.py]]
+
* [https://github.com/GhostAlgorithm/sugariconify/blob/master/sugariconify.py sugariconify.py]
    
===Basic Conversion===
 
===Basic Conversion===
Line 80: Line 88:  
===Icon Sets===
 
===Icon Sets===
   −
COMING SOON...
+
http://www.openicon.org is a search engine for svg icons.
 +
please add any icon sets using the validator.
    
==Hacking by Hand==
 
==Hacking by Hand==
Line 117: Line 126:  
====Inserting Entity References====
 
====Inserting Entity References====
   −
Next, we have to make use of the defined entities by replacing all occurrences of those colors within the body of the SVG.  Entity references begin with an ampersand (&) an end with a semi-colon (;), with their name in the middle (eg. <tt>&stroke_color;</tt>). Note that if we had a more complex SVG, it may be appropriate to set some  fills to the stroke color, and some strokes to the fill color, within the rules set forth in the HIG for [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Icons#Strokes_.26_Fills | strokes and fills]]
+
Next, we have to make use of the defined entities by replacing all occurrences of those colors within the body of the SVG.  Entity references begin with an ampersand (&) an end with a semi-colon (;), with their name in the middle (eg. <tt>&stroke_color;</tt>). Note that if we had a more complex SVG, it may be appropriate to set some  fills to the stroke color, and some strokes to the fill color, within the rules set forth in the HIG for [[Human_Interface_Guidelines/The_Sugar_Interface/Icons#Strokes_.26_Fills | strokes and fills]]
    
  <nowiki>
 
  <nowiki>
Line 129: Line 138:  
  </svg>
 
  </svg>
 
  </nowiki>
 
  </nowiki>
 +
 +
== Using gradients ==
 +
 +
Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:
 +
 +
<pre><nowiki>
 +
 +
<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [
 +
<!ENTITY stroke_color "#010101"><!ENTITY fill_color "#FF0000">]>
 +
<svg enable-background="new 0 0 55 55" height="55px" version="1.1" viewBox="0 0 55 55" width="55px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
 +
 +
<g display="block" id="activity-example">
 +
<rect display="inline" fill="&fill_color;" height="30.771" width="41.438" x="6.705" y="12.213"/>
 +
 +
<linearGradient
 +
  id="gra"
 +
  gradientUnits="userSpaceOnUse"
 +
  x1="0"
 +
  y1="9"
 +
  x2="0"
 +
  y2="53"
 +
  >
 +
<stop
 +
  offset="0.1044"
 +
  style="stop-color:#0;stop-opacity:0" />
 +
<stop
 +
  offset="0.1813"
 +
  style="stop-color:#0;stop-opacity:0"/>
 +
<stop
 +
  offset="0.489"
 +
  style="stop-color:#0;stop-opacity:.3"/>
 +
<stop
 +
  offset="0.9451"
 +
  style="stop-color:#0;stop-opacity:.6"/>
 +
</linearGradient>
 +
 +
<rect display="inline" fill="url(#gra)" height="30.771" stroke="0" stroke-linejoin="round" stroke-width="3.5" width="41.438" x="6.705" y="12.213"/>
 +
 +
<circle cx="27.504" cy="27.598" display="inline" fill="&stroke_color;" r="2.946"/>
 +
 +
</g>
 +
</svg>
 +
</nowiki></pre>
 +
 +
The "stop-color" properties of an SVG gradient will also accept the &stroke_color; and &fill_color; entities, if you want a gradient in the user's colors.  For example, this shows two gradients between transparent and opaque versions of the child's stroke and fill colors:
 +
 +
<pre><nowiki>
 +
<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [
 +
<!ENTITY stroke_color "#666">
 +
<!ENTITY fill_color "#fff">
 +
]><svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 +
      height="55px" width="55px" viewBox="0 0 55 55" x="0px">
 +
<defs>
 +
  <radialGradient cx="29.547" cy="27.726" gradientUnits="userSpaceOnUse" id="radialGradient3776" r="16.875">
 +
  <stop offset="0" stop-color="&fill_color;"/>
 +
  <stop offset="1" stop-color="&fill_color;" stop-opacity="0"/>
 +
  </radialGradient>
 +
  <linearGradient gradientUnits="userSpaceOnUse" id="linearGradient3784" x1="12.672" x2="46.422" y1="27.726" y2="27.726">
 +
  <stop offset="0" stop-color="&stroke_color;"/>
 +
  <stop offset="1" stop-color="&stroke_color;" stop-opacity="0"/>
 +
  </linearGradient>
 +
</defs>
 +
<path d="m45.204,27.726a15.657,15.657,0,1,1,-31.315,0,15.657,15.657,0,1,1,31.315,0z" fill="url(#radialGradient3776)" stroke="url(#linearGradient3784)" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-width="2.43559003" transform="matrix(1.4370235,0,0,1.4370235,-14.959677,-12.342744)"/>
 +
</svg>
 +
</nowiki></pre>
    
== See also ==
 
== See also ==
−
*[[OLPC Human Interface Guidelines/The Sugar Interface/Icons]]
+
*[[Human Interface Guidelines/The Sugar Interface/Icons]]
−
*[[Svg-grabber.py|Download .svg collection]] (~800 non-sugar svg's)
+
*[[OLPC:Svg-grabber.py|Download .svg collection]] (~800 non-sugar svg's)
    
[[Category:Sugar]]
 
[[Category:Sugar]]
 
[[Category:HowTo]]
 
[[Category:HowTo]]
 +
[[Category:Design]]
 +
[[Category:Graphic Design]]
 +
[[Category:Sugar LI]]
Retrieved from "https://wiki.sugarlabs.org/go/Special:MobileDiff/18291...91241"

Navigation menu