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!

 

Regards,

Smart Home Forum by FIBARO Team


[TUTORIAL] - Using GIMP to create basic icons


AutoFrank

Recommended Posts

Hi

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 :-)

 

INTRODUCTION

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 

 

EXAMPLE 1

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

594bed770166d_Image3.png.6ec0fe48a14f12067d7075bd01acab44.png

You can find this under the Window Menu in GIMP

 

The second one is the Layers and Gradients

 

594bed773c479_Image4.png.370b186c7319bca25e317daed41a4d88.png

 

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

 

Export

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

 

Overwrite

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

  

594bed797692d_Image6.png.49d55a8253d4c56d04a1bf198e86596c.png

 

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

 

594bed7e61fdb_Sonos-HC2.png.9c0eee39d16b6dc09abc283ccdc05983.png

 

EXAMPLE 2

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

594bed6ecd107_Battery-Raw.png.e2d1beae2518deb2a5104fd962ddfc63.png

 

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

 

594bed7b37a0d_Image9.png.222bb158d285e5834e0553e1afd5304a.png

 

Lets get rid of the text

On Toolbox. Click eye dropper

 

eyedropper.PNG.71112b3444b0336a215e5f320934c369.PNG

Click this and clikc somewhere on the grey

And this selects the grey colour

Click Paintbrush

 

Paintbrush.PNG.654ec3ec7762fed712b193d59e243a65.PNG

 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)

 

 

594bed7b66edc_Image10.png.a125580b61c763fca973413faf1f6a46.png

 

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

Click Layer – Layer to Image Size

 

594bed7b8813c_Image11.png.a57c7865223f680426c8a0c89eca6ee0.png

 

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

 

594bed7bb0dfd_Image12.png.a3f8c4803d7d66f2dbf3d9c46889f288.png 

 

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

Image – Scale Image

Enter 128px x 128px to resize

 

594bed6e855f1_Battery-HC2.png.4abb470a61fbab4208f65f8448c0c1ce.png

 

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

 

EXAMPLE 3

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

 

594bed7220211_Box-Raw.png.e2624adec15893060ff65905f30cde77.png

 

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.

 

 

 

EXAMPLE 4

 

Now one for you 

 

Take this image 

594bed7e4706b_Power-Raw.jpg.c136b27e5fb880f7657920e4c31497b1.jpg

 

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

 

594bed7e29292_Power-HC2.png.dc2c001e9eb468cffe8a7c96f85efffe.png

 

Hopefully this helps you in creating your own icons

 

Enjoy

 

 

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...

@AutoFrank

 

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... :)

 

Thanks

/Peo

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.

    Guest
    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...