In this tutorial you will learn how to create a beautiful frame using only free vector elements. I hope you learn some interesting and useful tricks that you can apply to your next project.
Below is the final image that we will create in this lesson. You can see the full size version here.
Final image
Background preparation
Press Ctrl + N to create a new document. Set the width to 1150px and height to 860px. Set foreground color to # dac9a4 and press Alt + Backspace to fill the background layer with this color.
Then create a new layer (press Ctl + Shift + Alt + N) and name it “Background Pattern”. Use Paint bucket tool (
Fill) to fill it with your favorite pattern. If you don’t have one, just google “free photoshop patterns” and you’ll find lots of great patterns. Fill your picture with this color # c8b690 (make sure your Background Pattern layer is active and press Shift + Alt + Delete).
Here is how your background should look like:
Background frame
Now let’s start creating our frame. Use Rectangle tool 
(Rectangular area) to create a new rectangle with dimensions 950px by 630px. Name this layer “Background Frame”. Fill it with color # 4e432d. Duplicate the layer by pressing Ctrl + J, and fill it with a slightly lighter color, something close to #b4a879. Right click on the layer and select Rasterize Layer (Rasterize layer). Call it “Frame with noise.” As you probably understand from the name of the layer, we are going to add some noise to it.
Go to menu Filter-> Noise-> AddNoise (Filter -> Noise -> Add Noise). Set the noise effect to 8%, Gaussian distribution and make sure that the Monochrome checkbox is selected. Click Ok. Set the blending mode Hard light (Hard light) and lower Opacity(Opacity) up to 55%.
Background content
Next, we need to create a background layer for our future content.
Use Rounded rectangle tool
(Rectangular area with rounded corners) to create a rectangle with dimensions of 930px by 610px and a radius of 30px. Fill it with color #38301f and rename it to “Background Content”. Let’s add 1px strokes to this layer.
Double-click the Background Content layer to open the layer style dialog box. Use the following parameters:
Now let’s add some light areas to the background frame.
First, hold down the Ctrl key and click on the “Frame with Noise” layer icon to load the selection. Then create a new layer (Ctrl + Alt + Shift + N) just below our Background Content layer. Then go to menu Layer-> Layer Mask-> Reveal Selection (Layer -> Mask Layer -> Show Selected Area) to add a mask to our newly created layer. Name the layer “Background Brightening” and set its blending mode. Overlay (Overlap).
Set foreground color to # fffbca and, using a soft brush, make a few random light strokes (Fig. 2.3).
Your frame should now look like the image below.
Frame details
Let’s start adding details to the frame. We will start at the top, but first you need to prepare your vector elements (if you don’t have them, just use Google, there are many elements on the Internet that can be downloaded for free). Here are the elements I am going to use. Both elements are from Vecteezy.
Upper and lower bounds
Create the top side of the frame, duplicate and move our vector elements. For some people it may be easier to do this part of the lesson in Adobe Illustrator, so if you are familiar with this software you can also use it.
Take a look at my upper bound:
Set foreground color to # c6a730, Fill the top side of the element with this color (Shift + Alt + Delete) and name it “Top Side”. Then double-click on the layer to open the dialog box Layer style (Layer styles) and enter the following parameters:
Then hold down Ctrl and click on the “Upper Side” layer thumbnail to load the selection. Go to menu Select-> Modify-> Contract (Select -> Modify -> Compress) and enter 2px. Create a new layer (Ctrl + Alt + Shift + N) and fill the selection (Alt + Backspace) with color # fffaa9. Name this layer “Brightened Top”.
Here is how your top should look like by now:
Let’s group all the top side layers together.
Select the “Upper Border” and “Clarified Top Side” layers and press Ctrl + G. Name the “Upper Side” group. Then right-click on the group and select Duplicate group (Duplicate group). Name the new group “The Lower Side” and place it at the very bottom of our frame. Now go to menu Edit-> Transform-> Flip Vertical (Edit -> Transform -> Flip Vertically). That’s all, we are finished with the top and bottom of the frame. Now let’s get to the sides.
Left and right sides
Below is an element that I am going to work with in exactly the same way as we did in the previous step (duplicate and move it vertically to achieve the desired shape).
If you have a finished side, place it on the left and fill it with the same color as the top side (#c6a730). Name the layer “Left Side”. Then right-click on the “Top Side” layer and select Copy Layer Style (Copy layer style). Paste the copied styles for the “Left Side” layer by right-clicking and selecting Paste Layer Style (Paste layer style).
Let’s add some highlights on the left side just as we did on the top side.
Load the selection by holding down the Ctrl key, click on the layer, then go to the menu Select-> Modify-> Contract (Select -> Modify -> Compress) and enter 1px. Create a new layer (Ctrl + Shift + Alt + N) and fill it with color #fffbd9 . Decrease Opacity (Opacity) layer to 80% and change the blending mode to Overlay (Overlap). Name the layer “Clarified Left Side”.
Now let’s create the right side just as we created the bottom. Duplicate the left side (do not forget about the groups of layers), move it to the right side of the frame and reflect horizontally (go to the menu Edit -> Transform -> Flip Horizontal (Edit -> Transform -> Flip Horizontally)). Change the group name to “Right Side”. Great, now we have all four sides.
Inner boundary
Now let’s add a border around our content so that everything harmonizes and looks more pleasant.
Use Rounded rectangle tool (Rectangular area with rounded corners) in mode Paths (Contours) (Fig. 3.9) to create a contour with dimensions of 930px by 610px and a radius of 30px. Place it just above the Background Content layer.
Create a new layer (Ctrl + Alt + Shift + N) and name it “Border Content”. Next, select Brush tool 
(Brush) and go to menu Window-> Brushes (Window -> Brushes), in the brush settings window that opens, enter the following brush settings and enter the following parameters.
Set foreground color to # 7d6000 Make active Pen tool 
(Pen) right-click on the contour and select Stroke path (Circle around), from the drop-down menu, select Brush (Brush) and click OK. Click Delete (Delete) to delete the contour.
Let’s add some highlights just like we did before.
Create a new layer and name it “Frame Lighting.” Load a selection by holding down the Ctrl key and clicking on the thumbnail of the “Frame Content” layer. Go to menu Select-> Modify-> Contract (Select -> Modify -> Compress) and enter 1px. Fill the selection with color # fff5d5.
Now we need to add 1px borders at the top of the “Frame Content” layer.
Create a new layer and name it “1px Stroke”. Then load the selection by clicking on the Background Content icon of the vector mask (note the difference, to load the selection for a vector object in Photoshop, you need to click on the vector mask thumbnail, not the layer thumbnail) Set foreground color to # 38301f and go to Edit-> Stroke(Edit -> Stroke). Set the width to 1px, layout Inside (Inside), and then click OK.
With the selection still active, create a new layer and go to the menu Select-> Modify-> Expand (Select -> Modify -> Expand), enter 1px and click OK. Now, using the command Edit-> Stroke (Editing -> Stroke) once again only this time with a lighter color (#debd54). Press Ctrl + D to deselect.
In the next step, we will add some vegetation on the sides of the frame.
Plants
Here are the images I’m going to use:
Use Magic wand tool 
(Magic Wand) or Quick selection tool (Quick selection) to remove the white background. Then combine different plants, duplicating them and moving them. Use Eraser tool 
(Eraser) with hard edges or Lasso Tool 
(Lasso) to remove parts that you no longer need.
Try to make your vegetation look like the image below:
Select all the layers with plants and press Ctrl + G to group them together. Name the group “Plants on the left.” Right click on the group and select Duplicate group (Duplicate group), name the new group “Plants duplicate”. Make it invisible and move it to the bottom of the layers palette.
Now let’s make our plants a little brighter by increasing the contrast. First, right-click on the “Plants on the left” group and select Merge group (Merge group). Then go to Layer-> New Adjustment Layer-> Curves (Layer -> New Adjustment Layer -> Curves) and create a new adjustment layer. Make sure you check the box. Use Previous Layer to Create Clipping Mask (Use the previous layer to create a clipping mask).
Make a curve like the image below.
Take a look at our vegetation with a corrective layer. Curves (Curves).
Now that we are pleased with our layer Curves (Curves), you can combine it with the “Plants on the left” layer. Just select both layers and press Ctrl + E.
Let’s add shadow to our plants cast on the frame. Double-click the “Plants on the left” layer to open the dialog box Layer style (Layer styles) and enter the parameters as shown in
image below.
We are finished with the left side, so let’s now copy and move the plants to the right side. Right-click on the “Plants on the left” layer, select Duplicate layer (Duplicate layer) and name the new layer “Plants on the right.” Move this layer to the right and flip horizontally (Edit-> Transform-> Flip Horizontal (Edit -> Transform -> Flip Horizontally)).
Take a look at the result:
We are almost done; all that’s left to do is add some minor touches and a shadow to the frame.
Finishing touches
Let’s add some elements to the sides of the frame so that they don’t look the same. Here are the images I’m going to use:
Delete the white background the same way we did it before (using Magic wand tool (Magic Wand) or Quick selection tool 
(Quick selection)). Position these elements on each side and resize them with Free transform tool (Ctrl + T) (Free Transform) as needed.
Now let’s add some lighting at the top of our background. Create a new layer (Ctrl + Alt + Shift + N) and position it just above the “Background Pattern” layer. Set foreground color to #ffebc0 and using Gradient tool 
(Gradient) create a radial gradient as shown in the image below. Set the blending mode Overlay (Overlap) and lower Opacity (Opacity) up to 70%.
Let’s create a frame shadow.
Group (Ctrl + G) all the layers of the frame together (except for the background) and merge them by pressing Ctrl + E (remember to create a backup copy). Name this layer “Frame” and duplicate it by pressing Ctrl + J. Name the new layer “Frame Shadow” and place it directly below the layer “Frame”.
Set foreground color # 372a00 and fill them with the “Shadow Frame” layer (Shift + Alt + Delete). Set layer blending mode Multiply(Multiplication) and lower Opacity (Opacity) up to 30%. Apply filter Gaussian blur (Blur according to Gauss) by going to the menu Filter-> Blur-> Gaussian Blur (Filter -> Blur -> Gaussian Blur). Set the blur radius to 1.6px. Now go to menu Filter-> Blur-> Motion Blur (Filter -> Blur -> Blur in motion) and set the following parameters:
That’s all. Now you have a beautiful frame that you can use for your next website. Here is the final image. You can see the full size version here.
I hope you have learned some new techniques in this lesson, and if you have any questions, I would be happy to help you.
