All the icons have different aspect ratios now. There won’t be some weird arbitrary amount of whitespace to compensate for. If you want to position an icon in the upper right corner of an element, it’s going to go there and look nice and aligned. In Illustrator, it’s an easy move:Īlignment and positioning. Approach #2: Crop to edgesĪgain the actual “size” of the artboard doesn’t matter since you’ll likely be applying sizing through CSS anyway, but the artboard should meet the edge of the artwork on all sides. Since there is an arbitrary amount of whitespace on any given side of any given icon, it’s hard to align things to the edge of an icon or expect a consistent amount of space between an icon and adjacent element. So if you size them all the same in CSS later, all the icons will maintain that size relationship and look good together. You control right in the design of the icon itself how it is sized compared to other icons. You’ll probably be applying sizing through CSS, so size of the artboard doesn’t matter much, but the dimensions should be identical. Here’s my take on the situation.Īpproach #1: Make them all the exact same size I recently met developer Emma Arce at a conference who relayed a very interesting conversation between her team as they were attempting to standardize on something and get this right. It matters very much for front end developers, because if there is no consistency, the positioning of the SVGs will always be a little one-off battle and really hurt the idea of SVG being a useful system. Ultimately it refers to the viewBox in the actual SVG output. The term “Artboard” here is referring to that concept in Illustrator, basically the white drawing area you have for the document. Better learn it earlier than later.There are a couple of different (rational) approaches to SVG artboard sizing. You’ll hear your boss saying “I need this size for this, this size for that”, normal.
Honestly, resizing is a daily work routine for every graphic designer.
Some materials are horizontal and others are vertical, some are bigger, and some are smaller. When I worked for an exhibition organizer, I had to resize the same design for different print materials like posters, brochures, banners, and event T-shirts. The solution is to resize the artboard area and make it smaller. Saving the logo as png or pdf when you want to print it on something is a must and certainly, you don’t want a large area of the empty background. For example, a logo is designed for use in many different presentations, on a business card, company website, T-shirt, souvenirs, etc.
Adobe Illustrator is all about artboards! You can’t create a design without an artboard and often you’ll have to resize it for different purposes.
0 kommentar(er)
