Create a Photoshop website design

In this tutorial, we will use Adobe Photoshop to develop a web interface that can be used for any mobile site. We will use various methods, including forms,, masks, icons, fonts, and more, which can be easily applied to your own developments in web design.
The final image.

Materials for the lesson:

Step 1. Let’s start by creating a new document. On the menu File – New (File – New) set the width and height to 1100px, the resolution is 72, the background is white.

Next, we need to create two guides that will act as borders for our page.
Select menu Preview – New Guide (View – New Guide). For the first guide put Orientation – Vertical and position of 70 pixels. (Orientation to Vertical and the Position 70 px).
For the second guide, select the menu again. Preview – New Guide (View – New Guide) and put Orientation – Vertical and the position is 1030 pixels.

And so, we prepared a space for our web page with a width of 960 pixels.

Step 2. The next step is to prepare the background. Choose a tool Fill (Paint Bucket Tool (G)), set the foreground color to 1e1e1e. Then click anywhere on the canvas to apply the color to the background layer.

Let’s add texture to our background. Let’s do it in the menu Filter – Noise – Add Noise (Noise> Add Noise). Put the radius (Amount) 2.5 and click OK.

Step 3. Next we are going to brighten the top of our page. This move will attract the main attention in this area, in other words – there will be a focus.
Choose a tool Brush (Brush Tool), resize to 400 pixels, Hardness 0%

Create a new layer and name it “Spotlight”.

Change the foreground color to “FFFFFF” (white) and create a circle at the top of the document with the tool Brush (Brush).

To fit this layer into the background, we also add some noise to it by selecting Filter – Noise – Add Noise (Filter> Add Noise). Make these settings. Effect (Amount) 20 and select an option Monochrome (Monochromatic) and click OK.

To smooth this flash select Filter – Blur Gaussian Blur (Filter- Blur-Gaussian Blur).
Set the radius to 50.0 and click OK.

Finally set the layer opacity Spotlight about 25%.

Step 4. It is time to add elements of graphics. Download the iPhone image. Keep in mind, you can use any phone that suits your specific tasks (Android, Blackberry, etc …).
After downloading, open the PSD file in Photoshop. Expand the “iPhones” folder, right-click on the “iPhones” folder and select Duplicate group (Duplicate Group). In the window that appears, give a name to the group (I used the “iPhone”) and select the document that you are working on now and click OK. Once you’re done, close the PSD with the iphone.

The position of our first iPhone concerns the left guide and approximately 100px from the top of the canvas document.

Now is the time to customize the screenshot in the iPhone. The easiest way to do this is to place a screenshot of the phone menu taken on the Internet and place it at the very top of the “iPhone” group, adjust the size to the screen size.

Duplicate the iPhone group by selecting the menu. Layers – Duplicate group (Layer – Duplicate Group), name it “iPhone 2? and click OK in the dialog box.
On the menu Editing – Transforming – Scaling (Edit-Transform-Scale) change the size of the second phone. In the settings, enter 107.0% in width and height. The position of this iPhone will be approximately 50px from the top edge and 200px from the left guide.

Repeat the screen replacement step in “iPhone 2” as mentioned above.

Step 5. The final touch for our iPhones is to create their reflection. We select two groups – “iPhone” and “iPhone 2 ?, then in the menu Layers – Duplicate Layers (Layer – Duplicate Layers) and click OK. Then menu again LayersMerge layers (Layer – Merge Layers).
Next, we need to flip our phones to create a reflection. Go to the menu Editing – Transform – Flip Vertically (Edit-Transform-Flip Vertical). Adjust the reflection to the original phones.

Add a layer mask by clicking on the layer mask icon in the layers panel.

Choose a tool Gradient (Gradient Tool (G)) from black to white and draw a line from top to bottom on the layer with reflection.

Finally lower the opacity of this layer to 30%.

Step 6. Next, add the main details to the right of our phones. Before we begin, let’s add another guide so that we can align future design elements with it. Select menu Preview – New Guide (View – New Guide). For this guide, put Orientation – Vertical and the position is 550 pixels. (Orientation to Vertical and the Position 550 px).
Approximately 100 pixels. from the edge of the document we will add a logo. The author used his logo. You can simply use text or insert your logo.

Below the logo we add text describing our application. Choose a tool Text (Horizontal Type Tool) and draw a rectangle between the center and right guides. Set the following settings for the text:
Font (Font): Helvetica Neue
The size (Size): 16 px
Style (Style): Regular
Leading (Leading): 26 px
Tracking (Tracking): -25
Smoothing (Anti-aliasing): Crisp Clear
Colour (Color): #FFFFFF

Step 7. Next, we will create a button for visitors who want to purchase our product. Use for this tool Rounded Rectangle (Rounded Rectangle Tool (U)) Draw a rectangle with such settings 240x75px 4px, where 4 is the corner radius. Align the button with the left side to the center guide and lower it below the text by about 45 pixels.

Now apply some layer styles. Double-click on the layer in the layers panel and use the screenshots below for settings.

Insert the Apple icon and change its opacity to 30%.

To the right of the icon, add more text, settings below:
Font (Font): Helvetica Neue
The size (Size): 11 px and 24 px
Style (Style): Bold
Leading (Leading): 26 px
Tracking (Tracking): -25
Smoothing (Anti-aliasing): Crisp Clear
Colour (Color): #FFFFFF

Add layer styles to the text. Use the settings from the screenshot.

Next we will add a separator to the right of the text. To do this, select the tool Line (Line Tool) and holding down the Shift key, draw a line from the top edge of the button to the bottom. Color line “FFFFFF” (white).

Change the opacity of the layer with the line to 15%, duplicate it by selecting the menu Layers – Create a duplicate layer (Layer> Duplicate Layer) and click OK. Change the color of this line to # 000000 (black) and change the opacity of the layer with the second line to 10%. Then move the black line 1px to the left of the white line.

The last element of this button is the icon that indicates Download. Use the tool Ellipse (Ellipse Tool) and draw a circle 25px in diameter.

Add the following layer styles for the ellipse:

Finally take the tool Arbitrary shape(Custom Shape Tool) and select the arrow (I use the “Arrow 9” shape), draw the arrow in white 10px wide, place inside the circle.

Step 8. Create a shape on which the price of the product will be displayed. Take the tool Rounded Rectangle (Rounded Rectangle Tool (U)), corner rounding radius 4 pix. The rectangle must overlap the download button and be 52px in height and of any width greater than 100 pixels.

Change the color of this rectangle to “2B2B2B“and move it below the download button in the layers panel.

In layer styles add a rectangle. Stroke (Stroke) settings on the screenshot.

Now we can add price information. To do this, we will create two separate text fields. For each will be your style.
For the first text field, apply the following settings:
Font (Font): Helvetica Neue
The size (Size): 19 px
Style (Style): Bold
Smoothing (Anti-aliasing): Crisp Clear
Colour (Color): #FFFFFF

For the second text field we use the following settings:

Step 9. Let’s go to the bottom of our page, where we need to create a separator. To do this, we will use the same technique with which we made a separator on the download button.
To do this, select the tool Line (Line Tool) and holding the Shift key, draw a line from the left guide to the right one, then change the line color to “000000” (black).

Change the opacity of this line to 80%, duplicate this layer by selecting the menu Layers – Create a duplicate layer (Layer> Duplicate Layer) and click OK. Change the color of this line to # FFFFFF “(white) and change the opacity of the layer with the second line to 10%. Then move the white line 1px down from the black line.

Step 10. In the section below, the row separator we just created will add two columns for screenshots and functions. Let’s start with the screenshots. Select a screenshot from the iPhone and insert it, adjust the size and position it near the left guide.

Select this layer in the layers panel and double-click the Add Mask button to add a vector mask. Now select the tool Rounded Rectangle (Rounded Rectangle Tool (U)), change the radius of the corners to 6px and create a rectangle with the size of 175x120px.

In layer styles add a rectangle. Stroke (Stroke) settings on the screenshot.

Repeat these steps for all your screenshots and give them a distance of 35px between them

Step 11. Draw a separator for the created screenshots. Draw a line of 1 pix. from the top screenshot to the bottommost one and place this separator to the right of them by about 55 pixels. Change the line color to “FFFFFF” (white) and set the opacity to 5%.

Step 12. Now add text with information. The position of the text is 55 pixels from the left line of the separator. For the text we use the following settings:
Font (Font): Helvetica Neue
The size (Size): 24 px
Style (Style): Regular
Tracking (Tracking): -10
Smoothing (Anti-aliasing): Crisp Clear
Colour (Color): #FFFFFF

Now let’s create a list of our capabilities and put it under the heading. Create a text field and add five or six lines and make the following settings:
Font (Font): Helvetica Neue
The size(Size): 15 px
Style (Style): Regular
Leading (Leading): 28 px
Tracking (Tracking): -10
Smoothing (Anti-aliasing): Sharp Sharp
Colour (Color): # 8d8c90

Repeat the above steps to add another text block with the requirements for the application.

Step 13. To somehow highlight the list of features of the application, you can use some tricks. Shift this text block 25px to the right.

Use the tool Ellipse (Ellipse Tool) with a diameter of 9 pix. and draw a circle with the color “bce086”.

Add the following layer styles for this circle:

Step 14. Duplicate these circles in the menu. Layer – create duplicate layer (Layer> Duplicate Layer) and place as in the screenshot below.

Step 15. Create another separator using the technique we used earlier.

Step 16. Now we need to add some useful links at the bottom. First we will create four text fields, side by side, which these links will contain.
Start by creating a text box that is about 160x40px in size. Add text to it and repeat 3 times.

Here is an example of text you can use:
Box 1: Follow @MyCompany on Twitter for news and updates.
Box 2: For help and support.
Box 3: Product Information.
Box 4: Copyright 2011 “My Company”, LLC.

Use these settings for the text:
Font (Font): Helvetica Neue
The size (Size): 12 px
Style (Style): Regular
Leading (Leading): 20 px
Smoothing (Anti-aliasing): Sharp Sharp
Colour (Color): # 5555552

You must have noticed that the text blocks are not aligned, do not worry, we will deal with this in the next step.

Step 17.
To fix our alignment problem, we will put the text blocks in a group called “Footer”.
First, the position of the first text field is 55 pixels from the left guide, and the last field touched the right guide.

Now select the four text layers in the folder. “Footer” , activate tool Move (Move Tool) and click Alignment centers vertically (Align vertical centers), and then click Horizontal alignment (Distribute horizontal centers).

Step 18. Now we can add some custom icons to denote our links. Choose a tool Ellipse (Ellipse Tool (U) and create a circle, 36px in diameter, place it next to the first text field. Change the color of this circle to “FFFFFF” (white). Now select Layer – Rasterize Layer (Layer- Rasterize Layer).

Add a Twitter icon to the created circle, which can be taken here.
Place this icon in our document, reduce its size to 28% in width and height and position it above the layer with the circle.

Then right-click on the Twitter layer thumbnail in the layers panel and select the option Highlight pixels (Select Pixels). Now select a layer with a circle in the layers panel and in the menu Editing click on Clear (Edit> Clear).
Twitter icon served its service, now it can be removed.
Finally, lower the opacity of the circle layer to 15%.

Step 19.

For the rest of the icons shown above, repeat Step 18 using other icons or use the standard custom Photoshop shapes.

Step 20.
And the final touch that will allow us to highlight an important part of the text in the generated links. To do this, we simply change the color of the text where we consider the information most important.
Can use color “83b546“.

Conclusion
That’s all! I hope you enjoyed this tutorial, and you have found some useful techniques that you can apply in your practice.

You can see this page here.

Author: Eric Alli

Like this post? Please share to your friends: