SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Resident Boozehound simontheak's Avatar
    Join Date
    Jun 2003
    Location
    _root.europe.uk.london
    Posts
    965
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slicing in Photoshop

    I fell a little silly in asking this, but can someone give me a quick overview of how to slice up an image in Photoshop?

    The web sites I've created before have all been designed in Fireworks, but I've recently switched to Photoshop as I find it easier to create some nice efects. However, having created a psd of the site, I'm having real trouble slicing it up. I've exported it into Image Ready and found the slice tool, but I can't seem to create my slices manually:

    • I can't select/resize a slice once I've created one
    • How can I tell which area has been sliced?
    • How do I export the smaller images whem I'm finished ... and is it possible to create an HTML file too?


    Thanks for your help - it's really appreciated!

  2. #2
    l 0 l silver trophybronze trophy lo0ol's Avatar
    Join Date
    Aug 2002
    Location
    Palo Alto
    Posts
    5,329
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I hope I don't get blamed for linking to my own site, but it's rather helpful to have your own database of such things.

    http://www.good-tutorials.com/search.php?q=slic

    I also just noticed that "Slicing" is one of those funny-looking words if you look at it for a little bit.

  3. #3
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    66 Post(s)
    Tagged
    2 Thread(s)
    You dont want to do it in photoshop, but imageready wich comes with it, theres a button at the bottom of the toolbar in PS to switch the current file over to imageready. There is where you slice it.

  4. #4
    Resident Boozehound simontheak's Avatar
    Join Date
    Jun 2003
    Location
    _root.europe.uk.london
    Posts
    965
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for your replies guys. It just all seems very different to Fireworks!!

    Quote Originally Posted by lo0ol
    I also just noticed that "Slicing" is one of those funny-looking words if you look at it for a little bit.
    Ha ha - I thought I was the only one who did that kind of thing!

  5. #5
    SitePoint Enthusiast MegaThemes's Avatar
    Join Date
    Aug 2003
    Location
    Mumbai, India
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Slicing with PS is easier and I prefer it over ImageReady.

    There are two types of slicing tools. One is for making the slice and one is Slice Select to select the slice.

    To save to HTML, you can do a Save for Web option and select to save as HTML in the save dialog instead of jpg/gif etc.. (its in the drop down box)
    You will get an HTML file along with images in an image folder.

  6. #6
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    66 Post(s)
    Tagged
    2 Thread(s)
    No! Never use photshops html, never! always, always, always compile your own page, just save the images, not the html.

  7. #7
    $postcount++; koomann's Avatar
    Join Date
    Feb 2003
    Location
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by K. Wolfe
    You dont want to do it in photoshop, but imageready wich comes with it, theres a button at the bottom of the toolbar in PS to switch the current file over to imageready. There is where you slice it.
    Although I haven't used PS in a while, I think the shortcut for that is CTRL+SHIFT+M

    It will launch ImageReady with the current PSD as the file. To slice the file, try and find the button that looks like a little knife, or something like the top of a modeling knife. The Slice Select tool is also in the general area of the regular slicing tool as well.
    [--Wings--]

  8. #8
    SitePoint Enthusiast MegaThemes's Avatar
    Join Date
    Aug 2003
    Location
    Mumbai, India
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by K. Wolfe
    No! Never use photshops html, never! always, always, always compile your own page, just save the images, not the html.
    I don't use ps html as is.

    I use to to generate the table structure etc.

    I then clean up the HTML thoroughly to make it XHTML compliant and use CSS as well.

    You can see and example of this at http://www.ajaydsouza.com where I generated the layout in PS.

  9. #9
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm having a problem where when i slice in imageready, then take to DW... and add rollovers.. It looks perfect in DW but when i view it in IE, some of my images are slightly missplaced.. and theres a white space in places theres shouldn't be.

    I checked the html coding, and i honestly see no problems in it.. or why the spaces are apearing.

  10. #10
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay after alot of trial and error.. i've concluded that image ready sucks lol.

    The reason i was having the white spaces, is because imageready inserted to many blank spaces within the code so i had to go in and delete every extra blank space that was there, that didn't need to be there.. as well as delete some extra cells empty cells image ready inserted for no purpose it seems...


Bookmarks

Posting Permissions

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