Here we will talk about designing stylish Image Holder for images in website.

Step 1:

First, create a new blank document in your photoshop canvas and choose shape tool and select Rounded Rectangle Tool.

Selecting Rounded Rectangle Tool

Selecting Rounded Rectangle Tool

Check the options toolbar right below the menu bar where we can change the radius to increase or decrease the roundness of the rectangle.

Also set the foreground color in photoshop before you draw the rectangle so that you get the rectangle in the desired color.

Step 2:

Now, Draw the rectangle on the canvas as per the measurement that you want.

Press Ctrl + J to duplicate the layer or right click on the layer and select duplicate.

Double click on the layer and change the color of it. Select darker version of the active color.

Now press Ctrl + T to transform the shape on the top layer.

Press shift + Alt key and resize the box, it will resize both the edges of the rectangle either vertically or horizontally.

rounded rectangle

Step 3:

Now, After finishing resizing the top layer both horizontally and vertically we will create a shadow below the frame.

To create a shadow, create a rectangle of height 20 pixels and width same as the width of the image frame as a last layer, i.e. the layer for the shadow will be placed below the existing two layers.

shadow for image frame

Step 4:

Now select the shadow layer. Go to Filter, Blur and select Gaussian Blur.

It will display a message to rasterize, press OK, Type 40 pixel in the radius box. You can increase or decrease the size of the blur as per the requirement.

Now after the blur is applied, Press Ctrl + T to transform the shadow layer. Now resize the shadow and move it towards up to fit the shadow as shown in the image below.

image frame for website

Your stylish image frame is ready and it can be used in the website. You can also apply the gradient on the frame to make it even more stylish.