Create a Fashion Web Layout (PSD Template) Using Photoshop
Hello and welcome to another tutorial, here at ArtBox7.com
Today I will create a fashion web layout, (psd template). The end result is not astonishing but it will help you to understand better how you can create a nice and clean web layout (psd template) using Photoshop. If you are an experienced Photoshop user, this tutorial is not for you instead our Complete Designer Set it will fit pretty well for your design needs
To create a similar web layout you will need the following:
- Some free time to read the tutorial
- Adobe Photoshop (CS2 or higher)
- Our Complete Designer Set
As you already know, our main website ArtBox7.com is a designer shop dedicated to create vector graphics , Photoshop brushes and vector icons. We have created a special pack for our tutorial readers, called Complete Designer Set. Basically this is a must have package for every designer because it’s filled with more than 5000 graphic elements (and more still to come). In this pack you will find most of the elements required to create designs such as web templates, banners, t-shirt designs, flayers, brochures, textiles, etc.
With Complete Designer Set you can create almost anything related to designs because in this package we have combined raster designs (must used for web templates) with vector graphics (used in print industry)
More than that by acquiring “Complete Designer Set” you will save time! To create this set we have worked more than 6000 hours, that’s almost 250 days (or 8 months working 24h/day)
You can read more & acquire “Complete Designer Set” here
Now let’s get back to our tutorial:
Fire up Photoshop and create a new document with the following dimensions: 1020 X 1170. As a background choose: #e8e8e8
Select rectangle tool and create a rectangle on the top of the document. I have used black #00000, than from Complete Designer Set use an swirl ornament (you will have hundreds of choices) and place it on the top of the document, and set the opacity to 36%
Next select Type Tool and write your desired text for logo. I have typed ArtBox7 (using black and red)
Creating the search bar
Select rectangle tool, and create a shape on the top right side. I have used this color: #e1cdcd than select rounded rectangle tool (with a radios of 6 px) and draw a small shape using this color #e73c61.
Here’s my result:
Creating the navigation
First of all I will add 2 guides to position better the navigation.
To add the guides, in Photoshop menu go to : View>New Guide
A new windows will pop-up. Here enter the following values: 40px for the first guide and 977px for the second one.
Next, using rounded rectangle tool, create a new shape which will serve as a navigation. As a radios I have use 10px.
Note: Please make sure that you will position this shape between the guides.
Then apply the following layer styles:
Next using type tool (T) add some text for navigation using the following details:
Next, because this will be the main navigation we will need to find a way to mark the selected page. That’s why I will select again Rounded Rectangle Tool to add a shape with a radious of 10px. I will add this shape on the Home area and I will apply the following layer styles:
The navigation is finished now.
Creating the Header
Select Rounded Rectangle Tool and create a shape underneath the header. Be sure to place it between those 2 guides. Mine has the following dimensions: 938px X 309px
Next from Complete Designer Set, select an pack with some vector elements and place one of them in Photoshop. Basically you will need do drag the vector from Illustrator in Photoshop.
Change the Color
Change the opacity
Next using type tool add a slogan for the header
Than duplicate this text
Make sure that the duplicated text is selected on your layer panel and then go to :
Filter> Blur>Motion Blur
Make sure that the angle is set to 0 and for distance enter 90px
The header is not looking quite well yet, that’s why I will need to search on my hard drive for a stock image. You should know that every designer should have on their hard drive – vectors packs, icons, Photoshop brushes, textures and stock images.
Basically when you have a project which needs to be done ASAP, stock vectors, icons and Photoshop brushes are a golden mine because it can help you to create a nice looking design in a shorter time….
On our Complete Designer Set you will find more than 5000 elements (vectors, icons, Photoshop brushes), every element was been hand drawn by our design team and the entire process (to create this entire set) took us more than 6000 hours!
Well, I found that image and now all I have to do is to place it in Photoshop. Here I will need to make sure that the layer for this image is above the “Header: layer.
As you can see the image is too bright, that’s why I will select the layer “Image” and I will lower the opacity to 63%
Next, I will add some thumbnails at the bottom of the header. I will select redounded rectangle tool with a radios of 20px, I will set the color to: # e33258
Here’s my result:
Than using some small images I will create the thumbnails
Creating the content area
Using rectangle tool I will add a white shape with the following dimensions 939px X 574px
On the top of the shape, I will add a shadow. Select Ellipse Tool and add a similar shape
then apply a Gaussian blur (Filter>Blur>Gaussian Blur) with a radios of 37px
and place the layer (I have called Shadow) below the layer “Content”
You should have a nice looking shadow now.
Proceed in the same way for the shadow at the bottom of the content area….
To finish up this step I will add some images and some dummy text.
Creating the footer
The footer is quite easy to create, in fact it’s similar with the top area and logo. I will select rectangle tool and I will create a black shape at the bottom than I will copy the logo, but I will make the text a little bit smaller and than from Complete Designer Set I will add an vector ornament. Here’s my result:
Conclusion: If you have followed me step by step you should have a similar web layout. The end result is not astonishing but instead you will understand better how to use Photoshop to create some nice and clean web layouts. Along with Photoshop I recommend Complete Designer Set!
- Create a Fashion Web Layout (PSD Template) Using Photoshop … | Fashion Blog Site
- CSS Brigit | Create a Fashion Web Layout Using Photoshop
- [Miguel Sá] | Blog – Create a Fashion Web Layout Using Photoshop