| « Three ways to Optimize Your Website for Text-Only Browsers: Part 1 Download and install Lynx on a Mac | Displaying Text over Images with CSS and HTML » |
Create an Image with Transparency using GIMP
05/10/08 14:36 , Categories: Usability and Design, CSS, GIMP , Tags: alphaimageloader, conditional comments, css, gimp, ie, image, internet explorer, transparent, tutorial Today’s tutorial is all about how to create a transparent background on an image using GIMP. You might have heard of a certain other fancy and expensive photo editing program. It can get the job down as well, but I’m going to use GIMP because I love open source software. You can find more information about GIMP, and download it for free at http://www.gimp.org/.
Images with transparency are useful in web design because they save you from editing your image every time you want to change the colours of your site. The background colour will simply shine through the transparent portions of your image. They also let you use gradients and allow more subtle transitions between the colours on your site.
First, open the image in Gimp and select the foreground of your image. The most accurate method is to use the paths tool to painstakingly trace around the edges of the foreground.
Today I’m feeling lazy, so I’m going to use the fuzzy select tool, but for a ‘real’ page I would take the time and do it right.
Once you have a satisfactory selection, press Control-C, or use the drop down menu to copy your selection.
Next make a new layer. Make sure that the transparency button is selected in the new layer dialogue.
Make sure the new layer is selected and press Control-V, or use the drop down menu to paste your selection.
Now select the floating selection in the layers palette, and click on the anchor to attach it to the new layer.
You can now delete the background layer, and you are left with your foreground on a transparent background.
Save the image as a png file and make sure to check interlacing in the save as dialogue.
Now we’ll just change the css code we wrote last week to point to the new png file:
body {
margin: 0;
padding: 0;
}
#header {
background: url(rope.png) no-repeat;
width: 800px;
height: 250px;
margin-left:auto;
margin-right:auto;
}
#text {
text-align: center;
margin-top: 15px;
margin-right: 100px;
}
Which will give us:
It looks just like it did last week, but what if we change the background colour?
Viola!
Note: Internet Explorer 6.0-
Version’s of Microsoft Internet Explorer earlier than 7.0 don’t have native support for transparent png’s. They have a tendency to turn transparent pixel’s into ugly tones of grey and black. Here’s a quick workaround.
You can use conditional comments to give alternate instructions to specific versions of Internet Explorer. These comments will be ignored by other browsers, so they make a powerful tool for working around Internet Explorer’s many quirks.
The following code will display the text between the<p> </p> tags only in IE 6.0 or earlier:
<p>This is an early version of IE.</p>
<![endif]-->
There are plenty of other conditional codes, and you can read all about them on Peter-Paul Koch’s site.
But, in this case we want to tell Internet Explorer to use jpg’s, or gif’s, which it can handle, instead of the png’s, which it can’t. Put the following code between the <head> </head> tags on your page.
<!--[if lte IE 6.0]>
<style type="text/css">
#header {
background-image: url(rope.jpg) no-repeat;
}
</style >
<![endif]-->
This will create an inline style-sheet that is only visable to early versions of Internet Explorer, and will override the instructions given in the external style-sheet. Just don't forget to put the images where you tell the code to look for them, and edit them whenever you change the colour scheme of your site.
This is the simplest way to work around this problem, but it’s also possible to convince IE to display transparent png’s correctly using Microsoft’s proprietary AlphaImageLoader filter. If you choose this route you may have to make some tradeoffs with the fluidity of your design, but there are open source scripts that can help you take advantage of this tool:
Angus Turnbull’s, IEPNGFIX
Drew McLellen’s, SuperSleight
I’m still working on the design and usability review of my open source web directory project. I want to give a warm thank you to everyone who has sent me suggestions and advice. But it’s not too late to help me out. If you’re so inclined, take a look at my sample web directory and let me know what you think. I’ll be sure to give you credit when I roll out the new and improved design.
Except where otherwise noted, this content is licensed under a Creative Commons License.Feedback awaiting moderation
This post has 2 feedbacks awaiting moderation...
Comment feed for this postLeave a comment
