Category Archives: Design

Big Photography in Recent Storm Projects

Visit any website today and you’re more than likely to see a site complimented with photographs and imagery. Websites have been using photos as a way of getting visitor’s attention and delivering a specific message or feeling for almost as long as the internet has been around, and much like every other facet of the internet, the use of photography in web design has evolved greatly. Photos are now used in a variety of contexts, from small central elements to being the entire background of a site. A favourite technique of mine lately is using a large image as the entire header element with content placed atop the photo. Below is a small showcase of some recent Storm projects utilising this effect and some comment into the individual designs.


Continue reading

Designing a Logo: The Creative Process

blog header img
The humble logo – small, pretty and simple. But nestled somewhere in those few pixels lies the power to make or break a business. That’s some heavy weight for such a little guy.

Having just finished working on an identity for a project my agency is involved with, I thought documenting the evolution of the logo from conception to completion along with how I personally go about designing logos would make a pretty sweet blog post. So without further ado, Designing a Logo- the Creative Process.


Continue reading

Google getting into the Web Fonts game?

Earlier today I was on Smashing Magazine when I saw something strange in my status bar.  As I watched the hostnames flash by as the page loaded, pulling in resources from numerous sources, my eyes stuck on one in particular: fonts.googleapis.com. So, I pulled up the source of the page and  right there, on line 3, was a link element pulling in CSS from fonts.googleapis.com!  The request is for a font called ‘Droid Sans’ in regular and bold.

<link href='http://fonts.googleapis.com/css?family=Droid Sans:regular,bold' rel='Stylesheet' type='text/css'/ >

I dug a little deeper and had a look at the source of that CSS file and found:

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'),
       url('http://themes.googleusercontent.com/font?kit=POVDFY-UUf0WFR9DIMCU8g')
       format('truetype');
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: bold;
  src: local('Droid Sans'),
       url('http://themes.googleusercontent.com/font?kit=EFpQQyG9GqCrobXxL-KRMVtXRa8TVwTICgirnJhmVJw')
       format('truetype');
}

From this evidence it’s looks very much like Google is getting into the font serving business alongside current providers such as: TypeKit and Fonts.com.  You have to assume that this is bad news for those guys as Google is highly likely to be offering this service for free, where a subscription is currently required for high volume use.

Update: Google has now officially announced this as the Google Font API with the Google Font Directory – you heard it here first!

However, it turns out this isn’t  a move to dominate the Fonts market – instead this is a collaboration.  Google has been working with TypeKit to produce the WebFont Loader – A JavaScript API to make loading web fonts faster.  Google have posted an example of using the new API – perhaps controversially, it introduces a little bit of noise into your CSS.

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
    </script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>
    <style type="text/css">
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
    </style>
  </head>
  <body>
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>
  </body>
</html>

However, the new loaded is able to load fonts from both Google and TypeKit simultaneously:

WebFont.load({
    google: {
      families: [ 'Tangerine', 'Cantarell' ]
    },
    typekit: 'myKitId'
  });

A move that will drastically improve the load times of web fonts as users being to have a cached version of the webfont.js file in their browser! Currently, each TypeKit user has to include a unique JavaScript file on their site, eliminating any caching potential.

Light tracing and glow photography technique

Equipment you’ll need

To start playing you’ll need 4 things;

  1. A camera which allows slow shutter speed, giving a very long exposure (all DSLR cameras will allow this). I will be using my old Nikon D40, which is a basic ‘start of the line’ DSLR.
  2. A small maglite (or equivalent). We’ll need to use either the AAA or AA battery powered maglite as they have a suitability small bulb for our purpose.
  3. An object to be photographed. I’ll be using my beloved Ibanez SA Guitar in this tutorial!
  4. A dark backdrop. A dark curtain or sheet would be perfect.


Continue reading

Download Firefox – World Record Day

Download FirefoxWe’d like to show our support for the team over at Mozilla, who today, are trying to break a world record with the number of downloads of their latest offering, Firefox 3.0.

If you are already a Firefox user, please go and update yourself :-)

If you have never tried Firefox *shock* please give it a go! We promise you’ll love it.

You can pledge your support at http://www.spreadfirefox.com/en-US/worldrecord/ and they will let you know as SOON as you can download and help make a record.

Good luck to the Mozilla Firefox team from all of us at Storm!

Mac Style Background in Photoshop

STEP 1

We start with a nice simple gradient. You can pick the colours – personally i used Hex #2fb8f3 to #355aae.

You can apply the gradient using the Gradient Tool (G) and dragging from top to bottom – or any which way you like to get your own effect.


Continue reading