At the start of the 2009 I posted a competition on All About iWeb for you all to win an iPod Shuffle by posting links to your site, designed in iWeb but without using a theme. There were a few responses but, hand on heart, I was hoping for a few more. To that end I am going to start a series of tutorial posts on how to build a great looking iWeb site, without too much effort. To kick things off I am starting with a grungy style site.Not only do grungy sites seem to be the latest thing on the Internet at the moment but because they are so haphazard if we make the odd mistake or slip up, it doesn’t matter. Mess is the order of the day here.
The reason I picked this style first is twofold. First off I like it. I spend a lot of time looking at design related web-sites and many of them are either designed with a grunge feel in mind or have links to sites that are.
Secondly, a friend of mine is in a metal band and he is after a web-site, so I thought I would kill 2 birds with one stone and show you how I am going to design a site for him to look at (he has asked a few people for ideas) whilst giving you all a bit of inspiration.
Before we start, all of the images I use in this tutorial are freely available on the Internet. I have added a few links at the bottom of this post for you to get some great free textures. The only image editing tool I used was Preview.
Here’s the site I am going to create.
SO LET’S DESIGN AN iWEB SITE
To begin with before I open iWeb I make sure I have a pen and paper handy and make a few sketches. This is the most important part of a web sites design process. I also spend a little while looking at other grungy style sites just to get some ideas. Once all that is done I gather together the images I think I might need for this site and save them all to the right-hand side of my desktop so that it is easier to drag n drop.
Finally I open iWeb and select a new blank page in the white theme. I have turned on the layout guide (Shift+Cmd+L) to make things a little easier. Open ‘Inspector’ and choose the ‘Page Layout’ tab. Change the default width to 800 px and the ‘header’ to 150 px. Also make sure that you untick both nav-bar options in Inspector.
We’ll start with the page background. Select the ‘Page Layout’ tab in Inspector once again and choose an image fill that you have selected. If you have a large image you may not need to tile, but I left it as tile; you never know who wants to see your site on a big browser.
For the main body of the site I will be using a text-box with an image fill but through trial and error I have found that it is best to leave this until the end.
So lets concentrate on the header. Obviously we need the brand-name here, and I have added the band’s name, chosen a nice metal style font from www.dafont.com and placed it where I want it. I added a shadow and made the ‘design’ and ‘chaos’ larger with the font inspector. I also made it slightly transparent to allow for some of the paper texture to show through and added a shadow with a low offset to make the edge look a little blurry. I also added a little horror icon/logo to keep in the metal theme.
The nav-bar next and for this I am going to use an color gradient filled rectangle from the ‘Shape’ menu to create separate buttons. The button is given an outline of ‘Line’ and the rough pencil-style line is chosen. To match the color use the magnifying glass and hover over the button to pick the same color brown. If you double click on on the shape you can add text to it. Finally I applied a shadow to all but one of the buttons to give the effect of ‘selected’. The shadow for the home button just has less of an ‘offset’.
Finally I add a text box and give it the same fill as the site’s background, but add it as tinted image rather than just image. This allows the main area to stand out. I have also added a skull image with a high level of opacity so that it only just shows through, like a watermark. Once again I have added a ‘line’ border to make the edges a little rougher.
That’s the page done. I can now use Copy/Paste to apply these elements to any page I want to create. The only thing I have to remember is to adjust the ‘header’ and ‘page-width’ settings for each new page I create.
Here are a few pages I created with the default Web content added to make it fill.
Next time I shall be having a go at a gaming style site. If there is style you would like to see me explain in a tutorial drop me a line or leave a comment. Why not leave a link to your grunge inspired iWeb site.