artbox7.com blog tutorials create a clean psd layout using complete designer set from artbox7 com
TRANSCRIPT
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 1/20
Abo ut Co nt act us
30tweets
Create a clean psd layout using Complete Designer Set fromArtBox7.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
Select Rectangle tool and create a similar shape using this color: #bbc19c. My shape has the following
dimensions: 1020px X 327px
Get Updates Via
Create a Fashion Web Layout (PSD Template) Us (24)
Create a portfolio/business website layout (P (22)
Create a clean psd layout using Complete Desi (19)
Create a company/business web layout using Ph (18)
Create a sleek layout with Complete Designer (8)
Related Posts
Create a Valentine’s Day Layout with Photoshop
using resources from Complete Designer Set
Create a Real Estate Web Layout in Photoshop
Create a Baby template in photoshop using
Complete Designer Set
Create a clean psd layout using Complete
Designer Set from ArtBox7.com
Create a sleek layout with Complete Designer Set
from ArtBox7.com
Freebies Tutorials
Popular Authors Tags Topics
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 2/20
Now I will apply a l ayer mask (make sure that your layer is selected).
Next make sure that you select your layer mask:
Now select Gradient Tool from the layer pale tte, make sure that default colors are selected (black and white
you can activate them simply by pressing D on your keyboard).
Drag with your mouse to revel a portion of your layer. Please see the screenshot:
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 3/20
Here’s my result
Step 1 – Creating logo + top navigation
Select rectangle tool and draw a small shape on the top of the document
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 4/20
Then apply the following layer styles:
My result:
In the right side, using type tool create the navigation text. I have used “Helvetica” font.
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.
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 5/20
Then apply the following layer styles:
My result:
Next I will create the logo
With rectangle tool I will create a similar rectangle and I will use this color: #9cc1a2
Then I will apply the following layer styles and with type tool I will write ArtBox7.com :
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 6/20
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.
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%)
The top navigation and the l ogo 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
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 7/20
and apply the following layer styles:
Then with type tool add some text for the navigation
My result:
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 deadli ne 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, scrapingbooks, 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
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 8/20
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 9/20
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
Then apply the following layer styles:
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 10/20
With type tool I will write some dummy text. I have used Helvetica script with 14px in size. Then I will dupl icate it
(make sure that you have the layer selected)
Having the layer which has been dupli cated selected, go to Filter>Blur>Motion Blur
Set the angle to 0 and distance to 70 and add more text using the type tool
You should have something like this now:
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 11/20
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.
Now right click on Image_layer and choose “Create Clipping Mask”
Then go to Layer>Layer Mask>Hide All (make sure that you have selected the layer “Image_layer”)
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 12/20
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 ind icated on
the screenshot
My result:
Now I will add a shadow, I will select ellipse tool and I will create a shape below the header
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
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 13/20
Here choose 5.5 for radius
Here’s my final result for header
The header is almost finished…
Using Complete Designer Set I will add again an vector ornament
Step 4 - Create the main content
Using type tool I will add some text in 3 columns, exactly under the header
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 14/20
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
Then I will apply the following layer styles:
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 15/20
My result
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:
Now using type tool some vector icons from Complete Designer Set I will fill up the content area
Here’s my result:
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 16/20
The content area is finished now
Step 5 – Creating the footer
The footer is really easy to create, basically it’s a replica o f the logo and the top navigation. I have used exactly
the same layer styles, same ornaments fromComplete 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 D esigner Set.
Have a great day!
Final Image Preview
Digg | Del.icio.us | Stumble | Reddit
Jeff
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
A B O U T T H I S A U T H O R
19 Comments subscribe comments feed
Great job! Love the outcome!
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 17/20
Design Informer
November 24th, 2009
Nick Plekhanov
November 25th, 2009
Nice tut. Thanks
Nokadota
November 25th, 2009
This really is a ni ce, clean layout. Wonderful tutorial.
Sr.Lima
November 25th, 2009
Very nice. Amazing photoshop layout tutorial.Bom trabalho! (Portuguese)
brum
November 25th, 2009
Very very great layout.. THx..
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
aledesign.it
December 8th, 2009
A good post! Add to bookmart. Thanks for the sharing!
Marin
December 23rd, 2009
I am definitely bookmarking this page and sharing it with my friends. Great tutorials
guys!
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 18/20
Smashing Share
December 28th, 2009
Great. Nice tutorial and elements used
Tutorijali HDonWEB
January 10th, 2010
Amazing Tutorial, very inspiring
wepage design
company
January 12th, 2010
excellent tutorial and excellent arbox resources. enjoyed a lot and lea rned from it also.
GraphicDesignBay
January 21st, 2010
Amazing work..
Projektowanie
February 4th, 2010
very complex, i really like this tut. Keep on goin!
Trackbacks
1. Photoshop tutorial: egyszerű website layout készítése | Blogzóna | VENTOSA kreatív stúdió
Trackbacks
1. tutoriale dla adobe flex i photoshop | web-tutoriale.pl
Trackbacks
1. 60+ Fresh Hot New Tutorials From Around The Web | designrfix.com
Trackbacks
1. 60 frische Photoshop Effekte Tutorials | Photoclinique
Trackbacks
1. 36个网站原图设计教程 - Loo Design
Trackbacks
1. Booto'Blog » 36个网站原图设计教程
Leave a Reply
Name (required)
Email (will not be shared, required)
Website
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 19/20
Comment / Suggestion
Submit Comment
Previous Post Next Post
1
8/14/2019 Artbox7.Com Blog Tutorials Create a Clean Psd Layout Using Complete Designer Set From Artbox7 Com
http://slidepdf.com/reader/full/artbox7com-blog-tutorials-create-a-clean-psd-layout-using-complete-designer 20/20
1 r ox .com . owere by or press . op