Some people accuse me of being a crazy person. Others are wrong. But occasionally the seeming madness of it all will bring about good things.

Last night was a sleepless night in all the good ways; I’m excited for the upcoming Plasma Sprint, and knowing I’ll be packing myself into a cigar tube and flinging myself across the North Atlantic Ocean is too much for me to sleep over. I had promised a commenter (too long ago) I would make green cursors, so I decided to make good on my word. After it took 5 minutes I needed more; and the wafting smell of my bread maker inspired me to make a Bread cursor theme. Once that was done, sufficiently delirious, I sent my weird bready message to the VDG. They appear to have ignored it – a wise decision. They’re busy people doing actual work.

bread

Today I opened up the cursors to see what I had done.  Nothing too terrible, and I decided it was worth polishing them up if just for the larfs. One of the touches was to add a half-pixel white outline between the crust and loaf for contrast.

When I rendered the tweaked cursors, they started to look awful because of how SVG images layer and clamp nearby vectors. Simply put on a vector edge, even if there’s another identical edge above it, both edges will affect their neighbouring pixels as opposed to the upper vector shape ‘blocking’ the lower shape.

sample1
The “desired result” is the result a designer would expect, while the actual result is technically correct.

This had the effect of making the hand of my newly minted bread cursor (with the most edges) look “washed out” because the two lighter inner layers were covering the outline.

sample2

The solution for this problem is to ‘supersample’ the cursors in our build scripts. Supersampling is when you render the image at a much higher resolution, and scale it down to the desired resolution. Instead of going directly from Inkscape to a final image, we first export each cursor to a temporary file which is 4x standard resolution and 2x double resolution. We then scale down and copy that image to the final resolutions.

The end result is going to be the option for us to more easily use sub-pixel detailing in cursors without worrying about losing smoothness; any extra detail may not be noticeable on a day-to-day level – but it’s the polish Plasma users are beginning to expect. Additionally, high-resolution cursors will also benefit because the half-pixel details will become full pixel details, and on a high-quality screens you’ll have ultra-sharp graphics.

breadAnd that’s how bread is helping make Breeze cursors pixel perfect!

Now, super-pixel-perfection isn’t that noticeable so there’s not going to be a rush to update existing cursors; but if one day you quietly notice your cursor is a little bit sharper than it used to be – you can thank bread.

Download The Cursors:
(extract “compiled” cursors to your icons folder to install, or download the source to edit or remix them. Golgari is a green/black theme)

Bread Source
Bread Compiled
Breeze Golgari Source
Breeze Golgari Compiled

Advertisements

8 thoughts on “How Bread is Helping Make Breeze Cursors Pixel Perfect

  1. I really, really want to use these in Plasma 5.2, but no matter where I put them or how I attempt to load them, I can’t. They aren’t visible in the “Cursors” kcp module.

    Am I missing something?

    Like

    1. Check to make sure that you’re loading the ‘compiled’ set under usr/share/icons. If you’re loading the ‘source’ set nothing will happen. You also need to extract them, putting just the archive file will not work.

      Hope that helps!

      Like

      1. The issue is with where Kubuntu 15.04 is looking to pickup cursors from. When I symlinked the “Bread” folder to the same directory that it finds all the pre-installed system cursors in everything worked fine.

        The only feedback I have, besides that the little bouncy bread guy is awesome and the bouncing pad of butter is equally awesome… is that instead of the weird fleshy cursor for the standard arrow, it’d be great if the pointer was more like the end of a run-of-the-mill butter knife?

        Cheers!

        Like

    1. “super sampling” trick works probably becouse you are using a non linear scaling method, not becouse of the problem you pointed…

      to achive pixel prefect things you do pixel perfect vectors 😉 aka wen you draw your vector ou make sure lines are aligned with the final pixel render grid, to make super sharp lines you can use some tricks and fool the way vertor rendering engines work, for example you can place multiple copies of a suf pixel lines on top of each other to reduce the amount of atialasing you get… (try it)
      /me I should do a blog post about this one of this days….

      Like

      1. I’ve used those rendering tricks myself; I’ve had a real upswing in sub-pixel linework in designing mockup applications for the Sprint (which I imagine I’ll be posting within a couple weeks); but it’s not really exploiting the draw engine as you mentioned. I tended to do that back when I did more web-design, and I had small (usually text based) logos.

        The layering of shapes (such as the sharp sub-pixel line trick) is actually the undesirable effect in this situation, since the only sub-pixel outlines I’m using are specifically meant to be extremely subtle. 😉

        On the grid, the only downside to rigidly adhering to the pixel grid is the sometimes ‘robotic’ or artificial ‘feel’ some otherwise organic elements take on. If you download the source you’ll see I align all rigid objects to the pixel grid (or half-pixel grid), and aside from focal points (such as the index finger) and certain edges/corners (the thumb/index corner) I specifically keep organics off the grid.

        That being said, I didn’t just turn the grid off; you can totally find most areas where I purposefully aligned individual curves, edges, and nodes to the grid. A real benefit to not being pixel-perfect in organic shapes is that when you do align nodes to the grid, it gives the illusion of the lines being slightly bolder because the colour falloff isn’t as prevalent; so when you have a knuckle or fingertip which you want to ‘pop’ out for the users’ focus – it’s much more noticeable to make them the only grid-aligned nodes.

        With the Breeze cursors, I remember very specifically wanting to avoid the robotic too-pixel-perfect look, because too many cursor sets have very square, chunky hands where things like thumbs or glove-lines are able to saturate their pixels just as much as the more important index finger. It’s a bit of a pet peeve of mine to see abnormally squared hands and fingers.

        (holy crud – this comment is more informative than my post)

        But! With all the wibbly wobbly out of the way it still brings out the issue of layering multiple vectors on ‘organic’ surfaces. My initial knee-jerk reaction was to re-layer all the cursors so it simply wouldn’t be an issue (crust on the bottom, outline in the middle, surface on top). I could also move the nodes and tuck them underneath the half-pixel outline; but again it’s excessive effort for a small detail.

        The main issue is effort; I could either dedicate the majority of my time on cursors fiddling with layers or nodes to achieve the desired effect on every cursor I create, or I could edit 8 lines of code and have software do it for me, forever. Since all cursors are pixmap-based and I had control of the rendering pipeline I was afforded the chance to ‘cheat’ using supersampling – but I do break out all the same tricks you mentioned when I don’t have control of the output.

        Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s