Frutiger Linotype is a very cool premium font. You may recognize it as the font that the flickr logo was created with. In order to get a free copy, all you need to do is download Microsoft Reader.

Rounded corners can create nice presentational effects and are very popular in web design. They also are a bit of a pain to create because they usually require PhotoShop and the markup is not as straightforward as square corners. So I was excited to give Steffen Rusitschka’s method a try, which uses only JavaScript and CSS and is quite feature full. His ShadedBorders library looks quite nice in Firefox. However, my test did not perform as well in IE6. Strangely, once you mouse over the afflicted area, the problem corrects itself. Here are the before and after shots:

Hopefully this problem will be fixed as I am quite interested in the library. I will be sure to test future versions and in the meantime may investigate potential workarounds for the problem.

In my last post, I mentioned that I installed GIMP to read a Photoshop .psd file. If you’re not familiar with GIMP, it is an extremely high quality free alternative to Photoshop. Using GIMP, I have been able to create several graphical effects with little effort. In this post, I will show you how I created the logos for Lumidant and Moon Rock Media using GIMP.

Moon Rock came to us and wanted a “cliché web 2.0 design”. Basically that means they were asking for gradients, mirrored surfaces, reflections, and shiny or glossy images. To begin the logo, I created a gradient background. Select one color of gray as the foreground and another as the background. Then choose the gradient tool and drag it vertically from the top of the image to the bottom. Play around with this for a little to get a feel for the tool. Once that was completed, I used the text tool to write moon in blue and then rock in pink. I then chose the dodge/burn tool to alternately dodge and burn the pink letters:

Once I was certain the text was how I wanted, I stacked the two text layers to become a single layer, making them easier to work with. To mirror the text, you simply Duplicate Layer and then Flip Vertically. Position it below the original text. Now, under the transparency menu, Add Alpha Channel to the layer. This will allow us to make use of transparency. If the option was grayed out, then your layer already has an alpha channel, so you can just continue to the next step. The final step is to create another gradient effect. We want to use the gradient to hide the portion of the reflection we don’t want to see. I changed the foreground to black. Most importantly, you must click the picture of the gradient you’re creating in the gradient tool options and select “FG to Transparent”. Now drag the gradient tool up vertically over the text. This will hide most of the text with a black gradient:

Since we don’t want the black to show in the final logo, select Color to Alpha and choose black. Now the black will have disappeared leaving you with a finished reflection effect:

In the Lumidant logo on the Lumidant homepage, the lighthouse searchlight or spotlight was also created using gradient effects. To create a spotlight, first create a new layer. This is important because we will duplicate the layer later and only want the spotlight itself duplicated. Draw the outline of the light you’d like to create by using the paths tool. I created the light by drawing a long triangle. After you have drawn the third point and would like to connect back to the first, hold Ctrl and click on the first point. This will close the shape. Then hold Ctrl, click on the short side of the triangle, and drag it outwards. This will round the end of the light. Turn the shape into a selection by clicking “Selection from Path”:

Now, we get to use the gradient tool again. Having created the spotlight-shaped selection, we can draw inside the selection and nothing outside of it will be affected. Select white and “FG to Transparent”. Drag the gradient tool from the point of the triangle to the end of the rounded section. Now Duplicate Layer. Add a 4px Gaussian Blur filter to one of the layers. In the “Layers, Channels, Paths, Undo” menu bar (referred to as a dialog by GIMP), select the layer that you blurred and move the opacity down to 80. Now choose the original spotlight layer and move the opacity down to 20. Hooray! You’ve just created an awesome looking spotlight.

A client sent me a Photoshop .psd file today containing a mock-up of a site he’s interested in having me design. Unfortunately, at the time I received the email, I was on a computer which did not have Photoshop installed, so I had no way to read or view the file. I downloaded GIMP (GNU Image Manipulation Program) and it worked perfectly. The only con with GIMP is that it’s not exactly lightweight if you just want to view a single .psd file, but I don’t mind having it installed as I may find other opportunities to use it.

In other unrelated software news, I heard today that a game called Guitar Rising is in development, which is basically a Guitar Hero knockoff except that you can plug in a real guitar!

I’ve been creating websites for years, since I started Tab World Online while in high school. That site was receiving 1 million page views per month before I sold it, though admittedly I knew comparatively little about web development at the time. So today, I decided I’d take the plunge, live in the spirit of the times, and start a blog. I pick up quite a lot of knowledge on a day-to-day basis that I thought would be worth passing along, so in that spirit I’ll share what it took to get this blog up and running:

The first step was choosing a blogging platform. I chose WordPress for two reasons. The first being that it’s probably the most common blogging platform, which I find is helpful for locating themes, plug-ins, and support. The second is that I was having discussions with a potential client about importing his current site from an outdated, cludgy CMS to WordPress.

Then it was time to get the ball rolling, so I followed the WordPress 5 minute installation.

Visiting my newly created blog showed a sample post on a very ugly site (no offense to the default theme creator). It was clear that a new site design was imperative to getting started blogging. I did a Google search for WordPress themes and found one released under the GPL called Almost Spring. I tweaked it a bit to fit my needs, starting with adding the Lumidant logo to the page header, which was easy enough since the header was in a file called (surprise!) header.php.

The next essential step towards getting started was changing the URL structure. By default links looked like:

http://www.lumidant.com/blog/?p=123

This isn’t great for search engine optimization purposes and really it’s just not as pretty or as intuitive as the alternative I chose:

http://www.lumidant.com/blog/getting-started-blogging/

I’m not sure why the date and name based option isn’t used as the default, but it can be found under “Options >> Permalinks >> Date and name based”. Perhaps it is to allow WordPress to run on hosts without mod_rewrite enabled. I chose the custom option of just my post name as I believe it will be better for SEO since some search engines prefer posts which are not buried deeply in many layers of directories. I think sites should be designed for people first and foremost, so the shorter URL makes me smile.

I personally prefer tagging to categorizing and replaced the categories with a tag cloud by simply calling the handy function wp_tag_cloud(). I added the RSS images to the theme as well, which can be found under wp-includes\images.

Finally, I thought I’d see how many visitors this new blog would garner, so I installed the Ultimate Google Analytics WordPress plug-in and configured it by going to “Options >> Ultimate GA” in the WordPress admin screen. Among other reasons, this is preferable to simply pasting the tracking code in the theme footer because it allows you to switch themes. Only problem is that when I viewed the HTML output I noticed the plug-in was utilizing the legacy analytics code, so I had to update the plug-in source to utilize the newer tracking code. If you do this yourself, just remember to escape the single quotes in the analytics source with a ‘\’ character:

<script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src=\'" + gaJsHost + "google-analytics.com/ga.js\' type=\'text/javascript\'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
    var pageTracker = _gat._getTracker("'.uga_get_option('account_id').'");
    pageTracker._initData();
    pageTracker._trackPageview();
</script>

Undoubtedly, I will continue to make other changes to this blogging layout as I familiarize myself to the WordPress environment, but I’m an 80/20 type of guy and this blog’s close enough to 80% done to share with the world now.