#4 Help for creating yaru icons
The Yaru icons are based on the Suru icon set. The main difference is that we use a mix of shapes for app icons, rather than a uniform squircle.
Here are two Suru icons:
...and here are the corresponding Yaru icons:
As you can see, apart from the overall shape of the icon, the style is the same. So, you should follow the Suru style guide. This includes instructions for drop shadows and highlights.
(You'll probably find plenty of Yaru icons that deviate slightly from the Suru guidelines. This is because we were learning as we went along and made a lot of icons in a short period of time. If you find a wobbly drop shadow, please feel free to fix it with a PR!)
Our four basic shapes are circle, square, and two kinds of oblong (portrait and landscape). When you want to make a new icon, copy the svg for an existing one and re-use the basic shape.
The "golden rule" of contributing icons is to draw as little as you can get away with!
Think about what your icon needs to show. If we already have a similar design, copy it and modify it, rather than making an icon from scratch.
For a real example of this, compare the generic documents app, which has been part of the theme for ages:
...with the more recent Evince icon, which was adapted from it:
When you need a particular element for your icon, see if it already exists somewhere in Yaru. For instance: if you need a pencil, copy the pencil from this icon. There are several ways to draw a pencil, so we want to make sure there's some consistency in the theme.
Wherever possible, we try to use the same palette as Suru icon set.
Gradients should start and end with a Suru shade. To avoid gradients that are too dramatic, the two colours should normally be a) next to each other on the Suru colour grid and taken b) from the same column. If in doubt, reuse gradients that already appear in a Yaru icon.
Not all tones have to come from the Suru palette. For instance: the Suru greys are quite warm. If you need a cooler grey, you can copy the gradient from the device icons.
Couple of tips for "maximum Yaru" ( = consistency):
- See if there's an existing icon with a backplate that has the right proportions (in the example of a game-controller the keyboard icon is probably closest)
- If there isn't any that's quite right, start with the horizontal oblong template from the draft PR with the new templates
- Save a copy of it
- Make the baseplate layer visible, padlock it so you don't accidentally edit it, and press # for grid:
- Ctrl-A to "select all" and then click edit paths by node:
- When the nodes appear, click/drag a box to select all the nodes that make the top two corners of the baseplate only, which will also pick up the shadow:
- You can now press the down key repeatedly to lower the top of the baseplate without deforming (squashing) the curve of the corners
- Make sure the top edge is still aligned with the grid (two presses of the down key = one whole grid square lower - so do a number that's a multiple of two)
- Repeat the process on the nodes of the bottom edge, moving it up by the same amount so the baseplate is centred
- If any elements get left behind (like the pale highlight on the top edge and the dark lowlight on the bottom edge) click them individually and use the arrow key to move them precisely back onto the baseplate
- You now have a baseplate that's your chosen dimensions, with the corners having exactly the right curves and the drop shadow exactly right for the theme:
- And you can edit the gradient and add your buttons, etc., in the pictogram layer
Tips on baseplates
drawing a completely new backplate shape is possible, just harder :) We copy the styling of the existing backplates so the new shape fits in. The full size version has these features:
The smaller sizes have these features (note pixel grid):
Having the backplate under the outline, but slighter smaller, does nice things when the icon renders at 100% size on the desktop :)
Small icon baseplate begins and ends halfway through a pixel:
1px black outline (40 opacity) goes on top, starting and ending at whole pixels:
1px highlight goes inside that... looks like this one is a tiny bit too fat :) but it's a fraction of a pixel, it wouldn't affect the exported png:
Creating a custom baseplate
First, here are the detailed instructions for making the 256px background in a new shape - I will do the smaller icons next.
First of all, load an icon template, make the baseplate layer visible, and delete the 256px background. Then draw the shape you want centred in the 256px canvas. It's important that this is a single object, so, if you make it out of multiple objects (I used two circles and a rectangle), select them all and do Path --> Union before you continue:
Now make the baseplate layer invisible and add a gradient. Ideally nick the gradient from an existing icon. Here, I've used the gradient from the keyboard device icon. The darker bit should be at the top:
Next we add the top highlight. Copy your shape, turn the copy to white with opacity 30, and put it exactly on top of your shape:
Copy the white opacity 30 shape and put it on top of that, then use the down key to move it 2px down:
Hold the shift key so you can select both of your white opacity 30 shapes:
Then do Path --> Difference. The second shape will delete the part of the first shape that it overlaps, leaving a 2px highlight that follows the contour of your controller:
Now you repeat the highlight process at the bottom, with some differences. Instead of making shapes that are white opacity 30, you make two shapes that are black opacity 20. Instead of pressing the down key, you press the up key. When you do the Path --> Difference function, it will make the 2px lowlight along the bottom:
Now you just need to add the subtle drop shadow. Copy your background shape twice, put both copies on top of the background, and make them black.
Now use the pixel controls at the top of Inkscape to move both of them down by 1px (you can't use the down key for this because each press of the down key is 2px).
Make the first black shape blur 1, opacity 10. Then, with it selected, press the "End" key to move it to the back of the layer, so it's behind the controller. Make the second black shape blur 4, opacity 20 and press the "End" key on that as well. Both shadow elements are now behind the controller.
Voila! You've turned your new shape into a 256px Yaru background:
Instructions taken from https://github.com/ubuntu/yaru/issues/1951 Made by @ubuntujaggers