Skip to content
This repository was archived by the owner on Feb 1, 2018. It is now read-only.

Guidelines

Jump to bottom
Joshua Fogg edited this page Aug 27, 2015 · 23 revisions

Introduction

These guidelines are for applications icons and NOT for places and symbolic icons. The latter two are entire up to the Ozon team. Please don't do icons for any apps that come out of the box, these are also entirely up to the Ozon team. Feel free to do icons for apps that do not come out of the box. Please read these guides carefully and follow them. In order to submit an icon please to a pull request and in it attach a 240*240 pixel preview of the icon as a .png image. We will review you request and if it is good enough - we will merge it. If it is not we will tell you what needs adjustment, so you can fix it.

Video tutorial

Watch this video tutorial to learn more about our design techniques

Icon Anatomy

Sizes

  • Canvas size - 48*48 pixels;
  • Icon size - 46*46 pixels;
  • Baseplate size - 44*44 pixels;
  • Symbol size - up to 32*32 pixels (X and Y don't have to be the same) when not fullscreen;

Layers:

  • Fake blur shadow - imitates a blurred looking shadow around the baseplate. Don't touch this layer;
  • Blob - adds a very subtle blob shadow below the baseplate. Don't touch this layer;
  • Baseplate - the basic shape of the icon. You can recolour its gradient;
  • Symbol - this layer contains the symbol itself;
  • Inset - creates a pitch black, 15% opaque, 3 pixels tall inset shadow at the bottom of the baseplate. Don't touch this layer;

Colouring

Baseplate

  • Unless you are gonna use a full screen symbol keep the baseplate linear gradient sticking to the same colour with the bottom colour darker and the top lighter. Exceptions like:

are allowed, but don't overuse this style;

  • Avoid too dark or dull grey colours when possible;

Symbol

Both gradients (liner and radiant) and plain colours are allowed; Try to avoid too harsh gradients; Transparency is allowed;

Additional

Symbol Shadowing

  • If you are going with a not fullscreen symbol that doesn't use transparency make start black 15% opaque shadow 1 pixel below it. If the symbol consists of multiple elements press Ctrl +A on the symbol layer, then Ctrl + D, then merge the dublicate you just made, colour it pitch black and make it 15% opaque, move it 1 pixel below the symbol itself and then move it behind the symbol;

  • If you really have to you can move the shadow below the symbol 1 pixel to the right too, like in the clock ("preferences-system-time.svg") icon;

  • You can try different shadowing if you feel like it would look better, but if possible stick to the one described above;

Extra

  • Do not make icons that look too Numix-y or too Nitrux-y, we ought keeping Ozon ozon styled and not Numix or Nitrux styled;
  • Try to make fullscreen symbols when possible;
  • Do not make too flat or too skeuomorphic icons. Our style is quasi-flat;
  • Avoid doing white symbols on colourful background icons;
  • If you have to add a fold effect put in in new layer above "baseplate" and "symbol" layers, but below "inset" and one it is completed lock that layer. Check the "gnome-software.svg" icon for that effect;
  • DO NOT use the Inkscape blur. If you have to use a blurry looking elements use radiant gradients. Check the "applets-screenshooter.svg" for that;
  • Make sure everything is aligned to grid;
  • Check the icons we have made and study the techniques in them to learn how to make your icons on par with ours;

Clone this wiki locally