• home
  • forum
  • downloads
  • brushes
  • contact
Home

Search

Your Ad here contact

Open source marketing tools

Recent comments

  • Re: Super Slick Dusky Lighting Effects in Gimp
    8 hours 12 min ago
  • Re: Button Tutorial
    19 hours 12 min ago
  • Re: Text to Path
    23 hours 20 min ago
  • Re: Text to Path
    1 day 4 hours ago
  • Re: Cubes Brushes
    3 days 56 min ago
  • Re: Cubes Brushes
    3 days 1 hour ago
  • Re: Button Tutorial
    3 days 3 hours ago
  • Re: Wordpress theme designed with Gimp
    4 days 2 hours ago
  • Re: 130 Ultimate Web 2.0 Gradients for Gimp
    4 days 6 hours ago
  • Really nice brushes. Good
    4 days 9 hours ago

Tutorial Categories

  • Effects
  • Icons & Buttons
  • Photo Manipulation
  • Textures
  • Website Layouts
  • Misc
  • Painting
  • Text Effects
  • Video Tutorials

User login

  • Create new account
  • Request new password
Enter your Email





Preview | Powered by FeedBlitz

Most Viewed Tutorials

  • Mac style Wallpaper (195067)
  • Vista Button (117712)
  • How To Create Your Own Website Design Using Gimp (85240)
  • Glow Effect (84738)
  • 30 Ultimate Web 2.0 Layer Styles for Gimp (73109)
more

Other Gimp Sites

  • Gimp.org
  • Gimpology.com
  • Gimper.net
  • Gimpusers.com
  • Wilber-loves-apple
  • Gimphoto.com

How To Create Your Own Website Design Using Gimp

Submitted by Gimper on Thu, 08/23/2007 - 01:32.

Average: 3.3 (218 votes)
Preview:
gimp_website_tutorial.jpg

It's only been a few days since i started with gimp and i already feel pretty comfortable with it, so i decide to create a website tutorial using Gimp.

for first time users its advisable to check out gimp.org for a quick overview of Gimp's tools and interference none the less its pretty straight forward and easy.


This is the out come of this tutorial

Step:
1) Create a new Image 780x1000
2) Fill the background with the color ededed using the fill bucket tool.

Header will be simple and clean
3)Create a new layer and name it 'Header'.
4)Use the Rectangle select tool and Drag across the full width which is 780x and a height of 125x use the Ruler as guides.
5) Now Select the Fill with Gradient tool and pick the FG to BG (RGB) Gradient and add the color 000000 for FG and BG to 3a4146
6) Now Drag from top to bottom make sure the fill line straight


Click here to Enlarge

It should look like this now


Click here to Enlarge

Logo will just create a simple text as a logo with some reflection effect.
2)Add text Gimp-tutorials.net with size 30px and font 'Trebuchet MS Bold' you can try your own name and fonts of course :)
3) now to create the reflection duplicate the text name it logo reflection and place it below the original one
4)Using the flip tool will flip the logo reflection layer vertically

5)Select the logo reflection layer and tick the
'Keep the Transparency box'.
6) Use the Gradient fill tool and select
'FG to transparency' and change the color of the FG to 3a4146

7)Now drag from bottom to top several time to fad-out the bottom part of the reflection logo text

Top Navigation bar
8)Create new Layer and use the rectangle selection tool to drag to the full width of 780x and hight of 20x


Click here to Enlarge

9) now using th gradient fill pick
FG to BF (RGB) Gradient and add the color 0276cf for FG and BG to 82c9ff, apply the gradient from bottom to top as shown below

Tabs
10)Create a new layer and name it Tab
11)Use the rectangle tool and draw a rectangle 105px wide and 8px high again use the Ruler for guidance
12)now right click on the tab and go to Select>rounded and change the Radius% to 45
13)Now use the Gradient fill using th same colors as the nav bar,0276cf for FG and BG to 82c9ff
14)now drag from bottom to top make sure you start from around 225px on the ruler and end at 125x on the ruler, or els the tab wont blend in with the nav bar very well, you you can see how i started and ended the fill line in the picture below keeping on trying till its perfect, i did :D

it should look like this

15) Duplicate the Tabs 3 times,rename them to stay organized
and space them out like this

16) now we would like to Center the tabs, will do that by clicking on all the chain looking icons in the layer dialog/window

17) now add text for each tab, ill type in home,products,contacts,about.
its a good Idea to save your work right now using the XFC format to be on the safe side.


Click here to Enlarge

left Bar simple clean sidebar that works well with CSS Based sites, we will place it to the left side of the layout.
18)Create new Layer, name it 'left menu bar"
19) use the rectangle selection tool and draw a 200px and 950x high selection which will go all the way to the bottom then fill it with the color 232323

20) chain link the tabs as well as the text and move it so its aligned like this

21)now to Create the line separators for the left menu bar, create a new layer, name it Line, Zoom in to about 300% so you can see,draw a rectangle thats 1px high and almost the width of the menu the then fill with the color 232222

22)Draw another line and use the color 4e4c4c.

this is how it looks zoomed in at 200%

23)Duplicate 7 of the lines layer and space them out like this.

24)Add some light Gradient effect to the background first Create a new layer name it 'gradient effect' then draw a 205px rectangle and fill it from bottom to top with the color ededed for FG and ffffff for BF.

25)Create another layer and do the same for the bottom part of the body but this time draw from top to bottom.

now the main layout design is done, time to add some basic content, will need some nice photography touch going in there, one of my favorite free stock image sites is http://www.stockvault.net/ its 100% free! it wont cost you even a penny :P. head over there and download a suitable picture.

here is the what i used

you can download it from here
http://www.stockvault.net/details.php?gid=98&sgid=&sgid=&pid=6296

26)open your new downloaded photography image and select the Scale tool and resize it from 1500 x 1835px to 1024x705, because the image is too big will only want a nice scene of it, so grab the select tool and drag across to about 569x width and 179x height from the desired scene/area,then extract/cut it by pressing CTRL+C then going to our website tutorial window and pressing CTRL+V to paste it,
align and place it under the the header as shown below.

26) now will add text links to the left menu, so grab the text tool type in about 5-6 words and align it perfectly in the middle of the divider lines.

27) Repeat this to the other dividers and always make sure its aligned perfectly, alignment is everything when it comes to graphic design, this is how it should look

28)again grab the text tool add a few paragraphs and place it in the center of the the empty space make sure all sides have equal space to get it perfectly aligned.


Click here to Enlarge

29)now the footer usely would have just the copywriter text with maybe an extra nav links, i just added the Gimp mascot that can be found on gimp.org and a small text of gimp-tutorials.net url.

Thats it you have a full template All done with Gimp :)


Click here to Enlarge

i changed the text logo to suite the site more, its always good to experiment different fonts to get that perfect look. :D

Click here to Enlarge

stuck on something or need help leave a message here and ill reply to it :) feedback really appreciated.

______________________________________________________________

if you liked this tutorial you will sure like this one as well blog tutorial

Bookmark/Search this post with:
  • Delicious
  • Reddit
  • Magnoliacom
  • Furl
  • Facebook
  • Google
  • Yahoo
  • Technorati
  • Icerocket

Coffe

If you liked this post, you can buy me a coffee, thanks

AttachmentSize
gimp_template.xcf967.62 KB
  • Website Layouts
  • 85240 reads
Gimper's picture

website tutorial

Submitted by Gimper on Mon, 08/06/2007 - 18:31.

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

  • reply
Visitor's picture

This is great! I'm sure lots

Submitted by Visitor on Thu, 08/09/2007 - 10:09.

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

  • reply
Visitor's picture

Re: How To Create Your Own Website Design Using Gimp

Submitted by Visitor on Sun, 08/12/2007 - 18:26.

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

  • reply
Gimper's picture

Updated the website tutorial

Submitted by Gimper on Thu, 08/23/2007 - 23:44.

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.

  • reply
Visitor's picture

I LOVE YOU!

Submitted by Visitor on Sat, 08/25/2007 - 22:37.

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

  • reply
El Llama's picture

Coding??

Submitted by El Llama on Sun, 08/26/2007 - 22:53.

How do I integrate this into my site?

Best of luck,
El Llama

  • reply
Visitor's picture

spellling error

Submitted by Visitor on Thu, 08/30/2007 - 01:05.

you spelled tutorials wrong you wrote it tutorils

  • reply
Visitor's picture

Thanks

Submitted by Visitor on Sat, 09/01/2007 - 22:44.

Thank you, this was a great tutorial!

  • reply
Visitor's picture

My gradient loosed the transparency

Submitted by Visitor on Wed, 09/05/2007 - 11:38.

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

  • reply
Visitor's picture

FG to BF? or BG?

Submitted by Visitor on Wed, 09/05/2007 - 12:19.

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.

  • reply
Gimper's picture

yes FG to BG thats what i

Submitted by Gimper on Wed, 09/05/2007 - 15:51.

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.

  • reply
Visitor's picture

Unvisible gradient

Submitted by Visitor on Wed, 09/05/2007 - 22:34.

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

  • reply
Visitor's picture

To the webmaster

Submitted by Visitor on Thu, 09/06/2007 - 07:19.

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

  • reply
Visitor's picture

Visible

Submitted by Visitor on Thu, 09/06/2007 - 07:34.

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

  • reply
Visitor's picture

8 px?

Submitted by Visitor on Thu, 09/06/2007 - 07:53.

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

  • reply
Visitor's picture

How to move only the layer's content

Submitted by Visitor on Thu, 09/06/2007 - 08:50.

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

  • reply
Gimper's picture

i'm glad to you find the site helpful

Submitted by Gimper on Thu, 09/06/2007 - 15:58.

(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 :)

  • reply
Visitor's picture

Select area and move it

Submitted by Visitor on Thu, 09/06/2007 - 17:07.

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

  • reply
Visitor's picture

Nothing works

Submitted by Visitor on Thu, 09/06/2007 - 22:05.

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.

  • reply
Visitor's picture

Two difficulties with the details. Please Help

Submitted by Visitor on Fri, 09/07/2007 - 09:09.

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.

  • reply
Visitor's picture

Next Step Conversion to HTML/CSS

Submitted by Visitor on Wed, 09/12/2007 - 21:14.

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

  • reply
Gimper's picture

coding it

Submitted by Gimper on Fri, 09/14/2007 - 04:06.

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.

  • reply
Visitor's picture

coding

Submitted by Visitor on Fri, 09/21/2007 - 12:18.

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

  • reply
Gimper's picture

Re: How To Create Your Own Website Design Using Gimp

Submitted by Gimper on Sat, 09/22/2007 - 17:24.

sorry mate i don't :(

  • reply
oliviabrett's picture

gimp is a good site

Submitted by oliviabrett on Sun, 10/07/2007 - 16:18.

hi gimp is a good siteLaughing

  • reply
Visitor's picture

well done

Submitted by Visitor on Wed, 10/10/2007 - 11:59.

Thanks a ton for this, It is really useful

  • reply
Visitor's picture

Conversion to HTML

Submitted by Visitor on Mon, 10/15/2007 - 23:23.

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.

  • reply
metromax's picture

brilliant

Submitted by metromax on Thu, 10/18/2007 - 12:54.

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

  • reply
Visitor's picture

great tutorial

Submitted by Visitor on Fri, 10/19/2007 - 12:30.

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

  • reply
jake11375's picture

question...

Submitted by jake11375 on Thu, 10/25/2007 - 23:12.

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

  • reply
Visitor's picture

Re: spellling error

Submitted by Visitor on Sun, 12/16/2007 - 21:06.

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

  • reply
Rof-Lmao's picture

Html

Submitted by Rof-Lmao on Fri, 12/28/2007 - 23:55.

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

  • reply
Visitor's picture

Font

Submitted by Visitor on Thu, 01/10/2008 - 17:28.

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

  • reply
Visitor's picture

HTML

Submitted by Visitor on Thu, 01/10/2008 - 17:53.

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

  • reply
Visitor's picture

Blogger

Submitted by Visitor on Wed, 01/16/2008 - 11:46.

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

  • reply
Gimper's picture

Re: How To Create Your Own Website Design Using Gimp

Submitted by Gimper on Wed, 01/16/2008 - 11:51.

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 :)

  • reply
Visitor's picture

.xcf file

Submitted by Visitor on Fri, 01/25/2008 - 01:59.

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.

  • reply
Gimper's picture

Re: website .xcf file

Submitted by Gimper on Sat, 01/26/2008 - 12:18.

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

  • reply
Visitor's picture

is gimp popular like photoshop?

Submitted by Visitor on Mon, 01/28/2008 - 10:20.

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???

  • reply
Visitor's picture

Font

Submitted by Visitor on Tue, 01/29/2008 - 19:37.

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

  • reply
Gimper's picture

Re:font

Submitted by Gimper on Wed, 01/30/2008 - 02:04.

its called VGArounded :)

  • reply
Visitor's picture

Thanks!

Submitted by Visitor on Fri, 02/01/2008 - 19:04.

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

  • reply
Visitor's picture

Thnx

Submitted by Visitor on Sat, 02/02/2008 - 18:57.

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

  • reply
Visitor's picture

Re: Two Difficulties with the details. Please Help.

Submitted by Visitor on Sun, 02/10/2008 - 18:46.

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.

  • reply
Barrett's picture

The Dimensions Are Off(?)

Submitted by Barrett (not verified) on Sun, 02/17/2008 - 05:40.

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.

  • reply
Visitor's picture

Html

Submitted by Visitor (not verified) on Thu, 02/21/2008 - 01:36.

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!

  • reply
Visitor's picture

"that is free?"

Submitted by Visitor (not verified) on Fri, 02/22/2008 - 16:32.

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

  • reply
Michael Hans's picture

RE:HTML

Submitted by Michael Hans (not verified) on Tue, 02/26/2008 - 20:21.

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...

  • reply
Ellen's picture

Step 18 - 29... Help please????

Submitted by Ellen (not verified) on Fri, 03/07/2008 - 12:22.

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!

  • reply
Gimper's picture

Re: How To Create Your Own Website Design Using Gimp

Submitted by Gimper on Sat, 03/08/2008 - 00:30.

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 .

  • reply
Ellen's picture

Step 18 - 29-FIXED... New problem occured (finished tut though)

Submitted by Ellen (not verified) on Sat, 03/08/2008 - 01:43.

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

  • reply
Gimper's picture

Re: Step 18 - 29-FIXED... New problem occured (finished tut thou

Submitted by Gimper on Sat, 03/08/2008 - 02:46.

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 :)

  • reply
Ellen's picture

Re: Step 18 - 29-fixed...

Submitted by Ellen (not verified) on Tue, 03/11/2008 - 11:18.

:) 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

  • reply
agustoll's picture

BADDDDD

Submitted by agustoll (not verified) on Fri, 03/14/2008 - 14:47.

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

  • reply
kenjiru's picture

Re: BADDDDD

Submitted by kenjiru (not verified) on Tue, 04/22/2008 - 08:12.

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

  • reply
lolz93's picture

how can I use the theme

Submitted by lolz93 (not verified) on Thu, 05/29/2008 - 17:33.

how can I use the theme realized, with wordpress?

  • reply
Visitor's picture

Re: website tutorial

Submitted by Visitor (not verified) on Sat, 05/31/2008 - 13:06.

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

  • reply
Visitor's picture

Re: Re: website tutorial

Submitted by Visitor (not verified) on Tue, 06/03/2008 - 07:20.

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

  • reply
Photoshop Brushes's picture

Re: How To Create Your Own Website Design Using Gimp

Submitted by Photoshop Brushes (not verified) on Wed, 06/04/2008 - 06:18.

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

  • reply
Visitor's picture

Re: How To Create Your Own Website Design Using Gimp

Submitted by Visitor (not verified) on Tue, 06/10/2008 - 15:49.

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

  • reply
ggdancer's picture

Re: How To Create Your Own Website Design Using Gimp

Submitted by ggdancer (not verified) on Wed, 06/18/2008 - 23:40.

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.

  • reply
Killerman's picture

Re: How To Create Your Own Website Design Using Gimp

Submitted by Killerman (not verified) on Fri, 06/27/2008 - 14:27.

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

  • reply
Benji's picture

Re: How To Create Your Own Website Design Using Gimp

Submitted by Benji (not verified) on Thu, 07/24/2008 - 17:45.

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!

  • reply
Gimper's picture

Re: How To Create Your Own Website Design Using Gimp

Submitted by Gimper on Thu, 07/24/2008 - 19:56.

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.

  • reply
Sasha's picture

Re: How To Create Your Own Website Design Using Gimp

Submitted by Sasha (not verified) on Wed, 08/06/2008 - 19:08.

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!

  • reply
Ashish Barot's picture

Hello Dear, This is really

Submitted by Ashish Barot (not verified) on Mon, 08/11/2008 - 04:17.

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.

  • reply
Visitor's picture

Re: How To Create Your Own Website Design Using Gimp

Submitted by Visitor (not verified) on Mon, 08/11/2008 - 18:22.

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

  • reply

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • You can use BBCode tags in the text, URLs will automatically be converted to links.

More information about formatting options

Captcha
This question is used to make sure you are a human visitor and to prevent spam submissions.
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

  • home
  • forum
  • downloads
  • brushes
  • contact