Photoshop Slice Tool: Split image for website
: Sunday, May 6th, 2007 (Last Updated: July 7th, 2007)
: freetime
You can use Slice Tool 
to divide large image to small connected pieces of rectangle image that is useful for building website. You can select the slice area manually of create from guides, by click Slice from Guide button at Slice Tool option bar.
To move, duplicate, combine, divide, resize, delete, arrange, align, and distribute user slices, using Slice Select Tool 
. You can save slice to html file that include all pieces plot in to html table that are connected show as complete large image when viewing by web browser.
Slices are also advantageous when working with images that contain different types of data. For example, if one area of an image needs to be optimized in GIF format to support an animation, but the rest of the image is better optimized in JPEG format, you can isolate the animation using a slice.
Slice Tool Option:
Style (A): Use style to control the proportion of sliced area while select.
- Normal: To determine slice proportions by dragging.
- Fixed Aspect Ratio: To set a height-to-width ratio. Enter whole numbers or decimals for the aspect ratio. For example, to create a slice twice as wide as it is high, enter 2 for the width and 1 for the height.
- Fixed Size: To specify the slice’s height and width. Enter pixel values in whole numbers.
Width and Height (B): Enter value of slice width and height for Fixed Aspect Ratio and Fixed Size slice style.
Slice from Guide (C): Click to create slice form guides.
To create a slice with the Slice tool:
- Select the Slice tool
. Any existing slices automatically display in the document window. - Choose a style setting in the options bar.
- Drag over the area where you want to create a slice. Shift-drag to constrain the slice to a square. Alt(Option) + Drag to draw from the center. Use View » Snap To align a new slice to a guide or another slice in the image.
To create slices from guides:
- Add guides to an image.
- Select the Slice tool, and click Slices From Guides in the options bar.
When you create slices from guides, any existing slices are deleted.
To creating layer-based slices:
Layer-based slices are especially useful when working with rollovers. If you apply an effect to the layer to create a rollover state, the slice automatically adjusts to encompass the new pixels. When you create a slice from a layer, the slice area encompasses all the pixel data in the layer. If you move the layer or edit the layer’s content, the slice area automatically adjusts to encompass the new pixels.
However, do not use a layer-based slice when you plan to move the layer over a large area of the image during an animation, because the slice dimension may exceed a useful size. To create a slice from a layer:
- Select a layer in the Layers palette.
- Choose Layer » New Layer Based Slice.
Working with slices
When you view slices in Photoshop and Photoshop Save for Web dialog box, the slice are identify by line, color and symbols (called Slice Badge). The following characteristics can help you identify and differentiate between slices:
Slice lines: Define the boundary of the slice. Solid lines indicate that the slice is a user slice or layer-based slice; dotted lines indicate that the slice is an auto slice.
Slice colors: Differentiate user slices and layer-based slices from auto slices. By default, user slices and layer-based slices have blue symbols, while auto slices have gray symbols.
In addition, The Photoshop Save for Web dialog box use color adjustments to dim unselected slices. These adjustments are for display purposes only and do not affect the final image’s color. By default, the color adjustment for auto slices is twice the amount of that for user-slices.
Slice numbers: Slices are numbered 
from left to right and top to bottom, beginning in the upper left corner of the image. If you change the arrangement or total number of slices, slice numbers are updated to reflect the new order.
Slice badges: The Web Content palette uses a number of badges, or icons, to indicate certain conditions, and these icons also appear in the document itself:
User slice has Image content
User slice has No Image content
Slice is a layer-based slice
Slice is linked
Slice includes a rollover effect
Slice contains the active rollover state
Slice is a nested table
Slice is a remote trigger
Slice is a remote target
To show or hide slice boundaries: Choose View » Show » Slices. To hide and show slices along with other items, use the Extras command.
To show or hide slice numbers: In Windows, choose Edit » Preferences » Guides, Grid, & Slices. or in Mac OS, choose Photoshop » Preferences » Guides, Grid, & Slices. Under Slices, click Show Slice Numbers.
To change the color of slice lines: In Preferences » Guides, Grid, & Slices. Under Slice Lines, choose a color from the Line Color pop-up menu. Changing the color of slice lines automatically changes the color of selected slice lines to a contrasting color.
Related Articles:
- Photoshop CS3 Toolbox: Quick Reference
- Merge, Merge Visible and Flatten Image Command
- Photoshop Free Transform Command
Post Footer automatically generated by Add Post Footer Plugin for wordpress.
| Bookmarks this Page | |||
|
|
|||
June 13th, 2007 at 3:37 pm
How do I attribute a “mail to” command to a slice? Please help! Thanks!
Emily
June 14th, 2007 at 12:49 am
Hi emily
Thanks for your comment, I not sure about your question, but I guess you need to at “mail to” link to image slice. If so you can use Slice Select tool and Right + Click (Windows) or Control Click (Mac), this will bring up the pop-up menu, choose “Edit Slice Option”.
Now in URL text box enter “mailto:youremail@email.com” , replace “youremail@email.com” with email address you want to direct to.
I hope this will be useful. Please feel free to leave a comment if you still have any additional questions.
freetime
July 6th, 2007 at 11:46 pm
This article is great but im finding cs3 much harder work than cs2, even from the create to layer based slice option is no longer there..unless im missing something
July 7th, 2007 at 2:12 am
Hi Martay
I already checked in Photoshop CS3 extended version, you can create layer-base slice by choose menu Layer > Layer Base Slice exactly like you’re working in Photoshop CS2.
But I’m not sure whether adobe remove layer base slice option for any other version of Photoshop CS3.
freetime
July 7th, 2007 at 4:26 am
Thank you so much for your help, on CS2 there used to be the option to Right Click on the layer you were on and select it from there.
I have to confess i have CS3 Extended, i was looking for ages, even trying to search through the help files…and sure enough there it is where you said, and its even highlighted in purple.
That’s Great thanks.
And your site contents and layout’s and the time effort put in to this site is fantastic. Shame my brain’s not as good.
July 7th, 2007 at 6:59 am
Hello Martay
Thanks for your comment, I’m really glad to help.
July 16th, 2007 at 12:20 am
i haven’t used slices for years and things have definitely changed in CS3. can you help me figure out how to add a rollover effect to a slice?
thanks in advance.
July 16th, 2007 at 12:53 am
ah-i just found this…
Web Content palette/Rollovers/Image Maps
This feature is not available in Photoshop CS3. It is available in both Fireworks CS3 and Adobe Dreamweaver CS3. For more information, refer to the Fireworks CS3 Help chapter “Slices, Rollovers, and Hotspots.” In Dreamweaver CS3, refer to the Help documents “Create a rollover image” and “Insert client-side image maps.”
July 16th, 2007 at 2:54 am
Hi grace
Sorry for late reply, yes you’re right. In photoshop cs3 you can not export rollovers image directly to HTML. You can only prepare primary and secondary image in different layer and export it to use with dreamweaver to add javascript.
For more info about designing website with Photoshop and dreamweaver see this video tutorial here http://www.adobe.com/go/video0200
October 22nd, 2007 at 12:36 am
everything in this tuitorial but What i *DO* to *MAKE* the slices FROM the guides ?????? It should be a 1 click operation … but WTF is it?
February 18th, 2008 at 5:20 am
Hi
So you can create “New Layer Based Slice”, however, I want to create a layer, let’s call it a “slice layer” where I can slice up my page (based on the graphics on layers below it) and then (in the same file) insert another “slice layer” and have different slices on this “slice layer” for the content below it.
Why am I limited to one slice layer per PSD file? Or does this feature exist?
I can have multiple normal layers and even folders with more layers, but the PSD is limited to the one sliced layer which is very limiting.
February 18th, 2008 at 5:27 am
Adobe is shit…… new features come out sooo slowly. I have been using PS since 2.5 and the features are still lacking.
April 15th, 2008 at 4:22 pm
With the removal of ImageReady. I can no longer create slice sets. How can I create groups of slices that I can turn on and off like slice sets in Photoshop CS3? And yes I know I can do something similar in Fireworks. But when you save a file after slicing, heaven forbid you would want to keep those slices, it wants to turn the file into a PNG and I need it to stay as a PSD.
April 16th, 2008 at 1:19 am
Hi Eric
Did you try save for web & device command?
You can found this command by choose menu “File » Save for Web & Device”. This command allow you to select slice to output and also various html setting and image optimized option, which include PNG preset.
You can find more HTML setting after hit save button in save dialog.
Hope this could help, anyway please let me know if you have any other questions.
freetime
May 4th, 2008 at 1:34 pm
I used Photoshop CS3 to slice up some designs to be websites and when I saved for web and brought the html pages into Dreamweaver to add a few links they worked perfectly in Safari. But when I use any other browser to view my pages you can see all of the slices and the slices that have links are outlined in blue. Do you know why this is happening and what I can do about it?
Thanks!
May 4th, 2008 at 11:53 pm
Hi, Casey
I think you’re alright with Photoshop. The blue outline that show in browser is default setting in some browser to tell user that the image that have a link.
So you can insert border=”0″ in img tag to hide the outline.
for example
I think the tag will be automaticall insert to each image, if you insert the link to image within photoshop and then export using “save for web”. Anyway I not really sure for this part, it may have additional option to tell photoshop to hide the border. Because I also insert link manually in Dreamweaver.
May 9th, 2008 at 10:02 am
freetime,
Yes, I’ve used the “Save for Web & Devices” feature. But this is for managing a single set of slices for export to optimized formats.
Their is now way to selectively group slices and turn those groups on and off at will. This is the functionality provided by Image Ready and not by Photoshop CS3 which has caused enormous problems within our organization.
But how could this be a problem? Simple. Before we were able to design entire websites within a single PSD file. We grouped layers under the context of pages and then created corresponding slice sets for those pages.
Now we are forced to create and manage multiple PSDs when enough of the design from one page to another causes slicing conflicts. The result is a lot of extra time is consumed when we have to make changes to designs as those changes must be replicated across multiple PSDs.
May 9th, 2008 at 11:54 pm
Hi Eric
Yes, you’re right Photoshop allow only 1 slice per file and I used to work with duplicated file for different set of slice and of course different image in same bg. This allow me have hard copy for each artwork in separated file. And may be a layer of main bg in one main file.
I think if you looking for many set of slice in one in single file, Firework is only an option. Honestly I not quite familiar with Firework.
July 10th, 2008 at 1:50 pm
How do I deal with the slices once I have opened them in Dreamweaver?? Can I add text on top of them (I don’t believe so)? Or is it best to use a bg image and then create columns in HTML on top of that? I would greatly appreciate any assistance…
July 10th, 2008 at 11:18 pm
Hi Leah
If you export slice from Photoshop using “save for web” command as HTML and images. The images will be place in html table.
So if you want to add some text above table you can just add paragraph above the table in dreamweaver.
Or if you like to add text over the image with in the table you have to set the image as background when export from photoshop. So you can add some text in each cell in dreamweaver as well.
I think it’s impossible to add HTML text with in photoshop.
freetime
August 19th, 2008 at 8:17 pm
I am having the same problem as Casey in terms of Internet explorer and Firefox showing blue lines around unused links. Changing the border to 0 did not work.
Does anyone have any other suggestions?
August 20th, 2008 at 12:51 am
Hi adam
It’s alway work for me when insert border=”0″ in to img tag.
Anyway you can try insert style “border:none” in to img tag.
August 30th, 2008 at 7:20 pm
I do not believe this
September 16th, 2008 at 2:20 pm
I’m new to Photoshop slicing and have a fairly easy question. I’m creating a website with 8 static pages and only the content in the middle of the page will change for each. Most of the pages are sliced the same, although a few need to be sliced differently for the insertion of links and stuff. Here’s my question, when I slice these pages differently, how do I keep the slice numbers below from automatically changing so that every page uses the same image?
September 16th, 2008 at 2:38 pm
Illustration for Above Question
To simplify my above question, if I were to cut the current slice 11 in half, the current slice 12 would be renamed. How do I prevent this from happening?
September 17th, 2008 at 12:39 am
Hi Mac
If the content area of your page are text you can use the same bg with all pages, Just export it and make modification for that area in in html editor.
If the area is image. I recommended you to finish all detail in other area first. When you satisfy with the result. You just duplicate the final file and make the modification with the content area.
For the html you can use all bg image from the first file and just replace the content area with new content.
freetime