Posted by: Peter Andrease
Posted on: June 13, 2012 8:14 am
- Open up photoshop. The latest edition is CS6 but most of the points in this tutorial will work back to CS4. When picking your document size I usually design in 960px width, so I’ll usually create it at 960 setup guides for the edges of the page and then add extra padding to either side, maybe an extra 100px each side.
- Set up your guides if you haven’t already. There’s an action I like that creates a 960 grid in multiples of 12, 16 and 24. You can find it here. It does help speed up the whole process.
- Now you’ve got your canvas, you’re ready to start designing. Hopefully you’ve got some idea of what you or the client wants. It’s a good to have content, branding, images and a spec before you start. I usually sketch out a wireframe of the site I’m going to design first and refer back to it while I’m working in photoshop. Pencil and paper is much faster for jotting down new ideas and designs so it’s good to have one to hand.
- I’ve got into the habit of picking my fonts first and I think it’s good to be in that habit. As you’re designing for the web you need to make sure you’re using web safe fonts, check my article here. There’s some great alternatives to Arial and Georgia so don’t feel like you’re stuck with these.
- Next I’ll probably pick my colour pallete. My favourite place for this is kuler. Its simply brilliant for colour matching. If you’ve got a colour already then kuler will match it or if you’re looking for a new colour pallete then there’s literally thousands to choose from.
Posted by: Peter Andrease
Posted on: May 24, 2012 1:50 pm
The quickest and easiest way I think is to use google web fonts, it’s not the best but it is free. At the moment there are over 500 font families on there and 90% of them aren’t great. So you’re going to have to do a lot of sifting through to find the right font. Here’s 10 I like….
- Open sans
- Josefin sans
- Abril fatface
- Pt sans
- Yanone Kaffeesatz
You’ll have to watch out for what they look like especially if you’re going to use it in body text, I would recommend only using them as display and captions for some of them.
Okay another css font resource is font-squirrel. You’ll find some good fonts on here too, font-squirrel also has a generator on the site. So you can upload the font and get all the type that you need to work across browser, they even give you the html and css and even the cufon file (if you’re really want it). If you’re generating your own font be careful what you use because even if you’ve brought the font doesn’t mean you can go spreading it around the net, once it’s there and there’s a link to it anyone can download it.
Another one worth checking out is “The league of moveable type”.
I find the fontdeck site much nicer to use but both have really high-quality fonts like Din, Adelle, Futura, Freight Sans, Proxima Nova.