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
  Import palette from another image jllopezpino 1 62 Mar 20, 2019 09:18
Last Post: paynekj
  Resizing an image down without losing quality AsdAsd 2 477 Jan 22, 2019 06:09
Last Post: Manju
  Make every image exact same size nibla 2 304 Jan 21, 2019 07:47
Last Post: Manju
  How to centre an image inside a larger rectangle rossnroller 1 153 Jan 7, 2019 09:43
Last Post: paynekj
  Need Advise on tracing image Loriblackdog 1 233 Dec 10, 2018 17:18
Last Post: paynekj

Forum Jump:

GIMP ForumPortalArchiveContactTermsRSS