Week 8: From PSD to HTML
Student Showcase
We will take a look at any of your new work which is ready to share.
- CSS Framework
Exercise: Convert a Photoshop Mockup into HTML and CSS
This week, we will look at the process of taking a layout in Photoshop and converting it into web-standards HTML and CSS code.
Download
Click for a larger version.
What's Included
You may or may not need these assets as you work. You will find this in the ZIP file linked above.
The Photoshop mockup:
Display font ("Heartbreaker"):
Original high-resolution images:
Social media icons in vector format:
Preparing Your Photoshop Mockups Properly
It's important that when designing a layout in Photoshop for eventual use in HTML and CSS, that we keep some healthy design habits. Below I describe what I do to make my coding easier down the road.
- Use a grid. The mockup below uses a 12-column, 960px grid (you can find more Photoshop web grids at robbiemanson.com.) Keep things aligned vertically and horizontally. A grid not only make the page look its best, it makes coding easier too.
- Keep in mind the contraints of working with HTML and CSS. There are a lot fewer constraints than there were when I first started, but they are still there. Everything's still based on boxes to some degree.
- Always maintain an orderly Layers panel. As much as possible, keep individual pieces in their own named layers and then organize the layers into groups/folders.
- To the extent that you know how to do so, use Smart Objects, layer masks, adjustment layers, and live text so that you are not destroying pixel data.
- Hang on to all of the original files for fonts, photos, and graphics so that you can prepare them for the web (vs. mockup).
- In the old days, I would use Photoshop to slice up the layout and generate the images and code in a more automated way. This just isn't a good idea any more. The code created by Photoshop is very inflexible and can lead to many headaches down the road. Take the extra time up front to do it right.
Wireframing the Mockup
The first thing we need to do is decide where the major page sections are and sketch up a wireframe. This will help us determine how our main divs need to be arranged and named.
Here was my first solution:
The problem is that a few graphics at the top are overlapping. I actually designed this so that there would be dual backgrounds: one would repeat across the X axis (the striped fabric,) and one would not repeat (the logo, the dress-up girl, and the ribbon behind the main menu.) Once that is taken into consideration, the content blocks look a bit different:
Then I subdivided the main page content areas into nested boxes:
Now I have an idea of how the markup should be organized:
Getting the Site Set Up
Here's where you come in. Take what I have developed so far, and begin the HTML and CSS.
- Create a new site folder called toddler-site. Create an images folder inside it.
- Create a site definition for this folder in Dreamweaver.
- Create a new HTML5 file and save it as index.html in the toddler-site folder.
- Create a new CSS file and save it as styles.css in the toddler-site folder.
- Link the index.html file to the styles.css file (hint: use the Attach Style Sheet button in the CSS Styles panel.)
- Change the page title to Happy Toddler Workshop - Sacramento, California.
- Between the <body> tags in index.html, create the following <div> structure (hint: this goes fastest if you use Insert > Layout Object > Div Tag and put the ID names in the dialog box):
- In styles.css, put in placeholders for some basic HTML elements and for the IDs we established.
Your layout in Dreamweaver's going to be super bland for the time being, but that's because we haven't put any content or presentation in place, just markup.
Let's start making things happen.
Introducing Some Style
The first thing I like to do is some basic styling for the body and wrapper.
- In Photoshop, save toddler-workshop-site.psd as toddler-workshop-body-bkdg.psd. This is so that we don't accidentally ruin our original mockup—we are about the do some major cropping and editing.
- Go to the View menu and uncheck Extras. This hides the guides.
- Hide all layers and folders except for the fabric header folder.
- Crop the document so that it it tight to the fabric header.
- We want the pattern to repeat without seams, so we have to do a little problem solving. The fabric pattern repeats at a different rate than the zig-zag, since I got the image from one place and created the zig-zag myself in Photoshop. Let's find a place we can crop this to where this isn't an issue: crop where there's a zig-zag pointing down within a green stripe, on both the left and right.
- Save the image as body-background.png in toddler-site/images (hint: use File > Save for Web & Devices.) Save and close toddler-workshop-body-bkdg.psd.
- Back in Dreamweaver, establish body-background.png as the background image for your body element, repeating only along to X axis and affixed to the top of the browser window. While we're here, let's remove margins and padding on the body element.
- Now let's find out how wide our mockup is, so we can assign a width to our wrapper. In the original Photoshop mockup file, go to Image > Image Size. We can see that our mockup is 1020px wide.
- In Dreamweaver, set the width for #wrapper and center it on the page.
- Unfortunately, this centering technique does not work in older versions of Internet Explorer. To fix this, we center text within the body selector and then reverse it by left-aligning text within the #wrapper selector (hint: text-align can be found in the Block category of the CSS Definition box).
- Save all your files. View index.html in a browser. It should resemble this if your browser window is open wider than 1020px.
Implement the Second Background
- Save the Photoshop file as a new file named wrapper-background.psd.
- Hide visiblity of all the Photoshop layers except for:
- toddler girl layer
- header text folder
- rule copy, rule, and bar inside the menu folder
- Crop the image so that it stays as wide, but crops out the blank are below the girl's feet.
- Save the resulting Photoshop image as a PNG-24 called wrapper-background.png in the images folder. We need it to be a PNG-24 so that it is transparent and will show the fabric background without having jagy edges.
- Define this image as the background for your wrapper with no repeat and aligned to the top.
- Save all and view the page in a browser. You won't see the entire image yet in the browser, but more will appear as content is added.
- Save and close wrapper-background.psd, and return to toddler-workshop-site.psd.
Arrange the Main Divs
Now let's arrange the three main content <div>s so that they have the correct width, margins, paddings, and positioning
- Hide the guides: View > Show > Guides should be unchecked.
- Now we need to start measuring. Locate the Ruler tool in the flyout menu for the Eyedropper tool. You use the ruler tool to measure distances within Photoshop document.
- Turn on the rulers: View > Rulers. Right-click inside a ruler and select Pixels as the unit of measurement.
- Turn all the layers back on except for 12 Col Grid.
- Measure the distance from the top of the mockup to the top of the ribbon containing the main menu:
- Zoom in so you can see this area well.
- With the Ruler tool, click at the top of the mockup image and hold the mouse button.
- Pressing the Shift key to constrain your ruler vertically, drag down to the top edge of the ribbon.
- Let go of the mouse button and then the Shift key.
- With the Ruler tool still selected, look up in the Control panel for the height value. Mine says 213px.
- Now measure these widths :
- from the left edge of the mockup to the left edge of the first letter in the main menu
- from the left edge of the first letter to the right edge of the last letter in the main menu.
- I got 41 and 618. Our first main content div, #content, needs to be 618 pixels wide with a left padding of 41px. It also needs to be 213px down from the top of the window.
- Save all and view in a browser.
- Give the same padding-left to #featured and #footer. Use the same distance for a padding-right for each, to balance them out within the page layout.
Arrange the Interior Divs
- Float the following divs left:
- #session1, #session2, #session3 { float: left; }
- #copyright, #social, #menu { float: left; }
- Clear left on #footer.
- Now because we floated some elements, the toddler photo is getting cut off at the bottom of the #content div. We need to add overflow: hidden to #wrapper. Then the toddler extends down to the bottom of the textual content in the other divs.
Populate and Style the Main Menu
We need to do more measuring. You now know how to measure pixel distances with the Ruler tool. To speed things along for this tutorial, I will simply tell you the measurements I came up with from this point on.
- Let's start with the main menu in #nav. We also need to make note of the font selection.
- Arial Regular 22px #6b6a6a
- Upper space between ribbon edge and letters: 13px
- Lower space between ribbon edge and letters: 13px
- But that doesn't look quite right in the browser, so adjust the sizing by eye.
- Go back to your markup in index.html and replace the placeholder text in the #nav div with the following unordered list:
- The list has a lot to fix now. Let's put in the standard CSS for arranging an unordered list into a horizontal menu.
- I estimate the distance between the menu items and come up with 30 pixels. I reduce that a bit because Internet Explorer tends to "fatten" fonts. Set 28px as the margin-right on the <li>s.
- There is a problem in that the last menu item hasn't got enough room left in the #nav div if it has a margin-right attached to it. So we will create a class called .last, give it a zero margin-right, and apply that class to the <li> containing the item ABOUT.
- We need the menu items to actually have links, so generate anchor tags for each with an href of "#".
- Get rid of the ugly underlines and blue color in the CSS. This needs to be done for the anchor tag:
- Implement a hover color for the text.
Populate and Style the Promo Copy
- Copy all of the text inside the Body Copy layer group in the Photoshop file and paste in into four separate paragraphs inside the promo-copy div in index.html.
- Turn the first line into an <h1> and the second one into an <h2>.
- After studying the font settings and spacing in Photoshop, I create the following CSS. Try adding one declaration at a time to see what it does in the browser:
- Wrap the first sentence of the first paragraph in a strong element.
- Put a little extra padding at the bottom of the #promo-copy div.
- Save all and test in the browser.
Populate and Style the Call-to-Action
- Save the Photoshop file as a new file named register-button.psd.
- Crop the file tightly to the edges of the image of the Register button (include the drop shadow.)
- Save the image as a PNG named register-button.png in your images folder.
- Find the REGISTER TODAY text layer in the Register Button layer group, and change the text color to #808660.
- Save the altered image as a PNG named register-hover.png in your images folder.
- The register button sits in the padding of the #call-to-action div, so we can't simply place the image there with an image tag. We could position the register button as a background image inside the #content div in its bottom-left corner, but that would give us nothing to click on. We need to create a new div that is layered above the current divs, using the z-index property. Start by nesting a new div with an id of register inside the #call-to-action div in index.html.
- Put an anchor element inside the register div which links to the # placeholder.
- Most of the time, we don't want to set a height for a div because it should expand to the height of its content. However in this case, the register button that we want to appear in its own div layered on top of the #call-to-action div is a good deal taller than the content that will appear within the #call-to-action div. We also need to move the text content over to the right.
- If we check out where our new register div currently is placed, we can see it here as a thick blue line in the Dreamweaver design view. We'll need to move it over and open it up.
- Set the z-index of the register div to 2 (which layers it above the other content), add absolute positioning (which makes the call-to-action text block ignore it and stay where it's supposed to be), and move it back over to the left:
- Use a compound selector to size the anchor tag within the #register div and give it the background image we created (the register button):
- Finally, have it swap the background image when someone mouses over the register button image:
- Copy the text content for the call-to-action from the toddler-workshop-site.psd file into the #call-to-action div below the #register div. The first line should be in an h2 element, and the second in a p element.
- Style the text.
- One last thing to fix: the superscript for the "th" in "15th" and the "00" in "$7500". Add a span element with a class called superscript within each of the lines of text.
- Style the .superscript class.
Populate and Style the Featured Sessions
- Copy the Featured Sessions text over from the main Photoshop file into index.html. Mark it up with h2, h3, and p elements.
- Do some basic type styling for this section.
- Now get the individual session boxes arranged.
- Now let's do the headers with their pink striped backgrounds. In the main Photoshop file, find the pink pattern layer inside the session 1 layer group (which is in turn inside the sessions layer group.
- Double-click on the layer thumbnail, which opens the Smart Object.
- Save this image out as a PNG file named session-header-background.png.
- Add a bit more styling to the h3 elements in the #featured div. The last two lines add the white edging on the bottom-right of the text, giving it a bit of dimension.
- We're going to use the three photos as background images inside the p elements. Zoom way in to the photo of the screaming girl. Crop the image so that your crop box is just inside the borders left and bottom, just below the pink striped background, and captured the entire photo to the right.
- Save the cropped image as a high-quality JPG named toddler1.jpg in your images folder. Back in Photoshop, undo the crop in the History panel.
- Save the other two images by cropping in the same way. Save them as toddler2.jpg and toddler3.jpg in your images folder. Then return to the uncropped state of the Photoshop file.
- Use a combination of padding and background image to arrange the text inside the p elements in each session div.
- Crop in tight to the More button, but make sure to include the drop shadow. Save the image as a PNG-24 named more.png. Returned to the uncropped state of the Photoshop file.
- Insert the More button at the end of each paragraph element within the session boxes in index.html. Wrap each image element with an anchor element linking to the # placeholder. Put each anchor element inside a span element, so that we can right-align the button within it.
- Style the span elements within the #feature div.
- Remove the border from images inside links so that the ugly blue borders don't appear in Internet Explorer.
- Finally, move the #featured div down a bit.
Populate and Style the Footer
- Copy the copyright text from the Photoshop mockup into the #copyright div in index.html. Be sure to use the character entity for the copyright symbol.
- Put the four menu items from the footer into an unordered list within the #menu div. Make each into a link with the # placeholder.
- Create additional styling for the #footer div and its nested divs.
- Back in Photoshop, zoom in to a section of the ribbon in the footer that doesn't have content over it. Crop a section of it (without the white above and below.) Save the image as a PNG-24 named footer-background.png and return to the uncropped state of the Photoshop file.
- Place this image as the background for the footer with repeat on the x axis only. Add overflow: hidden, put in some padding for the top and bottom. Combine this padding with the padding already established for left and right.
- In the Photoshop file, double-click the layer thumbnail on the Facebook layer, and save the Facebook logo image as a 24x24 PNG-24 file named social-facebook.png in your images folder. Do the same with the Twitter logo but save it as social-twitter.png.
- Place these images into the #social div in index.html, each wrapped in an anchor element linking to #.
- Give them a little space in the CSS.
- Move the text on the left and right of these icons down a bit so that the footer content is all vertically aligned in the middle of the ribbon.
- Save all and test in multiple browsers.
Portal 
Upload the following by midnight of the first class day of next week:
| Week | Assignment | File Name | Points |
|---|---|---|---|
| 8 | Toddler Site | toddler-site.zip | 55 |
Assignment Details
Toddler Site
Complete the activity described to the left under "Exercise: Convert a Photoshop Mockup into HTML and CSS." ZIP up the toddler-site folder.