Here’s a low tech way to measure the golden ratio in things you’re designing in photoshop. Just open the png below with your project in photoshop and line stuff up. Convert it to a smart object and keep it around. I don’t get why there isn’t at least be a feature in photoshop to let you line rules up according to the ratio.
It is a 1000px wide translucent png. If it were any less sophisticated, it’d be a ruler on your screen.
This semester I’m a teaching assistant for the CS015 course at Brown that I wrote about half a year ago. My main responsibility this summer has been revamping the course website. If you are reading this blog post any time before the summer of 2010, you can probably see the new layout live. In the case that I’m communicating with you over a year into the future you can see a screenshot.
My brief was to make a website that would fit with the course’s theme (Yes the course has a theme. Read the aforementioned blog post), Star Trek. I decided to base the website off the Star Trek universe’s LCARS computer systems. This was by no means an original take on making a Star Trek tribute layout – lots of fan sites have done similar things – but it is certainly recognizable.
I cherry picked other layout aspects quite liberally from different time points in the Star Trek series. The header text uses the typeface from The Original Series. LCARS itself only features in episodes and movies placed chronologically after TNG. The ship shown is the Enterprise of the 2009 Star Trek relaunch.
I ran into the CSS column issue when making the layout. The dashed line under the navigation buttons was always intended to stretch to the bottom of the layout no matter how long the content was. I originally made this work with positioniseverything’s CSS columns hack but later realized that there would be anchored links in the content presented in the layout. The anchored links caused the layout to break in Firefox, so I was forced to revert to javascripting the same effect. However the javascript I (found via google and) used to do it doesn’t work in some versions of IE. I obviously need to become proficient with a JQuery or another good javascript library.
The layout also uses conditional comments and the ie7-js script to mitigate issues with IE6, in particular the use of a png image with an alpha layer for the Enterprise in the top left.
In closing… if you are reading this and are an undergraduate at Brown, take the course this year! If you tell me you’ve read this post, I’ll give you extra special help. This statement is probably a lie.
The is a public service announcement. The font used to make Wakoopa.com‘s logo is Glamour Girl. It is free for personal use.
Many thanks to Robert Gaal, one of the co-founders of Wakoopa, who was nice enough to provide me the font information over Twitter. If you think you might geeky enough to find logging your used applications an interesting idea, I greatly recommend his application.
I make note of this information because it would be a grand shame if one were to, say, spend one and a half hours attempting to emulate the typography used in the logo and extrapolate it to create a single word simply because no where on the internet is the font used stated.
It would be especially regretful if the person in question were then to resize the product of his labour to a size that made all the work feel rather insignificant.
Instead, any hypothetical person emulating the Wakoopa logo would do well to smack his words down in Glamour Girl. Oh, and do replace any letter dotting done in hearts.
How does my attempt compare with the real thing? I’m not a huge fan of the a-t letter spacing.
I decided that the splash page that was at http://zethrae.us before was boring, pointless and less than visually interesting, so in a rabid fit of designing, I whipped up this one.
The logo is the only real piece of design I’ve done for the page. It is based on a concept I came up with a few months ago but never had the time to develop until this winter break. I plan to use it as an identity thing for a while, replacing my older tri-blob one which I made some time during high school.
I had to spend a fair amount of time working out how to allude to each of the logos of my favorite and most relevant social networks, and I’m quit happy with the results there, even if due to text rendering working differently across browsers the alignment is likely to be imperfect in many cases. It looks fine in mozilla and webkit browsers anyway.
I tried to find and use the same font for each of the logos, and use it in as close to the same style as contextually possible. This meant changing the text color to its original background color in the cases of Last.fm’s and Facebook’s and reworking Dopplr’s. Twitter’s doesn’t use a publicly available font, so I had to improvise slightly and use SparkyType’s Chickens. Flickr uses Frutiger 75 Black, Facebook uses Klavika Bold, Last.fm uses ITC Ronda and delicious uses Arial (but as browser text). I’m not quite sure which font Dopplr employs but the imitation in a basic sans-serif font was fine.
Anyway, I’d love to know what you think of the new page. I’m also going to be designing the contact and design pages soon.
