Post Reply 

Removing the image white corners

Jan 17, 2014, 09:22 (This post was last modified: Jan 17, 2014 09:28 by thedge84.)
Post: #1
Removing the image white corners
I need to round the top corners of a simple gradient image to use as a header background for a custom web page using a border-radius: 1em.

For some reason I just cannot get rid of the white corners on the image. I used the same
steps given here to create the image with the rounded top corners:

1. Select -> Rounded Rectangle...
2. with Rounded Rectangle selected I used the regular Rectangle select tool to add "square" selection to the bottom of the Rounded Rectangle select.

This is the header background image:


Here is what it looks like on the page so far, as you can see, the radius on the image corners looks consistent with the border:


But if you look at this it appears the image corners themselves are still squared, the white voids are covering the border.

Any help would be appreciated please. It seems like an easy enough task but has honestly taken this graphics newb at least 6 hours with absolutely no luck, about to pull my hair out over this Huh

Thank you!
Find all posts by this user
Quote this message in a reply
Jan 17, 2014, 09:54 (This post was last modified: Jan 17, 2014 09:57 by rich2005.)
Post: #2
RE: Removing the image white corners
You need transparency. Easiest way is from scratch.

Starting off with a blank canvas
Add a new transparent layer.
Create your rounded and filled selection in the transparent layer.
Turn off the visbility of the opaque base layer

Save all your work to Gimp .xcf format. That will keep all your layers, any active selections, paths - everything you will need to open and re-edit.

When completely finished export as a .png file this will just have the one layer and keeps the transparency. There is also .gif but this is reduces the number of colours to 256 and can look evil especially with gradients.

Gimp will show this transparency (as a chequer pattern) but not all file viewers will do that. Some show white, some show black, a very few also show chequers.

edit: Ofnuts is the web page man. I am sure he will give better advice.

** now answering questions**
Find all posts by this user
Quote this message in a reply
Jan 20, 2014, 06:41
Post: #3
RE: Removing the image white corners
Thanks for the help.

I am starting back from scratch using only PNG this time.

Here are steps I'm now taking.

1. Open GIMP, click File -> New... and creating a new (white/blank) image with the same dimensions as my intended header image.

2. Layer -> New Layer... and creating a new transparent layer with the same length x width dimensions as my intended header image.

3. Using the selection tools to select the area for my rounded top corners, as I said in OP.

how can I can I just fill this finished selection with my base gradient image (base = without rounded corners)?

I tried doing "Open as layers..." to open the base image into the selection after making my final selections for the rounded corners on the transparent layer, but when I do that it still draws itself beyond my selection (beyond the rounded corners). I would just like to fill the selection with the image if possible.

and by the opaque base layer do you mean the "Background" layer?
Find all posts by this user
Quote this message in a reply
Post Reply 

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Change blackest point to pure black and whitest to pure white Julienroy 1 82 Mar 19, 2018 19:02
Last Post: paynekj
  How To Make an Image Black and White? abrogard 4 250 Mar 4, 2018 20:00
Last Post: abrogard
  image rotation dav1988 1 112 Mar 4, 2018 00:14
Last Post: paynekj
  Make an image darker bolder. ConductorX 1 125 Feb 21, 2018 09:04
Last Post: paynekj
  Making an echo line around an image? MADdukeDUDE 1 177 Feb 17, 2018 04:39
Last Post: ythgilb

Forum Jump:

GIMP ForumPortalArchiveContactTermsRSS