Академический Документы
Профессиональный Документы
Культура Документы
layout using standards-based HTML and CSS. Along the way, you will witness how to use CSS Sprites and CSS Text Image Replacement. This is the second part of a tutorial series that shows you how to create the web layout in Photoshop and then how to code the Photoshop design. If you havent already, please check out the first part of the series called: "Create a Dark and Sleek Web Layout Using Photoshop".
Final Result
Click on the following image to preview the working demo of the design we will be creating together.
Download
You can download the source file archive of this tutorial which contains the Photoshop file well be using for our web graphics, and working examples of the web design. y dark_and_sleek_layout.zip (0.83MB)
3 Make sure to turn on Guides to help make selection of items in the PSD easier by
going to View > Show > Guides and making sure that there is a check mark beside Guides. To toggle the Guides on and off easily while workin, press Ctrl + ;.
5 Place the copied selection in a new document using File > New (Ctrl + N). Save
this as a JPG file by using File > Save for Web (Alt + Shift + Ctrl + S) as bodybg.jpginside the images folder. Note: From now on, we will be saving all objects as JPG files for consistency. You may choose a different file format such as PNG or GIF to optimize your images for page response times, but for the purpose of simplicity, we will be saving all of our web layout graphics in the same format: JPG with the Preset set to JPEG High.
7 Making sure that you are on the highest layer, Edit > Copy Merged (Shift + Ctrl +
C), and then place the copied selection in a new document, File > New (Ctrl + N). Save this for the web as logo.jpg inside the images folder.
Highlight for this tutorial, but feel free to use any of the other colors such as the White Highlight orBlue Highlight (this will make sense in just a bit).
8 Use the Rectangular Marquee Tool (M) to make a 565px by 121px selection
exactly like the following figure.
9 Making sure you are on the highest layer, Edit > Copy Merged, create a new
document, File > New (Ctrl + N), and paste the copied selection on the new document.
10 Switch over to the new document that you pasted the navigation to (in step 9).
We will make the canvas bigger, doubling its height, so that we can accommodate the Orange Highlight version of the navigation. To expand the canvas, go to Image > Canvas Size (Alt + Ctrl + C) to open up the Canvas Size dialog box. In the Canvas Size dialog box, enter 242px for the Height value and click on the top middle anchor so that the canvas expands at the bottom.
Your new document should now look like the following figure with a space at the bottom for the Orange Highlight version of the navigation:
12 The selection that you did in step 9 should still be active, but if you accidentally
deselected your selection, dont worry, use Edit > Reselect (Shift + Ctrl + D) to get it back. Edit > Copy Merged with the highest layer active, and paste the copied selection in the document that we created in Step 10.
13 Move the Orange highlight to the bottom of the canvas using the Move Tool (V)
and your arrow keys.
14 Save the document for the web (File > Save for the web) inside the images
folder and name it nav-sprite.jpg.
16 Make a 950px by 304px selection using the Rectangular Marquee Tool (M)
exactly like the following figure.
17 With the highest layer active, Edit > Copy Merged (Shift + Ctrl + C), create a
new document: File > New (Ctrl + N), and paste the copied selection onto the new document. Save this as bg-featured.jpg.
18 Make a selection around the "About Us" text using the Rectangular Marquee Tool
(M); the size of this selection should be 122px by 45px. Refer to the following figure to see how to make the selection.
19 Edit > Copy Merged (Ctrl + Shift + C) the selection, File > New (Ctrl + N), and
paste the selection inside the document. Save the document as textabout.jpginside the images folder.
21 Edit > Copy Merged (Ctrl + Shift + C) the selection, File > New (Ctrl + N) to
create a new document and paste the copied selection inside the new document. Save the document as text-featured.jpg inside the images folder.
22 To start, turn off the visibility of the Featured Image layer inside the
FeaturedWork > Featured Work and FeaturedWork > Featured Work 2 folders in the Layer palette so that were left with just the background only.
23 Make a selection around one of the Featured Works boxes using the Rectangular
Marquee Tool (M); it should be 475px by 166px in dimension (use the following figure as a reference).
24 Edit > Copy Merged (Ctrl + Shift + C), create a new document using File > New
(Ctrl + N), and paste the copied selection in the new document. Save this document as featured-work-bg.jpg. Were now done with Photoshop, so its time to move onto HTML and CSS!
26 First, we should reset all of our styles. There are many methods available for CSS
Reset and you should find one that is robust and fully-featured. Six Revisions uses a modified hybrid of Eric Meyers CSS Reset and YUI Reset CSS. You can read more about CSS Reset in an article I wrote called "Resetting Your Styles with CSS Reset". The following technique we will use for CSS Reset is the universal selector margin/padding reset: a method that does the job, but isnt the ideal method of resetting your styles. For the purpose of brevity, I chose to use this for this tutorial
but I encourage you to explore proper means of resetting your styles (again check the article I wrote above to learn more about the topic). In styles.css, use the following style rule.
* { margin:0; padding:0; }
27 With that out of the way, lets lay out our HTML. Our HTML is as follows:
<body> <div id="container"> <!-- #masthead --> <div id="masthead"> <h1><a href="#">Portfolio Web Design</a></h1> <ul> <li id="home"><a href="">Home</a></li> <li id="portfolio"><a href="#">Portfolio</a></li> <li id="services"><a href="#">Services</a></li> <li id="contact"><a href="#">Contact</a></li> </ul> </div> <!-- #featured-area --> <div id="featured-area"> <div id="description"> <p>This is a catchy tagline for your website and your services.</p> </div> <div id="preview"></div> </div> <!-- #main-content" -->
<div id="main-content"> <div id="left-column"> <h2 id="about-us">About Us</h2> <!-- insert about us content --> </div> <div id="right-column"> <h2 id="featured-work">Featured Work</h2> <div class="featured"> <div class="content">
<!-- can contain images or text --> </div> </div> </div> </div> </div> <!-- #footer --> <div id="footer"> <p>©2009 Portfolio Web Design. All Rights Reserved.</p> </div> </body>
We will talk about each part in more detail in the following section.
30 The logo will contain our sites title, "Portfolio Web Design". We will make this <h1>element a block element, float it to the left so it displays besides the main
navigation, give it the proper size dimensions, and then indent the text to the very far left where you cant see it, effectively hiding the text.
<h1><a href="#">Portfolio Web Design</a></h1> #masthead h1 { display:block; float:left; width:269px; height:121px; text-indent:-9999px; }
31 Next, we style its child <a> element which will contain the logo as its background.
We give it the same width and height as its parent so that the entire area is clickable, convert it to a block element, and also give it an outline property of none so that when you click on the logo, you dont see gray borders around it that extends to the left of the page.
33 Now we style the list items: we float the list items to the left so they display side
by side, make them into block elements, and since we already know that their heights are the same, we declare this here. Since their widths are different, we need to give them their own IDs so that we can specify their widths (as well as their background for the mouse over effect).
#masthead ul li { display:block; height:121px; float:left; }
34 Since the navigation menus widths are different, we declare style rules for each
of them with the correct dimensions.
35 For the child <a> elements inside the list items, we display them as block
elements with the same height and width as their parents so that the entire area is clickable. Then we also hide the text way to the left using the text-indent property and remove the gray outline that appears when they are clicked by setting the outlineproperty to "none".
#masthead ul li a { display:block; width:100%; height:100%; text-indent:-9999px; outline:none; }
36 Time to deal with the mouse over effect. We set the appropriate background
position for the a:hover style of each link. When done correctly, hovering over a menu item will change the background color to orange.
li#home a:hover { background:url(images/nav-sprite.jpg) no-repeat 0 -121px; } li#portfolio a:hover { background:url(images/nav-sprite.jpg) no-repeat -115px -121px; } li#services a:hover {
background:url(images/nav-sprite.jpg) no-repeat -275px -121px; } li#contact a:hover { background:url(images/nav-sprite.jpg) no-repeat -419px -121px; }
37 Since the masthead is floated to the left, its best to clear the float of#featuredarea. We give it a fixed height so that it extends the full height of the background regardless of how short the content is, and then set the background of#featuredarea to bg-featured.jpg.
#featured-area { clear:both; height:304px; background:url(images/bg-featured.jpg) no-repeat 0 0; }
38 Next we give #preview and #description margins to give them the proper
layout alignment, and set their widths, as well as float them so that they display side by side.
#description { width:455px; margin:55px 0 55px 20px; float:left; } #preview { width:445px; margin:55px 20px 55px 0; float:right; }
39 We style the paragraph inside #description so that its large and displays as
white color.
#description p { font:bold 30px/32px "Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#fff; }
text-indent:-9999px; background:url(images/text-about.jpg) no-repeat 0 0; } h2#featured-work { display:block; width:100%; height:45px; text-indent:-9999px; background: url(images/text-featured.jpg) no-repeat 0 0; clear:both; }
The Footer
44 The footer section is very simple, it has a width of 100% so that its background spans the entire width of the page. Inside #footer div, we use a blockdisplayed <p>element that is the same width as #container, and use its margin
property to center it on the design.
#footer { clear:both; background-color:#333; } #footer p { margin:0 auto; padding:0; width:950px; color:#ccc; height:50px; line-height:50px; }
Finished!
If you followed through the tutorial, you should have something that looks like the following preview (click on the image below to go to the live demo page).
Questions?
If you find anything on this tutorial confusing, please leave a comment and well help you to the best of our abilities. If you spot any mistakes or places where instructions could be better, please do leave us a note as well.
Related Content
y y y Coding a Clean Web 2.0 Style Web Design from Photoshop Create a Slick and Accessible Slideshow Using jQuery Using XAMPP for Local WordPress Theme Development