2

I'm using a sprites sheet on my 2D game that contains different buttons.
I would like to create other buttons with custom icons because I'm adding new features to the game that need a specific icon.
The sprite sheet is in png.

enter image description here

Screenshot shows part of the sheet with a list of buttons (Great work by the author) where I simply added two rows of clean buttons where I would like to put some custom Icon.
In this example I'm working on a bell which I downloaded in white png format, added as a layer, filled with a gradient for the first green button on the left.
What I need now is to create the inner shadow effect to create the cool depth effect like in the other buttons.
Do you have any technique to suggest in GIMP or other free drawing tool to create such effect?
Thank you in advance.

P.s. Buttons are small in the game so I don't expect to have the fantastic details of the original buttons; good enough would be ok.

EDIT: Thank you @BillyKerr, with your detailed instruction I made it.

enter image description here

1 Answer 1

1
  1. Move and scale the bell shape on a layer above the original button

  2. In the layers panel, engage the Lock Alpha Channel button on the bell layer

  3. Right click the bell layer and choose Alpha to Selection

  4. Select the Move Tool, and in the Tool Options hit the Selection button

  5. Move the selection down a bit, hit Select > Invert, choose a darker green foreground colour, and do Edit > Fill with FG color

enter image description here

  1. With the selection still active, do Select > Invert, and create a new transparent layer under the bell layer.

  2. Choose white as the foreground colour, and do Edit > Stroke Selection, and choose Stroke Line, Solid Colour, and Line Width 1px.

  3. Do Select > None

  4. Select the Move tool, and in the tool options, choose the Move Layer option

  5. Click and drag the white stroke layer so that the white pixels show just under the bell layer.

enter image description here

2
  • Just Wow, that's a fantastic result! Jan 30, 2021 at 11:32
  • 1
    @systempuntoout Just one thing to note here, I didn't have access to your bell shape, so I redrew it using the Paths Tool, turned it into a selection and filled it with a gradient, which made a very sharp edged bell. Not sure the image you have for the bell will give such a nice result, but you can try.
    – Billy Kerr
    Jan 30, 2021 at 11:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.