The Making of Octicons

Article: Source

In our last post we announced Octicons, our new icon font. We put a lot of work into the font and gained a lot of knowledge in the process. With five different designers working to make it happen, this was one of our bigger collaborations. We thought we’d detail how we built Octicons and what we learned along the way.

Making the Icons

In most cases, a designer would begin to work in Illustrator to create vector icons, but we chose Photoshop as our start place. From the outset we knew we wanted to design icons for specific sizes, so optimizing for those pre-defined pixels was paramount. With the recent release of Photoshop CS6, Photoshop has become a fairly powerful vector tool for pixel projects.

One handy feature that is a little hard to come across, but is great for creating icons is a 2-up view of a file. With the application frame visible Window > Application Frameyou can create a second instance of your working documentWindow > Arrange > New Window For …psd. After that you can have the windows sit side-by-side with Window > Arrange > 2-up Vertical. Each window is a view of the same document, but can be moved and zoomed independently. Best of all, when working with paths in one, the path outlines and handles don’t appear in the other. This lets you work zoomed into one and at 100% to proof your icon in the other.

In Photoshop CS6, Adobe introduced pixel snapping vectors. This is an amazing feature if you work with paths a lot. From time to time, however, it’s necessary to turn this feature off. There isn’t a hotkey that does it, but it is possible to record an action for turning this setting on and off which can be hotkeyed.

With Photoshop set up for maximum icon awesomeness, we began to audit all the icons on our site. We created new Octicons for each, as well as adding a few extras we thought might be useful down the road.

Building the Font

Design is in the details. With all our icons designed, it was time for us to create our font. We decided we needed two sizes of each icon. One size, 16px, would be optimized for its exact size. At 16px the details are limited so every pixel was important. Since the icons were designed for such a small space, they don’t really scale well. To take care of that our second size, 32px, would be designed with more detail so that it could be scaled up for many purposes.

Having planned out or icon strategy, we embarked on the adventure that was putting together our font. For this, we used an application called Glyphs.

To begin, we needed to set up our font file so that it would work with our specific sizes. Since a font technically only has one size, we decided to set it up to be optimized for 32px, with the 16px icons actually scaled down from larger versions.

In the case of our icon font, the font’s metrics include a em width, cap height, and grid. This roughly translates to the idea of width, height, and resolution.

We initially tried setting our cap height, x-height, and em width to 32 to make a 32x32 unit square. This technically worked, but we found when exporting the font any nodes not placed on an exact integer unit would be shifted to the nearest unit. This resulted in a lot of ugly icons.

With this knowledge in hand, we decided to adjust things a bit. Using a 2048x2048 unit square, we were able to ensure that when the shifts occurred during export the effect on the overall shape was minor. This was mostly caused by being able to change the ratio of the grid to the total size of the font character. When the nodes snapped to the 1 unit grid in a 32 unit square, the jump was significant. With a 1 unit grid in a 2048 unit square, the jump was far less noticeable.

Here are our final metrics in Glyphs.

The flow after we got setup was as follows.

1. Our icons were built in Adobe Photoshop.

   Design your icons in whatever you’re comfortable with. Building it in Photoshop did add an extra step, but we preferred the control it gave us.

2. We scaled in Adobe Illustrator to 2048 units.

   We first opened the Photoshop file in Illustrator. When copying the paths out of Illustrator, Glyphs seemed to use Illustrator’s coordinates for positioning. Having all the icons on one sheet, this caused alignment issues when simply copying and pasting icons into Glyphs.

   To resolved this, we created a second 2048x2048 document. To get Illustrator to match Glyphs’ grid, we had to shift the ruler zero point -1792pts. We then copied in a character (enclosed in a 2048x2048 square) into the new document and ran an action that scaled it up to fill the document and set it to (0,0). From here we were able to copy the vector path into Glyphs in the correct position.

   This process was repeated for every character. In the end, each character fits a 32px square, sitting 4px below the baseline to line the icon up with any text it is pared with.

3. We exported our font as an OTF.

   

   You may ask yourself why we chose 2048 as our magic number. We did quite a few tests at other sizes like 512 and 1024. What we found is that the size of the characters didn’t have much of an effect on the file size. What did change it was the grid size ratio. The larger the grid size (fewer grid squares), the smaller the file size got. At 2048 units, we had much more flexibility to adjust the grid scale without impacting the shapes of the font. In the end we chose a grid of 32px, which resulted in a 20% smaller file on export than a grid of 0 units. Larger grids like 64 units and 128 units, produced files that, while slightly smaller, didn’t reduce the file size enough to make it worth the loss of vector quality.

4. We uploaded the exported .otf file to the Font Squirrel @font-face generator.

   Since we didn’t want any of the standard characters and used our own special unicode characters, we specified our own subset range, and turned pretty much everything off. You can grab our config settings here.

With our font built and ready for the browser there were a few items left we had to polish before calling the icons complete.

Sub-Pixels

The grid matters! Each one of the grid squares above represents a pixel in Glyphs. This is equal to 128 units in the app (We actually used a 32 unit grid, but this helps illustrate our point). When the lines don’t line up with this grid, the font rendering engine tries to compensate. It does this by aliasing which renders the half pixels as grey pixels. The Create New Repo icon above is mis-aligned. The result is below.

Not Aligned

Aligned

Fine Tuning

The last thing our font needed was a little something-something to adjust how the font was aliased. WebKit’s -webkit-font-smoothing property was our answer.

Subpixel-antialiasing

Browsers use subpixel rendering by default. This looks great for text, but left the icons looking a little heavy as a result of the extra pixels it adds.

No antialiasing

By turning off font-smoothing entirely, we could preserve every pixel perfectly. This was great for straight lines, but curved or angled lines ended up looking blocky and pixelated.

Antialiasing

Antialiased text was a good middle ground. It provided both the sharp edges when the font was built correctly, and smooth, lightweight curves when they were needed.

While only a feature of WebKit at this point, we’ll update the icons to support font-smoothing in other browsers as it becomes available.

Solar Powered Tree Provides Light to Poor Neighborhoods

Article: Source

Designed as part of Moma’s exhibit on experiments in responsive textile architecture, SonUmbra is a bright and energetic tree built to function completely on solar power. By day, the structure serves just like any other natural tree, standing tall and providing shelter from the sun. By night, the light emitting fabric that forms the branches glows with patterns of light. The creator, London-based design firm Loop.pH, states that they strive to “create a new design practice reaching beyond specialist boundaries, mediating between digital & biological media and facilitating participatory design and urban crafts.”

The ultimate goal is for the piece to stand as a light source in towns and villages that cannot afford electricity. However, in the development stages, the artists realized a creative opportunity to construct an interactive piece in which light and motion coexist. The model that stands in Mowbray Park, Sunderland, is designed to react to the activity of people in the surrounding area. As visitors move around the structure, the light emitting patterns react to the sounds and movement and create an awe-inspiring geometric light show. The designers say, “Wandering unaware or actively gravitating towards Sonumbra, each person plays a part and becomes a note in a unique composition of light, sound and space.”

Croatia's Solar Powered Interactive Light Installation

Article: Source

Croatian architect Nikola Bašić’s LED light installation titled Saudação ao Sol, translated as Greeting to the Sun, is a remarkable piece of public art that efficiently incorporates technology. The circular floor installation consists of three hundred multilayered glass plates encasing solar cells that absorb sunlight during the day and come alive at night, putting on a spectacular light show. The animated light piece adds another layer of beauty to the scenic coastal town of Zadar, Croatia.

More than just an automated light show, the installation is an interactive experience. It is designed to respond to Bašić’s other sound installation called Sea Organs, also located within the area. The light effects on the surface of the 22-meter diameter disc reflects the “rhythm of the waves and the sounds of the Sea Organs" through the colorful, geometric patterns that sweep through the energy efficient panels.

The solar powered installation also proves to be an advocate for clean energy, showcasing the capabilities of renewable sources of power. Greeting to the Sun stores enough power to provide a sufficient supply of electricity to light the entire waterfront for a third of the cost.

The endeavor started on Thursday night and went on until Sunday night, with very little sleep to no sleep. The only thing that kept us going was pure love of the art and adrenaline. One thing that stood out the most for me, while I was shooting, was the people of Los Angeles. It was so powerful to see the excitement on peoples faces and the pride of their home town. No matter how many times I would see the Shuttle it would never get old. Source

http://livetools.uiparade.com/index.html

Multi-touch Fluid Pong. Light tracking movement. Source 

Interactive PingPong. Light tracking movement. Source 

Clean Border Radius

Article: Source

When you have and element within another padded element, both with different backgrounds and both with border-radius, make sure the inside element’s border-radius is a bit less than the outer element.

Otherwise it makes kind of a too-thick “hump” around the edges.

Both have border radius of 20px;

Inside element’s border radius reduced to 17px

There probably is some fancy math you could do to figure out the perfect values, but I find eyeballing it works pretty well.