Creating an Awesome Website Design With Gimp

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.

Gimp Screenshot

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.

Gimp Screenshot

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.

Gimp Screenshot

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.


Gimp Screenshot

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.

Gimp Screenshot

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.

Gimp Screenshot

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.

Finished Design

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

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

24 Comments

  1. October 22, 2009

    Hello,
    nice tutorial and helpful but I want to ask you, maybe a stupid question for you: after doing this what is the next step to make this a webpage?
    Thanks!

  2. October 22, 2009

    @vasiauvi: After creating the design in Gimp, the next step will be to 'cut out' parts of the image, and create a design with HTML/CSS with them later.

    I will be talking about this in more detail in my next post on Monday.

  3. March 16, 2010

    Thats a very useful Tutorial for people wanting to know how to create a webpage, you could always try designing it in photoshop or paint shop pro too. Thanks for Sharing this with us.

  4. June 10, 2010

    very nice tutorial,thank you for sharing this.

  5. August 2, 2010

    Very informative! This seems pretty simple enough, especially for newbies.

  6. August 28, 2010

    This is a great tutorial! I use Gimp a lot in my designs but I've never actually approached designing a webpage in this way. Thanks for getting me thinking!

  7. September 9, 2010

    Simple and clear instructions in web design with gimp. I'm using it in teaching my friends in web design too. It helped a lot. Thanks for sharing the information.

  8. October 24, 2010

    Such excellent design tools out today. I remember when creating websites was mostly done in code. Just so much easier and efficient.

  9. October 25, 2010

    Awesome post! You're right, there are countless tutorials on Google for creating you own website - it's pretty overwhelming. Your article was very informative and easy to understand - thanks!

  10. November 18, 2010

    I'm surprised how good the results are using Gimp. Always been one of the Adobe software lot. Might give it a try sometime, thanks for the inspiration.

  11. December 20, 2010

    Never used GIMP before to create a website. You get some good results there. I do think it's important to try new tools from time to time.

  12. January 2, 2011

    Thank you for the Gimp tut... always more needed!

  13. January 6, 2011

    Great tut, thanks for sharing. I will agree with Eric - always more needed! :)

    But I still find it really hard to work with after using PS for last 5 years. Just can't get used to it.

  14. February 7, 2011

    It certainly looks like an easy to use tool for web design. It almost looks too easy! Thanks for sharing.

  15. February 16, 2011

    Gimp is definitely one of my favorite design tools. It's incredibly simpler (especially when compared to Adobe products), user friendly, and affordable!

  16. March 30, 2011

    I tried following this tutorial and I'm sure it's simple but I'm still stuck on step 3! I set the heights to 80 but I'm not sure what you mean by selecting the top layer of the boxes. I'm trying to drag over it and the box just wants to keep certain proportions. Anyway, thanks for the great write up, I'll keep playing with it :)

  17. June 23, 2011

    Hi there, Eric! I'm going to try and make a stab at this. Your tutorial seems pretty concise and detailed for me to follow. Keeping my fingers crossed! :)

  18. Scott @Classic Photo Booth Rental
    August 21, 2011

    This is so nice and I believe this really take time to put published this kind of article. However, It is worth it because many people will learned from it. I am excited to do this. Though I am not related to computer field but I still have the interest to do so.

  19. August 23, 2011

    Gimp is definitely one of my favorite design tools. It's incredibly simpler (especially when compared to Adobe products), user friendly, and affordable!

  20. November 5, 2011

    Great tut! Nice final effect. I need to create something similar on my blog :)

  21. December 30, 2011

    Awesome tutorial but I could use more information on creating "fresh" unique graphics with GIMP, :). Do you happen to know of a good resource, or have any tutorials that may fit that?

Trackbacks/Pingbacks