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
  Tracing an Image GoddessKairos 1 98 Jun 12, 2018 21:42
Last Post: paynekj
  Resizing an image without pixelation? nopropsgames 2 139 Jun 9, 2018 22:39
Last Post: nopropsgames
  After floating a layer, how do you return the selection to the whole image? ithortureu 1 110 May 13, 2018 07:15
Last Post: paynekj
  Opening an image problem mes2370 1 150 May 11, 2018 15:20
Last Post: paynekj
  Pure black n white with smooth curves ociebieda 1 252 Apr 25, 2018 21:14
Last Post: paynekj

Forum Jump:

GIMP ForumPortalArchiveContactTermsRSS