Dorothy Ayers Photography

CLEAN + MODERN WEBSITE LAYOUT IN GIMP

November 18, 2015

CLEAN + MODERN WEBSITE LAYOUT IN GIMP Note: This tutorial assumes that you have a basic familiarity with GIMP, its tools, and its...

November 18, 2015

CLEAN + MODERN WEBSITE LAYOUT IN GIMP

Note: This tutorial assumes that you have a basic familiarity with GIMP, its tools, and its layout. If you are confused about any of the steps, feel free to ask for clarification in the comments and I will be happy to help.

Create a new transparent image size 1024 x 1200. Use the Bucket Fill tool to fill the background layer with a color of your choice – I used a very pale grey.

Go to File>Save As, and choose a location and a file name for your project. Save it as a .xcf file so that you can always come back and make changes to it in GIMP later. Remember to save the file often while working on your project – it is not overkill to save after every significant change (just hit Ctrl+S after each step).
Before your begin the web design process, you should take a moment to consider the purpose and goals of your site and exactly what content will help it achieve those goals. Consider the relative importance of each content element and how much screen real estate it should command. Some types of content to consider:

Featured/Latest Posts
Portfolio/Latest Projects
Navigation
Advertising
About
Links and Resources
Logo
Contact Form
etc.

Create a new transparent layer for each content element that you chose. In my example, I have a layer for “Main”, “Services”, “Testimonials”, “Footer”, “Logo”, and “Navigation”.
For this next step, it helps to first sketch out your layout on a sheet of grid paper – just determine how many pixels each square should equal and get sketching! On my sketch, I had each square equal 40x40px.

Once you have determined the size and position of each content element, select the corresponding layer, then click and drag using the Rectangle Select tool to make a box of the approximate size and position you need. Use the rectangle select dialog to adjust the size and position so that they specifically match your layout (this is where that sketch really comes in handy) and to add things like rounded corners, if you like.

Use the Bucket Fill tool to fill the rectangle selection with your desired color. Shift-Ctrl-A to deselect the area. (Have you been remembering to Ctrl+S after each step??)

Repeat this process on each content element layer. I made the background of some of my content boxes white, some mid-grey, and some dark grey. You can use whatever colors look right to you, but keep in mind that a streamlined, neutral color palette will give your design a cleaner look overall.

Now that we have each element in place, we can start accessorizing. This is the fun part! The first thing I did was to add text to the logo area. (I just randomly chose a fictional name for a design company.) This can be a great time to introduce an eye-catching accent color, like I did with the green. You also might want to consider using two different fonts for visual interest, but tread with caution: it’s very easy to overdo it and make the logo look too busy, especially since our goal here is a modern look and feel.

You can give the navigation menu more visual weight by adding an accent color border around it. Add a layer above the navigation layer and call it “Nav Border” (or any name that works well for you). Use the rectangle select tool to draw a box around the navigation area, and set the foreground color to whichever color you would like to use for the border. Then click on Edit>Stroke Selection. Be sure the “Stroke Line” and “Solid Color” radio buttons are selected, and choose a line width (I used 2 pixels). You may also want to experiment with the additional line style options by clicking the “+” next to “Line Style”.

Add text layers for each menu item.

Our layout is looking pretty good now, but I’ve decided that I want to include both About information and Contact information within the Main Content area, so I’m going to add a line of demarcation down the middle of the box. To do this, create a new transparent layer above the “Main” content layer. Name it something like “Vertical Line”. (You may want to hide the “Services” layer – or whatever layer is adjacent to your “Main” content box – to make it easier to see what you’re doing.)
Click on Image>Guides>New Guide by Percent. Set a Vertical Guide at 50%. Use the guide and the rectangle select tool to draw a very thin, tall rectangle directly down the center of the “Main” content area. Use the Rectangle Select dialog to set the selection to 2px wide. Bucket Fill the selection with dark grey (alternatively, you may find it easier to fill the selection by going to Edit>Fill with Foreground Color). Click on Image>Guides>Remove all guides.
Use this same method to add a horizontal line of demarcation at the very top of the “Services” content area.

Now let’s start filling in our content areas with some placeholder content. Hopefully you have already given some serious thought to the type of content your site needs, have identified a message and a tone of voice that will speak to your audience, and maybe you have even drafted some of this content already. Use the Text tool to add a header and a few sentences about your business/organization within the “Main” Content Box. I added mine to the left of the horizontal line.

Let’s add a call-to-action button to the “About” section. Create a new layer called “Learn More”. Go back to our trusty Rectangle Select tool and use it to select a button-sized area – mine is 110x40px. Bucket fill the button with your chosen color. Shift+Ctrl+A to deselect. Add text to the button with the Text tool.

I decided to add a “Recent Projects/Portfolio” section to mirror the “About” section. This section would be populated with thumbnail images and maybe brief descriptions of our fictional company’s latest work.
We should add some icons to the “Services” section, but first we will have to find some nice, preferably free vector icons online. I used the Reflection Icon Set from WebDesignerDepot.com. I found these thanks to SpeckyBoy’s article, “30 Fresh and Free Icon Sets for Designers and Developers”. http://speckyboy.com/2010/08/09/30-fresh-and-free-icon-sets-for-designers-and-developers/, http://www.webdesignerdepot.com/2010/07/200-exclusive-free-icons-reflection/, you will have to enter your email and agree to receive a weekly newsletter, but you can always opt out of the newsletter or just use a “junk” email that you never check anyway, like I do. Remember, it’s always a good idea to scan anything you find on the internet before you download/extract it. Once you have saved and extracted the file, just go to File>Open as Layers and select the icons that you want to use. Use the Scale tool to resize them as needed. You will, of course, want to use the guides to ensure that your icons are all nicely lined up. Mine are a little haphazard, but this is just a demonstration after all.

As I’m populating this site layout with more and more content, it’s starting to look a little too busy to me. One thing that continues to amaze me about web design is just how fast a design can go from elegant to overdone. I think that I will simplify this design a bit by removing the box around the navigation bar. Simply click the open eye icon next to the layer in question and voila! – no more green border.

Let’s have a little fun with the “Testimonials” section. I made a new layer and named it “Blurbs”, then drew a few rectangles and bucket-filled them with white. Feel free to use the ellipse tool instead for circles/ovals, or you can go crazy and use the Paths tool to create any shape you wish. When you’re finished drawing your shapes, be sure to Shift+Ctrl+A before the next step.
Using the Paths tool, draw a small triangular shape coming off the bottom/side edge of your shape. Click and drag the last handle of the shape over the first to close the triangle. Click “Selection from Path” in the Stroke Path dialog, which will convert your path to a selection that you can now fill with color. Deselect and repeat for each of the other shapes.

The footer is where we will place our social media icons, search box, contact information, and legal information. Again, do a Google search and you’ll come up with plenty of nice, free sets of social media icons. You can find the set that I used here: http://creativenerds.co.uk/freebies/clean-black-and-white-social-media-icon-set/.

Add some finishing touches and you should have a nice, clean layout that would make an excellent home page for a small business or freelancer. Remember to use clearly labelled layers and to save often!