Professional Documents
Culture Documents
PSD Tutorial Linked 25
PSD Tutorial Linked 25
PSD Tutorial Linked 25
In this Photoshop web design tutorial we are going to design a smashing, clean, and professional
website layout in Photoshop. The layout we are doing in this tutorial can be used as personal or
corporate website design.
Update: This is the first part of a two-part series that will teach you how to create the layout in
Photoshop, and then how to convert it to a standards-compliant (X)HTML web design.
Final Preview
Have a look at the layout that well be creating in this tutorial. You can see the final preview of the
image below or click here for a full size version.
Prepare your Photoshop document
1 Create a new document in Photoshop (Ctrl/Cmd + N) using the settings from the following image.
Set the units and rulers settings
2 Make sure that you are working in pixel units, which is the standard fixed unit for web design. Set up
the following settings for your Rulers from the Preferences dialog window (Ctrl/Cmd + K); click on
Units & Rulers and ensure that you have everything set as shown in the figure below.
4 Move this selection on the right edge of the canvas. Assign another guide to the left side of the
selection.
Your canvas now should look like this:
Creating the logo
5 Now we are going to create the logo for our website. The logo is going to be very simple and it will
have a color gradient effect. Create a new group (Layer > New > Group) and name it "logo".
6 Select the Horizontal Type Tool (T) and type "SMASHING" (or the name of your website) in capital
letters.
7 Then in the Character panel, set the font to Arial, the style to Bold and the size to 42pt. Also set the
anti-aliasing method option to Sharp and use the color #101112. You can also set these options in the
Options bar when the Type Tool is the active tool.
8 Double-click to open the Layer Style dialog box. Select Gradient Overlay, click the Gradient Editor
and use the settings as shown below.
9 Put the "SMASHING" type layer at the distance of 35px from top and 0px from left guide. You can
do this accurately using the Move Tool (V) and your arrow keys. Duplicate this type layer (Layer >
Duplicate Layer). Move the duplicated layer right next to the "SMASHING" word and edit the text to
"Dzine". Repeat Steps 6, 7, 8 but use different gradient colors (Left color stop: #b27625, Right color
stop: #e5ad27) for the word "Dzine".
10 Select the Horizontal Type Tool (T) and add a tag line under the logo with following settings.
11 The final logo should look like the image below. To activate/deactivate the guides, go to View >
Show > Grid or use the shortcut Ctrl/Cmd + ;
19 Open an image in Photoshop to place here as your featured project. Go to Select > All (Ctrl/Cmd +
A), then Edit > Copy (Ctrl/Cmd + C). Come back to the our web design. Create a new layer above the
"fp container" layer and go to Edit > Paste (Ctrl/Cmd + V) to paste in your featured project image.
Rename this layer to "fp image". Right-click the "fp image" layer and select Create Clipping Mask.
Now the image is visible only inside the rectangle ("fp container"). Make adjustments so that your
featured project image is similar to the one shown below.
20 Go to Edit > Transform > Scale (Ctrl/Cmd + T). From the Options bar, click in the rotation box and
type -4 and press enter twice to adjust the angle. Stay on the same layer ("fp image"), and select
Luminosity as the blending mode of this layer.
21 Next we are going to create the title and description bar for the featured project image. Select the
Rectangle Tool (U) and create a rectangle shape with the size of 630px by 90px using color #161718.
Change opacity of this layer to 90% and name it "title bg". Place this rectangle as shown in the image
below.
22 Create another rectangle with the size of 630px by 1px using color #9c9c9c and name it "title
horizontal line". Place this rectangle on the top edge of the contents of the "title bg" layer.
23 Add a title and description inside the rectangle we created in Step 21, using the following settings
for title and description.
26 Select the Horizontal Type Tool (T). Write "Quick Quote" inside "qq container" at the distance of
20px from the top and left edges of the containing box. Set the font family to Trebuchet MS (or a web-
safe font of your preference) with the color of white (#ffffff) and anti-aliasing method option set to
Sharp. We are going use the Rounded Rectangle Tool (U) to create three form fields. Select the
Rounded Rectangle Tool (U) and set the radius to 3px. Then create two rounded rectangles with the
size 260px by 35px using the color of white (#ffffff). Then name the shape layers as "field1" and
"field2" respectively. Create the third rounded rectangle with the size of 260px by 75px using a white
color (#ffffff) and name it "field3". Select the Horizontal Type Tool (T) and create labels for each form
field.
27 Select the Rounded Rectangle Tool (U) and create a box of 80px by 35px and name it "submit
btn".
28 Double-click the layer to open the Layer Styles dialog window and tick the Gradient Overlay
checkbox from left. Click the Gradient Editor and change colors of the gradient as shown below.
29 Select the Horizontal Type Tool (T) and type "Submit" using the font Arial, style Bold and size at
13pt. Select both layers in the Layers panel ("submit btn" and "Submit text").
30 Choose the Move Tool (V) from the Tools panel and click Align vertical centers and Align
horizontal centers from the Options bar. (Alternatively, you can get the same result by going to Layer
> Align > Vertical Centers and Layer > Align > Horizontal Centers).
Creating the main content area
31 Create a new group and name it "content". Select the Rectangle Tool (U). Create a rectangle of
300px by 175px and name it "c01". Place this layer 30px below the header and 0px from the left guide.
Double-click the layer and use the settings from the following image.
32 We are going to add content to this box now. Select the Horizontal Type Tool (T) and add the text,
"About SmashingDzine". Make a selection of the "About" word using the Horizontal Type Tool (T),
and then change its color to #b47825. Then make a selection of the "Smashing" word, and then change
the color to #2f2f2f. Add a little description and a link text beneath the title. The following options
were used for the title, description and link text. (You can adjust these options as needed).
34 Create another box with the size of 82px by 82px and place it in the center of the "border" layer.
Name this layer "box" and change the color of this square to #d5d5d5. Select all layers in this group
("content" group), go to Layer > New > Group from Layers (Ctrl/Cmd + G) and rename this new
group "about".
Note: The inside grey square box is a place holder for an image and can be replaced with any image of
your choosing.
35 Duplicate the "about" group (Right-click on the group and select Duplicate Group) and name it
"services". Right-click on the "services" group and select Duplicate Group again and name it
"portfolio". We have three groups now ("about", "services", and "portfolio"). Move the last group
("portfolio") to the right guide as shown below.
36 Select all three groups in the Layers panel, and then go to Layer > Distribute > Horizontal Centers
to space them out equally. Click here to see the full size image of the following image.
37 Change the titles for the "services" group (center) and "portfolio" group (right) as shown below.
(You can change these titles according to your requirement.)
40 We are going to add the email subscription section on the right. Create a new group inside the
"footer" group and name it "subscribe". Select the Rounded Rectangle Tool (U) and create a rectangle
of 85px by 35px. Name this layer "subscribe btn".
41 Repeat Step 26 for adding the form fields and labels.
42 Select the Horizontal Type Tool (T) and type "Subscribe" using the font Arial, style set to Bold and
size at 13pt. Select both layers ("subscribe btn" and "Subscribe text").
43 Repeat Step 28 for creating the subscribe button.
44 Select the Rounded Rectangle Tool (U) and set the radius to 3px. Create a rounded rectangle with
the size 210px by 35px using a white color (#ffffff) and name this shape layer as "email field". Add a
text line above "email field".
Final Result
OK, thats it and we are done. Here is the final result. Click on the image below to see the full size
layout.
Thanks for following along with my tutorial. I hope you all enjoyed and learned something new from
this tutorial. Kindly leave your comments below and share your thoughts and opinions, I would love
to hear them. You can also share this design tutorial to your friends if you think it could be helpful to
them!