Computer Graphics with Photoshop - how to make a photo look like an ipod ad?

Author

how to make a photo look like an ipod ad?

peter

2004-12-21, 12:14 pm

There is a web site that takes a customer's photo, then cut out the people's
image, blacken them, add a solid color background, and draw an ipod in the
image. The results looks like the ad in here:
http://www.apple.com/ipod/

I tried to do that to a photo myself, using only photoshop, and it took more
than an hour. Since the commercial site charges $20, I assume it takes them
less than 30 minutes to do it in order to be profitable, possibly in 15
minutes. I feel quit ashame.

The question is how to do that in a streamlined, efficient way? What
software would they use to draw or add the ipod and the wires to the image?

John McWilliams

2004-12-21, 12:14 pm

peter wrote:

> There is a web site that takes a customer's photo, then cut out the people's
> image, blacken them, add a solid color background, and draw an ipod in the
> image. The results looks like the ad in here:
> http://www.apple.com/ipod/
>
> I tried to do that to a photo myself, using only photoshop, and it took more
> than an hour. Since the commercial site charges $20, I assume it takes them
> less than 30 minutes to do it in order to be profitable, possibly in 15
> minutes. I feel quit ashame.
>
> The question is how to do that in a streamlined, efficient way? What
> software would they use to draw or add the ipod and the wires to the image?
>
>
Creating the ipod and wires might take a bit of time, but then the same
gif layer will be used on every image, as they'd all be sized the same.

The only work would be to remove the bg. Dead easy on many shots; very
labor intensive on others. Mileage varies also with skill levels. They'd
also resize the image, so that the nearly automatic adding of the 'Pod
wires would be just a matter of moving the layer to line up with where
the ears should be.

--
John McWilliams

Tom Nelson

2004-12-21, 7:14 pm

The December Photoshop User magazine <http://www.photoshopuser.com/>
featured this exact technique. It's worth joining NAPP just for the
magazine.

The technique is easier in a studio setting. They recommend
blue-screening to make background removal easier ("a cloudless sky
should work just fine"). Don't try for a silhouette, just shoot
normally. Use Filter>Extract to remove the background. Once you've got
the figure cut out, you can fill it with black to make a silhouette. If
you saved a layer with the original image, cut out the iPod to include
in the photo. Quite simple, really.

Tom Nelson
Tom Nelson Photography

In article <8PTxd.3362$tG3.402@trnddc02>, peter <nospam@nospam.com>
wrote:

> There is a web site that takes a customer's photo, then cut out the people's
> image, blacken them, add a solid color background, and draw an ipod in the
> image. The results looks like the ad in here:
> http://www.apple.com/ipod/
>
> I tried to do that to a photo myself, using only photoshop, and it took more
> than an hour. Since the commercial site charges $20, I assume it takes them
> less than 30 minutes to do it in order to be profitable, possibly in 15
> minutes. I feel quit ashame.
>
> The question is how to do that in a streamlined, efficient way? What
> software would they use to draw or add the ipod and the wires to the image?
>
>

Gadgets

2004-12-21, 7:14 pm

Have you seen the funnier version of iPod ad?
http://www.liebography.com/ipod.htm

Cheers, Jason
Photo folio:
http://gadgetaus.com/photos

jjs

2004-12-21, 7:14 pm

"Gadgets" <info@gadgetaus.dot.com> wrote in message
news:32rhfuF3pgoprU1@individual.net...
> Have you seen the funnier version of iPod ad?
> http://www.liebography.com/ipod.htm

Or the version with the person throwing it away?
http://elearning.winona.edu/jjs/ipod2.gif

Wizard of Draws

2004-12-21, 11:14 pm

On 12/21/04 6:30 AM, in article 8PTxd.3362$tG3.402@trnddc02, "peter"
<nospam@nospam.com> wrote:

> There is a web site that takes a customer's photo, then cut out the people's
> image, blacken them, add a solid color background, and draw an ipod in the
> image. The results looks like the ad in here:
> http://www.apple.com/ipod/
>
> I tried to do that to a photo myself, using only photoshop, and it took more
> than an hour. Since the commercial site charges $20, I assume it takes them
> less than 30 minutes to do it in order to be profitable, possibly in 15
> minutes. I feel quit ashame.
>
> The question is how to do that in a streamlined, efficient way? What
> software would they use to draw or add the ipod and the wires to the image?
>
>

The tools you use and the approach you take to separate an image from the
background will vary and depend a lot on the contrast of the photo. You can
use the magic wand, the paint brush, the magnetic lasso, channels, the list
is pretty long.

Personally one of the easiest ways I find, is to make the initial selection
using the magic wand, selecting whichever is easier, background or person,
then switch to Quick Mask mode and use the paint brush to fine tune the
selection. Since it will be all black, you will have a little room for
error. Not every single strand of hair needs to be included.

Then switch back to normal mode and your selection will be active. If it's
the background, delete it. If it's the person, invert your selection to make
the background the active selection, then delete.

Lock the transparency of the layer with the person and fill with black.

Add iPod, wires and buds. I'd use Illustrator to make the iPod and wires.
YMMV.

Add a layer on the bottom of the layer stack and fill with your choice of
color. Done.
--
Jeff 'The Wizard of Draws' Bucchino
Cartoons with a Touch of Magic
http://www.wizardofdraws.com
http://www.cartoonclipart.com

The Wizard's 2004 Christmas newsletter
http://www.wizardofdraws.com/main/xmas04.html

Orchid

2004-12-25, 4:14 am

peter <nospam@nospam.com> wrote:

> There is a web site that takes a customer's photo, then cut out the people's
> image, blacken them, add a solid color background, and draw an ipod in the
> image. The results looks like the ad in here:
> http://www.apple.com/ipod/
>
> I tried to do that to a photo myself, using only photoshop, and it took more
> than an hour. Since the commercial site charges $20, I assume it takes them
> less than 30 minutes to do it in order to be profitable, possibly in 15
> minutes. I feel quit ashame.

I don't think that they do it only using Photoshop as one could do it
much more quickly with a combination of Photoshop and Illustrator.

Place a picture in Illustrator, trace around the outside of the image
with the pen tool, fill the outline with black. This is easy and fast if
you're adept at Illustrator.

If they do this a lot, the iPod itself is probably a vector object they
use over and over and rotate, skew or manipulate as needed (no need to
draw it each time). The wires and headphones are easy to do quickly with
the pen tool.

Save the silhouette and iPod vector art in separate files. Exit
Illustrator.

Convert the original image to grayscale in Photoshop and colorize
it/tint it as desired based on how one wants the parts that show through
to look in the final artwork (like the jewelry in one of the pictures on
Apple's iPod page).

Paste the rasterized Illustrator-created silhouette into a layer mask,
selectively edit the mask where you want parts of the image to show
through (such as the jewelry). Alternately, one could just drag the
silhouette art into another layer and erase parts of the artwork on that
layer. This would be the trickiest part and the most time consuming but
probably not if the images were high resolution and tolerant of a
certain amount of sloppiness in the erasing and later reduced in size.

Open the vector iPod image in Photoshop and drag and drop it onto a new
layer at the top.

Load the silhouette as a channel into the layer with the original image
and invert the selection to delete the background of the original image
layer. Delete the background.

Create a new layer behind the original image and fill it with the color
you want as a solid color background.

> The question is how to do that in a streamlined, efficient way? What
> software would they use to draw or add the ipod and the wires to the image?

This may not sound very streamlined but I'm guessing a person who was
proficient in Illustrator and Photoshop could do this in a half hour
(possibly less), particularly if they didn't need to be perfectionists
about the contours of the silhouette.

I'm curious about the place that offers the service. Can you post a link
so I can see what their samples look like?

Orchid

peter

2004-12-25, 7:14 pm

"Orchid" <orchid@somewhere.net> wrote in message
news:1gpciyv.d5mswsfgbggdN%orchid@somewhere.net...
>
> I'm curious about the place that offers the service. Can you post a link
> so I can see what their samples look like?

http://www.ipodmyphoto.com/samples.adp

From looking at their samples, I don't think the silhouettes are created by
filling black in a selection because some of the brighter part of the
original image can be seen, tinted with the background color. In fact, if
you put the sample image in photoshop and brighten it, you'd see more of the
original image.

After some experiments, I found one way to do this is to cut out the people
(in photoshop), make it into gray scale, darken it, and use "overlay hard
light" as the blend method. This way when a color layer is placed under it,
the color will come thru in the brighter part of the silhouettes.

Now here's an interesting question: assuming "hard light" is the method used
to mix the silhouettes with the background, how do you remove the background
color from their samples to see if the silhouettes is really a gray scale
image?

Orchid

2004-12-28, 4:14 am

peter <nospam@nospam.com> wrote:

> "Orchid" <orchid@somewhere.net> wrote in message
> news:1gpciyv.d5mswsfgbggdN%orchid@somewhere.net...
>
> http://www.ipodmyphoto.com/samples.adp
>
> From looking at their samples, I don't think the silhouettes are created by
> filling black in a selection because some of the brighter part of the
> original image can be seen, tinted with the background color. In fact, if
> you put the sample image in photoshop and brighten it, you'd see more of the
> original image.

I'd agree with you after looking at the sample. My guess would then be
that a selection was made around the main image using the pen tool and
the color within the selection.

I do wonder how the technique you mention would work with an image like
the sample of a fellow holding a fish. It would seem that, in that case
at least, manual editing of the face and hands would have to be done
because the skin tone is so light relative to the shirt (the face and
hands are practically black whereas the purple shirt is fairly visible).

My guess was based on the Apple site image that happened to pop up
(which looked more solid black than the image on the site above). Since
I live in Japan, I've never seen the ads associated with iPods so my
only exposure is to pictures on the web.

> After some experiments, I found one way to do this is to cut out the people
> (in photoshop), make it into gray scale, darken it, and use "overlay hard
> light" as the blend method. This way when a color layer is placed under it,
> the color will come thru in the brighter part of the silhouettes.
>
> Now here's an interesting question: assuming "hard light" is the method used
> to mix the silhouettes with the background, how do you remove the background
> color from their samples to see if the silhouettes is really a gray scale
> image?

I'm not sure that I understand this question...or more accurately, I'm
not sure that I can see how removing the background color from the
samples will show that it's really a grayscale image.

Orchid

John McWilliams

2004-12-28, 12:14 pm

peter

2004-12-29, 7:14 pm