It is currently Sat Aug 15, 2026 7:37 pm


All times are UTC - 5 hours [ DST ]



Post new topic Reply to topic  [ 14 posts ] 
Author Message
 Post subject: how to create a basic PNG header for web [SOLVED]
PostPosted: Mon Aug 22, 2011 9:46 am  (#1) 
Offline
GimpChat Member

Joined: Aug 22, 2011
Posts: 7
Attachment:
logo_grad_overlay_1.png
logo_grad_overlay_1.png [ 16.87 KiB | Viewed 2925 times ]
Attachment:
logo_grad_overlay_1.png
logo_grad_overlay_1.png [ 16.87 KiB | Viewed 2925 times ]


Hi - complete novice here :)

Looking to create a header that is graduated at both ends that will mask the central section of a header (3000 x 170 pixels) but reveal what's underneath it at the left and right side. The attached file is just transparent at the right hand side and I'd like it to be transparent at both sides.

This is probably really easy, but I'm a complete novice with the Gimp tools!

ANY help appreciated!

Barrie


Share on Facebook Share on Twitter Share on Orkut Share on Digg Share on MySpace Share on Delicious Share on Technorati
Top
 Post subject: Re: how to create a basic PNG header for web
PostPosted: Mon Aug 22, 2011 10:10 am  (#2) 
Offline
GimpChat Member
User avatar

Joined: Apr 07, 2010
Posts: 14182
Welcome to Gimp Chat bjgraham,

I am unable to open your attachment

_________________
Image


Top
 Post subject: Re: how to create a basic PNG header for web
PostPosted: Mon Aug 22, 2011 10:16 am  (#3) 
Offline
GimpChat Member

Joined: Aug 22, 2011
Posts: 7
molly wrote:
I am unable to open your attachment


Hi Molly- thanks for your prompt reply. I forgot to upload it I think - can you see it now? It's a white band about 3000 pixels wide and 170 pixels high, transparent at the top right corner.

Does it open now?

Rgds

Barrie


Attachments:
logo_grad_overlay_1.png
logo_grad_overlay_1.png [ 16.87 KiB | Viewed 2899 times ]
Top
 Post subject: Re: how to create a basic PNG header for web
PostPosted: Mon Aug 22, 2011 10:23 am  (#4) 
Offline
GimpChat Member
User avatar

Joined: Apr 07, 2010
Posts: 14182
I can see it but I guess you didn't to the correct procedure.
Click Full Editor, go to the bottom of the page and you will see where you add attachments below, click Browse and then add your file.

_________________
Image


Top
 Post subject: Re: how to create a basic PNG header for web
PostPosted: Mon Aug 22, 2011 10:30 am  (#5) 
Offline
GimpChat Member

Joined: Aug 22, 2011
Posts: 7
hi, sorry, try again ...

that any better?


Attachments:
logo_grad_overlay_1.png
logo_grad_overlay_1.png [ 16.87 KiB | Viewed 2892 times ]
Top
 Post subject: Re: how to create a basic PNG header for web
PostPosted: Mon Aug 22, 2011 10:45 am  (#6) 
Offline
GimpChat Member
User avatar

Joined: Apr 18, 2011
Posts: 620
Location: New York
I can see your images and I think what you need to do is create a gradient
FG to Transparent has one side transparent. maybe you can create two layers. One using this gradient, then duplicate that layer and flip it horizontally.

then merge the layers?

I'm not really sure what you need, but does this give you ideas in the correct direction?

_________________
Ubuntu 24.04.1, Kernel i686, 6.8.0-52-generic
python3 v3.12.3 ----- GIMP - ver 2.10.38


Top
 Post subject: Re: how to create a basic PNG header for web
PostPosted: Mon Aug 22, 2011 11:02 am  (#7) 
Offline
GimpChat Member

Joined: Aug 22, 2011
Posts: 7
yes, that's what I'm after thanks. Where is the FG to transparent option please?

really appreciate your help.

Barrie


Top
 Post subject: Re: how to create a basic PNG header for web
PostPosted: Mon Aug 22, 2011 11:21 am  (#8) 
Offline
GimpChat Member
User avatar

Joined: Apr 07, 2010
Posts: 14182
Click your :blend gradient tool, scroll up to near the top and you will see FG to BG, FG to transparent etc. hope this helps.

_________________
Image


Top
 Post subject: Re: how to create a basic PNG header for web
PostPosted: Mon Aug 22, 2011 11:22 am  (#9) 
Offline
GimpChat Member

Joined: Aug 22, 2011
Posts: 7
thanks - yes.


Top
 Post subject: Re: how to create a basic PNG header for web
PostPosted: Mon Aug 22, 2011 12:42 pm  (#10) 
Offline
Retired Staff
User avatar

Joined: May 22, 2008
Posts: 6946
Location: Somewhere in GIMP
I am unable to see your image anywhere. The problem is that it is a transparent image with nothing but white in it and the white bg in here fills in the transparent areas.

Dragged and dropped your image into GIMP and did a screen shot of it.

Image

_________________
Image
World War IV will be fought with sticks and stones. - Albert Einstein


Top
 Post subject: Re: how to create a basic PNG header for web
PostPosted: Mon Aug 22, 2011 1:04 pm  (#11) 
Offline
GimpChat Member
User avatar

Joined: Apr 07, 2010
Posts: 14182
What about trying a large fuzzy eraser and erasing the left side to match the right. Just a thot. I tried it and it looked okay. I then used the free select tool :freesel and selected around the inside slant and part way into the white and used gaussian at 40% and blurred it.
Image

_________________
Image


Top
 Post subject: Re: how to create a basic PNG header for web
PostPosted: Mon Aug 22, 2011 2:49 pm  (#12) 
Offline
Retired Staff
User avatar

Joined: May 22, 2008
Posts: 6946
Location: Somewhere in GIMP
Is this similar to the effect you are trying to achieve? I put a purple bg behind the white gradient so that it would show on the white background in here.

Image

_________________
Image
World War IV will be fought with sticks and stones. - Albert Einstein


Top
 Post subject: Re: how to create a basic PNG header for web
PostPosted: Mon Aug 22, 2011 3:40 pm  (#13) 
Offline
GimpChat Member

Joined: Aug 22, 2011
Posts: 7
sorry - what you see is my 'image', a white rectangle with a graduated border in the top left corner.

What I wanted was to be able to produce one that looked the same, but with another transparent corner in the top left.

I think I can do it by making a white rectangle, creating an alpha layer, creating a Foreground to Transparent layer and then using the Rubber tool with a large fuzzy circle and just rubbing off the tope left and right corners.

Do you think this is a way to achieve my goal?

Thanks to everyone for their help.

Barrie


Top
 Post subject: Re: how to create a basic PNG header for web
PostPosted: Mon Aug 22, 2011 4:08 pm  (#14) 
Offline
GimpChat Member

Joined: Aug 22, 2011
Posts: 7
sorry - just seen Molly's post suggesting the eraser tool, which is what I ended up doing - many thanks again, consider this one closed :)


Top
Post new topic Reply to topic  [ 14 posts ] 

All times are UTC - 5 hours [ DST ]



* Login  



Powered by phpBB3 © phpBB Group