Tom’s Graphic Design Journal

Everyone (or at least I) get impressed and drool over fancy reflective beveled icons. They are much more "web 2.0" and "Mac" looking. Even Microsoft creates some nice glassy looking icons for their software these days. It just seems like the way to go and it is just about a cliche now.

There are people who get tired of it...thus we get pixel art (which is technically more of reverting to an old style - or retro) and several other graphical "movements" I will say in terms of computer user interfaces.

The globes are perhaps overdone but always attractive. What is interesting though is to take that technique and apply it to other shapes and uses. Paul Boyer has taken this popular style and, I feel, expanded upon it taking it to the next level. Some of his work can be found on Win Customize, a web site that has resources on customizing your Windows user interface. He has an entire section called "Icon-A-Day." He even has gone through the trouble of making some tutorials and some very good screencasts. Yes, I've watched over 30 minutes of video tutorials by him and he certainly knows his stuff. He also makes things look easier than they are But in fact, it isn't terribly difficult to create those fancy reflective globes.

Boyer prefers CorelDRAW, while I've seen many many tutorials for glass globes for Photoshop (and even Illustrator), I have to agree with Boyer's choice for some of the more advanced shapes. CorelDRAW seems to be much faster as well, but that could also be because Boyer is good at what he does there. Though I have followed some tutorials for Photoshop and will say they are much more painstaking.

Boyer's icons are much more than glossy globes though. In fact, his icons are actually highly detailed and unique. I know that's difficult with all the glossy reflective icons out there, but his illustrative style is certainly refreshing and I have personally not seen many other icons with his style. I'm not an expert in the field, but I have customized my Windows interface and icons before. I've used LiteStep and many other skin programs, I've made my computer look like a Mac, and I've been to many of these customize sites years ago at least. So to me, he is the Godfather of pretty shiny icons.

I also want to make a note here. While Boyer has many icons to download in ico format for use right away on your computer, it is also possible to follow his tutorials and create larger size images. His icons are more than "icons" they are in fact illustrations and certainly have their place online and even in print. So, before you think I'm writing here about just something nifty to use for your computer settings...think again. I personally plan to read more of his stuff and watch more of Boyer's videos so I can learn how to create some nice original icons for myself to use in my blog here.

I'm terribly sorry that I don't have my fisheye navigation completely supported under IE yet. It uses 24bit png images with transparency. IE6 does not support those types of files natively. That is why there is an odd colored (blueish for me) background behind the images if you are uisng IE6. IE7 is ok though.

Yes, many of us know you can make IE6 use these png images (several fixes/hacks exist) and I've done it before, on my previous theme. However, there's some incompatibility with the known fixes and the fisheye script. Most require you to specify a height and a width for the image and that's one of the hang ups...I can't otherwise it throws off the fisheye script.

Another solution is to specify images in the style sheet or in a style property of a div, using a png as a background image. This is the previous approach I took to get pngs working in my previous theme. It took a little bit of work, but I also had the links working over top these backgrounds images which again is a tricky one to solve as well (trick is to make links positioned absolute...but that can cause unwanted design problems). Use my search engine (G icon above) to look up various png fixes. I will eventually post my own tutorial.

So sadly, due to how this script operates, I couldn't find a fix for the png images. I tried php, css, and javascript fixes but unfortunately they all set properties that ruin the fisheye. If anyone has any ideas, I'd love to hear them. Ultimately what I will end up doing is putting an if statement and use gif images if the browser is IE6.

Yea, so I decided to re-design my blog...Mind the mess while it's under construction. The drag and drop was fun while it lasted. Other people are starting to add drag and drop to their blogs and I want to try and stay fresh/unique.

My "theme" and usage of the drag and drop was probably very unique, using the sticky notes which are kinda cool and I will definitely use them in the future on other web sites when the opportunity presents itself.

There were some other issues though with my drag and drop theme. I may have been able to work some out with different javascript libraries (such as the Safari scroll issue), but I couldn't make the theme fit. The design was just a waste of space unless you had a high resolution. So I had to curtail it for those who don't have resolutions above 1024x768. 1024 is an extremely popular resolution and when you have toolbars and such, it just didn't cover the theme sadly.

So for now, no drag and drop. I may add some in for customizing the layout, but we'll see. The new attraction here, if you haven't noticed, is the fisheye effect for the navigation. Not all of the navigation...but a lot of this blog's features are found in that navigation menu. I carefully planned this one as not to destroy usability and normal expectations of a blog. One can navigate around the blog very quickly and easily. Most blogs are completely out of control with their layouts. It's impossible to read some of them. I'm always a proponent of intelligent interfaces and layouts that facilitate rapid and easy aquisition of information.

The other cool feature is the implementation of my custom Google search engine which I find more and more people using. I will also have a directory (partially for my sanity) as my bookmarks list is way too large and if my computer, or the fox, dies and I lose them I'll cry. The other nice thing is I will be allowing "nominations" for links into this directory. So it will be a hand-picked directory of links/resources with no ads or junk...something that doesn't really "successfully" exist out there (and if it does, I'd like to know where). I don't care if your site isn't in my directory, I don't need a link back, etc. So there will be no junk in it like many other directories fall victim to.

So here's this theme.

I started using Aptana IDE...then quickly changed to Eclipse with Aptana as a plugin. Actually, I'm using EasyEclipse for PHP...and PHPEclipse plugin and Aptana plugin. Good so far...I'll put a post about my opinions of these wonderful IDEs soon (IDE stands for Integrated Development Environment...but I still call it web editor for all intents and purposes).

I wanted to see just how much control I had with these IDEs and how useful they would be for cakePHP. It took some hunting, but I found (partially on cakebaker's blog) how to run "bake.php" from within Eclipse/Aptana. Way cool! Now I don't have to be arsed to use Windows cmd (yes, I use Windows) and keep typing in the command to use bake. I just click a little button and voila. I'm posting here because it was a pain to find and I didn't see it anywhere else so I'm sure more people will want to know how...so the more locations the information is posted....you get the idea.

This will also be convenient to anyone not using Windows as well...why open up another console and have 50 million windows open? We have enough between all the web browsers, editors, graphics applications, and system windows...

Here's how you run bake from within Eclipse/Aptana:

Set this in Run>External Tools>External Tools... with the following settings under Program:

Location: c:\path\to\php\php.exe
Working Directory: \...\cake\scripts\
Arguments: bake.php

They have browse system to find the paths so you don't need to type out all your paths.
That's it. Now you can run bake from the run external icon/menu at the top which appears in a nice little console window.

I feel that spec work is terrible. A designer goes out of his/her way to create something (or at least a good bit of something) and in the end the client can turn it down. What a complete waste of time and energy not to mention the creative and intellectual work that went into it all.

With the web, we have more to worry about because the wonderful "view source" options web browsers have, one can completely rip off someone else with ease. Well, good news! There is a way to protect yourself as a web designer.

How can you protect HTML? IonCube has a FREE HTML encoder! Provided you of course set everything up on your server, no one will be able to steal your HTML code! So you could design full functional mock-ups without fear. The only problem is, you don't want to use this encoder in a production environment because search engines won't be able to pick up the code. IF there was some way to allow the search engine robots to bypass the encryption, I think the HTML encoder would be much more widely used. Web sites get ripped off all the time. This could help make it more difficult to copy a site. Sure, if someone knows HTML they can copy a design from scratch, but that's something most thieves don't want to bother doing. So, in the very least HTML encrypting is a good way to deter and protect your spec work.

Ioncube also has PHP encryption software which I would completely recommend if you script PHP. It is VERY easy to setup (far easier than most other options) and very easy and fast to encrypt. It was the best investment I've made yet for web design.