Creating Header Graphics and Buttons using The Gimp

• Know what size you want your image to be in pixels or inches
• Open The Gimp
• Under File Click New, and enter your desired height and width
• Click OK
• Ensure that your Layers tray is open, if not:
  • Click on Windows
  • Click on Dockable Dialogs
  • Click on Layers.
• To fill your Background Layer with either a solid color , or a gradient (Fades from one color to another), roll your mouse over the toolbox and click on the appropriate icon (roll your mouse over each icon for a description of what it is and does)
• When you click on an icon, further options will appear within the bottom half of the toolbox
• To select the color, click on the Black square within your toolbox, called the color picker
• For a Solid background fill, select  and click anywhere within the canvas.
• For a Gradient background fill (one side is dark and the color becomes progressively lighter towards the opposite side), select  and click on one side of the canvas, then drag across to the other side. Be sure to check for additional options towards the bottom of the toolbox

• Click the Page icon at the bottom of your Layers tray to create a new layer. You may create as many layers as you want or need
• Name the new layer
• The layer does not have to be the same size as the canvas, it can be smaller
• Select the radio button next to the fill type:
  • The Foreground and Background color depict what is currently selected in your toolbox
  • A transparent background allows you to place the layer over your background without covering the background. This is great for using the foreground to transparent gradient (see below) with a text overlay

(This is a layer that is transparent, with a gradient where the foreground color fades to transparent)

• To edit your new layers, you may find it easier to hide all of your other layers. Within the Layers Tray, click the eye button beside all of your other layers.   This will display your canvas only, so you can edit your new layer without anything in the way

• If you have an image saved to your computer that you’d like to lay on top of your background, you can open your image as a layer.
  
  
  • From the File menu, select Open as Layers
  • Browse for the image, and click open
  • You’ll notice that this creates another layer in your layer tray
    
    
• You may need to scale or resize the image.
  • From your Toolbox click the scale icon 
  • Then, roll your mouse over the image you need resized and click once
  • A scale dialog box will open where you can then adjust the width and height. The chain link beside the width and height fields allows you to lock the width and height ratio, and when you click the chain, it breaks the ratio
  • Click Scale when you are finished adjusting

• You may want to crop a section of your image, or you may want to cut out one part of your image to display.
  • Use the rectangle select tool  to cut out a square or rectangle section
  • With the Rectangle select tool chosen, click on any point of the picture and drag your mouse to the desired size, and click again. This will highlight a square or rectangle
  • Roll your mouse to the center of the selected area. Right click, and from that menu roll your mouse over edit, and click on Copy
  • Right click again; roll your mouse over edit, then paste as, click on New Layer
  • You can then delete the original image layer, by clicking on it from the layers tray and dragging it down to the trash bin in the bottom right corner of the layers tray

• If you want to cut out an element of your picture, use the lasso .
• Using the Lasso allows you to cut a defined section out of a photo.

 

• With the Lasso selected, use your mouse to click points around the section of the image you want cropped. (Hint: ZOOM the image to get a more accurate result, under the Image menu, roll your mouse over zoom and select ZOOM IN)
• When you connect the last point with the first point, roll your mouse to the center of the selected area. Right click, from that menu roll your mouse over edit, and click on Copy
• Right click again; roll your mouse over edit, then paste as, click on New Layer
• You can then delete the original image layer, by clicking on it from the layers tray and dragging it down to the trash bin in the bottom right corner of the layers tray
  
  
• To move the image around on your background:
  • Click the Move Tool
  • Click on the image you want moved, and drag it to your desired location

• To add text to your grapic:
  
  • Ensure that your Background layer is selected from your Layers Tray
  • From your Toolbox, select the Text icon
  • Highlight the area you want your text to be displayed by dragging and dropping your mouse on the canvas
  • Below the toolbox, you’ll be able to choose the font, size, justification and position of your text
  • Enter your text into The Gimp text editor window
  • You can adjust the size of the text box from your canvas by clicking on the text box and dragging and dropping the sides
  • Click on the Move Tool  to pick up your text box and drag it wherever you want on the canvas

 

•  • The border around this image has also been created using a filter
  
•  • Sometimes The Gimp won’t allow you to add a filter to an image you uploaded. In this case, you want to ensure that your image is RGB, not indexed. Under the Image menu, roll your mouse over mode, and click on RGB

• Drop Shadows can be applied to any layer you want, including the background layer

• Select the layer in which you want to add a drop shadow to from your layers tray
• Under the filters menu, roll your mouse over Light and Shadow, Click on Drop Shadow
• From the Script–Fu: Drop Shadow window, select the color you wish the shadow to be. By adjusting the Offsets, you can determine how far the shadow appears from the object it is shadowing, and the Blur Radius allows you to set how large the shadow is
• Click Ok to create the Drop Shadow

• Bevels can only border the background layer. You cannot add a bevel to an image or layer within the background
• Under the filters menu, roll your mouse over Décor, and click on Bevel
• From the Script-Fu: Add Bevel menu, use the slider bar to adjust the thickness of the bevel
• Click OK

• Borders can only be applied to the background layer
• Under the filters menu, roll your mouse over Décor, and click on Border
• From the Script-Fu: Add Border menu, adjust the x and y sizes (vertical and horizontal border lines)
• Click OK

• The enhancement filters allow you to improve the images that you upload. Whether you want to sharpen a blurry picture, or remove red eyes, these are the filters you will want to use
• Under the Filters menu, roll your mouse over Enhance, choose the desired enhancement feature

• You’ll need to flatten all of the layers you’ve created into one single layer before you can save the image:
  • Under the Image menu, click on Flatten. You’ll notice in the Layers tray, all of the layers merge into one
• Under the File menu click on Save as
• Choose a name for your image
• From the All images drop down menu, select JPEG image
• Click Save
• Use the quality slider to specify the quality in which you’d like your file saved. The higher the quality, the larger the file size
• If you’ve incorporated a lot of gradients or intricate detail, you may want to click on Advanced Options, and increase the Smoothing slider. This smoothes out the color variations within your images so that they flow nicely
• Click Save