Jon Aquino's Mental Garden

Engineering beautiful software jon aquino labs | personal blog

Friday, December 23, 2005

Create 37 Signals style graphics using free tools and fonts

Today I decided to sit down and figure out how they do those snazzy Web 2.0 gradient boxes, like those on 37signals.com. And I didn't want to shell out $750 on Photoshop.



And here's how I did it:
* Download Inkscape (free graphics program)
* Make a rounded rectangle with a very subtle gradient
* For the font, use Blue Highway (free)

Incidentally, Blue Highway is a fairly good approximation of the pretty 37 Signals font. You be the judge:

posted by Jonathan at 12/23/2005 09:37:00 p.m.

10 Comments:

  • Thanks wirjo!

    By Blogger Jonathan, at 12/24/2005 8:23 p.m.  

  • Hi Jonathan
    It's probably a really dumb question but I gave this a try and I can't work out how to remove/crop the rounded rectangle from my background. It's all ready to go but I can't extract it from the mother ship.
    Can you offer any clues?
    Many thanks
    Neil
    ps. otherwise, great tip!

    By Blogger Neil MacLean, at 1/06/2006 4:28 p.m.  

  • Hi Neil - I use a very low-tech way to crop it out - I just take a screenshot with Alt+Prtscr then paste it into a paint program to do the cropping (I like IrfanView but you could also use Paint).

    By Blogger Jonathan, at 1/06/2006 8:11 p.m.  

  • Web 2.0 gradient boxes??? That is the stupidest use of Web 2.0 I've heard yet.

    By Anonymous Anonymous, at 1/11/2006 8:36 a.m.  

  • With a recent version of InkScape you can export to png.

    When you select 'drawing' as the selection mode it will automatically create an alpha channel on the background.

    Then for use on the web, it's wise to open it in GIMP and export it as a GIF so that IE can see the transparency of the alpha channel.

    By Anonymous Anonymous, at 1/20/2006 1:37 p.m.  

  • Thanks Roger - that Export function is great!

    By Blogger Jonathan, at 1/20/2006 7:38 p.m.  

  • Hey Jon, have you heard of the font Expressway Free? I think it's a better approximation of the highway signage font 37s uses (whose name escapes me; I don't own it) than Blue Highway.

    By Anonymous Anonymous, at 3/03/2006 6:20 a.m.  

  • Hi Amy - Great to hear from you! And thanks for pointing that out.

    By Blogger Jonathan, at 3/03/2006 7:08 p.m.  

  • Thanks heaps for that, I've been wanting an open source version of freehand for ages... Just never got around to looking for one. I have downloaded inkscape and it looks really cool. Thanks again

    By Anonymous Anonymous, at 3/11/2006 3:37 p.m.  

  • natalie - glad it's useful to you! yay!

    By Blogger Jonathan, at 3/11/2006 3:54 p.m.  

Post a Comment

<< Home