So I was delayed by this quick and dirty change from Wordpress to Drupal... I must say I love Drupal. Great piece of software... yada yada, but I digress.

This is the remake of the original post that was on WordPress. It used to start something like: 'Actually, this should be called Fixing of Alpha Sun...' And indeed it should. It's the account of the steps I took in order to improve the original Alpha Sun logo, which is still in the Gallery. (I have to remember to fix that as well.)

Why a redesign?

The last time I dealt with the original logo, I must admit I was a bit hasty. I didn't research the colors thoroughly enough, and I didn't bother fixing the shapes. Also, a very serious problem was identified in discussions on the BBS and I simply had to yield under the load of many newly discovered flaws. The new version, of course, still has some bugs, but I don't think those will be too difficult to fix, now that the foundation is rock solid.

Preparation

In preparation of the redesign, I wanted to be as sistematic, and as thorough as possible. A precise TODO list was in order, and also, I wanted to spend more time picking the right color.

TODO list

First I had to outline what exactly I was going to fix. The TODO list looked something like this:

• fix shapes (subtly)
• fix colors
• make it work in the dark
• change logotype

Step 01: setting the objectives, collecting the material

Fix shapes (subtly)

I was not happy with the pointy shape of the lower arc, and also not happy at all with how those arcs wrapped around the sphere. So those had to change. Also, the pointy tails of both arcs needed to become softer and blunt.

Fix colors

Fixing colors meant both fixing the actual base color (the old one was a bit too blue, and a bit darker than I wanted it), and fix the lighting on the sphere. The '3Dness' of the sphere was now a priority, compared to the last design.

Make it work in the dark

In the previous concept, the performance of the black arcs on a black background was obviously quite poor. So I had to fix that, too.

Change logotype

Changing the logotype had two goals. Make the type look more serious and solid, and reduce its prominence compared to the logo part. As a bonus, I also wanted to make it more legible when reduced in size.

So, with the objectives set in stone, I was ready to start collecting the material.

The colors

The color used in the original design was Sunglow. It's code is #FFCC33, which bring a lot of blue into the game. I started looking for colors that had none or very little blue in them. I went to Wikipedia and got the codes for colors from the Gold range, created the swatches, and arranged them neatly in one row.

Step 02: Arranging the colors onto different shades of gray

The color I finally chose was the Golden poppy (#FCC200), which has 0 blue in it, but is not as warm as the Sunglow, making it less like the Ubuntu colors. It is also a color of the California poppy, but I have no relations to California. However, I wanted to see what the flower looks like, so I downloaded a picture off Wikipedia, and placed it on my pasteboard.

It's a pretty flower, I must admit. This gave me a chance to also study the variations in color under direct sunlight, a process which ultimately made me decide not to use the realistic colors of the California poppy. :)

I also downloaded a photo of a sphere — a photo of some object including a shiny wooden ball — to serve as an example of realistic lighting.

Step 02: The photo of a sphere as an example of realistic lighting

Now, armed with all those aids, I could finally start hacking the Alpha Sun logo.

The shape

The think I didn't like about the shape is how it wrapped around the sphere. So I took my daughter's toy ball, and wrapped a belt around it to see the actual shape of a band wrapped around a sphere. Of course, I didn't manage to create any tools to help me actually reproduce what I saw in Inkscape, so I tried to draw it manually as faithfully as possible.

I kept tweaking the shapes, but avoided introducing any dramatic changes. Basically, I aimed for thicker arcs, and a more rounded lower arc. I also adjusted the inner contours of both arcs to be just a little more open than before.

Step 03: Fixing the shapes — before and after

Once the shapes were looking good enough, I made compact and transparent copes of both old and new version, and overlayed them so I could check out the differences. The change was not at all dramatic, but it was a new, refreshing shape. I did mark it Too rationalized, though, because it seemed more controlled than before.

After the overall shape was finished, there were two more things I wanted to deal with. First off, I wanted the tails to be less pointy, an thicker. The fix was quick and painless. By adding a 2 pixel stroke with rounded corners around the arcs, the problem disappeared.

Step 03: Fixing the pointy tails

Next on the list was the x-shaped intersection of the arcs. It was a neat feature that could serve as a secondary identity, so I wanted to both keep it, and make it stand out by enlarging the circle. So I grabbed the resize handle and dragged it until the circle was including the 'x'.

Step 03: Enlarging the sphere to fit the 'x'

A small tweak to the position of the elements here and there, and the logo was more or less in a good shape. So, I decided to play with type for a change.

The Logotype

As I mentined before, the problem with the logotype was that it (a) didn't look serious enough (at least not for my taste), and (b) it was too prominent compared to the logo.

So I set out to fix that as well. For a more serious look, I chose to go with the tried and true all-caps. That made the logotype look like a straight line below the logo, and as a result also gave the logo much needed stability.

Step 04: Changes to the logotype

As for the legibility bonus, I chose to add extra spacing between the letters. This is one of the things I've learned during my employment as a book designer. (Skills in typography are probably best learned working with books, and are generally useful in all sorts of different siguations, not just book design.)

The shading

It was now time to deal with the shading. The problem with the original logo was that the highlight was not sharp enough, and also spread towards the sphere's edge bluring it partially. So I decided that I needed to introduce extra steps in the gradient

Step 05: adding some extra steps to the gradient

With the new gradient, the '3Dness' of the sphere was more obvious, but I did have to tweak the colors to avoid the muddy yellows. I kept comparing the new gradient to the base Golden poppy to keep them close.

Making it work on black

In order to see how the logo worked on darker background, I created 3 large strips (black, 90% gray, and 80% gray). I placed three copies of the logo on those strips, one on each strip.

Step 06: Working on dark backgrounds

I finally decided that using the 80% gray for the arcs on black background, and 70% gray on 90% gray background was probably the best compromise between the internal contrast of the logo and contrast to the background(s).

I also experimented with the color of the logotype, searching near the 20% to 10% gray range. I did not want the logotype to regain too much prominence on the black background, but I finally opted for Goled poppy for the logotype. This made the logotype stand out even more, but I simply couldn't resist the beauty of the color scheme. Especially on the gray background.

After this step, I decided to take a cigarette break (yes, I smoke... surprised?), and think about what to do next.

Some more shape-tweaking

After the break, it occured to me that the rounded corners of the 2 pixel stroke I assigned the arcs made the inner corners of the arcs rounded, which was not particularly realistic.

Step 07: Fixing the inside corners

Original arcs were kept as semi-transparent orange 'films', to help me tweak the shapes without going too far away from the original design. I created a duplicate set of arcs and converted the 2 pixel outlines to separate object, then merged those objects with the original arcs. Now, instead of having the rounded outline, the arcs were rounded themselves.

Using the overlay as a guide, I tweaked the shapes until I was happy with them. The logo's shape and colors were finally perfect.

Comparing the old and new

Putting the old and new logos side by side revealed an exciting change. One quick look at the TODO list, and everything seems to be done... So let's continue with other stuff.

The other stuff

I won't go into too much detail with what I did with other stuff, because my fingers are already aching (and even that piece of information is out of scope). Basically, I created both 16 px and 22 px icons on dedicated 16 × 16, and 22 × 22 grids, adjusting shapes, making the sphere brighter when necessary, etc.

The 16 px icon and base logo side by side

The 16 px logo is not perfect, but at 1:1 size, it is a huge improvement over the original logo. The 22 px logo was done with minimum tweaks, as the base logo scales down quite well. Actually, apart from making the sphere lighter, I didn't touch the shapes much.

Tweaks to the 22 px icon

Finishing it off

Before I packaged the new logo for submission, I just had a few more things to do. I documented the colors, and routinely created the 2-color and 1-color variants, as well as the outline version. After that, I created the Tango version. Although I absolutely hate the Tango specs, I did try to create the Tango variant as seriously as possible.

Inkscape's Tango palette

After the Tango variant, the submission was finally complete, and I sent it to the developer.

Attachment: The Small Print

The SVG source attached to this message is for personal use only. You may NOT publish the included artwork, nor you may publish modified versions of the artwork. If you want to use it in any way other than for personal purposes, contact me first.