1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[HELP] How To Create Your Own Website Design Using Gimp

Discussion in 'Gimp Tips & Tutorials' started by warenschild, Jul 25, 2011.

  1. warenschild

    warenschild New Member

    Joined:
    Jul 25, 2011
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    1
    I used this tutorial to create my first layout with gimp.
    <a class="postlink" href="http://gimp-tutorials.net/websitetutorial" onclick="window.open(this.href);return false;">http://gimp-tutorials.net/websitetutorial</a>

    I'm probably in the wrong section of this forum, but I dont know where else to post.

    But how do I use this template now to create a homepage? I mean this template is a picture file and I wonder how to put frames or HTML Code in that?

    Or its just so simple that I have to use this template as a complete background image of a webpage?

    I already have a well knowledge in HTML, PHP and CSS, but this is beyound me.

    Hope someone could help me.

    Thank in advance.
     
  2. UnconventionalT

    UnconventionalT New Member

    Joined:
    Jul 21, 2011
    Messages:
    19
    Likes Received:
    0
    Trophy Points:
    1
    _Technically_ this is possible, but not recommended. Normally you would make this, and send it to a web developer, or use it as your own template, but not turn it into a webpage, especially not in Gimp. I believe something like Inkscape would be better suited, and the tutorial follows pretty much the same principles.
    Again, the reason why you wouldn't want to do this is because this is an image, and loading an entire image for one page in a website isn't efficient.

    If you STILL want to make it into a website, go to "Filters" - "Web" - "Image Map". Here you can draw buttons in, and have them link to different page, including other image maps. But this feature would really only be useful if you had a picture, and you wanted to make faces clickable, for example. This image would of course be a small part in the large overall website.

    [strike]If you want to make an actual website with that template, look at this tutorial for Inkscape. <a class="postlink" href="http://tucson-labs.com/creating-websites-with-inkscape/" onclick="window.open(this.href);return false;">http://tucson-labs.com/creating-websites-with-inkscape/</a>[/strike] (If you've never heard of Inkscape, it's an open-source vector program. Gimp is to Photoshop as Inkscape is to Illustrator.)
    EDIT: My bad, that tutorial is essentially what you had there.
     
  3. warenschild

    warenschild New Member

    Joined:
    Jul 25, 2011
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    1
    Ah ok , these templates are really only templates. To illustrate how a website could look like.
    Then I misunderstood that, first I thought you can extract these layers (made in gimp) and create html layers ^^
    however thank you for your reply.
     
  4. UnconventionalT

    UnconventionalT New Member

    Joined:
    Jul 21, 2011
    Messages:
    19
    Likes Received:
    0
    Trophy Points:
    1
    It's not like I've tried any of these out, but if you wanted to try some integrated web development platforms, you may want to try something like NVU or Amaya. Kompozer is like an updated NVU...
    <a class="postlink" href="http://www.nvu.com/" onclick="window.open(this.href);return false;">http://www.nvu.com/</a>
    <a class="postlink" href="http://www.w3.org/Amaya/" onclick="window.open(this.href);return false;">http://www.w3.org/Amaya/</a>
    <a class="postlink" href="http://kompozer.net/" onclick="window.open(this.href);return false;">http://kompozer.net/</a>

    Again, I've never tried any of these, and this is not my area of expertise. So, have a go at a few of them and see what works? (Also, I chose FOSS because that's what I do. :D)
     
  5. sky-fyre

    sky-fyre Active Member

    Joined:
    Aug 27, 2008
    Messages:
    2,127
    Likes Received:
    0
    Trophy Points:
    36
    as UnconventionalT said, loading a single image like that would be inefficient. Basically, what you do is cut it up into smaller images and use HTML divs to arrange them so it looks like the template image. If you need more help, just email me: shadowfyrestar(at)gmail(dot)com
     
  6. Maffe811

    Maffe811 The forum pet Staff Member

    Joined:
    Jul 2, 2009
    Messages:
    6,813
    Likes Received:
    2
    Trophy Points:
    38
    Location:
    Norway/Norge/Norwegen
    Oh damn your lucky!
    Sky above there ^ is really good at making web pages!
     
  7. David Wood

    David Wood Moderator Staff Member

    Joined:
    Jul 22, 2009
    Messages:
    5,501
    Likes Received:
    5
    Trophy Points:
    38
    Occupation:
    Freelance graphic designer and visual effects arti
    Location:
    Western New York
    Home Page:
    There's a script available if you have Python installed that will slice up the image into individual images based on guides you place and will create an html file with all the image codes in order. Let me look around and find it again.
     
  8. David Wood

    David Wood Moderator Staff Member

    Joined:
    Jul 22, 2009
    Messages:
    5,501
    Likes Received:
    5
    Trophy Points:
    38
    Occupation:
    Freelance graphic designer and visual effects arti
    Location:
    Western New York
    Home Page:
    Ok, here is the Python link. <a class="postlink" href="http://photocomix-resources.deviantart.com/art/Gimp-Python-support-easier-74889017" onclick="window.open(this.href);return false;">http://photocomix-resources.deviantart. ... r-74889017</a>

    Once you have it installed then the script will be in Filters > Web > Slice. ;D
     
  9. Maffe811

    Maffe811 The forum pet Staff Member

    Joined:
    Jul 2, 2009
    Messages:
    6,813
    Likes Received:
    2
    Trophy Points:
    38
    Location:
    Norway/Norge/Norwegen
    I never understood slice :p
     
  10. David Wood

    David Wood Moderator Staff Member

    Joined:
    Jul 22, 2009
    Messages:
    5,501
    Likes Received:
    5
    Trophy Points:
    38
    Occupation:
    Freelance graphic designer and visual effects arti
    Location:
    Western New York
    Home Page:
    You place guides, Slice cuts along the guides, Slice makes html code that form a webpage with all the slices. :p
     
  11. Maffe811

    Maffe811 The forum pet Staff Member

    Joined:
    Jul 2, 2009
    Messages:
    6,813
    Likes Received:
    2
    Trophy Points:
    38
    Location:
    Norway/Norge/Norwegen
    I know that, but i failed at using it... might give it a go... again! :p
     

Share This Page