You can set its properties choosing Preferences → Guides & Grid. Illustrator’s grid is placed on the workspace starting from global ruler origin. The objects we draw are placed in an artboard according to the Artboard ruler origin (in the screenshot below, you can see that the two squares have the same coordinates values even if they are placed in two different artboards).įor this job, we will use the Artboard ruler, since it is more suitable for glyphs alignment.Artboards are placed in the canvas according to the Global ruler origin.In short, using the Artboard ruler system: Otherwise coordinates refer to the origins of the artboard which contains it. If you are using the Global ruler, every object you draw on any artboard is drawn in relation to that single origin point (i.e. In almost all other cases, you will use the artboard ruler according to View → Rulers → Change to Artboard (or Global) Ruler option. When you’re positioning new artboards using the Artboard tool, you will always use the global ruler. In addition every artboard has its own origin point and rulers as well. Illustrator workspace is composed of a canvas that contains one or more artboards.Īrtboards are placed on the canvas starting from a point called the Global ruler origin. Before doing that, let’s take a quick look at the way the Illustrator coordinates system works. We want it to start from each artboard origin (the top-left corner) and to divide the artboard into a 8×8 checkerboard. Note that you can start create all the artboards you need using the Number of Artboards option: I prefer to add artboards as I need them, but there is no reason why you can’t create all your artboards first. We can now start creating a new 64圆4px Illustrator document: The artboards can be rearranged, renamed and can be exported as standalone SVG files (which is precisely what we need for IcoMoon).Įach artboard can also have independent axis coordinates, that will be very valuable for objects alignment, as we will see later. Illustrator artboards are very useful for this job: you can draw each glyph in a different artboard, keeping each in a single file. Of course, this is not a ‘set-in-stone’ type rule: project needs and experience may change on a case by case basis.įor this article, I chose to draw my icons with a stroke of 8px, without fill and set inside a grid of 64圆4px. Scaling up or down from this size is generally successful. Instead I’ve found that a grid of 60-80px side is often good for me. My tip is to not draw directly at your target size (for example 16x16px) or at very big sizes either. You can then to decide on a grid size for your glyphs. It’s also very useful to sketch your font before drawing, also a very rough sketch (like the one below) will help you to find ideas for all the symbols you need. It’s no use designing finely-detailed icons that don’t work at lower resolutions. Find your design styleīefore you start drawing, you need to define style properties for your glyphs such as stroke sizes, grid proportions and so on.īegin by doing some readability test at different sizes and build a template you will use to draw all your glyphs. To build your own icon font, the first step is to design icons – we will use Illustrator for this task – and then save them as SVGs. Each allows you to build a font by either ‘cherry-picking’ pre-built icons from public libraries, or by uploading and compiling SVG files you’ve prepared yourself. Traditionally font creation had been known as a difficult and demanding task, but thankfully building icon font sets, has become considerably easier thanks to easy online tools such as IcoMoon, Fontastic, or Fontello. We’ll cover the use of SVG in another article. There are two widely-used methods to add a set of icons to your projects: In these cases you’ll want to draw a new icon set from scratch. Or you may just want to better coordinate the design of your icons with the other design elements of your project. On some occasions, however, you may need more specific glyphs not included in a generic set. You can find many free or commercial icon sets on the web, and they are often included in major CSS frameworks ( Bootstrap 3 Glyphicons is a perfect example). An icon system can often become central design element in your web project.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |