How do I resize an icon?

Animaticons are designed at 512×512 pixels, which should be large enough for most applications and high-density displays. If you want to resize the image, follow these steps:


Method 1: Resize in Photoshop

This method changes the resolution of the original icon. You might need to fiddle with the settings to get the output right depending on the icon you’re resizing and the output dimensions.

ps-image-size

Tip: For best results, use half increments of the original when scaling (Ex. 512×512, 256×256, 128×128)

When you’re ready to save, select “Save for Web and Devices” from the File menu. Select GIF, and the desired number of colors. Be sure to check the Transparency, Matte, and Animation Options at the bottom of the dialog. Click “Save” and save the file as a new name.


Method 2: Resize in HTML/CSS

This method retains the original icon resolution and forces the display size to be smaller using code.

With HTML

<img src="path-to-your-folder/animat-icon-name.gif" width="256" height="256" />

With CSS

<img class="icon-image" src="path-to-your-folder/animat-icon-name.gif" />

.icon-image {
    width: 256px;
    height: 256px;
}

Tip: Almost all smartphones and tablets have retina/high-density displays. That means that lower resolution graphics will look blurry on these screens. To fix this, use a double size image and scale it to half of the dimension.