Gimp - Cool Blue Web Layout

Learn how to use software like Photoshop and Gimp to create your own custom graphics.
8 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Gimp - Cool Blue Web Layout
mikethedj4
Hey guys I'm back again with more Gimp tutorials, which will be specifically for my new website GimpPimp, and in this video were going to be creating a "cool blue" web layout in which you guys can use to make your wordpress themes.

What where going to create!
coolbluelayout.png
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) Additionally if you're having a hard time seeing what I'm doing, you can always view in fullscreen, or on Vimeo.

You guys can download the web layout by going here.
------------------------------------------------------------------

Now I tried to make this text tutorial as user friendly as possible, but please note that this tutorial is not for beginners. Additionally the images are to big to fit the canvas of this post so in order to view the images in full size simply click on them.

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

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

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

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

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

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

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

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

[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

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

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

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

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

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

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

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

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

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

Repeat what we did above for the following posts, and sidebar, as seen below.
Image

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

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!

Checkout GimpPimp at http://gimppimp.tk/

Join The Facebook Fanpage for GimpPimp!
http://www.facebook.com/pages/GimpPimp/172297702784392

Checkout My Official Website!
http://officialspeed.tk/

Join My Facebook Fanpage!
http://www.facebook.com/pages/Speed/129034650484298

Check Me Out On Twitter!
http://www.twitter.com/mikethedj4
You do not have the required permissions to view the files attached to this post.
Last edited by mikethedj4 on Fri Jan 14, 2011 9:28 am, edited 3 times in total.
User avatar
Usman55
VIP - Site Partner
VIP - Site Partner
Posts: 2821
Joined: Thu Dec 24, 2009 7:52 pm

Re: Gimp - Cool Blue Web Layout
Usman55
Nobody's paying interest in your stuff, mikethedj4. But I think you deserve something. Checkout you reputation!
Image
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Gimp - Cool Blue Web Layout
mikethedj4
Thanks man! Everything I do online is all free, cause I know what it's like to be a very poor person, and I try to help people that are pretty much like me financially, and even if they have cash well they can still keep it in their pocket, and use it for food, or whatever and it's a way to help others not just with free software, and that, but also helps then learn the program, and the basics of how designing goes. (Still trying to get some more tutorial posters for GimpPimp though, but no luck.)
User avatar
Usman55
VIP - Site Partner
VIP - Site Partner
Posts: 2821
Joined: Thu Dec 24, 2009 7:52 pm

Re: Gimp - Cool Blue Web Layout
Usman55
Maybe you should advertise your website, I mean that will get you some traffic.
Image
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Gimp - Cool Blue Web Layout
mikethedj4
Usman55 wrote:
Maybe you should advertise your website, I mean that will get you some traffic.
That's what I'm going to be doing for my video tutorials for Gimp now on (and BlenderPimp for Blender tutorials), and it's not just for traffic, but so users can find a good resource, and also become a better designer.
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Gimp - Cool Blue Web Layout
mikethedj4
I finally got around to making the text tutorial for this tutorial (I was off, and on with it, but probably took about 8 hours, cause of writing the text tutorial, screenshots, editing the screenshots, and uploading them as well)
User avatar
zachman61
VIP - Donator
VIP - Donator
Posts: 1891
Joined: Wed Dec 16, 2009 9:56 pm

Re: Gimp - Cool Blue Web Layout
zachman61
This looks extremely nice Mike!, Im going to attempt something like this in photoshop later today cooll;
Nailing my feet to the floor is easier than using my own muscles to balance, but you don't see me doing that :)
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Gimp - Cool Blue Web Layout
mikethedj4
Thanks, can't wait to see your result :)
8 posts Page 1 of 1
Return to “GFX Tutorials”