Question: What does pixel alignment mean for the icons?

[wilwarindi]

I've submitted a couple pull requests, but looking around I noticed there's a requirement for doing them aligned to the pixel grid. (I request you add this requirement to the contribution guide so new people know about it beforehand, because it doesn't say it)

I've tried to figure out what that means, but I need some clarification:
-So, every single element/path needs to be grid aligned. Does that mean they need to be aligned on all 4 sides? Or do they have to be aligned on two sides (e.g. the left upper corner)?
-I assumed could import the paths from one icon into the next and resize. Is that not possible? Do I need to make every icon from scratch, without importing any elements? Or is there a particular way to resize paths that works best?

Please let me know so I can modify things accordingly.

[achadwick]

Hi, do you know about the Papirus wiki, up there on the Wiki tab? There's a page there that covers pixel alignment well in the first bit.

For now, ignore the last editor on that page. I didn't write it, I just found it recently and corrected a couple of typos and fixed the flowchart diagram. I think the flowchart is a bit prescriptive though: I like to start at 64 pixels, switch to the difficult 16 pixel icon next, go back to the 64 and apply what I've learned, and then scale down at 3/4 (48), 1/2 (32), 1/3 (22 and 24, more rarely 3/8). Pick a workflow that suits you when you know what you're doing.

A worked example

(I'm hoping to add this to the wiki pages, commends welcome!)

I like to work with an additional grid aligned to half-pixels for fine work, and I edit the default one-pixel grid so it has its major lines either every 4 or every 8 pixel, and so that there's one major line intersection in the middle of the icon. The half-pixel grids allow me to lay out one-pixel width lines with the Bezier tool, and sometimes allow me to snap shapes to nice points when downscaling. Here's what I did for the 22 pixel size of the MSX rom icon I put in a PR recently, and how it renders. Sorry for the size.

Note how verticals and horizontals of the file icon outline butt up against the whole pixel grid, and how the outer edge of the "MSX" try to match a whole-pixel edge where they can. The "M" and "X" are horizontally symmetrical, and the "X" is vertically symmetrical. I've tried to "surround" most of a pixel in various places to lead the eye through corners in the "M", rounded turns in the "S", and crossings in the "X". I also used the half-pixel grid (pink centre dots) to align the inner angles of the "M" (sometimes called "groins" by type nerds, I think). The "X" is more free, but its inner angles at the crossroads are on one axis of the half-pixel grid too.

Purists might complain about the inner blur inside the icon. The eye won't see that, and it gets the letter weight (boldness) correct next to the other sizes.

Key points:

• It's the outer outlines of a shape as a whole that matter most
• Make it hit as many horizontals and verticals as you can, especially at the outer edge
• Inside a complex shape, alignment of inner lines matters a lot less at smaller sizes
  • But try to make certain forms symmetrical, and align tight inner angles with pixel centres
  • Symmetrical forms always need pixel-symmetrical renderings and half pixel alignments
• Try to maximize the amount of ink that the antialiasing will use for your shape in certain key pixels.
  • Corners, ends, bends, inner lines
  • This means putting as much of the shape as you can within one square pixel, to make that pixel as bright (or as dark) as you can

I've offset the pixel-aligned grid by (-1, -1) and set it to every 4 on this 22 pixel icon so it's the same grid as the 24 pixel icon. I don't do the offset for any other size, but I do use power-of-2 (doubling) major lines on everything so I know where I am, and where a point is likely to be at a smaller size.

[achadwick]

(Another section I wanna dump in the wiki)

Magic angles for pixel-perfect diagonals

It's worth learning to spot the following angles in Inkscape and match them to their specific horizontal and vertical ratios. That's because regular antialias patterns look nice in pixel renderings. Half-pixel grids sometimes have to be used for icon design, and they make this harder to do visually.

Ratio	Octant1	Octant2	Octant3	Octant4
1:1	45	45	135	135
3:4	36.87	53.13	126.87	143.13
2:3	33.69	56.31	123.69	146.31
1:2	26.57	63.43	116.57	153.43
1:3	18.43	71.57	103.43	161.57
1:4	14.04	75.96	104.04	165.96

The table is organized by first octant angle, but the quality and usefulness of the line you get depends more on the largest term in the ratio column. The bigger the number, the harder it is to visually distinguish the line from its antialiased form, and the more space you have to give it. As a guide, avoid the ratios with a larger term of 4 unless the line is over 8 pixels long, and avoid ratios with a 5 or more as the larger term.

[achadwick]

I'll add a link to the wiki the Contributing section of the README in a PR. I do think the wiki pages are useful, and I'm considering adding the sections I wrote above to them as well.

@wilwarindi, how do you feel about this draft? It's on the drier and more technical end of it, admittedly, but I hope it's useful info and answers your question a bit.

[achadwick]

I've added https://github.com/PapirusDevelopmentTeam/papirus-icon-theme/wiki/More-advanced-icon-editing to the wiki as well. I hope it's useful!