The Icon Editor Graphics Upgrade explained

Explaining Graphics Upgrades Touch Portal

This guide will show you everything you can do with the Icon Editor Graphics Upgrade. The Icon Editor Graphics Upgrade allows you to enhance your icon without the need of an external photo editing application. Touch Portal offers a great set of alterations that will allow you to make the perfect icon for your button.

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:

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


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

Using the Blur function


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
Some icons will extend to the side just as the example above, this will not create a stroke on the entire icon. One way to fix this is to use the scale down alteration first to scale it down and then apply the Stroke option.

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


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
You can use this alteration to add a background image like a button. You can then copy this and apply it on multiple other images to quickly add a background layer or a foreground layer to your buttons.

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


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

Back to Guide Overview