Create a clean psd layout using Complete Designer Set from ArtBox7.com

Hello and welcome to another tutorial, here at ArtBox7.com

Today I will create another psd template tutorial and I will try to make it as clean as possible. I think this web layout it will fit pretty well for a product review blog/website,  charity website, green – environmental layout etc… As usual to create this web layout I will use some resources from our Complete Designer Set, more precisely some vector ornaments and vector icons.

Let’s start the tutorial!

Open Photoshop and create a new document using the this dimensions 1020px X 1240px, and set the background color to #e6e9d4

12

Select Rectangle tool and create a similar shape using this color: #bbc19c. My shape has the following dimensions: 1020px X 327px

14

Now I will apply a layer mask (make sure that your layer is selected).

15

Next make sure that you select your layer mask:

17

Now select Gradient Tool from the layer palette, make sure that default colors are selected (black and white you can activate them simply by pressing D on your keyboard).

16

Drag with your mouse to revel a portion of your layer. Please see the screenshot:

18

Here’s my result

19

Step 1 – Creating logo + top navigation

Select rectangle tool and draw a small shape on the top of the document

20

Then apply the following layer styles:

21

22

My result:

23

In the right side, using type tool create the navigation text. I have used “Helvetica” font.

24

Next with Line  Tool I will create some separators for the navigation. Set the width of the line to 1px and add a small shape between navigation text.

25

26

Then apply the following layer styles:

27

28

My result:

29

Next I will create the logo

With rectangle tool I will create a similar rectangle and I will use this color: #9cc1a2

30

Then I will apply the following layer styles and with type tool I will write ArtBox7.com :

31

Next from Complete Designer Set I will select an pack with some vector ornaments I will open them in Illustrator and from there I will drag and drop them in Photoshop, under the green shape used for logo.

34

35

Next I will select the vector layer (in the layer palette) and I will lower the opacity a little bit( I will bring it down to 30%)

36

The top navigation and the logo is almost finished now. I will add a quote using type tool (T) to fill up the area above the top navigation.

Step 2 – Creating the main navigation

Select rectangle tool and create a similar shape. Mine has the following dimensions: 937px x 63px

39

and apply the following layer styles:

40

41

Then with type tool add some text for the navigation

My result:

42

As you can see here is missing something, the navigation bar is too empty and we will need to add something to make it looks better. You will say that you can create something – a shape, some icons, but if the deadline for this project would be in a couple of hours you don’t have too much time…..but you are saved if you already have our Complete Designer Set. Filled with thousands of Vector Graphics, Photoshop Brushes and Vector Icons, you can create almost anything with it: (t-shirts designs, business cards, posters, wallpapers, scraping books, web layouts – psd templates, illustrations) you have the basic elements all you have to do is to combine them together to obtain a great looking design. Basically with our Complete Designer Set you can create anything, the possibilities are endless!

Now, because the main navigation is looking to  boring I will add some vector icons, from Complete Designer Set. Being a vector icon, first I will open it in Illustrator and from there I will select few icons and I will drag them in Photoshop.

Here’s my result so far:

43

Now it’s looking quite well, don’t you think?

Maybe you will ask, why I don’t use regular icons (raster graphics) instead of vectorized icons.  The answer is quite simple, with vector icons you can resize them whatever you’d like (you can increase or decrease the size) without losing quality. With raster icons (regular icons) you can only decrease the size, if you’d like to modify it again (and you will need to increase the size) you will see that the icons will become blurry and pixilated. That’s why in our Complete Designer Set we have included only vector icons.

Here’s a simple example:

Vector Icons vs Regular Icons (raster graphic)

In this example I have used only vector icons from our Complete Designer Set.

Vector_icons

Next you will see the difference between vector icons and raster icons. This is the same icon used above but it was rasterized in Photoshop. The jpg, png, gif format means that the icon is in raster format. I would like to mention that from vector icons you can create raster icons (you can export it in many formats such as jpg, png, gif, etc) but from raster icon (jpg, png, gif) you can’t create vector icons. That’s why we have created all of our icons from Complete Designer Set in vector format.

Vector_icons2

I hope everything is clear now. I have made this clarification because I have received many emails asking what’s the difference between vector icons and regular icons…

Now let’s get back to our tutorial…The navigation is finished we will need to move to the header now, and this will be the third step….

Step 3 – Creating the header

First you will need to select rectangle tool and to create a similar shape, mine has the following dimensions: 937px X 278px. For this shape I have used this color: #cdd5a1

44

Then apply the following layer styles:

45

46

47

With type tool I will write some dummy text. I have used Helvetica script with 14px in size. Then I will duplicate it (make sure that you have the layer selected)

48

Having the layer which has been duplicated selected, go to Filter>Blur>Motion Blur

49

Set the angle to 0 and distance to 70 and add more text using the type tool

50

You should have something like this now:

52

NextI will search an nice image on Flikr and I will add on my header. When I add it in Photoshop I will make sure that I will place place this image above the layer used for header.

53

Now right click on Image_layer and choose “Create Clipping Mask”

54

Then go to Layer>Layer Mask>Hide All (make sure that you have selected the layer “Image_layer”)

55

Choose Gradient Tool and make sure that you set up the default colors (type D on your keyboard to make sure that you set the default colors). Click on the layer mask and drag with your mouse in the directions indicated on the screenshot

57

My result:

58

Now I will add a shadow, I will select ellipse tool and I will create a shape below the header

62

Next make sure that you have selected this shape in the layer palette, I have called it Shadow, then go to : Filter> Blur>Gaussian Blur

63

Here choose 5.5 for radius

64

Here’s my final result for header

65

The header is almost finished…

Using Complete Designer Set I will add again an vector ornament

67

Step 4 -  Create the main content

Using type tool I will add some text in 3 columns, exactly under the header

66

Next I will select rectangle tool and I will create this shape for the main content area. My shape has the following dimension: 935px X 504px

68

Then I will apply the following layer styles:

69

70

My result

71

Next I will add some shadows on the top and at the bottom of the main content area. The shadow will be added exactly how was added for the header area. I will use ellipse tool and then I will apply a Gaussian blur (Filter>Blur>Gaussian Blur).

Then using type tool (more exactly the point character from the keyboard I will divide this main shape in 3 columns)

My result:

72

Now using type tool  some vector icons from Complete Designer Set I will fill up the content area

Here’s my result:

73

The content area is finished now :)

Step 5 – Creating the footer

The footer is really easy to create, basically it’s a replica of the logo and the top navigation. I have used exactly the same layer styles,  same ornaments from Complete Designer Set and I think it’s really easy to follow.

With that, the web layout is finished now. I invite you to subscribe to our website, because we will try to create one of the best tutorials that you can ever find on the web. And if you like our hard work I invite you to acquire  our Complete Designer Set.

Have a great day!

Final Image Preview

artbox7_template_9

ABOUT THIS AUTHOR

Hi, my name is Jeff and I'm the man behind ArtBox7.com. This blog was created to share my knowledge and in the same time to demonstrate the value of the Complete Designer Set All of our tutorials listed on this website have been created using our vector packs

  1. Design Informer
    November 24th, 2009

    Great job! Love the outcome!


  2. Nick Plekhanov
    November 25th, 2009

    Nice tut. Thanks


  3. Nokadota
    November 25th, 2009

    This really is a nice, clean layout. Wonderful tutorial.


  4. Sr.Lima
    November 25th, 2009

    Very nice. Amazing photoshop layout tutorial. :)

    Bom trabalho! (Portuguese)


  5. brum
    November 25th, 2009

    Very very great layout.. THx..


  6. Tirath
    November 26th, 2009

    Awesome tutorial with nice web layout
    Thanks so much for making & posting Always useful tutorials always
    Your all Vector Graphics are Amazing
    Keep up good work.
    God bless you :-)


  7. aledesign.it
    December 8th, 2009

    A good post! Add to bookmart. Thanks for the sharing!


  8. Marin
    December 23rd, 2009

    I am definitely bookmarking this page and sharing it with my friends. Great tutorials guys!


  9. Smashing Share
    December 28th, 2009

    Great. Nice tutorial and elements used


  10. Tutorijali HDonWEB
    January 10th, 2010

    Amazing Tutorial, very inspiring :-)


  11. wepage design company
    January 12th, 2010

    excellent tutorial and excellent arbox resources. enjoyed a lot and learned from it also.


  12. GraphicDesignBay
    January 21st, 2010

    Amazing work.. :)


  13. Projektowanie
    February 4th, 2010

    very complex, i really like this tut. Keep on goin!


  14. chandrakanth
    February 18th, 2010

    nice ant neat work
    Thanks


  15. Erico
    April 7th, 2010

    the effect is really nice, im still pacticing!


  16. Flaske
    May 30th, 2010

    Tut for 10+. It was very helpfull for me. Thanks

Leave a Reply