Graphics and Templates

Creating Website Layouts with GIMP

Posted on: July 9, 2011

Your website should look professional whether you are designing it for personal use or business use. Different skilled designers and professionals are hired for this purpose but people having financial problems can’t hire expensive professionals so they may want to create website layout for themselves. For this purpose, you will require programs like Photoshop or Paint Shop Pro which is also pricey but an alternate to these programs is GIMP. Today we will discuss creating websites layout with GIMP:

  • Before taking a start, sketch your ideas about making a website on paper. Use different colored markers to highlight different ideas. Also decide what you wish to include on web page. These items may be photos, graphics, text and clip arts. Also draw what you want your banner to look like as well as decide where navigation buttons should be located. After deciding all about these, load some graphics and relevant pictures and save them.
  • Open GIMP and from the menu, select File and then New. Make a size of document in new document dialog. The most common size for web pages is 1024 x 768. Now click OK.
  • Now from the toolbar, select Paint Bucket tool to fill the background layer with the color you want to see in your web page. If you like white backgrounds, there is no need to perform this step.
  • In Layers panel, click New Layer. After this, select Rectangular selection tool. Select an area where you want to place banner and click that area. Again use Paint Bucket tool to fill color in banner. To give it a different and attractive look, you can apply gradient by using Gradient tool.
  • To create all other features of your web page, repeat above given step. Click File and then click Open as Layers. You will do this to browse images which you loaded. So in the dialog, browse those images and open them. Those pictures will be shown in their own layers.
  • You will definitely not use all images in their original size so resize them and position them in each layer to where you want to place them in web page.
  • Now it comes to adding text. For this, select Text tool and type text which you want to add.
  • For saving your layout, click File and Save. After giving a name to your file, save it as high resolution JPEG. Take this image into web page editor as background. Now your page is ready to be published.

This was an easy method to create website layouts with GIMP. I hope you will also find it easier and helpful.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

About Me

Hi, My name is Tania Yellob and I love to write. This is my blog and I love to hear from you regarding my writings. Recently, I have started creating contents and templates for a famous website BuraqPrintables. Please visit it and let me know hows my work and any improvements I can do?


%d bloggers like this: