Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Please advise me how to use Gimp to create a tile for a word game like below:

tile

I can see 2 rectangles with rounded corners - the outer one and then the one on the top.

Is the smaller rectangle filled with a linear gradient, where alpha changes from 1.0 on the top to the smaller value on the bottom?

How to create the "inner shadow" in the larger rectangle?

share|improve this question
3  
Hi Alexander, are you aware that Google turns up about 131,000 results for "Create glossy button with Gimp Tutorial"? –  Scott Feb 24 at 15:00
    
I didn't realize I want a "glossy button". –  Alexander Farber Feb 24 at 15:02
1  
Essentially, that's what it is. It's merely a rounded rectangle with the traditional "glossy button" appearance applied to it. –  Scott Feb 24 at 15:02
1  
It looks like you're exactly on the right track with your deconstruction and that your question really boils down to creating an inner shadow in GIMP. It might make a better question if you just focus on that instead of creating the whole graphic –  JohnB Feb 24 at 15:25
1  
youtube.com/watch?v=zGHFM7Nh8jw <-- Tutorial on how to create an inner shadow in Gimp. –  Jenna Feb 24 at 16:37

1 Answer 1

So in GIMP 2.8 you can do this:

  1. Make a rectangular selection the size you want your button to be
  2. Be sure to select rounded corners in the tool options
  3. Save this selection to a channel, just to be sure you can retrieve it whenever you want
  4. Create a new layer for the button background, fill it with you base color enter image description here

  5. Invert your selection in selection->invert

  6. Go to filters->light and shadow->drop shadow, and create your shadow, with 0 for X and Y offsets - there you are -a new layer with he exact shadow you wanted. : if you use the classic drop shadow script (not the GEGL based one in GIMP 2.9), it creates a shadow of the selection itself - in a new layer, above the current layer (it is different of the behavior when there is no selection)enter image description here

  7. restore your ouriginal selection, create a new layer and make a white to black vertical gradient with the blend tool. Change this layers mode to "grain merge" and reduce its opacity until you are satisfied for the main blend of your button

  8. create a new selection, smaller in order to create the Phong reflex - and on a new layer, create a blend from white to transparency for it. o adjust the transition from white to transparency, I prefer to use the colors->curves tool, operating on the Alpha channel of the reflex layer.

And there you are!enter image description here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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