Create floral web layout (psd template) using Photoshop

Hello and welcome to another tutorial here at ArtBox7.com
Today I will try to create another blog layout (Photoshop template) but this time it will be with floral motifs using as usual our Supreme Vector Set.

Full Preview:

Let’s start it

Step 1

Open Photoshop and create a create a new document with the following dimensions: 1024 pixels by 1450 pixels . As a background color choose: #6b6047

Creating Top Header

Step 2

Select Type Tool (T) and write your desired text. I have typed ArtBox7.com using “Bahus 93″ font with 36px in size. As a color I have used: #e0de2e

Step 3

I will duplicate ArtBox7.com and I will set the font size to 38px

Step 4

Next I will make sure that I have selected the layer created on step 3 and then I’ll go to Filter>Blur>Motion Blur

A new window will pop-up. Here for distance choose : 27 pixels.

Here’s my result:

Step 5

The motion blur is too preeminent, that’s why I will set the opacity to 27%

My result:

Creating the logo

Step 6

The logo has been created using Supreme Vector Set, more exactly using Colorful Retro Flower Vector Pack. I will select an vector from this pack and I will place it in Photoshop, then I’ll make sure to rasterize this vector.

Step 7

I will select Eraser tool and I will erase some parts. Please see the screenshot:

Step 8

After I am satisfied with the result I will duplicate it, than using transform tool (Ctrl+T) I will rotate the vector and I will place near one another.

Step 9

I will repeat the step 8

Step 10

The logo is almost done. Next I will change the color to # 645a43

Step 11

Next I will duplicate the logo, I will make it smaller (using free transform Ctrl+T) and I will change the color to : #afab3e

Step 12

I will repeat step 11. The only thing that needs to be changed is the color. This time I will use this color # 7f745a

The logo is now finished. Here’s my result:

Step 13

I will select Ellipse Tool and I will create a circle on the top right side. As a color I have chosen # bd7f17

Note: To create a perfect circle hold down Shift while dragging the mouse.

Step 14

Next I will create another circle, this needs to be underneath the circle created on the step 13. As a color I have chosen a darker one to create a 3d look for the circle.

Step 15

Using the Type Tool (U) I will add 2 links. Here’s my result:

Step 16

As you can see the header area looks empty, that’s why I will use again Supreme Vector Set. This time I have choose some hand drawn ornaments. All I have to do is to import those hand drawn vector ornaments from Illustrator to Photoshop. Using Copy – Paste or simply by dragging vectors from Illustrator and drop them in Photoshop.
Note: I’m using Illustrator and Photoshop CS4, but I think it will work with older versions also (CS2)

Here’s my result (after I have added the vectors)

I’m proud to say that Supreme Vector Set makes this web layout (Photoshop template) looks quite good

Creating the navigation

Step 17

Select Rectangle Tool and create a similar shape using this color: #be2bc3

Step 18

Do you remember that vector from Supreme Vector Set (Colorful Retro Flower Vector Pack) used to create the logo ? Well I will goanna use it again to create a nice ornament for the navigation

First I will place the vector in Photoshop, using this color: # be2bc3

Step 19

Step 20

I will repeat step 19, with a single exception. As a color I will choose # e0de2e

Step 21

Next I will use pen tool to fill up the gap between flower vector and navigation bar. Select Pen Tool and create a similar path:

Step 22

Right click on the shape created and choose: Make Selection

Step 23

Choose this color # bd7f17 and fill the selection

Step 24

Next using Type Tool (T) I will add some text and using again Supreme Vector Set I will add some hand drawn vector ornaments on the navigation bar.
The font used for the text is “Bradley Hand ITC”
Here’s my result:

Ok. The navigation is finished now. This photoshop template (web layout) will be used as a blog, that’s why it will be split in 2 sections:
On the left side – Sidebar, on the left Content Area

Creating the sidebar

Step 25

Select Rectangle tool and create a similar shape. I have used this color: #70664c

Step 26

Then apply the following layer styles :

Here I don’t like that this shape is a little bit higher and a little partition of the sidebar can be seen above the flower

Step 27

To eliminate it I will select Eraser Tool (E) and gently I start cutting the shape.

My result:

The sidebar is almost finished. Next I will add some content using the type tool, some images and some vectors from Supreme Vector Set for decoration.

Here’s my result for sidebar:

Step 28

Creating the content area & footer

Well the content area and the footer is really easy because I will use only the Type Tool (T) to add the text, some images and of course some vectors from Supreme Vector Set. This one has helped me a lot on both – tutorials or personal projects . Is a must have package!!!

Congrats! If you read this lines it means that you have finished another tutorial here at ArtBox7.com.
Stay tuned because another nice tutorials will come shortly. Don’t forget to subscribe to our RSS Feed and to follow us on twitter for unique offers and freebies made available only to our subscribers.
Have a nice day!

Photoshop brushs | Blen | pattern | stock | photoshop