Saturday, March 31, 2012

How To Fake a Simple Framed Artwork Display Image in Photoshop Tutorial

framed poster of dog and umbrella

It's nice to show what your framed artwork would look like, particularly if you want to sell it on Etsy or some other venue.

photoshop screen shot

You can use any photo of a wall, I found this one on Morgue File, it's a nice source for free images. You open the background photo in Photoshop. I keep the icon on my dashboard and simply drag the photo onto the icon.

photoshop screen shot with poster on background

Now you want to put or art on top of the background photo.
file->place->image
drag it into position and click the check mark to place it on the page

photoshop screen shot

This is what the layers palette will look like on CS4. Note the second image is on it's own layer. The file names will be different. It's good to give files better names than the one in the example.

photoshop screen shot with poster on background

Now we give it a fake frame. Go to layer->layer style->stroke.

photoshop screen shot with poster on background

Make sure preview is checked. Choose the size color and position. The stroke can be centered, inside or outside. I like inside since you would lose some of the image in a framed piece.

photoshop screen shot

You can now see the stroke indicated in the layers palette.

photoshop screen shot

A real framed picture would have a shadow so go to
layer->layer style->drop shadow

photoshop screen shot with poster on background

check the preview box
choose the opacity and distance that looks good with your image. Don't forget to adjust the angle. I like my light source to be on the upper left which gives me a shadow on the lower right.
click OK

photoshop screen shot

You now see the drop shadow indicated on the layers palette.

photoshop screen shot

layer->merge down

photoshop screen shot

Note how the layers palette has changed.

photoshop screen shot

To crop the image click the square with a diagonal line through it and indicate the width and height. You can can choose pixels or inches, since this is going on the web I picked pixels.

photoshop screen shot

Drag your cursor across the screen. When you are happy with the size and position, click OK. The circle with a line through it allows you to redo the crop.

photoshop screen shot

Ta Da, it's cropped. Now you need to save it.

photoshop screen shot

To save it for the web go to
file->save for web and devices

photoshop screen shot

Check your settings and then click save

photoshop screen shot

Name your file and choose where you want it saved. Click save.

framed poster of dog under umbrella 
Available on Etsy

No comments:

Post a Comment