This design tutorial will show you how to create a clean, professional, custom app site layout using Photoshop. This tutorial layout could be used for many different design projects and websites.
Resources
Before you begin this tutorial, you will need to download these resources, in order to complete the design:
- Wood Texture
- iPhone PSD from psd tuts
- iPad PSD created by Ash Davies
- Twitter Bird from the Practika Icon Set
Final Preview
Prepare Your Photoshop Document
1 Create a new document in Photoshop (Ctrl/Cmd + N) using these document settings:
1.1 Now we need to add some guides to the document, so that we stay organised
throughout the tutorial. To create guides click (View > New Guide…) in the file menu.
Guide 1
Guide 2
Guide3
That is the guides completed.
Applying The Background Colour
2 Next we are going to apply the background colour to the document. To do this, first set the foreground colour to #e3e0dc, then using the paint bucket tool (G), apply the foreground colour to the background layer, like so:
Creating The Header
3 The next step is to create the header, where the logo and navigation is located. To create the header, first create a new layer (Layer>New>Layer…) then rename it ‘Header’. Next, select the rectangular marquee tool (M) and make a selection the full width of the document, with a height of 50px at the top of the document. Then using the paint bucket tool (G) fill the selection with a colour, like so:
3.1 Now we need to apply some layer styles to the header layer. To do this, right-click the header layer, and select ‘Blending Options’ from the menu list. Once the Blending Options window has opened apply these layer style settings:
Inner Shadow
Stroke
Gradient
Creating The Logo
4 The next step is to create the logo on a new layer. First, select the type tool (T), then on a new layer create and position the logo like so centred in the header and next to the first guide, using these text settings:
Font: Myriad Pro, Style: Regular, Size: 30pt, Anti Aliasing: Sharp
4.1 Once you have created the logo text, you then need to apply these layer style settings, the same way as the header:
Drop Shadow
Inner Shadow
Gradient
Creating The Navigation
5 The next part of the layout we are going to create is the navigation. To do this, first create a new layer, then using the type tool (T), type out the navigation text with a gap between each word, with these text settings:
Font: Myriad Pro, Style: Regular, Size: 14pt, Anti Aliasing: Sharp
5.1 The next step in the creation of the navigation is that you need to create the line breaks which separate the navigation links. To do this, first create a new layer, then using the line tool (U), create a line which is the height of the header like so:
Next you need to duplicate the line break layer so that you have two line breaks, like so:
Once you have created these two layers, you then need to merge the two layers together. Once you have merged them, you can then duplicate each nav break layer and position them all centred in between each nav link, like so:
That is the navigation complete
Creating The Banner
6 The first step in creating the banner is to first, insert the wooden texture image that you downloaded at the start of the tutorial. Then once the wooden texture image has been positioned underneath the header, you can then apply these layer styles to the banner:
Inner Shadow
Stroke
You should now have a layout looking like this:
6.1 Now for the banner content. First, create a new layer, then set the foreground colour to #ffffff, finally using the type tool (T), type out the banner heading using these text settings like so:
Font: Myriad Pro, Style: Regular, Size: 47pt, Anti Aliasing: Sharp
Now we need to add some layer styles to the text:
Drop Shadow
Inner Shadow
6.2 We now need to create the two banner buttons which represent links. To create the first button, create a new layer, then using the rounded rectangle tool (U), create a rounded rectangle with a radius of 20px, a width of 160px and a height of 36px, like so:
Next, apply some layer styles to the button in the blending options window:
Drop Shadow
Inner Shadow
Gradient
Stroke
6.3 Now that you have created the button, we now need to add the line break and arrow. Start by creating a new layer, then set the foreground colour to #00605e, finally using the line tool (U), create a line the full height of the button, like so:
Now again create another line, except this time set the foreground colour to #308e8d. Then position the second line next to the first line like so:
Finally position both layers so that the two lines are 40px from the right of the button, like so:
The next step is to add the little arrow inside the button. To do this, create a new layer, then set the foreground colour to #ffffff, then select the custom shape tool (U) and create an arrow like so, making sure it is positioned so that it is centred inside the button:
Next apply some layer styles to the button arrow layer:
Drop Shadow
Inner Shadow
Gradient
6.4 The final part of the button is the text. Using the type tool (T), on a new layer, type out the button text with the colour #ffffff, using these text settings:
Font: Myriad Pro, Style: Regular, Size: 14pt, Anti Aliasing: Sharp
Position the text so that it is centred in the button, like so:
6.5 We now need to duplicate the button we have just created, in order to create the second button. By duplicating the layers we just created, we can save time. To duplicate the button layers, follow these steps:
1। Create a new group folder and rename it ‘services button’.
Select all of the service button layers and drag them into the ‘services button’ folder.
3. Then right-click the ‘service button’ group and select ‘duplicate group…’ from the menu list.
Finally position the new button alongside the services button and change the text like so:
6.6 To complete the banner, we need to add the images of the Iphone and Ipad. The images can be found in the Resources section at the start of this tutorial. First open the Ipad PSD file you downloaded in Photoshop:
Once the file is open, copy the Ipad image across to the layout and resize the layer so that the Ipad is 205px wide and 260px in height.
Then position the Ipad image layer so that it 40px below the banner and next to the second guide, like so:
Now that the Ipad has been inserted into the layout, we are now going to insert the Iphone image into the layout. The Iphone image again can be downloaded from the Resources section at the start of this tutorial.
Once you have selected the FRONT part of the iPhone image, copy it across into a new layer in the layout. Then resize the layer so that the Iphone is 192px wide with a height of 368px.
Finally, position the Iphone layer so that it is 76px below the banner and next to the third guide, like so:
Once both images have been inserted into the layout, apply this layer style to BOTH the Iphone and Ipad layers:
Drop Shadow
To complete the banner, position the text and button layers so that they are centred vertically inside the banner, like so:
Main Content
7 The next steps will show you how to create all of the main content for the layout. The first thing we are going to do, is create a small drop shadow layer under the banner. To do this, first create a new layer, then select the rectangular marquee tool (M) and make a selection the full width of the layout, with a height of 25px, just underneath the banner like so:
Then using the paint bucket tool (G) fill the selection with a foreground colour:
Now as you can see the layer overlaps the Iphone and Ipad images. So we need to position the banner shadow layer underneath the banner layers in the layer properties window like so:
To complete the banner shadow layer, apply this gradient layer style to the layer:
That is the banner shadow completed.
7.1 Next we are going to create the ‘What We Do’ section of the layout. To start, go back to the Iphone PSD file you opened in Photoshop. Then hide the screen contents layer and make a new selection of the FRONT image of the Iphone and copy it across into the layout on a new layer and resize the image so that it is 64px wide x 122px height, like so:
Next position the small Iphone layer so that it is 36px from the banner, and next to the first guide. Then using the text settings below, add the text. Then create a small button the same way we created the banner buttons, however, make the button 80px wide x 22px height:
Title settings:
Font: Myriad Pro, Style: Regular, Size: 18pt, Anti Aliasing: Sharp, Colour: #00807d
Text
Font: Myriad Pro, Style: Regular, Size: 14pt, Anti Aliasing: Sharp, Colour: # 1d1d1d
7.2 The next section we are going to create is the ‘About’ section. To create this section of the layout, use the text settings we used for the ‘What We Do Section’, like so:
7.3 The next section you need to create is the ‘service’ section, using similar settings to other sections of the main content.
In order to create the small circle symbols for the list items, you need to first create a new layer, then using the ellipse tool (U) create 8x 22px wide x 22px height circles, using a foreground colour.
Then apply these layer style settings to symbol layer:
Inner Shadow
Gradient
Stroke
Then once you have the circles completed, using the custom shape tool (U), select the ‘Tick’ symbol and then using the foreground colour #e3e0dc, create a tick symbol 18px wide x 18px height and then position the tick symbol so that it overlaps the top of the circle layers.
That is the service section of the main content complete.
Sidebar Content
8 We are now going to create the sidebar content. We are first going to create the ‘Current’ and ‘Recent’ project boxes. To do this, first create a new layer, then make a selection 320px wide x 100px height with a gap of 53px from the Iphone image, like so:
Now apply these layer style settings to the project box:
Inner Shadow
Gradient
Stroke
Now to finish the project box we need to add some content. First add the Title using the type tool (T), using the colour #00807d. Position the text so that it is 18px above the project box.
The box title text uses the same layer style settings as the arrows in the buttons. So you can simply copy the layer style settings to the title text. The title text uses these settings:
Font: Myriad Pro, Style: Regular, Size: 36pt, Anti Aliasing: Sharp,
The info text has a colour of #ffffff and uses these text settings:
Font: Myriad Pro, Style: Regular, Size: 14pt, Anti Aliasing: Sharp,
Then you need to duplicate the Ipad layer we used in the banner section of the layout, and resize it so that it is 81px wide x 105px height.
The light overlay layer is an option you can choose to add. To create the light overlay layer, create a new layer and using the pen tool (P) create a triangle selection over the project box and fill the selection with the foreground colour #ffffff and then reduce the opacity of the layer to 5%.
That is the project box complete, we now need to duplicate all of the layers and create the ‘Recent Project’ box underneath. Once you have duplicated the layers position the layers so that they are 27px from the ‘Current Project box, then make the necessary changes like so:
8.1 The next section we are going to create is the ‘Quote Form’ section. To create this section, use these details:
For the text boxes, apply these layer style settings:
Inner Shadow
Colour Overlay
Stroke
That is the Main Content Section Completed.
Footer
9 We are now going to create the footer content. To create the footer, duplicate the banner layer and then position the layer so that it is 280px from the bottom of the layout, like so:
Once you have done this, add the footer content. The twitter bird can be downloaded from the Resources section at the start of this tutorial.
The speech bubble, is created from the Custom Shape Tool (U), then the same layer style settings as the banner buttons are applied to the speech bubble layer.
That is the tutorial complete! Thanks for following along.
0 commentaires:
Enregistrer un commentaire