Creating a Fancy Website Layout in Gimp

I wrote this tutorial to state that you don’t have to use Photoshop to create a graphically rich web layout. Photoshop obviously is a great, multi-purpose design tool, but you can create just as good designs with the free Gimp as well. The main purpose of the tutorial is to teach it’s readers how to create a nice looking, WordPress specific, web layout in Gimp. This will be followed by two more tutorials: “How to slice up graphics for XHTML and CSS” and “Converting a static HTML site into a WordPress theme.” This is not an original idea, but one I wanted to try my hand at writing a tutorial for. Proper credits will be given for sources I used and which inspired me.
We will create a 2 column website layout specifically made with WordPress in mind. It will feature custom graphics and an example of a search bar. This tutorial requires basic knowledge of Gimp 2.6’s workspace.

Getting Started

1. Open a New file, Image Width: 760, height: 720. Save As gimp-weblayout.xcf in a New Folder named “blue-green-blast”
2. Use the Bucket Fill Tool to fill the background with the color: 00BBBB (Click the foreground color swatch and change the color)
3. Setting up our guides

• Drag a guide to approximately 120 pixels from the top. This will be the height of the header
• The second guide will be placed for our sidebar area. We will place this guide according to the divine proportion, to make our web layout visually pleasing. To do this, we must use some math. We divide our total width by appx. 1.618 to get our content area width, then subtract our content width from the total width to get the sidebar width. 760 / 1.62 = 469px (content). 760 – 469 = 291
• Place the second guide about 470 pixels in from the left. The screenshot below shows how this looks:
• 

4. Create a new layer and name it Header

• Using the Rectangle Select tool, select the header from the 470 px guide to the right edge
• Under Size in the Toolbox bar, make sure the number in the first (width) box is 291 and in the second box, 120
• Fill with white (FFFFFF) and Ctrl+Shift+A to Select None

5. Create another new layer and name it Content

• Select the lower left large area bounded by the header guide and the sidebar guide
• In the Toolbox, make the Position 0 and 120, and make the Size 469 and 600
• Fill with white. The two screenshots below show the look of the web page so far and the layer structure


6. Create another layer named Footer above the Content layer

• Drag a guide 40 pixels above the bottom of the page
• Use the Rectangle Select tool to select from the guide just placed to the bottom. In the toolbox, make the Position: 0 and 680, and the Size: 760 and 40
• Fill with color 00BBBB
• Create one more Rectangle, Position: 469 and 680, and Size: 291 and 40 and fill with white. A screenshot is provided below:

Sidebar

7. Create a new layer named Sidebar

• Drag new guides to approximately 490 pixels in from the left and 540 pixels in from the left, 140 pixels from the top and 150 pixels from the top
• Use the Rectangle Select tool to create a rectangle with a size of 160 px by 30 px starting from the 150/490 pixel guide intersection
• Use Rounded Rectangle under the Select menu and give a radius of 40
• Fill this with white then Select None
• Now, create a new Rectangle from the 140 pixel guide, Size 50 by 40; give this one the Rounded Rectangle at 40 as well and Fill with white
• While this new rounded rectangle is still selected, use the Paintbrush tool to paint over inconsistencies on the left side. See screenshot below for the look:

8. Now, we are going to give the sidebar shape a three dimensional look. We will do this with a bump map

• Select the shape with the Fuzzy Select tool and create a new layer named Sidebar bumpmap
• Fill shape with white then Select None and give it a Gaussian Blur of 5.0 px
• Move this layer below the Sidebar layer
• Then, go to Filters > Map > Bump Map. Under the Bump Map drop down box, select the Sidebar bumpmap layer
• After this is done, hide the Sidebar bumpmap layer. Now check out our side title bar

9. Create a new layer called Sidebar copy

• In this layer, use the Text tool to create the word “Pages”. Click color to change the color to FF7400 and change the font to Georgia Bold. A comparable font in (Ubuntu) Linux would be Nimbus Roman No9 L.
• Then, type the text shown in the screenshot below (in the popup Gimp Text Editor add return spaces after each word). Give it a color of FFB273, font of Arial Bold (or Nimbus Sans L for Linux); adjust the line spacing to 1.3. (This gives an approximation of how the Pages section will look, as this will actually be adjusted via CSS)

10. The next step is the sidebar title details

• Zoom in close (1600 preferably) on the sidebar title design, as we will be creating pixel art in the form of dents and bumps
• The first part will be pixel bumps on the sidebar title design. Create a new layer; no need to name it
• Make the foreground color black (000000) and use the Pencil tool with Brush Circle(01). Click above and to the right of where the two guides meet (above the “Pages” text). Click once more directly above and right of the first pixel
• Now, make the foreground color a dark gray (666666). Click below the upper right square
• Make the foreground color a light gray (CCCCCC). Click above the lower left square. This should form a box shape. Create a grid of these three by eight. The two screenshots below show one pixel bump and all of them:

• Next, lower the opacity on this layer to reduce the harshness. I lowered it to 40
• Finally, move this layer down until it is just above the Sidebar layer and go to Layer menu and Merge Down

11. Now we are going to create pixel dents next to our page list items. In our CSS, these will replace bullets on the list. In addition we will add 3D arrows to represent WordPress child pages. Rather than be grayscale, our pixel dents will get colorful

• Zoom in to 1600 again. Create another new layer above Sidebar copy and name it Bullet
• At the guide to the left of our copy, aligned with the “About” text, use the Rectangular Select tool to create a box 12 px by 12 px
• Make the foreground color FF7400. Using the Pencil tool at 1 px again, draw the pixels as shown in the screenshot below:

• Make the foreground color FFB273. With the Pencil tool, click the lower right pixel in each box
• Now, make the foreground color A64B00. Click the upper left pixel in each box. Check out the screenshot below to see it completed:

• Duplicate (click Duplicate in the Layers dialog) this layer 4 times and arrange as shown in the screenshot below (you can align approximately; hold the Control key as your moving each duplicate). To move each new layer select Move the active layer in Toolbox’s Move tool. Screenshot is below:

*Thanks goes to this Tutorio.com tutorial for this method of spicing up your website.

Sidebar (continued)

12. Our next items will be 3D arrows to represent child pages in our WP theme idea

• Zoom in to 1600. Create a new layer named Arrowbullet. In this layer, create the arrow pixel shape as shown in the screenshot below and draw this next to the “Page Three” text. Use our previous colors and white for the color scheme

• Lower the opacity to 75 to make it more subtle
• Duplicate and place beside the “Page Five” text
• Now we will create the same 3D arrow in grayscale for our grandchild pages. For this, we will create a new layer and name it Arrowbullet gray. Once again, create the pixel art shown in the screenshot below using the colors from our pixel bumps earlier and white. Draw to the left of the “Page Six” text

• Lower the opacity of this layer to 50

Header and Content

13. In the Header, we will represent simple white text for the blog title. This will be replicated with CSS later. Type “My Blog” with the Text tool as the blog title with font size 24 px. Below the “My Blog” title, click to reactivate the Text tool on a new line and type “Just Another WordPress Blog” with font: Georgia italic and size: 12px. Here, you don’t have to worry about the spacing, as this will be handled by CSS in my next tutorial
14. Now we will enter a “dummy” post below as our index page’s content. Here, we will also show a date, time stamp and author information

• Type “Post 1″ in the content area above the Content layer. Make the color FF7400, size 18px and font Georgia Bold
• The area below will be where we put our date and author info. Type “by admin, dated: 01/07/10, 3:31pm”. Color: 00BBBB, font Georgia Bold, size 12px
• Next, is our post text. We will use Lorem Ipsum text, which can be found at lipsum.com. At the bottom of the page is where you can generate Lorem Ipsum dummy text. We will need one paragraph for our example. Click Generate Lorem Ipsum. Highlight and Copy the text
• Use the text tool to click and drag a text box underneath the author and date text. Paste the Lorem Ipsum copy into the GIMP Text Editor popup. Font: Arial, Color: A64B00
• Now, we must simulate a drop cap, a larger first letter in our paragraph. For this, erase the first L in our Lorem Ipsum copy above and put about six spaces before the o
• Create a new text line and type a capital L into the Gimp Text Editor. Font: Georgia Bold, Color: A64B00 Move into place, just next to the dummy paragraph as shown below:

Search Box

15. Finally, we want to put a search box in the upper right corner. In our theme, this will be a widget ready second sidebar next to the blog title in our header

• Here we will create a 3D look that will actually be created in our CSS with borders. We will also add an icon and a background color
• Create a layer named Search
• Create a Rectangle at Position: 491 and 80, and Size: 140 and 20
• Fill with color CCCCCC
• With the layer Selected, draw a 1 pixel color 666666 line across the top with the Pencil tool, holding the Control key; Also, draw a 1 pixel same color line along the left side
• Do the same for the bottom and right sides with the color EEEEEE
• In this box, type the words “Enter Your Query” with the color 666666

16. The next part involves placing an icon to the right of our searchbox. We will use a free Blog Icon Pack provided by Graphic Push: www.graphicpush.com/index.php?s=icons. These simple but elegant graphics fit in well with our searchbox design

• Download and unzip (extract) these files. Your operating system will have information on how to do this. Move the “graphicpush_blogicons_free” unzipped folder to a convenient location such as a general Documents folder
• From this folder, select “mag_glass.gif” and “speech_bubble.gif”; these are the two files we will use in our blog design. Hold Control to select both, Copy. In the folder where our file is stored (blue-green-blast), create a folder named “images”. Paste the two icons here
• Open the mag_glass.gif file in Gimp. Copy this file and in your web layout file, Create one more layer, name it Search icon and Paste into this layer. Go to the Layer menu and choose Anchor Layer
• Move the icon next to the search box as shown below (you may need to Zoom In):

Finished Design

17. The final website comp is below. Note that we only show the minimum of information here as many of the same concepts will be repeated in our theme
In the first tutorial in this series, we learned how to create graphic representations of the header, footer, content area and sidebar. In addition, we covered drawing custom pixel art and bringing icons into our design. In the next tutorial, we will slice up the design to use in XHTML/CSS.

A more updated version of all four tutorials in this series is available on our update page.

Next tutorial: How To Slice Up Graphics for XHTML and CSS.
See more GIMP and HTML/CSS tutorials at JGPWS Tutorials.

Resources

• colorschemedesigner.com/– I wanted to mention about the source I used to get this design’s color scheme. It is called the Color Scheme Designer. I found this link while browsing the WordPress Codex. This tool is nothing short of awesome! While on the page, I plugged in the main color of my design and specified complement. It found the complementary color and a host of related tints and shades. Definitely, check it out if you are looking for an easy way to generate a color scheme for your site.
• www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/– Smashing Magazine’s article “Applying Divine Proportion To Your Web Designs”
• www.tutorio.com/tutorial/popular-pixel-detailing-effects/– Pixel Detailing Tutorial
• www.lipsum.com– Lorem Ipsum text generator
• www.graphicpush.com/index.php?s=icons– Beautiful icons for your website or blog, provided by Graphic Push