Stacking alterations

With the Icon Editor Graphics Upgrade you can stack alterations on a single icon to have the exact output you require. This includes adding image layers, text layers and adjustments in between.

Lets dive into the option.

Color Overlay

The color overlay alteration lets you colorize your icon. This can be especially handy when using white icons but your Page design requires a different color icon.

Using the Color Overlay function

Replace Color

To replace a color in your icon you can use the Replace Color alteration.

Using the Color Replace function

This alteration comes with a lot of options that you can use to specify exactly what you want to happen:

• The color index; Each color in the image is analysed and a list is kept of the colors that are present in the image the most. You can use this index to select which color you want to replace.
• The color; this is the color you want to be used instead of the color chosen with the index in previous setting.
• The Method; The default method will replace the specified color only. Any color that is almost the same will not be replaced. This means that gradients will not be changed. The Blend Closest Neighbour option will set the colors that are close to chosen color to the closest neighbour color in the set of most colors. The Blend Percentage Mixture will try to keep the small gradients between two colors. In our image above we have used this option and it will create the small gradient between the red and the black border.
• The source; Normally the alteration will affect the image at that point in the alteration flow, but this option allows you to use the original image as base instead.

Color Blend

The color blend alteration lets you color blend your icon. This will give blend all colors with the chosen color. The percentage says how much of the color should be used.

Using the Color Blend function

Gradient Overlay

The gradient overlay alteration lets you colorize your icon with a two color gradient. This cover all the pixels but will respect the alpha channels.

Using the Gradient Overlay function

Replace Color by Gradient

This works the same as with replacing colors but instead you can replace it by a gradient.

Using the Replace Color by Gradient function

Grey Scale

This will convert the icon into a greyscaled icon.

Using the Grey Scale function

Blur

This will blur the icon. This action has three settings which will blur the image to a certain degree.

Using the Blur function

Stroke

This alteration will add a stroke around the edges on the icon based on the location of semi and full transparent pixels. You can set the size of the stroke.

Using the Stroke function

Scale down icon

This will scale down the icon to the selected percentage using the selected scaling method. There are five different scaling methods which will do the scaling just a bit different. This will be useful when using different kind of icons.

Using the Scale Down function

Drop Shadow

You can add a drop shadow to your icon. To make the shadow less hard you can use the softness value. The distance value will increate the distance between the drop shadow and the icon.

Using the Drop Shadow function

Glow

The Glow alteration allows you to add a colored glow surrounding your icon. You can set the size and the softness of the glow.

Using the Glow function

Image Layer

If you just want to add an image below or on top of your current icon you can use the Image Layer.

Using the Image Layer function

Image Layer++

For your every day edits the normal Image Layer provides you with enough functionality but sometimes you need that little bit of extra. The Image Layer++ alteration lets you offset and scale the image as well. This will give you the freedom to place the icon everywhere on the icon where you like. In the example below we have placed the yolo image to the bottom left and scaled it down a bit.

Using the Image Layer++ function

Offset

The offset alteration allows you to offset the whole icon. In the example below we have first scaled down the icon to show the functionality. The smaller version of the icon was centered in the middle but with the offset alteration we have placed it at the bottom of the canvas.

Using the Offset function

Text Layer

The text layer can be used to add text to the icon. You can use the fonts that are provided by Touch Portal and you can scale and place the text whereever you want on the icon.

Using the Text Layer function