Simple, Stylish and Glossy Image Frame

There are loads of different types of frames that you can show off your photos in. This is a type of frame that isn’t suited for print but for use in graphical design where you place images. It can be done both with and without a shiny effect, that makes it look like light is falling onto it.

Simple Stylish Image Frame


Step 1 – The Document

Create a new file. I made mine 500×200 to give me some space to work with, at 72 pixels per inch resolution. Fill the background to white.

Step 2 – Frame

Create a new layer and draw a rectangle, about the size I’ve done below with the Marquee tool (Keyboard shortcut M). Fill that with a light grey such as #dddddd.


Simple, Stylish and Glossy Image Frame - Image 1



Step 3 – Stroke and Shadow

Hit deselect (Ctrl + D on PC, Command + D on Mac). Then go into Blending Options and apply a Drop Shadow with an opacity of 25% and a 8px White, inside, Stroke.

Step 4 – Duplicate and Rotate

Duplicate the layer with the box on (Ctrl/Command + J) and then bring up the Free Transform tool (Ctrl/Command + T). With the free transform in place, rotate the image around -5 degrees (to the left), until it looks like my image below. You can also use a little rotate on the box on the layer below, using the same way but to the right.


Simple, Stylish and Glossy Image Frame - Image 2



Step 5 – Dropping Your Photo

Open a photo you want to use. I’m going to use one of a garden that I took myself. In your frame file, select the top layer by Ctrl/Command clicking on the layer icon of the top layer. Then drag it over to the file with your image in, you will get the very same selection over there. Then copy and go back to your frame file and press paste. You will now have a third layer on top of the other two.


Simple, Stylish and Glossy Image Frame - Image 3



Step 6 – Copying Styles

As you now see, the layer doesn’t have the layer styles we created before (the drop shadow and the white border), so to make it look right, right click on the frame layer or its copy, and copy the layer style. Then select the top layer with your photo and press paste. Also delete the layer copy, since we don’t need that one, now that the photo has taken its place. It should now look like below.


Simple, Stylish and Glossy Image Frame - Image 4



Step 7 – Making It Glossy

We could stop here, since we have the basic frame, but we also want it to have a glossy look to it. So open up the blending options for the photo layer and under Gradient Overlay, add a foreground to transparent (making sure foreground is white) gradient, make sure the white is on top of the photo and lower the opacity to about 50%. That will leave us with a glossy looking photo in a frame, hopefully looking as the below one.


Simple, Stylish and Glossy Image Frame - Final Image



I hope you have enjoyed the tutorial and learned something from it. This can of course be used with many different images inside and it suits great on websites on any background.


Tags: ,


Erik is the owner of online media company Bernskiold Media that runs tutorial website Bernskiold learning and he is a Web Designer, Photographer and Software-Trainer.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>