11 September 2007 - Posted in Gimp
Design a web 2.0 website header in Gimp
Designing websites is easy in Gimp, but in this tutorial I am going to show you how to create a web 2.0 style website header that will end up like this:
Click for full size image
- Open Gimp and create a new canvas with a width of 860px and a height of 140px
- Go to the main Gimp window and change the foreground and background colors from the color chooser to foreground: 55bded and background: 4f636d
- Now go back to the canvas and press Ctrl + . which will fill the background with the darker blue
- Press L or select the Gradient tool from the toolbox and drag from the top to the bottom of the canvas, so that you get this:
- Then go to the Layers window by pressing Ctrl + L
- Create a new layer by clicking the first button on the left of the bottom
- Name the new layer “top”
- Now go back to the canvas making sure that the layer you just created is selected
- Press E or click the elliptical option on the toolbox
- Drag an oval shape on the top half of the layer
- Now go to the main Gimp window and change the foreground color to white (FFFFFF)
- Go back to the canvas window and press Ctrl + ,
- Now go to the layers window and change the opacity of the layer to 30.0
- Now to add a title to the banner, press T or select the Text tool from the toolbox
- You can change the text properties (font family, size, color etc.) in the tool options on the bottom half of the main Gimp window
- I have also added a drop shadow to the text by selecting Drop shadow from the Script-Fu –> Shadows menu, and set both offsets to 0 and the blur radius to 15
- If you have followed this tutorial properly then you should finish up with this:
Click for full size image
Simon North
