Jump to content

Welcome to Smart Home Forum by FIBARO

Dear Guest,


as you can notice parts of Smart Home Forum by FIBARO is not available for you. You have to register in order to view all content and post in our community. Don't worry! Registration is a simple free process that requires minimal information for you to sign up. Become a part of of Smart Home Forum by FIBARO by creating an account.


As a member you can:

  •     Start new topics and reply to others
  •     Follow topics and users to get email updates
  •     Get your own profile page and make new friends
  •     Send personal messages
  •     ... and learn a lot about our system!



Smart Home Forum by FIBARO Team

[TUTORIAL] - Using GIMP to create basic icons


Recommended Posts


I (foolishly :-) ) offered to outline how I create icons using GIMP so here goes...


Disclaimer - I am not a graphics designer and I'm sure there are better ways to do this but this is what I do

if you are a graphics designer - please be kind :-)



Using GIMP to create a Fibaro icon (128 x 128 px png with transparent background)

This is about working with images that are already created.

It’s important to remember that the background in both the webui and apps is dark so I dark image will probably not work well


I always start my research on the internet for an png image that has a transparent background

Failing that I try and get one with a white background with sharp edges (high contrast) to the background

Be sure to observer image ownership rights and use only those that are free to use


Let me take a couple of examples 



Sonos Soundbase


Google search with images


Please login or register to see this attachment.


The first one on the second line looks promising. Click it


Please login or register to see this attachment.


The checker board pattern indicates that this has a transparent background

Right click and save and you have a 400 x 400px png image with transparent which is perfect

It just needs to be scaled


Download the image

Please login or register to see this attachment.


Open image in GIMP

There are two dialog boxes that are useful and sometime get hidden or closed


Toolbox – selection, painting tools and lots of other options


You can find this under the Window Menu in GIMP


The second one is the Layers and Gradients




You’ll find this under the following menus in GIMP

Windows – Layers and Gradients


Ideally you should have these two open when you work in GIMP


Our example image just needs to be resized

Click Image – scale Image

Change the size (400 x 400) to 128 x 128px

Then we need to Save

Click File and either .

  • Export – and add a name
  • Overwrite– to save the file with the original file name



Give it a name and location and leave the png file extension and leave the final dialog box default settings


Please login or register to see this attachment.

Click Export



If you select – Overwrite , remember to discard changes as you save ( otherwise the image will close with no changes)




 .. and that’s it – you now have a HC2 icon





The second image is also transparent png but an odd size (425px x 331px) and we want to remove part of it

There are lots of ways to do this and I am not a graphics designer but this is the way I would do this


Starting Image here



Open in in GIMP

The image is right out to the edge so I want to create some space and I do this by adjust the canvas size

The canvas is what the image sits on and adjust this will not scale the image.

If the canvas is reduced it may drop the image


So lets adjust the canvas to start getting rid of the text

Image – Canvas Size, try 250 wide and if you ignore the text it approximately centers the battery image in the middle. Click center to shift the image and it should look like this


Please login or register to see this attachment.


Click resize and you see this




Lets get rid of the text

On Toolbox. Click eye dropper



Click this and clikc somewhere on the grey

And this selects the grey colour

Click Paintbrush



 And start to paint the grey over the white text and fill in the two top corners with grey ( as rounding is a bit beyond this small tutorial)





We need to get rid of the lower part of the canvas

Click Layer – Layer to Image Size




So now we have an image we need to resize into an icon


I like a little space around my image so adjust the canvas

Image – Canvas Size, enter Width 450 and height 450

Click Center and Resize

This gives us a square image with a transparent background canvas




Now we need to scale to 129 which is what the HC requires

Image – Scale Image

Enter 128px x 128px to resize




And then export or overwrite under File and you end up with this icon that can be used in the HC2



The last example is using a jpg image that is not transparent

This may not work with some images if the background color bleeds into the image too much


Lets take this final image of a box - white background




Open In GIMP

We ned to make the background transparent in a step called Colour to Alpha (alpha layer is the transparency in an image)


Under Tools – select Colour to Alpha

The colour that it will turn transparent is White and you can see the preview


Please login or register to see this attachment.


Click okay and you see the change


Next we need to make it square with a Canvas Size (under Image)

Image is 724 x 665

Adjust height to 724 and select Center to square it


Next resize it as above 

Image – scale Image to 128 x 128 and export or Overwrite

And we have another icon read for HC2


Please login or register to see this attachment.


If you have started with a jpg – then complete the same steps and when it comes to Export, select Export as a png


Please login or register to see this attachment.






Now one for you 


Take this image 



 and turn it into this icon that is HC2 ready using the techniques above




Hopefully this helps you in creating your own icons





Edited by AutoFrank
Link to comment
Share on other sites

I could never work out that colour to alpha bit so that solved another puzzle for me .

Thanks Frank

Edited by Jamie mccrostie
Link to comment
Share on other sites

  • 2 weeks later...



Works perfect!

I use Gimp from time to time, but am not a Gimp power user. 


Good stuff I find are saved as PDF:s in my archive. This tutorial is saved... :)




Link to comment
Share on other sites

  • 4 weeks later...
  • T.Konopka featured and pinned this topic
  • 4 weeks later...
  • Topic Author
  • On 7/27/2017 at 10:00 AM, Captain Chaos said:

    Thanks for sharing, will give this a go today!

    How did you get on @Captain Chaos


    Any suggestions for improvements ? 

    Link to comment
    Share on other sites

    • 4 weeks later...
    • I.Srodka unfeatured and unpinned this topic

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Reply to this topic...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.


    • Create New...