Blog

How to resize an animated audio knob for your GUI

  • 0 comments

How to resize an animated audio knob for your GUI

If you are reading this, you must be wondering how to resize the knobs when you need to. Good news is it’s pretty easy to do and here is how.

What you need

  1. One shot animations, sequenced images in one folder.
  2. Photoshop

 

This process will take 2 steps

Step 1 Create an action in Photoshop
Step 2 Apply this action to GUI assets

Step 1

We will be using Adobe Photoshop feature called Actions.

To create one you need to

1. Open any image from the resource folder in Photoshop.
2. Open Actions window by navigating to Window/Actions.
3. Create a new set by clicking the Folder icon.
4. Now you can create an action itself, just press the button Plus icon.
5. Here you need to come up with a name for your action and define the set.
6. After you hit the Record button everything you do with this file will be saved to the action file which will be used to replicate this action on every image in the sequence.


Here is an example of the downscaling action:
After you hit the Record button, navigate to the Image/Image size window where you can enter the exact size you need for the image.

Enter the size and click OK.

After that, you should stop the recording of this action by pressing stop button
on the action panel.

Your action file is ready now and you can close the file without saving the changes you have done.

Step 2

To apply the action now you need to navigate to File/Automate/batch and fill the following fields.

1. Set: define the set of actions
2. Action: define the actual action
3. Source: Define a source folder
4. Destination: Define destination folder, select Save and Close if you want your files to be saved in the source folder.
5. After you hit the OK button, Photoshop will apply your action to all images in the folder. When this process ends you will have your animations with the proper size.

As you see, everything is easy and can be done in just a couple of minutes. 
By Artem Bilashenko
Share this