![]() ![]() When copying the paths out of Illustrator, Glyphs seemed to use Illustrator’s coordinates for positioning. We first opened the Photoshop file in Illustrator. ![]() We scaled in Adobe Illustrator to 2048 units. Building it in Photoshop did add an extra step, but we preferred the control it gave us. The flow after we got setup was as follows.ĭesign your icons in whatever you’re comfortable with. With a 1 unit grid in a 2048 unit square, the jump was far less noticeable. When the nodes snapped to the 1 unit grid in a 32 unit square, the jump was significant. ![]() This was mostly caused by being able to change the ratio of the grid to the total size of the font character. Using a 2048×2048 unit square, we were able to ensure that when the shifts occurred during export the effect on the overall shape was minor. With this knowledge in hand, we decided to adjust things a bit. 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. We initially tried setting our cap height, x-height, and em width to 32 to make a 32×32 unit square. This roughly translates to the idea of width, height, and resolution. In the case of our icon font, the font’s metrics include a em width, cap height, and grid. 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. To begin, we needed to set up our font file so that it would work with our specific sizes. For this, we used an application called Glyphs. Having planned out or icon strategy, we embarked on the adventure that was putting together our font. 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. Since the icons were designed for such a small space, they don’t really scale well. At 16px the details are limited so every pixel was important. One size, 16px, would be optimized for its exact size. We decided we needed two sizes of each icon. With all our icons designed, it was time for us to create our font. Building the Fontĭesign is in the details. We created new Octicons for each, as well as adding a few extras we thought might be useful down the road. With Photoshop set up for maximum icon awesomeness, we began to audit all the icons on our site. 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. From time to time, however, it’s necessary to turn this feature off. This is an amazing feature if you work with paths a lot. In Photoshop CS6, Adobe introduced pixel snapping vectors. This lets you work zoomed into one and at 100% to proof your icon in the other. Best of all, when working with paths in one, the path outlines and handles don’t appear in the other. Each window is a view of the same document, but can be moved and zoomed independently. After that you can have the windows sit side-by-side with Window > Arrange > 2-up Vertical. With the application frame visible Window > Application Frame you can create a second instance of your working document Window > Arrange > New Window For …psd. 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 recent release of Photoshop CS6, Photoshop has become a fairly powerful vector tool for pixel projects. From the outset we knew we wanted to design icons for specific sizes, so optimizing for those pre-defined pixels was paramount. In most cases, a designer would begin to work in Illustrator to create vector icons, but we chose Photoshop as our start place. We thought we’d detail how we built Octicons and what we learned along the way. With five different designers working to make it happen, this was one of our bigger collaborations. We put a lot of work into the font and gained a lot of knowledge in the process. In our last post we announced Octicons, our new icon font. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |