Archive for the 'Design' category

37signals offices very practical but not very attractive

Sunday, November 7th, 2010

What would it be like to have an almost unlimited budget for your new offices and to start from scratch? Goal: to have great space for work space for sixteen to thirty two employees with on premises presentation facilities.

37signals had that opportunity and went to their architect Brad Lynch with a clear concept. A large open space surrounding a core of private space (sound proof phone booths, multiple conference rooms). This bathes the whole group in natural light from massive windows in their loft space. The traditional approach is to put all the important people in private offices along the windows. Here founder Jason Fried successfully turned things upside down and ended up with a space in which more people would be happy.

37signals office central island for private functions
37signals office central island for private functions

Design | No comments

ImageMagick vs GD vs Photoshop

Friday, March 26th, 2010

We want to have nice pictures in our posts. So do You. Good composition, colors and focus are by all means necessary. But there's at least one more step between picture in your camera and picture on your web - resizing. Either on your computer in your own image editor, or on the server using image processor designed for that purpose, or on both.

In this article we will look at the quality of the server-side processing of the pictures when they are being resized. There are two tools for image handling running under php. First is build-in php image processor called GD. Second tool is ImageMagick which needs to be additionally installed on the server.

Focus on Details

If you want really nice pictures, details matter. Details are the magic that makes the picture look extraordinary good. We examined how GD and ImageMagick behave when it comes to details. With GD we don't have many ways how to affect the result, but with ImageMagick we have the choice of filters and sharpening options. Look at the following portrait and notice the difference. You can see that the GD picture looks somehow blurry while the ImageMagick looks more sharp and preserves details.

GD processed
GD, 32kB
ImageMagick processed
ImageMagick, 63kB
Photoshop processed
Photoshop, 58kB

Design, WordPress | 9 comments

How to resize a text logo correctly in Photoshop

Thursday, January 29th, 2009

A lot of logos on the web look like they were run over by a truck. Blurry, jagged, hideous. Here's how to make your resized logos gorgeous and sharp.

The first point is to always save your graphics and logos as either a GIF or a PNG. Saving solid colour graphics and logos as a jpeg is a catastrophe and inevitably results in nasty digital noise. This sound elementary but I have had three trained graphic designers do this wrong, including a graduate of the Art Institute of California. The only one who knew the right answer (in what format to save a text logo) was our lead programmer, Peter.

For an example, one doesn't have to go further than the website of Royal Bank of Canada.

rbc logo jpeg text buzz
RBC logo: jpeg text buzz in action

Even billions of dollars won't save you from jpeg text buzz on your logos. Here are the jpeg jaggies in closeup:

Design | 12 comments