How To Create Your Own Website Design Using Gimp

Sorry guys some of the images weren't showing now everything should be working right.

This is great!
I'm sure lots of people will find this really useful.

Again, another good tutorial. This site is really cool.

I Updated the tutorial site after someone pointed out it was lacking :) hope its better now.

ps if anyone would like the Gimp .xcf soruce file let me know ill be happy to upload it and share it.

Hey man this is great. I love this.
PS: I found this site thru my youtube channel(saw you posted my video --web2.0-esque banner -- and found this great site. thank you

How do I integrate this into my site? Best of luck, El Llama

you spelled tutorials wrong you wrote it tutorils

Thank you, this was a great tutorial!

Thank you for this. I have probelm with a little detail, the step 6. When I try to edit the gradient, the left and right endpoint color is not clickable. When I tried to make the same effect, I made New gradient and used the usual fg and bg colors, so I changed the FG color to 3a4146. I loosed the transparency and it seems that the FG to transparency and even gradient did so, now I cannot applicate the original gradient either. How can I make it transparent again? How can I edit that gradient? I use version 2.17

This is not a reply, I continue my own question. It would be a Gradiant called FG to BF. I have only FG to BG. Is it the same thing? I don't know what BF is.

yes FG to BG thats what i meant :D, I'll fix that. in step (6) where is says "change the color of the FG to 3a4146" you don't need to edit the gradient it self, all you need to do is change the the foreground color box thats on your left, the one under the tools where it has 2 color box's. also the way i did this reflection take away the transparency because all it did was use the same color as the background to blend in, if you want the logo fully transparent try out the text logo tutorial from step (9) it will show you how to create a mask for the reflection so it stays transparent. hope that helped.

Yes, thank you, Gimper. I am glad that you could make your tutorial even better because of my question. My logo is nice now. You wrote a BF in step 9 too. (And you have a BF in your answer, but I understand it now :) ) I am there just now and I wonder, why the gradient doesn't work. I draw it and anything happens. The layer is transparent, that is right, isn't it? I was not sure in step 8 if the new layer will be transparent. /Ivan

This website is great! My only critic that it is a little troublesome to scroll after the right comment. It would be better if the comments would be collected after the tutorial. It is confusing when the comments abrupts the tutorial. Otherwise this is the best Gimp forum. I feel, that I can really learn Gimp here and that is my very ambition. /Ivan

Ivan again. Don't bother with me, my gradient is visible. I don't know, why it didn't work yesterday. It happens often that I am in hurry to ask, than I find the answer self. I hope, you have place for unnecessary questions too :) /Ivan

Step 11: Isn't 8 px too low? Your button is higher!

Step 15. I used Alpha to selection. When I move the button, whole the layer moves. That is not a big problem now, because it is transparent. But I should like to know anyway, how to move only the button on the layer. /Ivan

(Ivan) i'm glad to you find the site helpful, thats the aim of gimp-tutorials.net :) to move the button select the layer from the dialog and notice when your holding down on the layer it will show a selection around the object, to move it use the move ( you can press "M") to get it. it might be 8px or more either way see which one fits :)

Gimper, I have to object. If I use move-tool, I move whole the layer, even if I alpha-selected the button before. But at last I could find the way: after alpha-selection take select rect. or el. regions and draw with the mouse. This simple thing took a lot of time. It is interesting that the selection changes when I draw, it will be so long as if I selected all the buttons, through 4 layers. I wonder, why. But good luck, only one button moves. I think, this is not so much logic in this, but now I know how to do. /Ivan

No! This is not good either. There are ugly tracks after moving. You can see the old place clearly, there are many pixels left. Så please, tell me, how can I move selected areas, both selecting and area? And now I make the 1 pixel high line. I made the selection. I take the fill tool. I try to fill. Nothing. I see that I have the mystical Floating layer. I anchor, what else can I do with this. Selections disappear. What the %¤#%&(¤ is this??? Please, explain me how to do or tell me the truth about Gimp.

Hi First of all i gotta say I'm a newbie to gimp(i was using it only for 3 days). Looks like the Gimp is begging me to consider graphics design as a hobby. Enough with the trivia. I'm facing two problems with following the tutorial, i admit it is neat and easy to follow, though. 1. In Step 5 - the Logo Section, where is this "keep transparency"checkbox I have to select. 2. In the Tabs section, step 11, I'm asked to draw a rectangle with 105 x 8 px. When I try to draw it, the result is something very much unlike what u have in the tutorial. I blv I misunderstood the dimensions or something. Plz also advise the possibility of deploying a website desinged following this same tutorial. Do u think I can use it for an organizational website. Thnx. U have done a lot for newbies like me.

Hello Gimper, As a new user to Gimp I think your tutorial is great. Can you take it one step further (or point me in the right direction) and outline how you would slice it to HTML or into a CSS? Thanks, - NewUserChicago

Coding it into Html/Css isn't that hard but it needs alot of effort.probably its best if you used a WYSIWYG like dreamweaver (Visual Html Editor) here is one thats free..http://visual-html-editor.qarchive.org/ all you need to do is slice the images and cutting out sections of the template save them as seperete images and then putting them together with a WYSIWYG like dreamweaver or which ever you consider going with. but if you would like to do it the right way i would advise learning from http://www.w3schools.com/ start off with just html then xhtml then CSS. at first you might feel overwhelmed, i know i was, thats why i stick to just designing most of the times :D if you don't have time to do it your self and your project is important then you could always find someone on webmaster forums and pay someone as little as $15-$30 or less to code it to Html/css hope that helps abit.

Do you have the coding for this web layout...

sorry mate i don't :(

hi gimp is a good site

Thanks a ton for this, It is really useful

This article talked about using GIMP to slice. http://www.communitymx.com/content/article.cfm?page=4&cid=24B48

 I couldn't get it to work on Windows. I tried it on Linux (I have Ubuntu). It took me two tries. My first try generated a bunch of blank images. I tried again, it worked great!!!

Basically, you can use guides to markup how you want to slice your drawing. The drawing has to be in indexed color mode. (Image->Mode->Indexed).

Then you just go to "Filters->Web->Py Slice",(available on Linux version, I can't find it on Windows version). It not only sliced it up, it also generates the html file for you.

 The other method will generate the slices, but you have to save each file individually. It's under "image->transform->guillotine". However, when I ran it on Windows, it crashed. I think it couldn't handle some many new image windows. It worked fine for me on Linux.

great tutorial, and nice looking layout.  Also, good find on the stock photos link good job.

Great tutorial. Are there any more tutorials in Internet how to create layouts in GIMP ?

For example on step 3 and 19 or whenever you create a new layer are you leaving it "780X1000 / transparency" and clicking "OK"? This is what I'm doing. I having issues when I get to the "Tab" step. I draw the tab exactly where I want it and round the edges then when I attempt the gradient fill it does nothing. If I create the tab in the lower blank background area, I can fill it but when I move it up where it belongs it takes the whole background with it.

 What am I doing wrong?

 TIA

he/she probably didn't want to take the time to change it
The concepts are still there for the title so it would probably be waste of time to change it because it is a free tutorial

DO you no how to make it into html cos i want to make a web site of it

Do somebody know witch font it is: HOME, PRODUCTIONS etc.

Oo R&R$T, I make the website ugly:( sorry, and sorry that you can't see. Take a look on this website: testx.awardspace.com. Than you click with the right thing of the mouse, then you see something, in the netherlands it is "bron weergeven", i dont know what it is in england etc. If you have do that you see something with style and image, copy that and paste it on your website

If ever i created a page will it work on bloggers?

yes you could apply it to blogger but you will need to put it together in xhtml/css. if your not able to code it your self you could get someone to do it for less then $50 :)

i would like the file please. thanks, gimp is kind of new to me and i'm not good at starting from scratch in that particular program.

i added the source .xcf gimp file of this tutorial at the end of the tutorial (members only)
but since your not a member here it is the direct link
http://gimp-tutorials.net/files/gimp_template.xcf

hi all,

my doubt is is gimp popular like photoshop?
do most or majority companies use gimp for designing?
or do most companies work on linux?

how does a career in linux/gimp seem in future???

Hey, witch font did you used wen you wrote home, products etc.?

its called VGArounded :)

Absolutely brilliant tutorial, making my webpage right now and gonna add it to my site when it's done!

Thanks for the font;), and also thanks for this really great tutorial!

I can't help you with the second problem, but the first I was having a bit of difficulty on my own until I did a bit of experimenting. The "Keep Transparency" box is the same as the "Lock Alpha Channel" box. Tick that and hakuna matata.

I had the same issue as a lot of other commenters. The dimensions in the tutorial are not right. I downloaded to confirm. For example, you have the blue "Top Navigation" bar set for 20 pixels, but the pictures make it look like it's 40. It also looks like it's 40 in the file I downloaded. I'm having a really hard time getting the different blends to line up.

I like the tutorial and what it shows, though.

i use windows, so i don't have the py-slice plugin, is there anything else i could use to convert it to html that is free?
thx in advance!

No problem, Get ubuntu (free) and it comes with Gimp, install on your windows computer, and now you have py-slice :)

You can use slice in windows, not sure where all this "you can't" is coming from....

Ensure you have Python & PyGTK installed, then under filters -> Web-> you'll see the imagemap option...

I got confused on step 18,19, 20 and beyond that, could you please try and explain it again, thanks. I'm working on my own site with gimp, basing the colours off what you have said and then I'll modify it later (ie, redo this tutorial) once I get the whole thing done :) Love it so far though, congrats cause I'm proud I've gotten this far...
;)
Hopefully I can get this done soon as I'm dying to make my own website *smiles*
Ellen!

18,19 is referring to the left side bar that you see in the final image. (i've adjusted the step with some details)

step 20: you need to move all your tabs to the right place so by chain linking which is the the chain icon beside your layer in the layer dialog you can do this with out having to move each tab separately .

Don't worry I fixed my problem now I just want to find out how to link it, then I'll be good and ready to go :) I'm so excited this is my first webpage layout and i reckon it's good... One question, my banner is in GIF format, it only has two layers, and I want to make sure it's possible for my banner to still work when I make it into HTML... *shy smile* I'm not very smart with HTML stuff... Please be aware that I saved it in jpeg so the quality may be down, it wasn't my idea but I couldn't think of anything better to save it as for the moment just to show you. *smiles*
Ellen!
PS: Here's the link to the picture of my page: http://www.imageox.com/image/195429-Web-design.jpeg

well to link your text button to other pages you can either use Gimp's image map filter found under Filters>Web>Image map

or

you can try a visual html editor

HTML Editors:
nVu - http://www.nvu.com
WYSIWYG Web Builder - http://www.wysiwygwebbuilder.com

hope that helps, good luck with your site :)

:) OMG thanks Gimper, I'll try it out and hopefully I can get my website up and running as soon as possible, not sure if you would know but does anybody know how to create a forum on a website? Anyone? Well thanks anyways for all the help and time you've given.
Ellen

bad bad bad, use CSS ....... no coments

Nothing stops you from using CSS once you have the general design. A image helps a lot!

how can I use the theme realized, with wordpress?

an upload it with FileZilla & edit it on Drupal ?
i could really use some help.
i'm sort of new to this custom Photoshop/Gimp web site stuff.
Does any one know where i could get some more help on this stuff ?

e-mail me at : marcus.cooley@gmail.com

There's a great guide to image/layout slicing for CSS at: http://www.csslicingguide.com/guide/stage_1.html

It makes CSS simple! (that's saying something!)11

great tutorial, if you used some nice brushes it would look better

This is a great tutorial outlining the steps that you need to do to create the website but what about the coding... how does a person go abouts that?? If you could get back to me on my email that would be great. Thanks!! :D

great tutorial. anyone who's interested in then converting their design to an actual website should try http://css-tricks.com/ he has some great video tuts doing just that.
The only problem is he uses photoshop not gimp. lol.

Do u know how to set the layer to overlay?
I get stuck with this in many toturails...

Thankyou! This is brilliant! I used it along with css information from this: http://help-developer.com/index.php/2008/06/part-44-design-and-code-a-si...

to make this: http://benjiijneb.110mb.com/index.html

it's great!

nice work, I like how you used two tutorials to create you're site.

most people would be asking how to code it once they designed the layout following this tutorial.

so i have a problem and 2 questions...

ive only had gimp for 1 day so i basically know nothing.
Im using your tutorial and its greatly explained but

Problem:
(this is hard to explain, i dont know if youll get it)when i duplicate it my text it shows up in another window(is that supposed to happen?) so i crop the text and cut it and try to paste it into my first window but i end up with the text looking like its animated with some lines. i dont knw about you but that doesnt seem like duplication. am i duplicating wrong or is it something else?

Question1: i know nothing about css but i want to know where i can find tutorials on how to embed my design into html. i have basic html and it says it will only support gif or jpg files is it possible it can support xcf files?

Question2:have you heard about bluevoda. its a free website builder and looks a lot like gimp and photoshop but i wanted to know is it worth getting confused about. because then ill have to learn even more and my brains about to explode right now!

Hello Dear,

This is really Very good site. I will definately learn many things from this site.

Thanks for keeping good info on such like sites.

With Regards,
Ashish Barot.

lol, you spelled tutorial wrong... thanks for this! it helped a lot.

Hello.

This tutorial really helped me started. I have, however, one small question:

In step 15: is there a way to move the duplicated tabs, keeping it's horizontal position (like when we move an object holding the ctrl key in inkscape)? I had some trouble keeping the tabs aligned. Also, is there a way to distribute the space among tabs (again, like we do in inkscape)?

Regards

Hi Fillipe, As far I'm aware Gimp doesn't have proper alignment features yet or the CTRL key feature that inkscape has.

What I usually do is make use of the snap to grid feature which works well.

Awesome tutorial!! Thanks for taking the time to make this. I would like some help with the transfer of my design from Gimp to HTML / CSS. Is there an easy way to "slice" it all up and import / export it to HTML/CSS?

so how do i save it such that i can put it onto my blogger?

that "free" website builder really is free. building. publishing not included. i tried and it got me fed up since publishing needs money, and somemore by monthly

Actually, After upgrading my gimp, I noticed that there is an alignment tool (Shortcut: Q). I'm still getting the hang of it (in fact, I'm still very novice to gimp), but it seems to do the trick.

As for this tutorial, it was great, and really make me want to change from VG based website drawing to GIMP (although the two ways complement each other).

Regards.

This site is really very very good here is lot's of study knowledge of web design.

Hello. This tutorial really helped me started. I have, however, one small question: In step 15: is there a way to move the duplicated tabs, keeping it's horizontal position (like when we move an object holding the ctrl key in inkscape)? I had some trouble keeping the tabs aligned. Also, is there a way to distribute the space among tabs (again, like we do in inkscape)? Regards

Hello. for days I look for a good manual that could help with the model of my web and nothing and then this one, congratulations is a tremendous manual.
You do not think to do one but with the version more modern of the gimp. and if I can translate it into my language, to the Spanish.

Regards

Hi oramario , Glad you liked the tutorial I certainly will create another layout design related tutorial just not sure when.

Thanks for the tutorial,if you can,post more tutorial concerning to web design...I believe more people will be helped...May God bless you...

Hello!

You can export to XHTML with slices tool.

http://docs.gimp.org/en/python-fu-slice.html

You grammatical error made a

How would you apply this to myspace?

hey! i found this very useful but i was hoping that you would add links[URL] to the buttons! can you do that with GIMP? i am doing a banner for my design web-portfolio, and i am going to include it in my My-space.
please let me know how to add URL to an image using GIMP. thank you.

x pepper x

itssssssssssss aawesome

how can i make these can you help me?
or guides??

thanks baby to http://www.lidasatis.com

Thx 4 good tutorial about template dessign.

Yes, let me explain to all the newbies that.if they try to cut all the parts into pieces and paste them as images in HTML the page would load veery slooow.

Solution: use this as a reference (template) to convert most of the pictures in CSS code (lighter). Or convert the whole template into a lighter picture (gif with very little colors) and code the HTML as image map(static) ...
Or best, leave it to an expert that should base on your dessign (template) and code it all except the background and the logo...

No magic bullet just mere sweat.

Good luck!

plz help im lost in step 11 what is keep in transperancy boX?

plz help im lost in step 11 with keep in tranparency box

Gimper - Firslty, lovely tutorial, following it slowly but surely.

HOWEVER

One issue, thats bugging me and I cannot do this step (Some one else above also mentioned they couldn't)

Is on step 18, i drew a box 108x8 and it is completely different to your image, then it gets a bit vague on what to do - by the look of the screenshot you provided its gradient tool, doing that does nothing for me otherthan gradient the box (Not cut a nice little curve like yours shows!)

Could you explain?

STEP 11 Resolution:

People, you like me are probably using a newer version and having trouble with keep transparency remark - the name of this command has changed!

On your layers pabel you will see a command titled lock with a check box - tick this box.

Regards

This is a reply on my own statement.,

I said, I didn't understand, but now it makes sense, draw a new box on the tabs layer and then fill into this to extend the navigation blue.

I have also noticed some inaccuracies - I have been following this tutorial and notied you drew the header at 150, not 125, which has lead to some other confusion for me when trying to get the gradients to match - hope this comments assist

How do you set up the links in HTML. Does Gimp do that?

Great tutorial ,
One thing is missing could you please release it ? (license it ) under some sort of free license (LGPL , MIT ) etc ..

it's totally free to use for whatever you feel like, LGPL is what it's under.

I think this is really great but what file do u save it in ? i can't figure it out and it's hard bcz i mess up alot and i work with gimp alot but this is the first time i'm making something besides my logo for my online store

ok
this taught me the basics on making layouts using gimp, and i love it
i am using this to make myspace layouts...
one thing i need to know, is how do you get the css and html code to put exactly what you have in gimp, onto myspace?
the other thing i want to know is how to make rollovers...
thank you very much, and please reply to this, or make a tutorial. i am more worried about getting it on myspace for now though, so answer that fisrt...
thanks, collin

oh, and here are some layouts i made using gimp so far, they are just images of what i want the layout to be though, because, as i said above, i have no idea how to convert it all to html and css...
http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&fr...

Not worth it..........
No hard feelings but i don think this was of any help and wasted a lot of my time.....

Hi i don't know much about html but my boy friend is a web designer and could give u a program that can do the html for u and then all u do is copy and paste it lol he's the one that does my html if u have yahoo or a messanger of something message me so that i can give u the program or so u can talk to him message me at princess_joy_oneil@yahoo.com

how do you apply this to myspace??? i made a layout but i dnt know how to do the links!!! helpp

made my first .xcf file... only now i like it to be a official web design site I like to publish one day. I am learning so much by the tutorials that are being provided. How can i upload it to show it off a little?

TAms

Hi,
Nice tutorial, but i get the impression its not for the new user. I guess you picked it up real fast if you used it like this in a few days.
But half of your steps offer no additional info and make me wonder for ages how you did it. e.g.

- "tick the 'Keep the Transparency box'." => i went mental, now i think its just the one named "lock" right beneath the opacity in the layer menu.

- Duplicate => option in the image menu

- "Now to create the reflection duplicate the text name it logo reflection and place it below the original one" I had to read this one several times before I got it.

Right now i'm stuck on this one: "Use the Gradient fill tool and select 'FG to transparency' and change the color of the FG to 3a4146" cause i cant find where to "to transparency" option is.

Its still a very nice tutorial, but if you meant it for gimp noobs it would really benefit from more elaborate steps.

Gimper great tutorials and I would love to learn more about Gimp. I'm a total noob with no prior design experience using Gimp 2.6.5. Can you recommend any books to help me on my way to using gimp? Or are the tutorials here enough to become as talented as yourself. I don't have any previous design experience. What where the steps and tutorials that you first followed and used.

@Dino: http://gimp-savvy.com/BOOK/
Free downloadable ebook. You'll need 7-zip to unizip it.