How to Make a Layout in Gimp
Creating a web layout or "wireframe" is a useful process for website designers who want to present sample sites to clients. The designer creates a basic site layout as an image in GIMP and presents it, along with a few others, to the client for review. The client makes suggestions and picks the layout she wants for the actual website. The layout is used as a blueprint for building of the website. Sometimes the designer splices images from more complete layouts and saves them as separate image files to use in the actual site.
Other People Are Reading
Instructions
-
-
1
Open Gimp. Click "File," "New." Set the image size to roughly the size of a website; 600 by 800 pixels is proportional and gives a good idea of how the content will look on the page. Click "Okay." A new blank canvas will open up.
-
2
Consider how you want to organize information. Many sites feature a header at the top of the page and a menu bar on the left. You'll also need space for images, text and other media. Gather together any pre-made logos or images.
-
-
3
Use the "Rectangle Select Tool" on the Toolbox to divide up the website into different areas such as, headers, navigation bars, menu bars, images and text.
-
4
Fill each area as you go along with your choice of background color using the "Bucket Fill Tool." Click on the bucket tool icon. Click on the small colored rectangle in the middle of the toolbox. A new window will pop up. In the window, select the color you want to use when filling areas. Click "Okay."
-
5
Add borders between areas with the "Paths Tool" in the tool box. Click between two areas to set the initial path point. Click farther along the space between areas to set the end point. Click as many times as you like to create more points for the border to follow. Click on the colored rectangle in the tool box to set the color you want. Click "Stroke Path." A new window will pops up. Select the width in pixels for the border. Click "Okay." The path will be outlined in a colored line. Click another tool in the toolbox to remove the path line, leaving behind the border.
-
6
Save your basic layout. Click "File," "Save." Type in the name of your layout and select the file type such as, JPEG or GIF, at the bottom of the window. Click "Save."
-
7
Add details such as text and pre-made logos on a new layer. Click on "Layer" and "New Layer" at the top of the screen. Set the layer size to the same size as your layout and click "Transparency." Click "Okay." In the layers tool box, make sure that the new layer is highlighted to ensure you are adding content only to that layer.
-
8
Add images by opening your image in another window and copying it. Click back into the website layout and right-click to paste the image onto the new layer. Arrange it as desired on the page by left-clicking and holding down on the mouse, then moving it around.
-
9
Add text to the layer by clicking on the "Text Tool" in the toolbox. Click and drag the cursor on the layer to create a text box. A window will pop up when you release the mouse button. Type in any text you like in the window. Click "Close" to close the window.
-
10
Save the layout and its content layer as a GIMP file in the ".xcf" format to avoid compressing the layer into the background layout. This preserves your background for later splicing.
-
11
Save again under the original file name from step 6 to create a layout to present to the client.
-
1
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
