Archive for the ‘Design’ Category
Can You Make My Logo Bigger?
Tuesday, January 31st, 2012Nearly all my clients, upon seeing the first mock-up of their new website, ask this question. My knee-jerk reaction is to say “No”, but there’s probably a bit of designer’s ego in that. I’m effectively a modern publisher and people love seeing their name in print, so I can’t be too rude.
The reasons why I don’t encourage a big logo are usually pretty simple.
If I make your logo bigger, it will push content down. And great content is the sole reason why you have visitors coming to your website.
A logo isn’t really a part of your navigational hierarchy. By making it bigger, headings, sub-headings, some associated graphics and page text will also probably have to be adjusted. Minor site changes affect other items on the page and I’m trying to cram as many things as possible into just 900 x 700 pixels (the size of your site when viewed on a small monitor such as a tablet).
Perhaps the main reason is this. Nobody really cares about your logo in the same way that nobody cares about small men who drive big cars. The bigger your logo, the more insecure your company looks.
Well, maybe that last one was a bit harsh.
In short, when you ask your web designer to make your logo bigger, also ask yourself if it’s the best possible thing for the page. They don’t really care about your logo and it may affect content position on the page, pushing it below the fold, or the position of Important news items. Making you logo smaller might give you more page real estate.
When one considers that the average time spent on any home page is about three seconds, can you really afford to have that third news item or product special drop off the bottom of a laptop or tablet’s screen?
It’s not your logo size that matters. It’s how it affects your pixels. ;p
Resizing Images for the Web
Sunday, January 22nd, 2012When sending images over the web (or attaching one to an email) you’ll need to re-size them. Images taken with modern digital cameras are usually too big to attach to emails or upload to a website page. Often they are 20Mb+ (or 20,000,000 bytes). Many email servers today only allow up to 5Mb files to be sent as attachments. If I’m sending an image to a friend, or preparing an image to build a website, I’ll rarely use anything over 1Mb (1,000,000 bytes). Your camera assumes you want to print the image, so it includes a lot of extra detail that you just don’t need if forwarding family pics to a friend or uploading your profile pic to FaceBook.
Image Resolution
Printing companies talk about resolution in terms of dots per inch. A 300dpi image means there are 300 dots (pixels) every inch. It’s the resolution you need to print a high quality photo.
Images on the web are mostly optimized at 72dpi. On the web we usually talk about how big an image is in terms of pixels. For example, this website is less than 1,000px (pixels) wide. It’s easy to work out that, when building this website, my pictures only needed to be 1000px wide. Shrinking a big picture will retain (and sometimes even enhance) image quality. Enlarging an image can do the opposite.
Take the man with the bird on his shoulder (pictured right). He is 173 pixels wide. It doesn’t matter how tall he is as the image width is all I really needed to worry about. The space he was going into is only 210px wide. Most websites scroll down, so image height is rarely an issue.
Below is what the same bird man looks like when forced into a 500px wide area.
Notice how blurred he is? That’s what happens when small images are enlarged.
As a general rule, images sent over the web (not intended for printing) need only be about 1,000px wide.
How to optimise an image for the web
If I wasn’t already using Photoshop, I’d probably use Pixlr to manipulate my images. In fact, Pixlr is very much like Photoshop and can do most of the basic stuff that Photoshop does. It allows you to upload an image, manipulate it if you wish and then save it as a smaller version. It also does a whole lot of other things to images. Once you’ve uploaded an image, you can apply a myriad of effects filters before saving.
Let’s have a bash…
Using Pixlr.com to resize images for the web & email
Go to http://pixlr.com/editor/ and upload any large (say 1mb or 2,000px wide) image from your computer. It will appear in its own window within the browser.
Double-click the magnifying glass at the bottom of the tool window (left) to resize the image to 100%.
Select Image > Image Size from the pulldown menau up top and punch 500px into the width field. The height field will adjust accordingly.
Select Image > Select File > Save from the pulldown. You are given a series of optons for resolution, but the deafult is fine.
Give the image a name and save it to your computer. Hey presto. You have optimised an image for use on the web.You can also upload images from Pixlr to Facebook and Flickr.
Just remember that, as a general rule, any image that is wider than 1,000px is probably too wide for most websites (unless it’s a background image) and too big to send attached to a passing email.
The images coming out of your camera are high resolution because printers are much higher resolution than monitors.
New Page Explaining Our Web Design Process
Wednesday, March 24th, 2010I’ve just added a new page to the Website section which outlines the 10 step process we go through when building a website. Visit the page here:
From the Blog
- Can You Make My Logo Bigger?
Tuesday, January 31st, 2012 - Resizing Images for the Web
Sunday, January 22nd, 2012 - 7 Website Tweaks for Non-coders
Wednesday, December 7th, 2011