A little overwhelmed

[Richie's Room]

Hey all,

I feel as if I needed a little dingy and ended up getting some sort of super-tanker!  

What is the best way to get to grips with what GIMP has to offer?  I'm not a professional photographer or anything like that - I just want to be able to manipulate photos and images for use on my blog.


I also have a more specific question that I'd like to ask.

I'm trying to create a title bar image for use on my blog pages.  Nothing fancy, just a rectangle with rounded corners and a gradient colour.  The problem I'm having is being able to save just the image (and not the background).  I have done some digging and tried to find a solution to this but it didn't work - I added an alpha channel (whatever one of those is!), inverted the selection and pressed delete.  This changed the background to the checkered pattern that I was expecting.  I then exported the image in png format.  All well and good I thought.  However, when I open the image it still has a white background!  What am I doing wrong?

Thanks,
Richie

[rich2005]

Gimp has a steep learning curve so stick at it. Best way to get to grips? Just keep experimenting, use the Gimp docs when required https://docs.gimp.org/2.10/en/

I can not see anything wrong with your procedure for a "Title bar" An alpha channel is just a mask that the display application uses to 'hide' part of the image.  A customary way to display this is the checker pattern but not always, very much depends on the display application.

Here is the same image in three different programs: top displays white, middle checker, bottom (a web browser ) black.

   

Take your pick
Open the png image up again in Gimp. Does it have the checker pattern. Then it is ok. The real check is when you add to your web page.

Quote:All well and good I thought. However, when I open the image it still has a white background! What am I doing wrong?

Did you export to a png with a white background layer underneath? Exporting will flatten the image. Either turn the visibility of the background layer off or delete it leaving just the banner.

[Richie's Room]

(04-04-2020, 03:52 PM)rich2005 Wrote: Gimp has a steep learning curve so stick at it. Best way to get to grips? Just keep experimenting, use the Gimp docs when required https://docs.gimp.org/2.10/en/

Did you export to a png with a white background layer underneath? Exporting will flatten the image. Either turn the visibility of the background layer off or delete it leaving just the banner.

Thanks for the quick response.

I'll keep going with that learning curve, thanks :-)

With regard to the title bar image, if I re-open it in GIMP it does show the checkerboard, but when uploaded to my blog it has the white background and takes up way more room than the bar alone would.  With the 'Export Image as PNG' options I had them set as per the image below.

   

So, are you saying I should untick the 'Save background color' option?

Thanks again,
Richie

[rich2005]

Untick everything and give it a try. As before it might not be your image but could be the blogsite rendering engine. Whatever background you use will be ignored.  If you post a png here it displays with a white background not transparent.

Regardless I would untick all the metadata (1) and while AFAIK automatic pixel format (2) gives a 8 bit RGBA image, nothing lost by setting that explicitly. 

This comparing an image from a web page in Gimp with the web page open in a browser.

   

Size? Gimp works in pixels (3)  so at 100% zoom should be correct size.  If you look at the properties of an existing image as above, the resolution is 72 ppi. That value came from old CRT monitors. Still there in Gimp if you look at the File -> New templates, there is a block of Web banner sizes, all at 72 ppi. Vector applications such as Inkscape might use 90 or 96 ppi but it is worth checking what you have set.

Other than that - don't know, post your png banner here somebody might find a problem with it.

[Richie's Room]

That did it :-)

Thanks Rich