GIMP Forums

Full Version: Cool Blue Web Layout
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

In this tutorial were going to be making a "cool blue" web layout in which you guys could use as a wordpress theme if wished.
BTW: Adding background music was a bad idea, cause it's a little hard to hear me at some spots, so just follow along with what I'm doing in the tutorial, and you should be good. Also if I'm going a little to fast you can always use that pause button. (Remember it can be your best friend at times)

Preview of what were going to create:

You can download the web layout on GimpPimp's download page, as well as the Gimp Cheat Sheet as well, which lists the hotkeys for Gimp that you can put on your wall by your desk.
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\scripts

Now 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 on GimpTalk that you guys can checkout. (Keep in mind GimpTalk comes down at unexpected times, and I'm unaware if Ali has fixed the problem so, please keep that in mind if the site doesn't load)

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.
[Image: 10816900.png]

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.
[Image: 40433158.png]

Now repeat what you just did for the top navigation bar for a social network navigation bar, as seen below.
[Image: 38657254.png]

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.
[Image: 78115693.png]

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%.
[Image: 64755883.png]

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.
[Image: 16573545.png]

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%.
[Image: 78714766.png]

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%.
[Image: 96814568.png]

[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%.
[Image: 91708752.png]

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)
[Image: 68558008.png]

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%.
[Image: 77703965.png]

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)
[Image: 52063940.png]

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%.
[Image: 99870565.png]

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%.
[Image: 50192175.png]

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.
[Image: 61235105.png]

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)
[Image: 33468663.png]

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)
[Image: 68006586.png]

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)
[Image: 29879581.png]

Repeat what we did above for the following posts, and sidebar, as seen below.
[Image: 69625491.png]

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%.
[Image: 26409628.png]

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 here, but also on my Vimeo Account here.

Also don't forget you can download the project file of this web layout on GimpPimp's downloads page, and the download includes the gimp document, ps (photoshop) document, and the social networking icons as well. ENJOY!
This could be the right section to follow this tutorial. I think that it gonna be useful and easy to understand those steps. It might be an interesting way to make cool blue layout.
Thanks! I agree lol Smile
Is there anyway you could post this again with the pictures stripped? Sorry, just a bit much for my eyes to see all those full size pictures, or maybe resize the pictures
That would mean I'd haft to save them resize, and then reupload them and that's a lot of images, I thought there was the bbcode for it on here, but there isn't, I just messaged Einherjar about this.
Thanks for reminding me, I was gonna do it before, but got side tracked.
Wow that would be a lot of saving and resizing o.O
Well I can't edit the topic, cause it's been passed 72000 minutes sense it's submission.

Anyway the bbcode to resize images is

Thanks for the Share Mike Big Grin
[Image: gimppimp_forum_sig_by_mikethedj4-d39msp7.png] Your sig was closest thing around to try this with
Looks a bit funny, but works Big Grin
Reference URL's