Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts

    Slicing an image.

    Okay so today I had a few hours off of work, so I decided I would attempt a new look for my website. This kind of layout seems to be quite popular.
    So it all started quite well I suppose considering this is the first time I attempted to make a layout using a graphics program.
    I finished the layout and discovered that I don't know how to slice an image using GIMP, so does anybody have a decent tutorial or explanation on how to do this?
    Find my layout at www.jamiewest.org.uk/css/codingforums/index.jpg
    Thanks in advance.
    Rafiki.

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    http://www.google.com/search?q=gimp+slicing+tutorial Looks like some good ones near the top.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #3
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Hi Rafiki,

    There are a lot of tutorials out there and such on this, however I use gimp a lot for my designs and its really quite simple.

    The way I choose to is to think about how your layout will look from top to bottom and start slicing in that order :BG<Header<Nav etc

    The only tools you really need to use are the "eye" tool so you can see only a certain layer, then right click on the layer and choose alpha to selection, you can then crop some of it if needed, then click "Copy Visible", then "Paste as New Image" and you will have your new isolated image. Save it as you would like and repeat the above steps and then continue with you layout

    So for yours, I would start with the background image, then slice your header gradient 1px wide and repeat-x.

    I highly recommend checking out Gimpology.com, it has some great tutorials and tricks for the GIMP.

    Best of luck,

    Drew

    P.S. I noticed on your logo, it seems you were trying to do a gradient from top to bottom, only it shows up in the form of a square box, not just over the letters. To conquer this, choose "Alpha to selection" on your reflect text, then duplicate the layer and use your gradient over it. This will apply it to the text only
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • The Following 2 Users Say Thank You to FWDrew For This Useful Post:

    oesxyl (06-18-2008), rafiki (06-18-2008)

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    hi,

    you can try also gimp grok

    regards

  • #5
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey
    I think above user is right. He has good knowledge. I hope above suggestion will help you.
    All the best!!
    Last edited by evo; 06-18-2008 at 10:12 AM. Reason: URL removed.

  • #6
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts
    That was pretty simple actually. It is now all sliced, prepare yourself for loads of "newby" questions in the html/css forum


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •