GIMP Help?

[Martin109]

Not really knowing much html at all, I am trying to adapt a website page, so that it will show a photo as background to a header.

Here’s the relevant page.

Where is says ‘Interchange  Interchange: staff counselling and support...’, we wish to place a photo, instead of the current pale graphic background.

Here’s the relevant image file for the background.

In GIMP, I have managed to select this round-cornered rectangle.

I have also been able to save this selected area,

and save it to a separate GIMP image file.  This still has the original pale graphic background, which will need to go.  How to I do this?

I’m also stuck as to what to do after that.  I believe I need to create a transparent gif image from my .jpg file.  How do I do this, and how to I get it to fit the rounded rectangle shape of the title/header on the website page?  I also believe I need to deal with layers.  How do I do this?

Any GIMP wizards out there?

[nikki]

I never really got the hang of GIMP, but I think you can do what you need to do in Inkscape using a clipping mask:

http://design.tutsplus.com/tutorials/quick-tip-what-are-clipping-and-masking-in-inkscape--vector-24947

Approximate steps:

Open your page background in inkscape
Use the rectangle tool to draw a solid rectangle the same size as the one on the background
Use the handles to add matching rounded corners

Import the header image you want to use
Place it behind the rectangle you've just drawn
Select both
From the menu across the top: Object > clip > set

This should give you the photo cropped to size with the rounded corners.

I think you can then delete the page background and export out the drawing as a .png file with transparency.

GIMP may have something similar to do the same job - 'clipping mask' is probably the key term to research.


Hope that helps!

[fuaran]

Open your background.jpg image in GIMP.
Go to Layers menu, then Transparency, then "Add alpha channel". That is adding the transparency information, which JPG doesn't have.
Then select your rounded rectangle, and press delete. That deletes everything within that selection, so it makes it transparent.
Then get your new photo, and paste it as a new layer. Use the layers toolbox to reorder the layers, make sure your background.jpg is top of the list, with the new photo beneath.
That should give you your background, with the new photo visible through the hole. You will probably have to move or resize the new photo to make it look nice.

[Martin109]

What quick replies!

Great to know there's a method with Inkscape, but I'm even more clueless with that than GIMP (will keep in reserve)!

fuaran: I'm kinda beginning to get there, but can't see how to reorder the layers; is it Layer->Stack->Lower Layer ?

[Martin109]

Maybe Edit->Paste Into just works??

(Sorry about the Big Brother image!)


Or is there more I need to do?  How to save?  Export as .jpg?

[Martin109]

Seems to have worked!  Exported to new .jpg.  But rounded corners of image don't quite match the rounded corners of original shape.

I think I need some sleep!!