In this tutorial you will learn how to create a fancy web layout for a design studio. As usual this layout can be used also for another types of websites. If you can create another versions of this layout please post them in the comment area.
First you need to download the following two images. Both images are created to fill your document very well if used as patterns. So please download the two images and save on your computer. Open the first image inside Photoshop, and then go to Edit > Define Pattern. Choose a name for this pattern, and then you can close this document.
This is the second image. Please download also this one. Make sure you click on the following image to see the full size.
Create a new document with the following size: 1100 x 1260 pixels. Select paint Bucket tool, and from the top of your screen select Pattern. After you select the patter you just create, click one time on the background layer. The result will look like this one.
On the bottom of this web design studio layout place the second image i gave you.
The same image please place it in the middle of the layout.
Then with Rounded Rectangle Tool create a shape like this one. I will use this round shape to create a simple navigation. In case you want another type of navigation please download the following pack: Horizontal PSD Navigation Pack
For the round shape please use the following layer styles
With Line Tool i will draw some vertical lines. I will use the following color for each line: #5e5a59
Then with Rectangle Tool i will create a simple shape but with a darker color. This shape will be used for our buttons when you roll over with your mouse. You need to know a little CSS. 
With Horizontal Type Tool i will add some text.
Then i will create some arrows with Pencil tool. Set the brush tip to 1 pixel when you use the Pencil Tool. You can see that under the white pixel arrows i have placed also some shapes. These shapes can be created with Ellipse Tool.
Under my navigation menu, i will add a big shape. This shape will be used to create a slide show.
I will add some navigation controls. I will use the same arrows i have used for the main navigation.
Under the slide show i will add a black shape with Ellipse Tool.
Then i will go to Filter > Blur > Gaussian Blur. I will use a value between 8 and 10 pixels for the radius.
Then i will go to Edit > Transform > Warp, and i will use the following settings.
Here is my result. As you can see i have a nice shadow under my slide show shape.
The next step is to download Free this set of Vector pencils from insanelyart.com. Open the .ai file inside Adobe illustrator and then copy the next orange pencil on clipboard. Return to Photoshop and paste the pencil on your web layout. I will add also a orange shape with Rounded Rectangle Tool.
On the right side of the layout i will create a simple orange button. This button will be very visible and it will increase your conversion. With other words you can have more clients.
On the body of the layout under the slide show i will add some icons, and text. The icons can be downloaded from HERE
For each icon you can add this nice embossed layer style.
The next step is to create a simple logo.
Bellow you can see the final result.
0 commentaires:
Enregistrer un commentaire