Академический Документы
Профессиональный Документы
Культура Документы
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.
Part 1: Create a Clean and Professional Web Design in Photoshop Part 2: Coding a Clean and Professional 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.
making the selection. Now click on the left ruler and drag a guide to the right of the marquee selection as shown in the image 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:
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 + ;
17 Create another rectangle from the Rectangle Tool (U) with the size of 960px by 360px. Put this rectangle at the distance of 40px from the top of the "header bg" layer and 0px from the left guide. Name this layer "header container". Preview below what we have done until now with the design.
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. For the title:
font: Arial, color: #ffffff, size: 25pt and anti-aliasing method option: Sharp
font: Arial, color: #a4a4a4, size: 12pt and anti-aliasing method option: None
In this web development tutorial, you will learn how to code a web page template from a Photoshop mock-up from a previous tutorial called "Create a Clean and Professional Web Design in Photoshop" using HTML/CSS. This is the second 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.
Part 1: Create a Clean and Professional Web Design in Photoshop Part 2: Coding a Clean and Professional Web Design
Final Result
Click on the preview below to see the live demo of the web design that youll be creating in this tutorial.
Download
You will need the Photoshop (PSD file) of Part 1 of this tutorial, download it from that tutorial. Also you can download all files including the examples used in this tutorial from the link below if you want to study it offline (or use it in a project).
Introduction
In this tutorial, well create a fixed-width web layout using some basic coding techniques. We will go through step-by-step from the top to bottom. So this means that we will start
from the the header, then content, and then the footer section. Preview the examples when they are available to make sure that you are following along.
images folder will contain all images used in the tutorial. index.html our site template. css folder will contain our stylesheet called styles.css
3 Open index.html and styles.css in your favorite text editor. Also, open the PSD file in Photoshop; its inside the clean-professional-weblayout zip file from Part 1. 4 Our file structure is set up now and we are ready to go. 5 Open the Photoshop file. Open the Info panel from Window > Info (shortcut key: F8). The Info panel gives useful information depending on the selected tool. Choose the Rectangular Marquee Tool (M) and set the options as shown below. After the options are set, click on the top left of the canvas (next to the logo) to make a selection.
6 Use Edit > Copy Merged (Ctrl + Shift + C) to copy the selected area. Create a new document and paste (Ctrl + V) the copied selection into the new document. Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as bg_body.jpg in the images folder. Use the same settings for saving all the files so that there is no issues with how they are rendered on a web page. I used the JPEG Very High preset but feel free to change these settings (you can probably get away with just JPEG High or PNG-8 to keep your web page CSS backgrounds as lightweight as possible). If you change the default settings, be sure to save it the same way every time to provide consistency in the images.
8 Open styles.css and add some basic style rules. Were going to take a shortcut here and use the Universal Selector margin/padding CSS reset to zero out all the elements margins and paddings. This works the majority of the time, but its better to invest some
time learning about more robust CSS Reset techniques which you can find here: Resetting Your Styles with CSS Reset. 9 Here is the style rule declaration for resetting the margins and paddings:
/* CSS Reset */ * { margin: 0; padding: 0; }
Lets preview how the background looks. In Example 1 below, you can see how background is implemented. Example 1: See the background in action.
12 Since our content area is 960px, well give #container a width of 960px and add a padding of 10px on the right and left. This will give us sufficient room on either side of the layout for scroll bars so that when the user minimizes the web browser, theres still a bit of padding on the left and right and our content is not right at the edges of the view port (making the content hard to read). Center it using the margin attribute.
#container { width: 960px; margin: 0 auto; padding: 0 10px; }
13 Lets slice up the other stuff, starting with the logo. Head over to the Photoshop file. Create a selection around the logo that is exactly 360px and 115px wide using the Rectangular Marquee Tool (M) as shown in the image below. Use Photoshop Guides (View > Show > Guides) to make this easier. 14 Copy Merge (Shift + Ctrl + C) and then paste the logo in a new document. Note: Its not necessary to draw a selection with the Fixed Size option from the Style option. Select Normal as the Style option and drag around the target to have a similar selection as below.
15 Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as logo.jpg in the images folder.
17 Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as phone_icon.jpg in the images folder.
20 First, lets style #header. We are going to set the position property to relative for #header so the phone iconwhich will be absolute-positionedpositions itself relative to the #header. Also give it a width of 960px or 100%. I am using 100% here.
#header { position:relative; width: 100%; }
21 We will work on the logo style first. We transform our <h1> element into a block element. Float it to the left. We use the logo we created earlier in Step 15 as the background, and finally indent the text to the left where it cant be seen to hide our text. This method of replacing text with a background image is called CSS Background Image Replacement.
#header h1 { display:block; float:left; width:360px; height:115px; background:url(../images/logo.jpg) no-repeat 0 0; text-indent:-9999px; }
22 To make the logo clickable, we also need the <a> element inside the <h1> element to be a block element, and give it the same width and height as <h1>.
#header h1 a { display: block; height: 100%; width: 100%; }
23 We will use the phone icon (phone_icon.jpg) we created in Step 17 as the background for #phone. Position it absolutely as mentioned before in Step 20. Well add paddings 5px from top and 50px from right, so the text inside #phone is aligned properly with the icon on the left.
#header #phone { background: url(../images/phone_icon.jpg) no-repeat right 0px; height: 47px; position: absolute; top: 41px; right: 0; text-align: right; padding: 5px 50px 0 0; }
Preview your work in a web browser. Check out Example 2 below to see where we are now. Example 2: Our header section which includes the logo and phone section is completed.
26 Just like with the logo, create a selection exactly 203px by 35px. Copy Merge (Shift + Ctrl + C) and then paste the hover background in a new document.
27 Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as hover.jpg in our images folder.
29 First we will clear the floated elements we have before #nav and set height and width of the #nav div.
#nav { clear: both; height: 35px; width: 100%; }
30 We will float <ul> element to the left so that it remains with the flow our our web page.
#nav ul { float: left; }
31 For the list items, well make them into block elements, then float them to the left so that they display side by side. Well also add 1px padding to list items at their right.
#nav ul li { display: block; float: left; height: 35px; list-style-type: none; padding: 0 1px 0 0; }
32 The image (hover.jpg) we created in a preceeding step will be used as the background for the <a> elements with x-position:left and also for <span> element with x-position: right. Well set text-transform to uppercase so that it is all in capital letters.
#nav ul li a { color: #3f3f3f; display: block; text-decoration: none; font-size: 12px; font-weight: bold; text-transform: uppercase; height: 100%; line-height: 35px; padding: 0 0 0 18px; } #nav li a span { display: block float: left; height: 100%; padding: 0 18px 0 0; }
33 Finally, for the hover and active states, we adjust the background property. This will show the "hover.jpg" when you hover on a menu item.
#nav li a:hover, #nav li.active a { background: url(../images/hover.jpg) no-repeat left; color: #fff; cursor: pointer; text-decoration: none; }
34 Here the <span> element shows the background image from the right side.
#nav li.active a span, #nav li a:hover span { background: url(../images/hover.jpg) no-repeat right; }
Preview your work in a web browser. Check out Example 3 below to see where we are. Hover over the menu items to see how our primary navigation works. Example 3: Our navigation section is completed.
36 Go to our Photoshop file and browse to the header layer group and then to the fp layer group. Ctrl + Click on the vector mask thumbnail (as shown below). You will get a selection around the big image.
37 Copy Merge (Shift + Ctrl + C) and then paste the image in a new document.
38 Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as fp-01.jpg in images folder. 39 Next well create the Quick Quote form background. With the Rectangular Marquee Tool (M), make a selection of 1px width and 340px height as shown below.
40 Copy Merge (Shift + Ctrl + C) and then paste the image in a new document. Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as form_bg.jpg in the images folder. 41 Select the Rectangular Marquee Tool (M) again and make a selection around the submit button as shown below.
42 Copy Merge (Shift + Ctrl + C) and then paste the image in a new document. Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as submit_btn.jpg inside the images folder.
<li class="ss1"><a href="">Heading for Project</a></li> </ul> <form id="quote" action="#" method="post"> <h2>Quick Quote</h2> <fieldset> <label>Your Full Name:</label> <input type="text" name="Full Name" /> <label>Your Email:</label> <input type="text" name="Email" /> <label>What Are You Looking For:</label> <textarea cols="35" rows="2"></textarea> <input class="btn" type="image" src="images/submit_btn.jpg"/> </fieldset> </form> </div>
47 We will convert the list item into a block element and float it to the left as well. Then we set the width to 630px.
#featured ul li { float: left; list-style-type: none; display: block; width: 630px; }
48 Then, just like the logo, we will display the <a> element as a block element and use text-indent to hide the text.
#featured ul li a { display: block; height: 340px;
text-indent: -9999px;
50 Next we will style our <form> element. Add the "form_bg.jpg" background we created some steps back and float it to the right.
form#quote { background: url(../images/form_bg.jpg) repeat-x; margin: 0px; padding: 20px; float: right; width: 260px; height: 300px; }
51 Style the <h2> element in the form. Add a bottom margin of 18px.
form#quote h2 { font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; margin-bottom: 18px; }
52 Well make the <label> element into block elements and float them to the left. Set their width to 100%.
form#quote label { font-weight: bold; color: #fff; font-size: 12px; display: block; float: left; width: 100%; }
53 Next well style our <input> and <textarea> elements. Well add height to the <textarea> element separately so that it doesnt affect our <input> elements. We will also use some CSS3 properties here for rounded corners.
form#quote input, form#quote textarea { background-color: #fff; border:1px solid #ddd; color: #666; float: left; font: 12px Arial, Helvetica, sans-serif; margin: 5px 0 8px; padding: 8px; width: 240px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } form#quote textarea { height: 45px; }
54 Lastly for our form, we will add the following CSS attributes for the image button named .btn. Well hide the border by giving the border property a value of none.
form#quote input.btn { width: auto; border: none; padding: 0; margin-top: 0; }
You can find a big list of CSS Rounded Corners Tutorials here if you want to learn more about this in detail. CSS3 properties used here are not supported in Internet Explorer, but still, it looks decent in Internet Explorer. See the difference below between Firefox and Internet Explorer.
The Featured section is completed. Checkout the Example 4 below to see how it looks like in your browser. Example 4: Our featured section is completed.
56 Copy Merge (Shift + Ctrl + C) and then paste the image in a new document. Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as col_bg.jpg in our images folder.
margin: 80px 0 0; clear: both; font-size: 12px; color: #767676; } #content .col { float: left; width: 258px; background: url(../images/col_bg.jpg) repeat-x; height: 153px; border: 1px solid #CCC; padding: 20px; margin-right: 30px; } #content .col h2 { font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #b47825;text-decoration: none; margin-bottom: 18px; } #content .col h2 span { color: #2f2f2f; } #content .col img { border: solid 1px #d8d8d8; padding: 2px; float: right; margin-left: 10px; margin-bottom: 10px; } #content .col p { margin-bottom: 20px; line-height: 17px; } #content .col a.readmore { font-weight: bold; color: #252525; text-decoration: underline; } #content .col a:hover.readmore { text-decoration: none; } #content .col.noMargin { margin: 0; } #content .col.fr { margin: 0; float: right; } .clear { clear: both; }
60 Preview your work in your web browser. It should look like Example 5. Example 5: Content section is completed.
62 Copy Merge (Shift + Ctrl + C) and then paste the image in a new document. Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as footer_bg.jpg in our images folder. 63 Select the Rectangular Marquee Tool (M) again and make a selection around the Subscribe button as shown below.
64 Copy Merge (Shift + Ctrl + C) and then paste the image in a new document. Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as subscribe_btn.jpg in our images folder.
67 Set #footerContainer as 960px wide to align the content inside of this div with the rest of the page. We give this div a relative position so that we can absolutely-position the newsletter form on the right side.
#footerContainer { margin: 0px auto 0; width: 960px; font-size: 12px; color: #ddd; padding-top: 20px; position: relative; }
69 Well have #newsletter absolutely positioned on the right and 20px from top. For <input> fields, we will use the same styles we used above for the Quick Quote form input fields and set their width to 190px.
form#newsletter { position: absolute; right: 0; top: 20px;
width: 300px; } form#newsletter label { font-weight: bold; color: #fff; } form#newsletter input { background-color: #fff; border:1px solid #ddd; color: #666; float: left; font: 12px Arial, Helvetica, sans-serif; margin: 5px 0 0; padding: 8px; width: 190px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
70 And lastly, well hide the border that is around the image button by giving the border attribute a value of none.
form#newsletter input.btn { width: auto; border: none; padding: 0; margin-left: 3px; }
Congratulations, you have done it! Thank you for sticking through this tutorial I hope you have enjoyed this tutorial and learned a few tips and tricks on converting a design mockup to an HTML/CSS template.
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).
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).
Font: Trebuchet MS, style: Normal, size: 24pt, anti-aliasing method: Sharp
Font: Arial, style: Normal, size: 12pt, anti-aliasing method: None, color: #767676
Font: Arial, style: Bold, size: 13pt, anti-aliasing method: None, color: #252525, Underline
33 We will add a square box next to the description now. Select the Rectangle Tool (U) and color #ffffff, hold down the Shift key to maintain the proportions and create a square with the size 88px by 88px. Move this square at a distance of 10px from the left of rectangle ("c01"). Name this layer "border". Double-click the layer to open the Layer Style dialog window, and add a Stroke layer style with the following settings:
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.)
39Select the Horizontal Type Tool (T) and add copyright text and footer links text on the left using the font Arial, size of 12pt and a grey color (#dddddd).
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!