Hello and welcome to another tutorial here on ArtBox7.com. Today I will create a stylish web layout and I think this one can fit pretty well for a furniture website
To create a similar web layout you will need
1. Photoshop
2. Some vector icons from Complete Designer Set
Let start the tutorial!
Open Photoshop and create a new document (Ctrl + N) with the following dimensions: 1020 by 1020 px.
Once you have created this, select rectangle tool and create 3 shapes.

For the first one I have used this color (#5d3919), for the second one I have used (#ececec) and for the third one (#5d3919)

Step 1 – Creating the logo and navigation

First with type tool I will add the logo (here is nothing fancy, just use type tool and write your desired text for logo)

Next I will select rectangle tool and I will make this shape. RGB color used: #ececec

Then I will apply the following layer styles:

My result

With type tool I will add the links for navigation
My result

Step 2 – Creating the header

First I will select Rectangle tool and I will create this shape. Mine has this dimensions: 868 by 305px

Next I will apply the following layer styles:

My result:

Then I will need to add an image. I have found here some really nice images.
So I will place an image above our shape and in the layer palette I will right click on the image and I will choose “Create Clipping Mask”

Here is my result:

Well the header is finished now

Step 3 – Creating the content area

This area is really easy to create. With type tool add some text and from our Complete Designer Set, you will find some really nice icons related to interior design

Next for the footer you will need to copy the logo (make it a little bit smaller) and place it at the buttom.
Here is my final result for this web layout:

Hello and welcome to another tutorial on our blog! On this tutorial you will see how you can create an nice web layout, where you can showcase your products.
For this tutorial you will need:
1. Photoshop
2. Complete Designer Set
Open Photoshop and create a new document with this sizes: 1020 by 1020px.

Step 1 – Creating the logo

First I will select Rectangle Tool and I will create this shape:

Mine has the following dimensions: 80X1020px and as a color I have chosen #2a363b
Next I will select Ellipse tool and I will create a similar shape (as a background I will choose white)

Then I will go to: Filter>Blur>Gaussian Blur

Here I will choose a radius of 34.5px

Then with type tool I will add some text. For Art I have used Bookman Old Style, 36 px in size and a pinkish color (#e84a5f), and for Box7 I have used Tahoma font (30px). Here is my result:

Next I will select again Rectangle Tool and I will add some text on the right side,  on the same line with the logo.
Here is my final result for this step

Step 2 – Creating the Header

With rectangle tool I will create a similar shape. Mine has this dimensions: 1020X309, as a color I have used: #e84a5f. With Type tool I will add some dummy text. Exactly below the text I will use an button (so called “Call to action” buttons)
To create this button I will select Rounded rectangle Tool  with a radios of 12 px

Then I will apply the following layer styles (only for the button):

With Type Tool I will add some text. Here is my result:

The final step for header would be to add an image with my tutorials
Final result for header:

Step 3 – Navigation

Select Rectangle Tool and create a similar shape

Then apply the following layer styles

Select again rectangle tool and create a similar shape

Then apply the following layer styles

Next using type tool I will add links for navigation

Step 4 – Creating the content area

I will select Rectangle Tool and I will create a shape at the bottom of the content area

Then using type tool and some vector icons from Complete Designer Set I will fill the content area
Here is my result:

Final result for this web layout

Hello. In this tutorial I will try to create a colorful web layout and I think the output will be a really nice one.
For this tutorial I have used:
1. Photoshop
2. Complete Designer Set
Let’s start the tutorial
Open Photoshop and create a new document. Mine has the following dimensions: 1020 by 1020px.
Next with rectangle tool I will create 3 colorful shapes. For the first one I have used this color #a0e1da and the following dimensions: 1020 by 350px.
For the second one  I have used this color #f5e7ca and the shape has the following dimensions : 1020 by 650px
The third one has the following dimensions  1020 by 200px and as a color I have used #b8d758

Step 1 – Creating the logo & navigation

With type tool I have written Art (using orange – #f9882a, the font used is Agency FB – 36px) and then I have  typed Box7 (color – #626262, font Arial – 32px) and I have applied the following layer styles:

My result

For navigation, I have selected first Rectangle Tool and I have created a similar shape

As a color I have used #a6efe7
Then With type tool I will add the links for navigation and I will apply the following layer styles:

Step2 – Creating the header

Well the header is quite easy to create. On  the right side I will add some images and on the left side I will add some text. For the text I have used this layer styles:

My result

Because this will be a slideshow I will create some arrows.
Select Ellipse tool and create a similar circle

Then apply this layer styles:

Then with pen tool create an triangle. Right click on it and choose “Make a selection”

Then select paint bucket tool and fill the selection with this color #c0c0c0
Here is my final result for Header

Step 3 – Creating the content area

Well to create the content area is quite easy. All you have to do is to use Type tool with some vector icons from Complete Designer Set. Here is my result:

Step 4 – Creating the footer

Again here is quite easy. The first 2 section I have created with type tool. My result:

I have a newsletter area, here I will use rectangle tool and I will create 2 shapes
And I will apply the following layer styles:

My final result for footer:

Well the tutorial is finished now. I hope you have a great time reading it.

Hello. In this tutorial you will learn how to create an eye catching web layout using Photoshop and some resources from ArtBox7.com
To create a similar web layout you will need:
1. Photoshop
2. Vector Icons from Complete Designer Set
Let’s start it
Open Photoshop and create a new document (Ctrl + N) with the following dimensions: 1020px by 1020px and as a background choose white

Step 1 – Creating the logo

First I will select ellipse tool and I will create a similar shape:

Then I will go to Filter>Blur>Gaussian Blur

And here select radios of 15.8px

My result

Next select rectangle tool and create a shape above the shadow created in previsions step

Now I will add the logo. For “Art” I have used TOSCA ZERO font (36px) with the following layer styles:

Here is my result

Step 2 – Creating the navigation

With rectangle tool I will create a similar shape:

Then I will add the following layer styles:

With type tool I will add the links for navigation
Here is my final result for navigation:

Step 3 – Creating the header

First I will select rectangle tool and I will create a similar shape. Mine has the following dimensions: 1039X309. As a color I have used # 646a7a

Next I will add this texture on my layout. On my layer palette I will  create a Clipping Mask (to have the image fitting exactly on my shape)

than I will change the blending options to Overlay and I will lower the opacity to 88%.

My result

With type tool I will add some text and then an image.

Next I will select ellipse tool and I will create this shape:

I will go again to Filer>Blur>Gaussian Blur (exactly the same steps used to create the shadow for Logo). Here I will use a radius of 15px

I will select rectangle tool (as a color I have used: # ededed) and I will create a shape just above the shadow created on previous step

Next with type tool and with some vector icons from Complete Designer Set I will finish the header. Here is my final result:

Step 4 – Creating the content area

It’s quite easy. To create this area I have used (Type Tool) and some vector icons from Complete Designer Set. Here is my final output for this layout:

Hi! Today I will create another layout tutorial, here on ArtBox7.com and hopefully it will be useful for you.
To create a similar web layout you will need the following:

1. Adobe Photoshop

2. Some vector icons from Complete Designer Set
Let’s start the tutorial.
Open a Photoshop and create a new document (Ctrl + N) with the following dimensions:

As a background color i have used: #f3f3e7

Step 1 – Creating the logo

First select rectangle tool and create a similar shape:

Then apply the following layer styles:

Select ellipse tool and add a similar shape (using black). Make sure that you place the layer below the layer created on the step above, then apply a Gaussian blur

with a radios of 9.1

I will proceed the same way for the left and right and I will add some text for logo and in the right side a phone number (toll free)
Here is my final result for logo:

Step 2 – Creating the navigation

Select Rectangle tool and create a shape like mine (1020X56). I have used a blue color (#00bfe4)

Then I will add some links for navigation

For each link I have used the following layer style:

To see witch page is selected in navigation I will add small triangle using the pen tool.
First select pen tool and draw a triangle:

Right click on it (make sure that pen tool is still selected ). Here choose “Make Selection”

Then create a new layer (to create a new layer from your keyboard push Ctrl+Alt+N).
Once a new layer is created, select Paint Bucket Tool (as a color choose #f3f3e7)
Final result for navigation

Step3 -  Creating the header

To crate this, first I will add an image. I have found a good one on my hard-drive (all I have to do is to place it on my layout) then with type tool I will add some dummy text. And voila!
The header is finished!

Step4 – Creating the content area.

Here again is a really simple task. All you have to do is to add first the text. You will need to be patient and to make it looks good. For paragraphs I have used Tahoma font with 12px. Then for title I have used the same font title, but with 14px. The vector icons used are from Complete Designer Set

Next I will create the Portfolio area, wich is really easy. With type tool, some images from my tutorials and rectangle tool using #66d5e5 color you can create a similar area in no more than 2-3 minutes.
Here is my final result:

Hello and welcome to another tutorial here on ArtBox7.com. Today I will create a minimalist web site design in Photoshop , and hopefully it will be useful for your future projects.
Like usual, open Photoshop and create a new document 1020px by 1020px and as a background choose white.
With type tool write your logo – I have used  #bfbfbf and for slogan #8e8e8e

Step 1 – Creating the navigation.

With rectangle tool, create a similar shape

And apply the following layer styles:

Then with type tool I will add the links for navigation

And using line tool I will create some arrows
Here is my final result for navigation

Step 2 – Creating the slide show

Create 3 similar shapes.

To create the shadow, I will duplicate the bigger shape and I will drag it a little bit down:

Next I will select Eraser tool and a brush with a dimension of 104px. And I will start erasing a little bit this shape:

Once you are satisfied with result reduce the opacity to 39%

I will proceed the same way for the remaining 2 shapes, and in the same time I will add some images
Here is my result:
Now because this is a slideshow I will create some nice arrows, to browse through images.
I will select ellipse tool and while I create the shape I will hold down Shift key to create a perfect circle

Once the circle was created apply the following layer styles:

Next with type tool, create a triangle and apply the following layer styles:

Here is my final result

Now with type tool I will add some text

I will create again a slideshow like I do in the previous steps and then I will create again a slideshow.
Final result

Well the layout is finished now. I hope you have had a great read!

Hello and welcome to another tutorial here on ArtBox7.com
Today I will create an unusual web layout and I hope it will be useful for your future projects.
To create this tutorial I have used
1. Photoshop
2. Vector icons from Complete Designer Set.
Let’s start the tutorial
Open Photoshop and create a new document (Ctrl+N) with the following dimensions: 1020X 1020px, as a background choose: #8e8e8e
Next I will create the logo, which is quite simple. with type tool I will try first “Art” with Bauhaus 93 font and an orange color #f6b620, for “Box7″ I have used Tahoma font with grey #c6c6c6.

Step1 – Creating the navigation:

Select rounded rectangle tool with a radius of 12px and create a similar shape:

Next select ellipse tool and create 3 similar shapes on navigation:

Now for each shape I will apply a Gaussian blur with a radius of 7px

And with type tool I will write “Home”
Here is my result:

I will duplicate the same steps for the next buttons on navigation.

With Pen Tool I will create a similar shape

Then select Paint Bucket Tool and fill this area with #f2f2f2

Step 2 – Creating the content area:

Select rectangle tool and create a similar shape:

Then with rectangle tool create a similar shape (I have used red just for demonstrations proposes):

Make sure that you have Rectanle tool selected and create another 2 shapes (two black squares) and place them behind the red shape. Please see the screenshots:

Then go to: Filter>Blur>Box Blur

And for each square, apply a Gaussian blur (8-9 radius)

My result

I will duplicate this shape and I will create another two. I will add some vector icons from Complete Designer Set and with type tool I will add some text. Here is my result:

Now I will duplicate the shape used for navigation, I will modify it a little bit (increase the height) and I will place it on the middle of the shape

And I will apply the following layer styles:

Next I will place an image found on sxc.hu. Here is my result:

Now all you have to do is to repet the steps created above, because everything is similar with what we have already created.
The navigation is almost the same (I just changed the links and I have place them on the right side)

Final preview:

Stay tuned and don’t forget to subscribe to our rss updates because some new tutorials  will follow up shortly.

Hello and welcome to another tutorial. Today I will create colorful template which can be used for a product website, portfolio and why not for a corporate business.
As usual, yo create this tutorial you will need:

1. Adobe Photoshop Software
2. Complete Designer Set (this pack is filled with more than 6000 graphic elements and I am sure it will be really useful for your design needs)
3. Time to read on
Let’s start the tutorial:
Open Photoshop and create a similar document (Ctrl +N) as a background color choose #392215. Dimensions: 1020 X 1020px

Next select ellipse tool and add a white shape in the middle of the page

Now make sure that you shape is selected and go to: Filter>Blur>Gaussian Blur

And for radius choose maximum: 250px

Ok, we have finished this part, now we will go and we will create the logo

Step1 – Creating the logo

From Complete Designer Set, select Colorful Curve Vectors

And place it on the top….

Then drag it till you have something like and make sure that you set the opacity to 49%

Right now I have used an vector and if you will look a little bit to our colorful vector you will see that is not pixelated at all. That is one of the advantages of using vector graphics instead of raster graphics.
Next I will select type tool, and I will type ArtBox7.com using “Gabriola” font, and then I will apply the following layer styles

Here is my result:

Next from Complete Designer Set I will add some vector ornaments and I will apply the following layer styles:

Here is my final result for logo

Step 2 – Creating the navigation

Select rectangle tool and create a similar shape with the following dimensions (950 X 55) the color is not important because we will apply some layer styles :

Here is my result

First with type tool I will write Home, than with rectangle tool I will create a similar shape (the color is not important now):

I will press Ctrl + T (for free transform) or Edit>Free Transform (please see the screenshot) and I will rotate it a little bit to the left

Next I will make sure that this layer is selected and then I will choose Rectangular Marque Tool

Then I will make a similar selection (with Rectangular Marque Tool, of course)

Make sure that the layer is selected and press DELETE on your keyboard

I will apply the following layer styles:

And with type tool (Ctrl + T) I will add the navigation text

I will multiple 2 more times the same step, and here is my result for navigation

Step3 – Creating the header

Select rectangle tool and create a similar shape (951X299) I have used the following color: #d29003

Next I will use this texture:  created by alexesn (it’s a really nice one )
Place it in Photoshop just above the header

Once you have added it in Photoshop click in its layer and create a “Clipping Mask” , then for Blending options choose “Overlay” and reduce the opacity to 17%

With type tool write some text and add and image on the right side
Here is my final result for header:

Step 4 – Creating the content area

Well from now on, everything is easy to create.
First I will add create some lines which will serve as a separator between the header and content area
These lines need to make a contrast between those header and content area:

The first line needs to be a darker one: #231913
The second one a light one: #4d4139
Next I will add some text and then some vector icons from Compete Designer Set (on the right side) then I will add few more separators:

This template is almost finished. I will need to use one more vector icons (from Complete Designer Set) and then with rectangle tool to create some forms.
Here is my final result for this Photoshop template:

Hello. Today I will create a black and white business template in Photoshop. I hope it will be useful for your upcoming projects!
What do you need to create a similar template:
1. Photoshop (obviously )
2. Complete Designer Set from ArtBox7.com (we will use some vector icons from this set).
Open Photoshop and create a new document (Ctrl + N). Your document needs to have the following dimensions: 1020X1020 px and as a background color choose:  #f1f1f1 (a Grey one)

Step 1 – Creating top navigation and logo

Select rectangle tool and create a similar shape with the following dimensions: 1020X214px. I have used this color: #464646

Next select again rectangle tool but this time create a smaller shape on the top. Please note that I have used white just for learning proposes. This shape need to be a blackish one (#464646)

Next apply the following layer styles

Add some text on the right side. Here is my final result for it navigation

Creating the logo
Select type tool and add your desired text for logo then apply th following layer styles:

Here is my result for logo

Then I will select ellipse tool and I will add a shape just above the logo (I have used white)

Make sure that you have this shape selected, then apply a Gaussian Blur:

My final result

Next I will add a search bar (using rectangle tool) and a vector icon from Complete Designer Set
My result:

Step2  – Creating the content area

Here using rectangle tool we will need to create several shapes. Please see the screenshot:

Then apply the following layer styles for each shape:

Next using type tool, and some vector icons from Complete Designer Set add some text and some vector images on each shape created above
Here is my final result for content area:

Step 3 – Creating the footer

As usual footer is quite easy to create. First select rectangle tool and create a similar shape (mine has the following dimensions 1020X180px)

Next duplicate logo and make it a little bit smaller

Using line tool, create 3 separators. I have used white

And the final step would be to add some text, using type tool

Here is my final result:

Hello. Today I will create another tutorial and this one will be a special one, because I will create a tutorial related to Valentine’s Day (Valentine’s Day Photoshop Template).
To create this tutorial I have used:
1. Photoshop
2. Some vector icons and vector ornaments from Complete Designer Set
Open Photoshop and create a new document (CTRL + N) with the following dimensions:  1020X1040 px and as a color background choose : #f0dfb5

Step 1 – Creating the navigation and the logo

Select rectangle tool and create 2 similar shapes. Each shape has the following dimensions: 349 X 51 px

Then apply the following layer styles:

My result

Next using type tool (T) I will add some text. The font used is: Gabriola and I will try to add a nice separator between the Text. For that I will select line tool and I will add a small line (1px weight) using this color: #620101
Now I will duplicate this line. When you duplicate a layer select it first, than right click on it and choose “Duplicate Layer”. Once the layer is duplicated, change the color to #db0303 and move it 1px to the right (using the right arrow on your keyboard).
Here’s my result:

Next from Complete Designer Set I will look for some vector ornaments (we have plenty of them in this pack) and I will add them just bellow the navigation.
Here is my final result:

The navigation is now finished. Next I will create the logo just between the navigation where is that empty space.
Select type tool and add your desired text for logo. I have used Vivaldi font and the following layer styles:

My final result:

Step 2 – Creating the header

Select rectangle tool and create a similar shape using this color: #e1d3b1

Then apply the following layer styles:
Next using a ellipse tool add a similar shape just below the header. This will serve as a shadow.

Then apply a Gaussian blur : Filter>Blur> Gaussian Blur with a radius of 20.5px

My result

Next  I will add an image with an rose and some vector ornaments from Complete Designer Set

Using Type Tool I will add some quotes to make the header looks good
Here is my final result for header:

Step 3 – Creating the content area

Select rectangle tool and create 3 similar shapes. The color does not matter right now because we will apply some layers next.

Now apply the following layer styles (for each shape)
Here is my result:

Next all we have to do is to add some text and to use some vector icons from our Complete Designer Set.
Here is my final result for this Photoshop template:

Happy Valentine’s Day!