Archive for the ‘Design’ Category

A brave new world

Thursday, April 9th, 2009

I use GIMP for almost all of my image editing. I’ve gone from randomly applying filters to actually planning ahead of time how I am going to modify a picture.

So I wanted a simple, yet evocative title and perhaps logo for the website. After all, it is to be a showcase of my skills.

I picked a color scheme that had a gold already in my Gimp palette. The logical choice to go with it was a blue, i.e., the colors of the Golden Hurricane, my alma mater. I’m not sure I have the official color scheme, but no matter, I like it.

So I picked a font from dafont.com: Nu School Militia. I had used it in the past on a tshirt design to try and get that Space Marine look. Anyway, the first effort is here:

First Tulsa Labs header

First Tulsa Labs header

I struggled with whether I wanted the words on the same line or not. I toyed with wanting to add a dynamic menu area on the right. Also, I probably had a darker font at some point.

The next issue is that to get a header box, I want a curved corner on my panes. To do that, I have the exterior color, the border, and then the interior color. And then the pane is assigned a ‘background-color’ that is the hex value of the interior color I used in Gimp. Well, the jpg ends up looking washed out.

My solution is to go to a png, which allows for tranparency, unlike a jpg. I can also change my borders such that if I just provide the border color and have the interior and exterior be transparent as well. So I went to this as my header:

Second header logo, uses transparency

Second header logo, uses transparency

You can see I decided to go to just one line. And I decided I did want an image. What popped into my mind was a rocket ship. I’ve got a simple art deco ink on a piece of scratch paper. But it isn’t good enough for a webpage. And I’ve decided that while I’ve known all along my sketching sucks, I can do image composition. So off I went to google images to search for retro rockets, art deco rockets, and steam punk rockets. No luck on finding what I wanted.

I did come across a stock image of the R100, but it was facing the wrong way. Hmm, the image on the wikipedia site looks okay.

Anyway, I took an image and started a stenciling process. I also flipped the airship to go left to right. That left the ‘R100′ on the fuselage marring the image, since it was mirrored. I then found this Gimp tutorial: Complete Stencil Tutorial Using a Free Program on instructables.

I started playing with it and got an image I liked. I thought about also leveling the airship, but when I saw this effect:

Final header

Final header

I was really happy. A nice side-effect of scaling the image size of the pure text to take the R100 is that I accidently stretched out the ‘Tulsa Labs’. I could have easily fixed this, but I loved the effect. It isn’t as crisp, but it gives it that Irwin Allen look (Lost in Space, Land of the Giants, etc).

Also, serendipity reared its pretty head – the blue tint in the R100 went well with both the text color and the planned background.

The only remaining problem, which I could solve by cropping the image, can be seen by viewing TulsaLabs.com from both Internet Explorer and some other browser. With other browsers, the image gets cropped nicely across the bottom of the R100. With Internet Explorer, more of the R100 is shown. Ehh, I can live with it being different.