Cut out images selection

Design techniques, Tips and tricks, Transparency, Tutorials

25/01/2009

Image formats that retain transparency can be used in web-to-print templates. Here’s how you can use some cut-out photos as image selection in your web-to-web designs.

Cut out images selection web-to-web template

Before you start

Web-to-print before you start

Add a page frame (Layout/Page Setup/Add Page Frame). This will create a rectangular shape with the exact same size as the paper size of your template and place it as a bottom layer.
Input the dummy text frames and turn them into variable web-to-print fields.

In a nutshell, we will cut out the background of a few photos using Photoshop, save them as PNG or TIFF files and use them as image options in a web-to-web template.

Note: PNG files can only be in RGB color mode.

Cutting out the background in Photoshop

Photoshop polygonal lasso tool /

Open the image inside Adobe Photoshop and activate the Polygonal Lasso Tool (L) from the tool box on the left.

Web-to-print create selection mask /

Zoom in on the image (hold Ctrl and press +) and start clicking along the edge of the object with the Polygonal Lasso tool.

Note. Move the view area by holding down the Space bar on the keyboard.

Once you’ve worked your way arround the entire image, click on the first node to close the selection.

Web-to-print Photoshop inverted selection /

You now have a selection mask of the object you need to cut out. Since we’re removing the background, we need to select everything but what we just outlined. Invert the selection (Ctrl+Shift+i).

Double click on the layer and click OK in the pop-up window that appears to unlock the layer.

Photoshop transparent background grid /

Press Delete on the keyboard. You should see a checkered grid where the background used to be.

That’s it! Save the image as a .PNG file.

Too much hassle?

There’s also a much faster way to make a selection mask of the objects but it is not as precise and it only works on uniform backgrounds.

Photoshop Magic wand tool Activate the Magic Wand Tool (W) and click on the background. Everything that is in the same color as the spot you clicked on, and is not separated with another color, will be selected.

CMYK and vector images

The example above was based on a simple PNG file, which is only good for on-screen use since it’s RGB only. Consider using TIFF files for web-to-print applications because they can have transparency and CMYK. EPS files is the best option for vector graphics or a combination of vectors and bitmaps.