Creating an IE6-friendly transparent PNG image with GIMP

I often see that templates are made with transparent PNG images, which show a gray background in Internet Explorer 6, instead of the transparency. However, with a couple of extra steps, it’s easy to create a transparent PNG image with The Gimp that also works in IE6.

What’s up with this bug?

For some reason Internet Explorer 6 does not support 24-bit PNG images with alpha channels. It does support support alpha channels in PNG with indexed colors (so IE DOES support transparent PNG images, contrary what a lot of people think). So the trick is to convert the great looking 24-bit PNG image with a 8-bit alpha channel to an 8-bit PNG with a 1-bit alpha channel.

In this process the assumption is that your image will be used on a non-solid colored background, since if you had a solid background, there would not be a need for transparency. To make the image blend nicely on a gradient background, it’s good to give the image a background color, that comes close to the background it will be against. At the end of the process, there will be an anti-aliasing “border” around the image, so the closer its color is to the background color, the better it will blend. So if your site has a grayish gradient, then you might want to pick a grayish color as background for your image. More on that in the steps.

Since I’m using The Gimp on my Xubuntu Feisty box, these steps are for that application.

The steps

  1. Backup your original image (or don’t, it’s up to you)
  2. Open the original image (the format does not matter)
  3. Select a background color (read above for details) and create a new layer with that background color (Layer - New layer - Layer fill type: background color)
  4. Move the background layer to the bottom of the list of layers (Dialog - Layers - select background layer - hit the Down arrow)
  5. Flatten the image (Image - Flatten image)
  6. Add an alpha channel (Layer - Transparency - Add alpha channel)
  7. Select the background color (Selection - By color, then click on the background) and clear it (Edit - Clear or Ctrl-K)
  8. Change the image mode to Indexed (Image - Mode - Indexed color, default settings should be fine). You may notice a background color halo around your image. This will create the anti-aliased effect for the PNG image on your page and looks much better than those ugly harsh edges.
  9. Save the image to the final PNG file (File - Save as)
  10. Make sure the Save color values from transparent pixels checkbox is checked

A very important note

This information was drawn from Pablo Hoffman’s VampiroZ blog. I’ve been looking for this information for a while, and his tutorial was the only one that solved my transparent PNG problem right away.


Some useful links

The GNU Image Manipulation Program (GIMP, available for Windows, Linux and MacOSX)
Rea’s comparison of GIMP vs Photoshop
From Windows to Ubuntu: Alternative software

Trackback URL for this post
http://rehuel.com/2007/05/23/creating-an-ie6-friendly-transparent-png-image-with-gimp/trackback/

Update: Wordpress 2.2 and my work

As mentioned earlier I upgraded my Wordpress installation to version 2.2. Everything went OK. This upgrade would have normally taken about 15 minutes, but due to the Internet problems in Suriname it took me over an hour to do the upgrade.

All seems fine. I don’t have too much time to test everything our at the moment, so if you notice something wrong, just send me an email

Work
I’ve been working on some heavy PHP scripting, since I’m building a couple of sites from scratch. I just finished creating a picture gallery using PHP and CSS. Now I’m going to continue fitting this gallery in the site.

Good… I needed that break! Back to the code.

Now grab a book: WordPress Complete: set up, customize, and market your blog

Trackback URL for this post
http://rehuel.com/2007/05/16/update-wordpress-22-and-my-work/trackback/

Upgrading to Wordpress 2.2

I’ll be upgrading to Wordpress 2.2, the latest version that was released today. The announcement came about 2 hours ago in the Wordpress blog, so it popped up on your Admin Dashboard. David Pitlyuk brought it to my attention.

If you see strange things happening on my blog or in my feed, please be patient, it may be caused by the upgrade. I’ll write an update of the upgrade, so you will know when I’m finished. If strange things happen after that, we all can start to call the police.

Wish me luck (on this super slow connection)!

Trackback URL for this post
http://rehuel.com/2007/05/15/upgrading-to-wordpress-22/trackback/

Useful Blog Posts: Weeks 2 and 3

Lats week I could not put up my list of useful blog posts because of Internet problems in Suriname. This week I post 2 weeks worth of useful links.

Maki’s article with the 50 usability tips reminded me of Jakob Nielsen’s articles about usability, which have basically been my guideline since I started designing and developing 7 years ago. Expect more on usability in the future, here and on Blogging Notes

Trackback URL for this post
http://rehuel.com/2007/05/13/useful-blog-posts-weeks-2-and-3/trackback/

Installing Internet Explorer on Ubuntu

Although my stats prove differently, studies still show that most Internet users still use Internet Explorer 6.

When building websites, it’s important to keep an eye on these statistics, especially since browsers tend to display websites differently. IE up to version 6 have an own agenda when it comes to displaying contents and handling styles. That’s why a web designer should also test his work in IE6, to make sure the majority of visitors see the site the way it’s supposed to look.

But Microsoft has no Linux version of Internet Explorer available. This made it difficult to test when developing on a Ubuntu system (or any Linux system for that matter). There are alternatives to get this done, like installing a Windows system with VMware or dual booting to a Windows OS. But this is so much work and can slow the process down significantly. IEs4Linux has the solution.

IEs4Linux
IEs4Linux makes installing IE on Linux a breeze. No dual booting, no unnecessary installations, “Just one easy script and you’ll get three IE versions to test your Sites. And it’s free and open source.”

The IE installations with IEs4Linux are stripped down, using only the basic functions needed to run the browser. Features like Outlook Express and media player are not installed, so the installation is much lighter.

Installation
The installation for Ubuntu systems is very easy:

In your terminal (Accesories -> Terminal in Xubuntu) type the following:

sudo gedit /etc/apt/sources.list

This opens your apt sources list in gedit.
Next add or uncomment the following line if it’s not done yet:

deb http://us.archive.ubuntu.com/ubuntu feisty universe

Then add this line:

deb http://wine.budgetdedicated.com/apt feisty main

Save the file and close gedit. Next, get and install the key and update:

wg et -q http://wine.budgetdedicated.com/apt/387EE263.gpg -O- | sudo apt-key add -
sudo apt-get update

Please remove the space between wg and et.

Install wine (as engine) and cabextract (to extract files from .cab archives):

sudo apt-get install wine cabextract

Download and extract the installation script:

wg et http://www.tatanka.com.br/ies4linux/downloads/ies4linux-latest.tar.gz
tar zxvf ies4linux-latest.tar.gz
cd ies4linux-*

Please remove the space between wg and et.

Run the installation script:

./ies4linux

The installation script will ask some questions to know which versions of IE to download and install and whether or not to install Flashplayer 9 along. After the installation is finished, shortcut icons of of the installed IEs will be placed on the desktop.

The creators of this script urge to use these IEs for testing only. General browsing can be done with Firefox.

Legal Notice
Even though you won’t be asked for it, a legal license to install Microsoft products is required. “To install any MS program included on IEs4Linux, you need a valid Windows license. IEs4Linux will not ask for it and you can run everything without any problem even if you don’t have a license. But it is illegal and a I have nothing to do with this.

Note
I’ve been working on this since this morning, but every time it would only save part of the post. After a while I figured out that the mod_security on my server may be blocking the wge t command when posted in an article. This will be solved as soon as Internet is regulated again.

Trackback URL for this post
http://rehuel.com/2007/05/12/installing-internet-explorer-on-ubuntu/trackback/

Category FOOA added

I have created a separate category for posts related to my trip to New York to attend the Future of Online Advertising (FOOA) conference and the Blog Bash ‘07. What’s this all about? I’ll summarize.

FOOA

  • Via Darren Rowse’s Problogger.net I got a free pass to FOOA conference in NY.
  • I got to offer 10% off the price for tickets to this event and talked a bit about what I expect from the conference.
  • I started to think about not going since I can’t afford the trip (estimated $3000 - $4000).
  • I read an article about most bloggers not going to events like this because they don’t have the money and keep quiet about their financial situation. But, as the article clarifies, they are not the only losers, because they don’t get to share their thoughts with others at the event, and they don’t get to share what they have learned from the event with others.
  • I decided to start the Get Rehuel to FOOA campaign. I asked for contributions to make the trip to NY possible in exchange for a detailed report (daily, if possible) of my trip to the conference.
  • I added a ChipIn widget in my sidebar (thanks to Nathan Metzger) so contributing was made a little easier.
  • I listed 5 important reasons why I want to attend FOOA.
  • I started talking to local companies who might benefit from some extra exposure. The first round was relatively fruitful.

Blog Bash ‘07
Problogger/b5media is planning a bloggers day in New York, Blog Bash ‘07. This event will be held the day after the FOOA conference.

Information, as provided by Darren Rowse:

Name - ‘Blog Bash 07′
Date - 9 June
Times - 10am - 4.30pm for training and from 7pm til late for a Networking Meetup
Price - $100 USD or $75 early bird discount (includes the party) - We need to confirm a price for those wanting to just come for the Party.
Place - DoubleTree Metropolitan Hotel (569 Lexington Ave NY)

Since I’m in the neighborhood at that time, I’m also registering for this event.

This trip will have several benefits:

  • I get to meet new people
  • I get to travel to a place I have not been before
  • I get to hear speeches and discussions of people in the online advertising industry at FOOA
  • I get to meet other bloggers at Blog Bash 07
  • and I have the opportunity to share this with my readers, since I’m planning to share my experience, from planning the trip to returning home

Final note
I will be sharing my experiences during my trip to NY in 2 blogs. Information that can be related to web design/development will be shared in this blog and information about the trip and relevant to blogging and making money online with blogs will be posted in Blogging notes.

Trackback URL for this post
http://rehuel.com/2007/05/12/category-fooa-added/trackback/

Links: Visited vs. Unvisited

When viewing a site without styles enabled, it’s clear which links you have clicked already and which not. The unvisited links are blue and the visited links are burgundy reddish. This is done to let visitors know where they have already been, what they have already read. It can also serve as a reminder where you stopped reading the last time you were on that site.

Best practices
The most desirable way of styling your links would be to use the same blue as unstyled HTML for unvisited links and the same reddish color for visited links. This would be desirable, because most people are already used to that coloring scheme, and generally know the meaning of those colors in links. But these colors me not fit within the coloring scheme of your site. In that case,
style visited links with a different color than unvisited links.

I made the change
This is something I’ve been meaning to do ever since I picked this theme for my blog. The blue links are those you have not clicked yet and the reddish links are the ones you visited already. When hovering a link, the link text will turn orange and be underlined. The links in the sidebar will not be underlined when hovered.

Trackback URL for this post
http://rehuel.com/2007/05/11/links-visited-vs-unvisited/trackback/

Internet problems may be longer than expected

The number 1 ISP in Suriname, Telesur, got a major blow this weekend when there were problems in the Americas II fiber optics line that feeds French Guiana, Suriname and Guyana.

This has happened a couple of times before in the last 18 months, but this time it seems as if the problem may take a little longer to fix than the other times. The expected deadline of 3-4 days is now extended to at least 2 weeks.

It seems like a repeater somewhere on the bottom of the ocean off the coast of French Guiana is causing trouble. This repeater is located about 20 kilometers from the coast. The specialists who have to take care of the problem are shipped by boat, a journey that can take up to 8 days. After their arrival they still have to find the faulty repeater and probably replace it. This process can take a couple of days since normal divers can’t just “swim” to the bottom of the ocean at this location.

Telesur is now quickly setting up some more satellite connections to serve it’s customers in the meantime. But at the moment, the Internet service is very limited.

Everything that could suck up bandwidth unnecessarily is blocked. Normal browsing via the http protocol is allowed, along with POP and SMTP services for sending and receiving email. https, for secure http transmissions, is allowed, but it seems as if this protocol is so extensively used that there is virtually no movement.

So in the coming days, I’ll be less active during the day on my blog than usual, because traffic is very slow around those times. At night there are less people online, so I’ll try to do all my blogging related activities by that time.

In the mean time, you can check out my Get Rehuel to FOOA campaign.

Trackback URL for this post
http://rehuel.com/2007/05/09/internet-problems-may-be-longer-than-expected/trackback/

5 most important reasons why I want to attend FOOA

Recently I got a ticket to attend the Future of Online Advertising conference in New York. Even though my trip to the conference costs more than the ticket itself, I still feel it’s very important that I attend that conference. There are a lot of reasons why, but I’ll list the top 5.

Online advertising is related to web design: Having a website expands the borders of most brick and mortar businesses. It’s an extra avenue of promoting your business. But the Internet can also be used to promote your business to a wider audience with online advertising. It’s important for web designers to be informed of the latest trends of online advertising. Meeting people who are leaders in this area can always strengthen your knowledge of this subject, giving top quality information that can help explore more aspects of doing business online.

Educational value: The trip as a whole will be very educational to me. Getting there, meeting new potential friends, learning about other cultures, especially in the host city… All this can be to great value to someone from a third world country. And the greatest part of this is that I can share the educational value of the trip with others. Others from developing countries can get interested in attending such events. Even if they don’t this information could help them to see other avenues in online business.

I got a ticket for free: This free ticket is an invitation to experience the event. My mom always taught me to value anything that was given to me. Especially when you get something you usually had to work hard to receive. In those particular cases you should put all possible effort in using the opportunity that was presented.

I am a firm believer that nothing happens without reason. I didn’t win this ticket just for the heck of it. This is nature (or God, or the life force, as some may call it) giving me an opportunity. Not putting all possible effort in trying to get the most out of it, is like saying “I don’t need your help”.

Where there’s a will, a lot can be achieved: I want to prove that with a lot of willpower and related actions great things can be achieved. There are those who doubt my efforts to get to NYC will succeed. Some argue that my blog lacks the traffic and the “popularity” needed to achieve such results. I don’t mind their critique. I want to prove to myself and those who believe in me that I can do this. And if I don’t reach that goal, I have done my utmost in trying to reach it. That alone will strengthen me as a person, which is the most important thing to me.

I’m running dry: Being in the same vicious circle day in, day out, year in, year out, can make your mind get dull. You need to go out. That really helps, but since Suriname is not as developed in the online world, it’s very important to go out of the country and enjoy the way others out there do things. Get some extra inspiration from different cultures, different economical environments, different people. I never had the chance to attend such a conference. I’m sure this will spark some fresh ideas.

Do you think these reasons are worth sending me to the FOOA conference? Check out ways you can help to Get Rehuel to FOOA.

This article is written as part of Problogger.net’s Group Writing Project - Top 5. Check it out, maybe you can help make this project a grander success.

Update: My trip to NY is cancelled

Trackback URL for this post
http://rehuel.com/2007/05/07/5-most-important-reasons-why-i-want-to-attend-fooa/trackback/

No Internet in Suriname

Since Sunday morning, the major Internet Service Provider in Suriname announced that due to problems in the fiber optic cables that provide Internet access to the Guyanas (French Guyana, Suriname and Guyana), the service cannot be provided. This problem may take up to 4 days to solve.

Good thing there is another ISP. They usually have a lot of problems with connectivity, but it’s good to have them around.

While I might not be able to connect to the Internet too frequently in the next days, I urge you to read about winning a ticket to FOOA and my project Get Rehuel to FOOA.

Trackback URL for this post
http://rehuel.com/2007/05/07/no-internet-in-suriname/trackback/

Pages (10): « 1 2 [3] 4 5 6 » ... Last »