Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Digital Literacy

Zolbayar Orshil
Zolbayar Orshil
9,838 Points

Photoshop, how to slice a selected object and save it for web ? not square object so confused

I am trying to get some objects from image (object without background ) and use it for a web but slice tool that i know only slice square.

1 Answer

To get the pixels from the object (in the foreground) without grabbing the image the background pixels

I mostly use the Magic Wand tool, but there are other ways to make irregular selections:

http://designshack.net/articles/software/8-ways-to-get-the-selection-you-want-in-photoshop/


The important point is that once you have the pixels for the irregularly shaped object selected

then you want to copy to the clipboard and either past into another layer,

(or what I usually prefer to do is use the File menu -> New command to create a new file).


What most Photoshop newbies don't know is that the File -> New command always watches

the clipboard and will create a new picture exactly sized to the axis aligned bounding box

set by the object in the clipboard.

Then all you have to remember to do is select "transparent" as the background.


For saving to web (while preserving the background transparency) you can use gif

if the pixels have less than 256 colors, but most of the time it's better

to save as 24 (or higher) .png file.


Once you isolate the pixels of the object you need, in a new file with a transparent background,

there's usually no need to use the slice tool unless you want to cut up the graphic

across multiple table cells or divs.


Even then you can avoid having make multiple downloads from the server

by slicing up images using a sprite sheet exporter or script to automate the process:

http://www.webdevdoor.com/animation/photoshop-sprite-sheet/

http://arnaumarch.com/en/sprites.html

http://www.smashingmagazine.com/2009/04/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Then CSS can be used to place whatever you need wherever you need

(even re-assembling the pieces piecemeal-fashion):

http://www.tutorialrepublic.com/css-tutorial/css-sprites.php