|
|
[![2007-06_flag_greatbritain](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/5bc7272a0caa9b1a1b8680a3ab949c8a/2007-06_flag_greatbritain.jpg)](home) [![60px-Bandera_España_civil](https://gitlab.com/xphnx/twelf_cm12_theme/uploads/6dc551cb2a748a3176e1027568df5906/60px-Bandera_España_civil.png)](home-es_off)
|
|
|
|
|
|
# How to add an icon
|
|
|
**In one sentence**: Draw a white icon on its layer of the [**SVG template**](https://gitlab.com/xphnx/twelf_cm12_theme/tree/master/tools/svg_templates_twelf), put the svg on [**SVG icons folder**](https://gitlab.com/xphnx/twelf_cm12_theme/tree/vectorial/svg-icons), add the activity of the app to appfilter.xml and add the icon's license to the LICENSE file.
|
|
|
**Steps**:
|
|
|
1. Draw a white icon on its layer of the [**SVG template**](https://gitlab.com/xphnx/twelf_cm12_theme/tree/master/svgs/svg_templates_twelf),
|
|
|
2. Put your svg icon in the [**SVG wip folder**](https://gitlab.com/xphnx/twelf_cm12_theme/tree/master/svgs/wip),
|
|
|
3. Add the activity of the app to [appfilter.xml](https://gitlab.com/xphnx/twelf_cm12_theme/blob/master/theme/src/main/assets/icons/res/xml/appfilter.xml) and add the icon's license to the [LICENSE](https://gitlab.com/xphnx/twelf_cm12_theme/blob/master/LICENSE.md) file.
|
|
|
4. (Optional) Run the script proccess_wipsvg.sh. (It generates the proper pngs and move the svg from wip to depot folder.)
|
|
|
|
|
|
**Breaf instructions**: A template file contains three layers (to see them, select Layer - Layers from the menu; to toggle layer visibility, use the eye-like icons near the layer names). The bottom layer contains the background of the icon. It has proper color, shadow, shade and tint. Do not modify those.
|
|
|
|
|
|
The middle layer (Hints) shows the keyline shapes - the regions that define the size of your icon. In short, a mostly square icon must fit into a square one, a horizontal rectangle - in the horizontal rectangle, a vertical rectangle icon - into the vertical rectangle and the mostly round one should mostly fit in the larger squre-without-the-corners that they form. most part of your icon should fit into one or several of those rectangles. Note that small items can extend beyond this area. For more information on this, please refer to the section "Proportions" below and to the [Google's guide](http://www.google.com/design/spec/style/icons.html#icons-system-icons).
|
|
|
The top layer (hints) shows the keyline shapes, the regions that define the size of your icon. In short, a mostly square icon must fit into a square one (black lines). A horizontal rectangle, in the horizontal rectangle (blue lines). A vertical rectangle icon, into the vertical rectangle (green lines) and the mostly round one should mostly fit in the larger square-without-the-corners that they form. Most part of your icon should fit into one or several of those rectangles. Note that small items can extend beyond this area. For more information on this, please refer to the section ["Proportions"](https://gitlab.com/xphnx/twelf_cm12_theme/wikis/home#proportions) below and to the [Google's guide](http://www.google.com/design/spec/style/icons.html#icons-system-icons).
|
|
|
|
|
|
The icon layer is the most interesting one. This is the layer you should draw your icon on. It already contains an indication, please delete it and draw the desired logo in white instead of it.
|
|
|
The icon layer is the most interesting one. This is the layer you should draw your icon on. It already contains an indication, please delete it and draw the desired logo in white (#ffffffff) instead of it.
|
|
|
|
|
|
### Add Activities to appfilter.xml
|
|
|
|
... | ... | @@ -55,7 +59,7 @@ Where |
|
|
|
|
|
#### Colors (if you use the templates you dont have to worry about this)
|
|
|
|
|
|
* Material foregroud - One of the '500' colors of the material palette (differs across templates)
|
|
|
* Material foregroud - One of the '500' colors of the [material palette](https://github.com/MaTriXy/Material-Design-Color-Palette-for-Inkscape
|
|
|
* Central logo - White #FFFFFF
|
|
|
* Tint edge - White 20% opacity
|
|
|
* Shaded edge - Derived from the first color: Refer to Tint, shade and shadow values
|
... | ... | |