Christopher Schmitt ChristopherSchmitt.com From PSD to XHTML+CSS

Document Sample
Christopher Schmitt ChristopherSchmitt.com From PSD to XHTML+CSS Powered By Docstoc
					4TW!
From PSD to XHTML+CSS




Christopher Schmitt
ChristopherSchmitt.com
Christopher Schmitt
ChristopherSchmitt.com
Why I Like
Graphic Design
1. I like to eat.
2. I’m totally scared of the
   blank canvas.
ers                      The




                            Param
  Why I Like
  Graphic Design
  1. I like to eat.


  me
  2. I’m totally scared of the
     blank canvas.
      What are we NOT
   going to talk about today?



• Design styles
• Photoshop Techniques
         What ARE we
   going to talk about today?
• Converting a PSD file into XHTML
• Take steps to convert to visually interesting
  page with CSS
• Assumption:
 • Hoping that you’ve had input on the
    design and knew design was coming down
    the pipe
Examining the PSD
  Two Questions You
Should Always Ask Your
   Designer Or the
Designer in the Mirror
       #1
 What happens
when the browser
 window resizes?
      Why ask about
     Browser Resizing?
• Does the design stretch?
• Does the design stay the same size?
• Does the design stay flush with the left, right
  or middle of the browser window?
• Does the content stay the same, but the
  header and footer background stretch?
• What about vertical alignment of the design?
       For This Design


• Fixed width design
• Centered layout, when resized
• Flush with the top
         #2
      Are there
rollovers in the PSD?
        Why ask about
         Rollovers?
• Where are they located in the PSD?
• Not just the main navigation, but also:
 • Image-rich menus for secondary or
    supporting navigation
  • Generic text links in content
  • Text links in different sections of the
    web page design
       For this Design


• Main navigation is image based,
  but done in CSS
• Other rollovers are text-based, color change
When dealing with
 PSDs from other
designers, insist on
organized PSD files
For this Design
Wireframing the Design
Print the PSD
   in B&W
Then dissect the PSD
    looking for
   measurements
  columns, widths
                       904 x 100 pixels




                       918 x 360 pixels




203 x 66                     374 x 66     148 x 66   162 x 66

                        904 x 51 pixels

           550 pixels wide                 390 pixels wide
        For this Design

• I know it’s going to be fixed width.
• I know I don’t want to spend a lot of time
  building it.
• So, I opt for using “CSS Framework”
       blueprintcss.org

• CSS Reset style sheet
• CSS Print style sheet
• Plugin for “fancy” typography treatments like
  cool ampersands
• ...but what it’s great use is grid based layouts
  without the pain of cross-browser issues
     Setting Up a Grid
• Download and place Blueprint CSS into your
  Web site file system:
 • /_assets/css/
• Link blueprint CSS to your web document(s)
• Determine column and gutter widths
• Use tags
<link rel="stylesheet" href="/_assets/css/
compressed.css" type="text/css"
media="screen, projection" />

<link rel="stylesheet" href="/_assets/css/
print.css" type="text/css" media="print" />

<link rel="stylesheet" href="/_assets/css/
layout.css" type="text/css" media="screen,
projection" />

<!--[if IE]><link rel="stylesheet" href="/_assets/
css/ie.css" type="text/css" media="screen,
projection"><![endif]-->
  Why 950px Width?
  (P.S. Be sure to snag
updated Blueprint CSS.)
   Monitor Resolution
• 640x480 - if you are using this, I’m sorry
• 800x600
• 1024x768 - just about right, for right now
• 1280x800
• 1440x900 - can you spare a MacBook Air?
• Check your site stats to find out
  what browser resolution you need to serve
     Browser Window
• Web page widths can’t expand for the entire
  width of monitor’s resolution
• Need to take into account:
 • Browser chrome (scroll bar, status bar,
    location box, etc.)
  • And that people don’t expand browser
    windows to their full monitor size
Browser Window Sizes
• 640x480    • 536x300
• 800x600    • 600x300
• 1024x768   • 955x568
• 1280x800   • 1080x600
• 1440x900   • 1240x700
      Building a
   Wireframe System

• Mark the divisions of the document
• Include the CSS framework “hooks” or
  associations to the document
• You’ve built a XHTML wireframe!
       Divisions in the
        Document?
• Header
• Navigation
• Content
 • Columns?
• Site information/Footer
Mark Divisions
 Add Blueprint Hooks

• Use CLASS attributes to tell browser how
  wide columns are going to be
 • Making sure last column (if more than
    one) includes “last” value
• Can also add whitespace around content
• And much more...
Add Blueprint Hooks
Add Blueprint Hooks
 Add Blueprint Hooks
• Left Column classes:
 • span-8
 • prepend-1
 • append-1
• Right Column classes:
 • span-13
 • append-1
 • last
Pour in Content
Preparing Next Step
Fonts
Adding Fonts & Colors
• Blueprint CSS comes pre-populated with
  font choices, stylings. (Kinda dull, but solid.)
• I set the colors and fonts for headings in the
  columns:
  • Headings font-stack: Georgia, “Times New
    Roman”, Times, serif
  • Text Color: #79473e
  • Rollover Text color: #bb7209
 Adding Fonts & Colors
body {
  color: #79473e;
}
a:link, a:visited {
  color: #bb7209;
}
#content h1, #content h2,
#content h3, #content th {
  font-family: Georgia, "Times New Roman",
  Times, serif;
  color: #79473e;
}
   A Better Font Stack
• Adding a list of fonts in order of desire
• We’ve limited ourselves to the basic set of
  Web safe fonts:
  • Georgia,Verdana, etc
• Why not add better font choices to the
  front of the list?
• http://unitinteractive.com/blog/2008/06/26/
  better-css-font-stacks/
   A Better Font Stack
• For Paragraphs:
 • Baskerville, Times New Roman, Times, serif
 • Garamond, Hoefler Text, Times New
    Roman, Times, serif
• For Headings:
 • Baskerville, Times, Times New Roman, serif
 • Garamond, Hoefler Text, Palatino, Palatino
    Linotype, serif
Working from
Top to Bottom
    Start at the Header

<div id="header" class="span-24">

 <h1><a href="/">Microwave Popcorn
Certification</a></h1>

 <p class="tagline"><a href="#">How much is
a kernal of truth worth to your business?</a></
p>
</div>
   Start at the Header

• What to Do:
 • Need to remove the text in the heading
   • Bring in the image/logo
   • Make sure it’s clickable, too.
 • Do something about the tagline.
    Start at the Header

<div id="header" class="span-24">

 <h1><a href="/">Microwave Popcorn
Certification</a></h1>

 <p class="tagline"><a href="/">How much is
a kernel of truth worth to your business?</a></
p>
</div>
   Start at the Header
<div>
 <h1>
  <a> - Totally clickable


 <p>
  <a> - Totally clickable
    Start at the Header

#header, #header h1 {

 margin: 0;

 padding: 0;
}
    Start at the Header

#header h1 a {

 display: block;

 width: 904px;

 height: 100px;

 margin: 0 auto;

 padding: 20px 0 0 0;
}
    Start at the Header
#header h1 a {

 background-image: url(/_assets/img/
microwavepopcorn.gif);

 background-repeat: no-repeat;

 display: block;

 width: 904px;

 height: 100px;

 margin: 0 auto;

 padding: 20px 0 0 0;
}
    Start at the Header
#header h1 a {

 background-image: url(/_assets/img/
microwavepopcorn.gif);

 background-repeat: no-repeat;

 display: block;

 text-indent: -9999em;

 width: 904px;

 height: 100px;

 margin: 0 auto;

 padding: 20px 0 0 0;
}
    Start at the Header
#header .tagline a {

 background-image: url(/_assets/img/
header.gif);

 display: block;

 text-indent: -9999em;

 width: 918px;

 height: 360px;

 margin: 20px auto;
}
Navigation
Moving with Navigation

• Built the list out of UL and LI
 • Which make a vertical list
• Need to make a horizontal menu
• And add rollovers
 Moving with Navigation
<div id="site-nav" class="span-24">
<p class="hide">Navigation</p>

 <ul>
    
<li id="certifylink"><a href="#certify">...</a></li>
    
<li id="badsmelllink"><a href="#badsmell">...</
a></li>
    
<li id="aboutlink"><a href="#aboutus">...</a></li>
    
<li id="contactlink"><a href="#contact">...</a></
li>
    </ul>
</div>
Moving with Navigation
<div>
 <p>

 <ul>
  <li>
    <a> - Totally clickable
   ...
Moving with Navigation

#site-nav {

 height: 75px;

 background-color: white;

 }

 #site-nav ul {

 
 list-style-type: none;

 }
Moving with Navigation
#site-nav {

 height: 75px;

 background-color: white;

 }

 #site-nav ul {

 
 list-style-type: none;

 }

 #site-nav li {

 
 float: left;

 }
 Moving with Navigation

#site-nav #certifylink a {

 text-indent: -9999em;

 width: 203px;

 height: 66px;

 display: block;
}
    Moving with Navigation

   #site-nav #badsmelllink a {   
   #site-nav #contactlink a {

   
 text-indent: -9999em;       
   
 text-indent: -9999em;

   
 width: 374px;               
   
 width: 162px;

   
 height: 66px;               
   
 height: 66px;

   
 display: block;             
   
 display: block;

   }                             
   }

   #site-nav #aboutlink a {

   
 text-indent: -9999em;

   
 width: 148px;

   
 height: 66px;

   
 display: block;

   }
 Moving with Navigation
#site-nav #certifylink a:link,
#site-nav #certifylink a:visited {

 background-image: url(/_assets/img/certifications.gif);
}
#site-nav #badsmelllink a:link,
#site-nav #badsmelllink a:visited {

 background-image: url(/_assets/img/badsmell.gif);
}
#site-nav #aboutlink a:link,
#site-nav #aboutlink a:visited {

 background-image: url(/_assets/img/about.gif);
}
#site-nav #contactlink a:link,
#site-nav #contactlink a:visited {

 background-image: url(/_assets/img/contact.gif);
}
 Moving with Navigation
#site-nav #certifylink a:link:hover,
#site-nav #certifylink a:visited:hover {

 background-image: url(/_assets/img/certifications_on.gif);
}
#site-nav #badsmelllink a:link:hover,
#site-nav #badsmelllink a:visited:hover {

 background-image: url(/_assets/img/badsmell_on.gif);
}
#site-nav #aboutlink a:link:hover,
#site-nav #aboutlink a:visited:hover {

 background-image: url(/_assets/img/about_on.gif);
}
#site-nav #contactlink a:link:hover,
#site-nav #contactlink a:visited:hover {

 background-image: url(/_assets/img/contact_on.gif);
}

Setting the Footer
    Setting the Footer


• Need to include divider
• Center the text
• No biggie. Re-use lessons already learned!
       Setting the Footer
<div id="site-nav" class="span-24">
<p class="hide">Navigation</p>

 <ul>
    
<li id="certifylink"><a href="#certify">...</a></li>
    
<li id="badsmelllink"><a href="#badsmell">...</
a></li>
    
<li id="aboutlink"><a href="#aboutus">...</a></li>
    
<li id="contactlink"><a href="#contact">...</a></
li>
    </ul>
</div>
       Setting the Footer

#site-info {

 background-image: url(/_assets/img/divider.gif);

 background-repeat: no-repeat;

 background-position: bottom center;

 text-align: center;

 padding-bottom: 50px;

 }
       Setting the Footer
#site-info {

 background-image: url(/_assets/img/divider.gif);

 background-repeat: no-repeat;

 background-position: bottom center;

 text-align: center;

 padding-bottom: 50px;

 }

 #site-info p {

 
 padding-top: 24px;

 
 font-family: Georgia, "Times New Roman",
Times, serif;

 }
Finishing Up
          Eight Takeaways
•   The two questions you       •   How to make CSS
    should ask every designer       rollovers
    before beginning work.
                                •   Talked about setting up
•   Insist on organized PSDs        “hooks” or associations
    or organize your own            in HTML for Blueprint
    PSDs better                     CSS

•   Print out design, write     •   Showed how to install
    out notes on dimensions         Blueprint CSS
    of images
                                •   Walked through steps on
•   How to do basic image           how to set up custom
    replacement technique           widths for page designs
http://microwave
     popcorn
certification.com/
psd-to-xhtml.pdf
THANK YOU!


Christopher Schmitt
schmitt@heatvision.com
twitter.com/teleject
ChristopherSchmitt.com