Tag Info

Hot answers tagged

11

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. ...


9

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"


9

I would cheat. Clear slices, save for web, undo until you have your slices back, and then save that state of the file. What I usually do is duplicate the final file and make a "slice" version, and save slices out of that. My original PSD is never sliced to begin with.


8

No need for a script (yet), I found a simple way. Hope it helps someone else too. If you want all the cutouts / slices to be of same size and cover whole image, resize or crop base image accordingly. Create one big slice, containing the whole image. Right click on the slice icon in the top left corner. Choose Divide Slice and define into how many slices do ...


7

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 ...


7

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 ...


7

You can't delete the slice that remains once you've deleted all other slices. You need to reopen the file to hide it. That's just the default behavior. Either ignore it or reopen the file.


7

You could use ImageMagick? convert -crop 100x100 original.jpg tiles_%d.jpg were 100 is the tile size.


5

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 ...


5

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 ...


4

You can select every layer and with Layer>New Layer Based Slice make slices for every icon. Then you have every icon extracted with its individual sizes. Now you can resize every icon with an action to get the canvas size right.


4

To give you a candid answer, the answer is "terrible HTML". As Scott said, Photoshop will produce a table based layout. The same goes for GIMP. Here is a sample output for GIMP: <table cellpadding="0" border="0" cellspacing="0"> <tr> <td><img alt="" src="slice_0_0.png"/></td> <td><img alt="" ...


4

I am sure one of these will work for anyone who has above issue: Go to View → Clear Slices (last option) Make sure that the Slice Tool is not selected while saving for web Open up the Save for Web menu Click the Optimize Menu (icon parallel to "Preset:" drop down in the top right (small drop menu icon)), select Edit Output Settings... Make sure you have ...


3

Don't use Save For Web", instead use File → Save As... and then choose JPG, PNG, etc from the Format menu.


3

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 ...


3

You have your zoom at 100% (when you are working with your image at 33%, as you can see in the top bar). What you are seeing is the top left corner of the first slice. Reduce the zoom and you will see all of them :)


3

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 ...


3

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.


3

You could do this faster with scripting. I just created this js-script for Illustrator CS4. I hope, CS6 can execute it too. Copy code below into a new file with extension ".jsx", save it. Now in AI, select what shall be exported (only one element at once; group multiple if needed) Execute the script (via drag-and-drop or File/scripts/Other Script...) Done ...


3

Adding to John's answer: The slice tool (both in Photoshop or Gimp) lets you define rectangular areas to export as individual images, with some limitations: only one set of slices can exist per document, and slices cannot overlap. The final result will be a table filled with images. Apart from the reasons mentioned before, tables are the worst idea for ...


2

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.)


2

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..


2

Transparency border was the cause, I resolved it by following the advices at: http://superuser.com/questions/173198/photoshop-is-adding-a-border


2

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 ...


2

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.


2

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 ...


2

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 ...


2

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, ...


2

Maybe save them out as non-save for web images first then batch them into save for web afterwards...


2

EDIT: You can save slices in history state snapshots. If you use the history panel you can toggle between these states to access your different slices. As shown I moved the rectangle although it isn't necessary to change anything other than the slices.



Only top voted, non community-wiki answers of a minimum length are eligible