Tips and TricksTutorialsWeb Design

Build an iWeb site from scratch – No themes – Part 1 – Grunge

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.

iweb_grunge_site

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.

iweb_page_layout_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.

iweb_grunge_header

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.

iweb_text_box_inspector_settings

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.

iweb_blank_grunge

Here are a few pages I created with the default Web content added to make it fill.

iweb_grunge_site

iweb_grunge_about

iweb_grunge_blog

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.

Useful Links

Mayang.com (Free textures)

Smashing Magazine (free icons)

Designshard (free textures)

You may also like

15 Comments

  1. Great idea for a series. Looking forward to how you will create a blog from scratch.

  2. Impressive!! Thank you. Looking forward to the rest!!

  3. Thanks for your tips and tricks. Please check out my iWeb from scratch site and give me feedback. Here is the link. http://www.livelovebe.com.

  4. Thanks that’s great. Makes the thinking simple.

  5. how did you get the blood splats seen elsewhere on the page? I’ve looked but can’t find them. Fab tutorial though. It’s hard to find a good set of instructions for newbies to iweb.
    We’ve posted our first attempt http://www.silversoda.com, but plan on making it bigger and better over time.

    1. Karl,

      thanks for your comment. If you check out the post I have planned for tomorrow night, all will become clear.

      Tim

  6. Wow I just realized that on this site I learned that can edit the site. Im not sure if this was a tutorial but it did help me realize how to edit. The site serves many purposes. thanks

  7. Hey, nice tips. Perhaps I’ll buy a bottle of beer to the person from that forum who told me to visit your blog 🙂

  8. Wish I knew this when I redid my website. VERY useful information that’s made it possible for me to create another website from the ground up — with a left hand navigation bar my client wanted. Wish Mac help had more information in it.

  9. Great Idea!! Where Do You Get All These Ideas?
    I rwally enjoy visiting this site! 🙂

  10. Thanks for this post, it’s provided me with a whole new perspective on building a site on iweb. One question I have, how do you create the page links and make them work once you turn off the standard nav-bar options in inspector? I see how you can easily create your own links but how do you get them to work? Thanks!

    1. Anne,

      THanks for your comment. I am not sure what you mean by ‘how do you get them to work?’ Creating your own nav-bar is as simple as creating a standard hyperlink in Inspector.

      Tim

  11. Hi AAiW,

    Check my website Cottonmouth (www.cottonmouth.nl) dutch t-shirtlabel.
    Build from scratch with iWeb.

    Ciao,
    Marcel

    **Webdesigners are the new Rockstars**

  12. Tim you are awesome… I thank you for sharing your powerful ideas/tips with us… apple should invest in individuals such as yourself that assist with development.

    cheers,
    Sarang

Leave a Reply to All About iWeb Cancel reply

Your email address will not be published. Required fields are marked *