Raster!... Looked that up and learned a whole lot about raster vs vector graphics. Always wondered why my friend went out and got Illustrator to learn how to design graphics when she had a perfectly good copy of Photoshop

The issue with the anomalies in the pgn where I applied inner glow in PS was because I forget and saved it in PS as an 8 bit png instead of a 24 bit png like the 'flatter' one I posted above it. Still you're instructions for removing the noise around the 8 bit png resolves similar problems I've had with trying to remove such junk in other graphics in the past.

Applying a stroke and shadow will definitely help make these buttons look better if I end up using them in a background that's not as dark as the one I'm working on now. Thanks for the tutorial on that.

There are a couple things I couldn't replicate from your instructions, tho' I think I ended up processing that same png of mine above with the same results you got.

1st: It looks like you started with a base layer and pasted my png on a layer above it. I just loaded my png and only had one layer throughout the entire process you detailed.



I kind of stumbled after I inverted and deleted the 1 pixel outer edge from the layer selection. I wasn't getting the results you were until I finally discovered I had to use a selection tool to click, and deselect to proceed.

Then somewhere between applying path and stroking, you had a new layer show up while you were stroking.



I didn't make any new layer here. At this point I had to get to stroking via 'Edit > Stroke Path'. Also had to figure out how to add the Path tab on the lower right corner of gimp (name for that?) to preview the 1 pixel stroke line, tho' I think I got the job done..

Again, my layers never changed when I went through what seemed a pretty successful duplication of stroking that you produced. And again, if I apply the stroke and drop-shadow to all the buttons, they'll definitely look better if or when I end up putting them in a skin with a lighter background.

Thank you so very much for taking the time to explain all this Wallace. I'm learning a lot of very useful information here.

.

Well... ran into a bit of a wall trying to create a new logo tonight. This is an older button I was trying to redo like the logo you guys helped me with here:



As you can see... lots of fuzziness again. The problem came when I replicated the steps Dalia outlined, and later corrected when I added the lettering. The central circular logo is a separate image I dropped onto a new layer above my base rounded rectangular red background. But that one I did in PS. Here's the steps I went through that Dalia had laid out to redo this in Gimp:

1. Select the “Rectangle Select Tool".
2. In “Tool Options” check Rounded Corners.
3. Fill with color
4. New Layer.
5. Select the "Ellipse Select Tool" and draw out a selection
6.Flood fill that selection with white.
7. Go back to original layer. Alpha to Selection > Select > Invert
8. Back to ellipse layer and “Cut”
<slipped layer scaling for these tests>

At this point I created a new layer as I had done with the lettering from the last project and pasted the cut out circle from the png logo I'm making a new button for. Here's that png (it has a white background that doesn't show up here):



The results of pasting the cut out from that into my new project:



See the problem? Then Dalia's last steps:

9. Alpha to Selection on the white layer
10. Create a New Layer > Select your “Blend Tool” with gradient of your choice
11. Apply gradient

And well, here it is in it's full glory:



At this point I realized that since the lettering in my previous logo was white, I never noticed that it hadn't been shaded at all by the gradient.

So as I had before, I end up here with 4 layers:


1. Background rounded rectangle
2. White layer for gradient
3. Layer with gradient applied
4. The logo where my lettering was in the 1st project.

But I need to apply the gradient to both the 1st base layer and the 4th with the logo. I can see this will likely take doing something we've not covered yet
Or more correctly as these forum emojis are so tiny without zooming the page:

Latest edit: I did retry the failed attempt of pasting the logo into the base layer as I'd tried with the lettering before. But the gradient ended up covering the logo as it did with the lettering with opaque white, while for whatever reason, shading the red rounded rectangle properly.
.

.

I'm stepping out and allowing the pros to help

Sorry Wallace. I'm trying to get Gimp to lay the gradient over that png you found was indexed color and not RGB. And get the results I did in PS. Maybe it's hard to see, but I got PS to apply the gradient to the reds inside that logo, and not just the red that surrounds it. Here's the png I made in PS blown up:



I've changed the png from indexed to RGB, added an alpha channel, used fuzzy select to cut out the white, and pasted it into a new larger transparent image, rounded the corners and followed the same steps as Dalia detailed. But the gradient always ends up covering the area of the logo with the opaque gradient.



Have tried other approaches, but just can't replicate what I did in PS. And in PS I always end up with fuzzy borders.

I did find a tutorial that involved setting the layer mode to overlay. That came the closest. It matched the foreground white color of course, but I couldn't get it to match the background red. Meanwhile in PS the task is trivial: Load image, select with ellipse, set foreground and background colors, apply gradient. I just can't reshape the selection to scale the layer / selection of the ellipse like Gimp can. Instead of using inner glow, inner shadow in PS looks much better.



Still lacks the 2-3 pixel defined border because I can't shrink the ellipse selection, but this may do if I don't find a way to take it further in Gimp

IIRC, when I learned to make 'shiny buttons', the gradient white shine was the reverse of how these examples are...the transparency would be more as you go downwards. For example, here is a shiny button I made years ago when I was first learning Gimp.