A look at some of the best web designs from June 2008
Advertisements
- Best of CSS Design June 2008
- Function Icon Set
An icon set of 128 free icons
- 55 Free High Quality Icon Sets
A collection of 55 high quality free icon sets from Smashing Magazine
- Typogridphy
A Typographical and Grid Layout CSS Framework
- CSS Wizardry Links
A list of web development links and resources
- Graphic Design Links
Graphic Design & Web Design Links & Tutorials
- Fused Graphics
A collection of my work and some tutorials
- Websites you shouldn’t have missed in June
A list of the best articles, tutorials and resources from June 2008
- Cnet's New Design
Cnet are redesigning again, take a look at the new outcome
- 36 Beautiful Business Card Designs
DzineBlog and shows you 36 truly amazing business card designs for your inspiration
- 34 Places to Get Design Inspiration
Another 34 sites to get some design inspiration both online and offline
Blogroll
-
Subscribe to RSS via Email
Community Links
Creating a professional looking web header
Posted on Sunday, March 30th, 2008 | stored in Gimp
In this tutorial I am going to show you how to create this in the Gimp:
Click to view full size
- Create a new image with the dimensions 860px x 160px
- Set the active colours as forecolour: #175e95 and backcolour: #497da4
- Select the gradient tool and click and drag from the top to the bottom of the image
- Now create a new layer and select a region of width 860px and height 38px from the bottom and fill it with the colour white (#FFFFFF)
- Select the Layer menu and click Autocrop layer
- Change the opacity of the layer to 10.0, it should now look like this:
- Change the forecolour to #4278a2 and select the Gradient tool again(shortcut: “L”)
- In the blend options select the Gradient option and choose FG to transparent.
- Now click and drag from around 3/4 from the left to half way, this will create this effect:
- Now add some text to the bar at the bottom using font family: Arial and font size: 14px
- Add your logo near the top left using the Open as Layers option under the File menu, having done this you should finish up with the final result, something that looks like this:
Click to view full size
Continues below...
Lee W. Says:
Thanks for the tip… I would have liked to see more detail in steps. I am a very new user of Gimp…
howtogimp - Gimp Tutorials, Gimp Forums, Gimp News, Gimp Resources, Gimp Downloads, Gimp Gradients, Gimp Plugins, Gimp Brushes » Blog Archive » 22 great Gimp Tutorials Says:
[...] Professional Web Header [...]
Help Developer - CSS, Dreamweaver, Gimp, HTML, JavaScript, PHP, VB.NET, Visual Studio, Wordpress Tutorials » Blog Archive » 22 great Gimp Tutorials Says:
[...] Professional Web Header [...]