Hot answers tagged

16

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


15

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"


11

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.


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


8

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


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.


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


6

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


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


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

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


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


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

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


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

There is a semi-automatic way to slice images, that is using the Slice Tool. You can use it to subdivide your file into blocks of icons: When you use File → Save For Web & Devices... Photoshop will export each slice as a separate image for you: This is a non-destructive method, so you can still make changes to the icons if needed and still use the ...


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


3

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.


3

Yes, if your asset is 55 pixels for the 1× size, then you'll be after 110 for 2× and 165 for 3×. The iPhone 6 Plus should be treated as a full 3× UI scale device. You should use a 1242 × 2208px canvas when designing a full screen mockup. This is because the iPhone 6 Plus renders internally to a larger virtual canvas, then bitmap scales the entire screen ...


3

So if I got this right. You could either manually make 3 artboards side by side, or: With Rectangle tool M, draw a rectangle on top of your current artboard and make sure it is exactly the size of the artboard. From the top menu: Object > Path > Split into grid... Row: 1 Columns: 3 I'm assuming you want to split it vertically Gutter: 0 Again from ...


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

I needed to do the same thing for a deck of cards. Here is the solution I found: Select the "Slice Tool" Right click the image -> "Divide Slices..."


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

ctrl+h is the most handy thing


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

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



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