MicrostockGroup Sponsors

Author Topic: NEWS - Customize a Free Web Template for Under $5  (Read 2234 times)

0 Members and 1 Guest are viewing this topic.

News Feed

« on: February 29, 2008, 15:45 »
Customize a Free Web Template for Under $5

One of the things web designers come up against all the time is clients saying "I have a budget of very nearly nothing, I want a website, and I don't want some free web template, either." Since most of us are not inclined to work for free, something has to give here. But the truth of the matter is that the free web template objection is really because they are so * generic - no client can ever see themselves in those templates.

Stock images to the rescue! Because while you may not have the time and budget to lovingly code CSS from scratch and break out Illustrator or PhotoShop to custom create images for Mr Brokey McBrokeypants, you can easily customise a free web template and clip together a custom header from stock images for less than five bucks in under an hour.

Most of the free web templates out there are incredibly blah and generally pretty crap. But even in Paint, you can take stuff like this from yawningly dull to something that is nicely customised for a client:

Basically, in order to not have to get too deeply into editing the CSS and layout, we're using the default header proportions and using stock images to customise a new header as a drop-in replacement - no muss, no fuss, no bother.

Create a new image in your graphics program of choice that fits the proportions of the boring default template header image. In this case, it's 860px wide and 264px tall. Since the new header is going to use two images pasted together, I want to balance the left image area over the left navigation so everything lines up nicely. So, our header image is setup in two parts:

In this case, to meet each area's minimum width requirements, I need to use small instead of blog sized images, so I'm spending a whole $4. (For which, by the way, I am totally charging Brokey McBrokeypants. Cheapskate.)

After choosing my two stock photos or stock illustrations, I crop my left one 240x264 and slap it in the left of my header, and crop the second to 620x264 and place it on the right.  Save as header.jpg, drop it into my website's /images directory, and badda bing, badda boom.

I did a fun thing for this example because nobody ever asks me to do anything cool like a website for a rave, but really, this quick and dirty method works for any kind of client:

Natural Living: Leaf Image | Couple Image
Beauty Care: Products | Face | Cosmetics
Rave: Badge Image | Rave Image

You can click that image to see the full-sized versions, all of which leave plenty of room for logos on the lef and promotional copy on the right. (Don't underestimate how good font selections in images like these really adds to the custom feeling.)

And if you like, you can download the CSS and watermarked image files I put together for this show and tell in the Free Web Template Pack. Although to be perfectly honest, I only threw it together for demonstration purposes, so I'm not providing support for it and I'm making no gurantees about it's perfection, either!

Hey, what do you want for five bucks?


Related Topics

  Subject / Started by Replies Last post
0 Replies
Last post February 29, 2008, 16:30
by News Feed
0 Replies
Last post March 03, 2008, 02:30
by News Feed
18 Replies
Last post March 15, 2010, 22:04
by RacePhoto
6 Replies
Last post October 06, 2013, 01:35
by cascoly
20 Replies
Last post December 31, 2013, 07:13
by ShazamImages


Mega Bundle of 5,900+ Professional Lightroom Presets

Microstock Poll Results


3100 Posing Cards Bundle