GWDA223 Intermediate Web Page Scripting :: Art Institute

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

Toddler Workshop Mockup and Assets

instructor example of workshop site home page
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:
toddler workshop mockup

Display font ("Heartbreaker"):
display fonts for use in toddler workshop site

Original high-resolution images:
images for use in toddler workshop website

Social media icons in vector format:
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.

workshop site example gridded

  • 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.

workshop site example layer panel

  • 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:

toddler workshop wireframe 1

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:

toddler workshop wireframe 2

Then I subdivided the main page content areas into nested boxes:

toddler workshop wireframe 3

Now I have an idea of how the markup should be organized:

toddler workshop initial markup plan

Getting the Site Set Up

Here's where you come in. Take what I have developed so far, and begin the HTML and CSS.

  1. Create a new site folder called toddler-site. Create an images folder inside it.
  2. Create a site definition for this folder in Dreamweaver.
  3. Create a new HTML5 file and save it as index.html in the toddler-site folder.
  4. Create a new CSS file and save it as styles.css in the toddler-site folder.
  5. Link the index.html file to the styles.css file (hint: use the Attach Style Sheet button in the CSS Styles panel.)
  6. Change the page title to Happy Toddler Workshop - Sacramento, California.
  7. 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):

toddler workshop initial markup divs

  1. In styles.css, put in placeholders for some basic HTML elements and for the IDs we established.

toddler workshop CSS placeholders

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.

toddler workshop initial div structure in design view

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.

  1. 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.
  2. Go to the View menu and uncheck Extras. This hides the guides.
  3. Hide all layers and folders except for the fabric header folder.
  4. Crop the document so that it it tight to the fabric header.

toddler workshop fabric heading cropped

  1. 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.

toddler workshop fabric header cropped to seamless edges

  1. 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.
  2. 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.

toddler workshop body background CSS

  1. 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.

toddler workshop mockup dimensions width

  1. In Dreamweaver, set the width for #wrapper and center it on the page.

toddler workshop wrapper width and margins

  1. 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).

toddler workshop center wrapper in internet explorer

  1. Save all your files. View index.html in a browser. It should resemble this if your browser window is open wider than 1020px.

toddler workshop in browser with body background

Implement the Second Background

  1. Save the Photoshop file as a new file named wrapper-background.psd.
  2. Hide visiblity of all the Photoshop layers except for:
    • toddler girl layer
    • header text folder
    • rule copy, rule, and bar inside the menu folder

toddler workshop mockup layers panel

  1. Crop the image so that it stays as wide, but crops out the blank are below the girl's feet.
  2. 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.

toddler workshop mockup with hidden layers

 

  1. Define this image as the background for your wrapper with no repeat and aligned to the top.

toddler workshop wrapper background css code

  1. 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.

toddler workshop in browser with wrapper background

  1. 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

  1. Hide the guides: View > Show > Guides should be unchecked.
  2. 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.

Photoshop CS5 ruler tool

  1. Turn on the rulers: View > Rulers. Right-click inside a ruler and select Pixels as the unit of measurement.

Photoshop CS5 ruler unit of measurement pixels

  1. Turn all the layers back on except for 12 Col Grid.
  2. Measure the distance from the top of the mockup to the top of the ribbon containing the main menu:
    1. Zoom in so you can see this area well.
    2. With the Ruler tool, click at the top of the mockup image and hold the mouse button.
    3. Pressing the Shift key to constrain your ruler vertically, drag down to the top edge of the ribbon.
    4. Let go of the mouse button and then the Shift key.

Photoshop CS5 measure distance with ruler tool

  1. With the Ruler tool still selected, look up in the Control panel for the height value. Mine says 213px.

Photoshop CS5 ruler tool control options panel

  1. 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.

Photoshop CS5 measuring with ruler tool

  1. 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.

CSS for content div

  1. Save all and view in a browser.

toddler workshop work in progress in the browser

  1. 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.

CSS for padding

toddler workshop work in progress in the browser

Arrange the Interior Divs

  1. Float the following divs left:
    • #session1, #session2, #session3 { float: left; }
    • #copyright, #social, #menu { float: left; }
  2. Clear left on #footer.

css for floats and clear

toddler workshop work in progress in the browser

  1. 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.

toddler workshop work in progress in the browser

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.

  1. 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

main menu text

  1. But that doesn't look quite right in the browser, so adjust the sizing by eye.

css adjusted for nav div

main menu text

  1. Go back to your markup in index.html and replace the placeholder text in the #nav div with the following unordered list:

toddler workshop unordered list html

main menu text unordered list

  1. The list has a lot to fix now. Let's put in the standard CSS for arranging an unordered list into a horizontal menu.

CSS for converting unordered list into horizontal menu

toddler workshop work in progress in the browser

  1. 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.

CSS for margin-right on menu ul li

main menu text

  1. 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.

.last class css margin-right

html apply last class to li

main menu text

  1. We need the menu items to actually have links, so generate anchor tags for each with an href of "#".

html add anchor tags to lis

main menu text

  1. Get rid of the ugly underlines and blue color in the CSS. This needs to be done for the anchor tag:

CSS text-decoration none

  1. Implement a hover color for the text.

hover color change anchor tag css

main menu text in browser on hover

Populate and Style the Promo Copy

  1. 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.

HTML paragraphs toddler workshop promotionla copy

toddler workshop promotional copy in the browser

  1. Turn the first line into an <h1> and the second one into an <h2>.

applying h1 ans h2 markup in the html

  1. 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:

css promo copy typsetting

promotional copy text styled in the browser

  1. Wrap the first sentence of the first paragraph in a strong element.
  2. Put a little extra padding at the bottom of the #promo-copy div.

padding-bottom css

  1. Save all and test in the browser.

toddler workshop work in progress in the browser

Populate and Style the Call-to-Action

  1. Save the Photoshop file as a new file named register-button.psd.
  2. Crop the file tightly to the edges of the image of the Register button (include the drop shadow.)

register button cropped in Photoshop

  1. Save the image as a PNG named register-button.png in your images folder.
  2. Find the REGISTER TODAY text layer in the Register Button layer group, and change the text color to #808660.
  3. Save the altered image as a PNG named register-hover.png in your images folder.
  4. 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.

new register div nested html

  1. Put an anchor element inside the register div which links to the # placeholder.

anchor tag added html

  1. 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.

css call-to-action height

  1. 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.

placement of new register div on the html page dreamweaver design view

  1. 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:

z-index absolute positioning margin-left css

  1. Use a compound selector to size the anchor tag within the #register div and give it the background image we created (the register button):

background image and size for anchor tag compound selector css

  1. Finally, have it swap the background image when someone mouses over the register button image:

compund selector a:hover css background image

toddler site work-in-progress call-to-action register button toddler site work-in-progress call-to-action register button hover

  1. 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.

call-to-action text html

  1. Style the text.

typography css for call-to-action date , location and price

call-to-action text styled in browser date, location and price

  1. 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.

superscript span class html

  1. Style the .superscript class.

css styling the superscript

toddler workshop work-in-progress superscript styling

Populate and Style the Featured Sessions

  1. Copy the Featured Sessions text over from the main Photoshop file into index.html. Mark it up with h2, h3, and p elements.

featured sessions copy text and markup html

  1. Do some basic type styling for this section.

css styling for featured sessions section css

  1. Now get the individual session boxes arranged.

css session boxes float width border

browser featured session boxes arranged

  1. 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.
  2. Double-click on the layer thumbnail, which opens the Smart Object.

pink pattern layer in layers panel photoshop cs5

pik pattern psd file in Photoshop CS5 smart object

  1. Save this image out as a PNG file named session-header-background.png.
  2. 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.

CSS styling the h3s in the session boxes text-shadow padding background

featured session headings styled in the browser

  1. 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.

photoshop cs5 crop photograph of toddler

  1. 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.
  2. 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.

Windows 7 images folder thumbnails toddler workshop site

  1. Use a combination of padding and background image to arrange the text inside the p elements in each session div.

css session boxes padding background-image no-repeat

session panels in the browser with background images of toddlers

  1. 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.

more button cropping Photoshop cs5

  1. 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.

image elements inside anchor elements in the session boxes html

  1. Style the span elements within the #feature div.

css style span within the feature div

  1. Remove the border from images inside links so that the ugly blue borders don't appear in Internet Explorer.

remove border from images inside anchor elements css

  1. Finally, move the #featured div down a bit.

margin-top css featured div

toddler workshop work-in-progress in browser featured sessions complete

Populate and Style the Footer

  1. 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.
  2. Put the four menu items from the footer into an unordered list within the #menu div. Make each into a link with the # placeholder.

HTML add copyright and footer menu unordered list

  1. Create additional styling for the #footer div and its nested divs.

CSS styling the footer divs

toddler workshop footer in progress in browsers

  1. 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.

crop the footer ribbon in Photoshop CS5

  1. 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.

footer css background image

  1. 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.
  2. Place these images into the #social div in index.html, each wrapped in an anchor element linking to #.

html toddler social media icons

  1. Give them a little space in the CSS.

CSS margin-right on social media icon images

  1. 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.

css padding-top for footer text

  1. Save all and test in multiple browsers.

toddler workshop finished code html and css in browser

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
8 Toddler Site toddler-site.zip

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.