Quick Tutorial - Round Buttons and Icon Placement in YIPI

In the example below, you will see how to create a perfectly round button in YIPI. The idea is simple - create a square button, then set the border radius to half of the button dimensions. For instance, a 100x100px button with a 50px border radius would create a circular button.

Icons in YIPI can be a little tricky to understand at first, but they are pretty simple. The icons are vector/font based, so that they can be scaled to any size. So when you place an icon on a button, you change the size of the icon by changing the button font size. This also ensures that the icon and text remain in similar proportions.

Another note about icons on buttons, they can only be placed on the top, bottom, left, and right sides of a button - not directly in the middle. To center an icon vertically, you can simply place the icon on the top position of the button, and then adjust the font size until it appears vertically centered.

See below or examples of these techniques.

Originally published 4/25/2018