![]() Gridline every 10pt, with 10 subdivisions Snap to grid as needed Select all your glyphs in Glyphs mini, set widths to 2000 upm Choose font info in glyphs mini Ascender/caps height to 2000, giving you a perfect square for each glyph Icon drawn in AI, with a 20pt by 20pt box drawn around it as a bounding box Scale it up to 2000x 2000, note the little chain lock ensuring proportional scaling Copy the icon, Double-click a glyph in Glyphs Mini, Paste into the glyph window. Screenshots: New AI file, 20pt x 20pt with points as units Keyboard increment set to 1/8th of a point, so I can nudge vectors between pixel edges as needed. Resizing in glyphs was not something I wanted to learn how to do, so I returned my workflow to Glyphs. When I decided to try 2000 upm, so that it mapped more (theoretically) naturally with the 20pt x 20pt AI designs, my glyphs all got cut to 50% of their size. glyphs file I created in Glyphs, I was stuck with the 1000 upm I was originally working with. The major issue was that GM doesn’t allow you to change the font’s UPM settings so when I opened the. Although I started the font in Glyphs, bringing it into GM was an eye opener. ![]() I had a trial version of Glyphs, but decided to spring for GM for the sake of consistency. Joen Asmussen, who I can’t thank enough for all his help on this, designed the icon font you see at, using GM and following the octicons article pretty closely. So I worked in points.Īnother oddity was the Glyphs vs Glyphs Mini (GM) inconstancies. The glyphs article points out that 1 ai point=1 glyphs unit. Do we really need all those complex numbers? As for the article, while trying to draw directly in Glyphs may be the best way, it’s gonna be tough to put aside my AI experience to learn a new method for drawing vectors until I have lots of time on my hands.Īfter trying all sorts of settings, I came to the conclusion that 20x20pixel icons should be designed in a 2000×2000 upm font. I also got nervous when scanning through the article at all the weird numbers: 2048, 2052, -17something. I decided 20×20 was a much easier canvas to work within, and as long as I left a pixel or two breathing room around the icons, they look great in a 16×16 space-not too big, but not leaving out important details in the name of absolute limits. It’s a good target, but it really does overly constrain design. For some reason, 16×16 is this imposing number that icon designers hold sacred. The tutorials I read through, and were really helpful, but as I said earlier, there are fundamental flaws with those workflows, at least as far as I’m able to incorporate them into mine. If I click/dragged an anchor over a pixel, then dragged it back, it would become sharp again. I would copy/paste a shape from AP to AI, and my perfectly sharp edges would become fuzzy, even though the paths were exactly in the same place. That is, if you draw a rectangle with the edges half-way between the edges of a pixel, in Photoshop, you might get a different grey value than if you did that in Illustrator (AI). In Illustrator, vectors don’t anti-alias the same was as they do in Photoshop. The move to vector as the final source has been really weird and challenging. I can click on an anchor point and nudge it with the arrow keys, getting sub-pixel placement just right and having absolute control over the end product. Using a split window, I can zoom in on one window and see the actual size icon in the other. When I design icons in Photoshop (AP), the end goal is a png sprite. So I set out to find the perfect workflow for me, and here it is. There are quite a few resources on how to do this, but most of the ones I’ve read, although I’m sure worked for some, went against a few of my own design principals. This even with help from Mel Choyce, Joen Asmussen and the rest of the WP design team. This document discusses glyphs in WPF, but the description of the indices format is applicable to glyphs in Silverlight.The dashicons font created for the mp6 plugin has pretty much taken up all of my time the last few weeks. NET SDK: Introduction to the GlyphRun Object and Glyphs Element. For example, to apply an advance spacing of 80 for each character in the Unicode string "Hello", the Indices value would be ",80 ,80 ,80 ,80 ,80 ".įor more information see this document in the Windows Presentation Foundation (WPF) area of the. ![]() In this case you would always use the Unicode string for the true indices and leave GlyphIndex blank in each index point. The most relevant purpose for the Indices property in Silverlight is to use it for spacing the characters within the specified Unicode string, rather than for full specification of each glyph. Usually used to attach marks to base characters. Offset relative to glyph origin to move this glyph. Placement for next glyph relative to origin of this glyph. ![]()
0 Comments
Leave a Reply. |