R
R
Rou19972017-01-16 01:38:44
Design
Rou1997, 2017-01-16 01:38:44

Adobe Illustrator: How to add transparent padding around the exported element when exporting to PNG?

Padding is very important in any UI design.
For example, you drew a button icon, you plan to use it on mobile devices, and it is quite small, if you leave it as it is, it will be very difficult for your fingers to hit it, and it would not be very convenient on the desktop either, so in any case you have to add empty transparent padding, known as padding.
Or even simpler - you draw a CheckBox, it has two states, checked and normal, in the checked state there is a checkmark that goes beyond the square of the icon background, and in normal there is no checkmark, without indents it turns out that the size of one picture will be larger than the other, and the programmer will have to come up with a "crutch" to position correctly.
In any well-thought-out design, padding must be taken into account in advance, this is the work of the designer.
But in Adobe Illustrator, I did not find a convenient enough opportunity to do this.
Moreover - I came up with the idea of ​​using a rectangle without a fill and a stroke, grouping it with primitives and exporting it, but Adobe idiots decided that I shouldn't do this, as a result, the error "could not export an empty picture".
So far, I see only one solution - artboards, one for each icon, but they are extremely inconvenient to create, and they interfere.
Are there better options? Or just write a script to quickly generate artboards?
Due to the negligence of designers, I am forced to work in excess of the norm, so I don’t have the strength and time to delve into this, so I will be very grateful if you tell me how to do it, but if you don’t want to, then an empty drawing with you. :)

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergey Konstantinov, 2017-01-16
@zahmTOD

Create a new artboard of the required size; place the element on it as it should; export this particular artboard.
7f02672a5842453d919a6600e724e964.png6cdfd34a9751422f83554634374366bf.png

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question