FWebDe

Creating an Awesome Website Design With Gimp

October 18, 2009, in Web Design, by Eric Bannatyne.

If you do a Google search for Photoshop web design tutorial, you will get about 107,000,000 results. It seems to me that there are not enough Gimp tutorials. So, I decided to put together my own.

Today, we will be creating a simple blog and portfolio design, using Gimp. By simple, I mean that you can create this using only the Rectangle Select Tool, Bucket Fill Tool, Blend Tool, Paths Tool, Text Tool, and a couple of others.

Next week, we will be converting our design into HTML and CSS, so that we will be able to make a Wordpress theme out of it.

So, let's get started with the tutorial!

Step 1

Start up Gimp, and create a new image, with a size of 980px by 720px. Fill the background with #1e1d1a.

Step 2

Create the following layers in your image.

• featured
• latestPosts
• latestWork
• nav
• ads

Create a box on each layer, by dragging out the Rectangular Select Tool, and using the Bucket Fill Tool to fill the area with #27211b. Arrange the boxes the way they are in the screenshot below. Use guides, by clicking and dragging from the rulers, to keep everything lined up. Be sure to leave some room for the header.

In the screenshot, the boxes are white, but that was just before I decided what colour to use.

Step 3

Get the Rectangle Select Tool ready, check the box next to "Fixed", and set it to Height: 80px. Choose one box, and create a selection along the top of the box. Select the Blend Tool, and set the foreground colour to #2d251d, and the background to #27211b. Make sure the gradient selected is FG to BG (RGB). Drag from the top of the selection to the bottom, holding down Ctrl to make a straight line.

Repeat with each box.

This will add a subtle gradient to each box, giving a bit of depth to the design.

To add a small border around each box, select the entire box with the Rectangle Select Tool. Set the foreground colour to #272421, and go to Edit > Stroke Selection. Set the width to 2.0px, and click Stroke.

Step 4

This next step is for a bit of decoration.

We will use the Paths Tool to create some curly lines in the top left corner. If you don't know how to use the Paths Tool, you can check out this tutorial.

Create a new layer, and use the Paths Tool to draw a curving line near the top left corner. To make the line visible in the image, set the foreground colour to #ffffff. Then go to Edit > Stroke Path. Choose Stroke line, and set the line width to about 4.0px. Select Solid color, and click Stroke.

Create a few more lines like this, each on a new layer, so that you can play with the layer opacities to see how they go together. You can also try experimenting with the line widths, to find something that you like.

When you have it just how you want it, right click on a layer with the lines, and merge it with the others. Then, merge it with the background.

I just put together the lines in this screenshot fairly quickly, I'm sure you could do something better if you spent some more time on it.

Step 5

Use the Text Tool to add your site's name above the Featured Post section of the design, in a font that you like. Set the text colour to #ffffff, and make sure that it is at a good size.

Step 6

We will be separating the site name into two separate colours.

In the layers list, right click on the layer for your site name, and Discard Text Information. Select the Select By Color Tool, and click on your text, to select everything that is white.

Above the layers list, you should see a checkbox labeled "Lock". Make sure that this is checked, to lock the alpha channel, to avoid jagged edges.

Select the Rectangle Select Tool, hold down Ctrl and drag over the second part of your site name. This removes that part from the current selection.

Go back to the Blend Tool, again. Set the foreground colour to #d58215, and the background colour to #d69541. Drag from the top to the bottom of the selection, to create a nice gradient.

Next, use the Select By Color Tool to select the rest of the text that is left white. Do the same thing as before to create a gradient, except set the foreground colour to #d3d3d3, and the background colour to #f4f3f3.

The site title should now look nice and pretty!

Step 7

Now, we can add in some sample content and images, like this.

We now have a completed design, all done in Gimp. You can download the completed .xcf file.

Be sure to Subscribe to the RSS Feed, because next week, we will be converting this design into an HTML/CSS template.

Update: Check out the next part of this series: Converting a Gimp .xcf to HTML/CSS