Tag Info

Slicing is the technique in Photoshop and Illustrator that allows you to divide the image in small parts to use it later on a website, interface etc. This is the only purpose of the slice tool: you can design an interface in Photoshop and chop it in small parts, dividing it in buttons, images, menus and background, and then export it as separated images. ...

What is the standard for receiving a design? In 1995, it was to receive a PSD file with 100 layers (the max at the time). You'd then spend your days slicing-and-dicing and building insanely complex tables consisting of 30 chunks of images to make the site layout work. Then they'd change the copy and the table would break and you'd bang your head on the ...

You're the one who's using it and commissioning it. Ask for whatever is most convenient for you. I usually create different files for different screens/pages anyway just because it's easier to keep track of revisions this way. Note: Even though you asked about Photoshop only, my preferred workflow for this sort of thing is—after designing the inital ...

I don't usually use illustrator to slice the images. Photoshop is better at that, but I use Illustrator to do all my web design work. The best way to export to the web is to separate out the elements and put artboards around them (shift+O). You can then export those artboards to the web using save for web (command+option+shift+s). With save for web you can ...

I drag guides, change the Crop tool to the Slice tool, and click on "Make Slides From Guides." If necessary, you then change the Slice tool to the Select Slice tool, and that allows you to select several slices and combine them. Your layers are not affected. So you Save For Web with the first state, turn your layer on or off, and then Save For Web with the ...

Expanding on Thiago Silveira's answer: I tend to use Slicing a lot when designing HTML emails. The generated HTML is so primitive (i.e. uses tables for layout) that the HTML emails are compatible even with Outlook 2007 & 2010 (which uses a poor standard HTML rendering engine). Slicing is used with Save For Web & Devices. When you hit save from this ...

In Photoshop, pull out guides where you want to slice the image. When you have all the guides in place, choose the slice tool from the tool palette. Once the slice tool is chosen, you will see a button on the toolbar that says "slices from guides". Push that button and Photoshop will put labels on the slices. Then just go through Save For Web dialogue.

I'm not sure why your Fireworks file is not exporting the bitmap layer. Check the layer is visible (i.e. not hidden in the Layers palette) and you either had given it a corresponding slice or ensure that you have the "Include Areas without Slices" checkbox ticked in the Export dialogue box. To save a slice in PNG format, first select the slice object within ...

Smart objects could help you a lot. http://www.elated.com/articles/photoshop-smart-objects/ So, from your example images: You would put blue and red in the same Smart object and then go to edit that smart object and slice it there as well as save in there. Select layers related to the object that you need to save without a background fill ( While ...

If I had to slice up images.... 3 slices, 2 end caps and a middle for backgrounds, then png overlays for the icons/symbols. But ideally I'd just use one image as a sprite and position it for end caps and middle backgrounds, then if needed png images for the icons. If you know the entire size of the image you just need the solid image with states. Check out ...

Select what you want Ctrl + G (Group Selection) Ctrl + C (Copy) Ctrl + N (New file) Ctrl + V (Paste) File > Save for Web & Devices then on the right switch .JPG to .PNG, then you also want to uncheck at the very bottom under the .PNG options where it says "Clip to Artboard"

The simplest way to create image maps from layers is to click on each layer and then select Layer ⇒ New Layer Based Slice from the menus at the top of the screen. Once you have created a slice, you can use the Slice Select Tool to select and modify the slice (adding things like URL, target window, etc.)

As Joonas mentions, it's more or a warning. Save for web and devices is a great tool for picking a good quality vs size ratio balance - images need to be lighter to load faster, but quality should remain good. It lets you compare different export options, and see the results live next to each other. When you are trying to save such a big image for web, ...

This could be done with CSS3 rounded corners, gradients, and shadows which you would have to read up on. The icon images could be a second background on top of the gradient, but this may be a bit complex and time-consuming to do. I agree to use a png sprite, as it is crossbrowser and you're likely already familiar with photoshop and not so familiar with ...

Yes there is much easier way... Alt+click the layer's eye that you want active(which you want to slice) by this all the other layer will be hidden for once . Repeating the same Alt+click will show the whole layers again. hope this will help..

When you created your layout in PS, did you select transparent from the drop down labelled 'Background Contents'? If yes then when you save your slice as a png, toggle the eye on the background layer. Now you're saving the slice with a transparent background. My box/frame now will be saved with a transparent background. Is this what you mean?

A quick Google of "illustrator CS3 slice" turns up this from the Adobe forum: Place guides where you want to slice the artwork, and choose Object > Slice > Create From Guides. At which point you Save For Web.

Alternative approach use the marquee tool select what you want to crop copy merged (ctrl + shift + C) open a new file with ctrl + N it will automatically set it's dimensions to whatever you have in your clipboard press enter paste (ctrl + V) save for web and devices (ctrl + alt + shift + S) I generally find this approach beter, as I tend to slice just ...

just a suggestion, you could "copy merged" then open a new file (this will already have your image size so just hit enter), paste, then "save for web and devices". This way you don't have to have two photoshop files to maintain you can just save the entire image as the optimized version you need. to specifically answer your question, there isn't a way to ...

Easy. Make a slice that would contain all of your composition(or the part that you require), then place this slice on top of your other slices, either via context menu option "Bring to Front", or by clicking on gliph placed on Options pannel. Slices placed below don't affect those placed a top, thus doesn't devide it.