What We're Going To Create!
Gimp - Cool Blue Web Layout
Now I tried to make this text tutorial as user friendly as possible, but please note that this tutorial is not for beginners.
Before we begin, make sure to download the Layer Styles script for Gimp
here, and move it into your scripts folder
For Linux it's
/home/username/.gimp-2.6/scripts (Just press CTRL+H when you view your home folder, and note that I'm an Ubuntu user, so it may or maynot be different for other distributions)
For Windows it's
C:\Users\USERNAME\.gimp-2.6\scripts or you can head to
C:\Program Files\GIMP-2.0\share\gimp\2.0\scriptsNow if you're a Windows user, and you're using the portable version of Gimp (which you can download
here) go into your GimpPortable folder, and head to
App\gimp\share\gimp\2.0\scripts and just move the layer effects script you downloaded in there.
Now I'm not a Mac user (never touched or even seen one) so if you wanna findout how to install scripts on a Mac Cyrilshark has a good tutorial here on
GimpTalk that you guys can checkout.
Now lets begin by making a new document 800x848 (800px width, and 848px height), and by setting your background color (BG) to
#0090ff, and your foreground color (FG) to
#00e4ff and then fill your background layer with with #0090ff.
Now make a new layer, and the top part is where were going to have our navigation, the top nav bar will be 100% for width, and height will have it 61px, and then make a liner gradient on that going down as seen in the screenshot below.
Gimp - Cool Blue Web Layout
Now duplicate that layer you've created for the navigation bar, move it down one layer, and go to Colors/Colorize, and bring the lightness all the way down to -100 so the image will be black, and then go to Filters/Blur/Gaussian Blur, and give it a 16px blur.
Gimp - Cool Blue Web Layout
Now repeat what you just did for the top navigation bar for a social network navigation bar, as seen below.
Gimp - Cool Blue Web Layout
Make a new layer, and move it down your navigation layers so it's only above the "Background" layer, and inside the two navigation bars lets make it darker, you can go to Colors/Brightness/Contrast and bring the brightness down a bit, but what I did was I set my FG color to
#0090a5, and my BG color to
#0058a5 and I made a liner gradient going down.
Gimp - Cool Blue Web Layout
Make a new layer, and press "
D" to go back to your default colors (Black=FG, and White=BG) and change your gradient type from "FG to BG (RGB)" to "FG to Transparent" (Don't forget to leave the gradient as FG to Transparent though) and make a liner white gradient going a little bit down on the top and a liner black gradient going a little bit up from the bottom, and set the opacity of that one layer to around 25%.
Gimp - Cool Blue Web Layout
Make a new layer, and move that new layer to the top for now, and in between the two navigation layers we created on the right hand side we'll have a preview box for screeshots, programs, or whatever it is you wanna display there for your website, so make a rectangular selection and fill it in with white (If your BG is still white you can press "
CTRL+." to fill that selection with your BG color) then go to Filters/Light and Shadow/Drop Shadow to give it a drop shadow, that will then give you a layer names Drop Shadow below your "preview box" we'll call it, right click your "preview box" layer and select alpha to selection, and then go to Select/Shrink and shrink it about say 4px and hit delete, then select your drop shadow layer, and hit delete as well.
Gimp - Cool Blue Web Layout
Now select inside that transparent "preview box" with your Fuzzy Select Tool "
U", make a new layer, and give it a white liner gradient going down, and then bring the opacity down to about 50%.
Gimp - Cool Blue Web Layout
Right click your "preview box" layer once again, and select alpha to selection, then create a new layer, and make sure that new layer is at the top, and this time we'll give it a small black liner gradient going up, and set the opacity of that layer at around 30%.
Gimp - Cool Blue Web Layout
[optional] Make another new layer, and select your Ellipse Select Tool "
E" and make a selection (use the image below as reference on how to make the selection) then right click your "preview box" layer and select "alpha to selection" then select your Fuzzy Select Tool "U" and Hold "Shift" and then click inside that box. you then want to press CTRL+I to invert that selection so that only outside of that "preview box" is now selected you then want to go back to the top layer "where your elliptical gloss part should be for the "preview box") and hit delete, then set the opacity of the layer to about 5%.
Gimp - Cool Blue Web Layout
Now grab your text tool "
T" and put whatever you want in there like information on screenshot of the day, project of the day, about the site, etc: etc: (We're now half way there, and the color of the text can be whatever you choose I just chose White=#FFFFFF)
Gimp - Cool Blue Web Layout
You then want to make the header text, that'll say "about me, about the site, screenshot of the day, etc: etc: then instead of giving it a Drop Shadow, we're going to do it manually this time so duplicate your new "About My Site" layer and move it below your "About My Site" layer, and go to Colors/Colorize and bring the Lightness down to -100 and then go to Filters/Blur/Gaussian Blur and give it 4, or an 8px blur and then use your move tool "
M" to move that layer so you have a good/decent drop shadow, and set the opacity around 60%.
Gimp - Cool Blue Web Layout
Grab your text tool again "
T" and on the top left of your navigation bar is where you'd put your "Site Name". (Use screenshot below for help/reference)
Gimp - Cool Blue Web Layout
Now before we put your text down for our navigation, make a new layer, and grab your Rectangle Select Tool "
R" then in your tools options check "rounded corners" and leave the settings as default and make a small selection of where you want your navigation to start, or in my case where I wanted the home button to be. (We'll call this "starter button")
Once you've done that fill that selection in with black (#000000) and set the opacity of it to 16%.
Gimp - Cool Blue Web Layout
Grab your text tool once again "
T" and make the text for the links of the navigation, and set the opacity of that new "navigation text" layer to 75%, but don't forget to leave room for the reflection. (I had the color of the text white btw.)
Now duplicate the "navigation text" you just made and grab your Flip Tool "
SHIFT+F" and press CTRL and left click so it'll flip vertically then move that layer so it's right below then grab your Eraser Tool "
SHIFT+E", select the biggest fuzzy brush, and bring it up a bit. and then erase the bottom so it'll have the "reflection" feel to it, and once you're done with that set the opacity of that new "navigation reflection" layer to around 30%.
Gimp - Cool Blue Web Layout
Now select your "starter button" layer and go to Script-Fu/Layer Effects/Inner Shadow, and leave the settings as default, and hit ok, then move that new layer it created to the top of all your layers.
Gimp - Cool Blue Web Layout
Were almost done! Now remember that second navigation bar we created for our social networking links? Well grab your text tool "
T" and put whatever you like, for example "Flow Us On These Following Sites". You can have the color of the text whatever you'd like, but I chose White, and set the opacity of that text layer to 50%. Next you can create some social networking icons, or download some online, and put them on the right side of that social networking bar. (Social Networking Icons Are Included In The Download Of The Project File Located
here)
Gimp - Cool Blue Web Layout
Grab your rectangle select tool "
R" and make a decent selection below the "social networking bar" for like Wordpress/Site posts, for example. (use image below for reference)
Gimp - Cool Blue Web Layout
Then go to Script-Fu/Layer Styles/Bevel and Emboss, and make your highlight color black, and your shadow color white. Then merge that new white masked layer into that black masked layer, which gives the bevel. Now lets face it, this looks like crap, so go to Colors/Invert, and the Filters/Blur/Gaussian Blur and give it a gaussian blur of 16px (I did 32, which is why mine looks like crap, but then again I rushed)
Gimp - Cool Blue Web Layout
Repeat what we did above for the following posts, and sidebar, as seen below.
Gimp - Cool Blue Web Layout
Now all we have left to do is make a spot for copyright, powered by wordpress, etc: and of course this part is optional as well.
Now grab your rectangle select tool "
R" and go into your tools options, and uncheck rounded corners. then will make the width 100% of the "bottom bar" and will have the height be 27px, then fill that selection in with
#006efd.
Next select your text tool, and put down your copyright, powered by Wordpress, made by yourname, etc: etc: and the color can be anything I just chose white, but the opacity was 50%.
Gimp - Cool Blue Web Layout
We're now done, and you've finally made your new "Cool Blue Web Layout", and if this text tutorial was hard to follow I apologize, I tried to make it as user friendly as possible, but like I said before we started, this tutorial is not for beginners. Anyway you can also view this as a video tutorial on my YouTube Channel
, but also on my Vimeo Account
.
Also don't forget you can download the project file of this web layout on GimpPimp's downloads page
here, and the download includes the gimp document, ps (photoshop) document, and the social networking icons as well.
ENJOY!
