from psd to wordpress theme: bringing designs to life
DESCRIPTION
If you want to design your first custom WordPress theme, this talk is for you. You’ve been venturing out little by little, changing some CSS here and HTML there. You’ve even created a child theme or two. But now it’s time to take things to the next level. You want something that’s all yours!You convinced your friend put together a design for you in Photoshop, and now it’s time to take the next step. How do you get that beautiful concept to translate into a living, breathing WordPress theme?That’s what we’ll cover in this action-packed presentation geared toward the curious beginner and intermediate WordPress fans.TRANSCRIPT
![Page 1: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/1.jpg)
From PSD to WordPress Theme:Bringing designs to life
Derek Christensen
![Page 2: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/2.jpg)
(name)
(website)
(email)
@derekdac
quora.com/Derek-Christensen
github.com/derekdac
media-spine.com
![Page 3: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/3.jpg)
![Page 4: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/4.jpg)
designer v developer
• most designers are not developers. there are things that look good on a poster that don't work well on a website
• walk before you run – as you start out, don’t try to be too unique
• if you’re a designer, sit with a developer for a few days to learn some of the constraints that exist
• if you’re a developer, sit with a designer for a few days to learn some of the elements of good design
![Page 5: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/5.jpg)
![Page 6: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/6.jpg)
considerations
• overlapping design elements• custom font• clouds cut in half• category icons in two colors• background texture overlay• only front page design provided• not sliced
![Page 7: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/7.jpg)
![Page 8: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/8.jpg)
slicing
• identify the elements• transparent background• slice• save for web and devices
![Page 9: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/9.jpg)
things to remember
• you don’t have to slice everything at once• don’t slice text unless you really need to– use CSS3 @font-face instead– don’t use images for words in menus
• CSS sprites• multiple use of the same image - slice once,
reuse
![Page 10: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/10.jpg)
layer-based slicing
• faster• flatten and combine layers• less control
![Page 11: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/11.jpg)
![Page 12: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/12.jpg)
![Page 13: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/13.jpg)
![Page 14: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/14.jpg)
![Page 15: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/15.jpg)
![Page 16: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/16.jpg)
![Page 17: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/17.jpg)
![Page 18: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/18.jpg)
![Page 19: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/19.jpg)
![Page 20: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/20.jpg)
![Page 21: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/21.jpg)
![Page 22: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/22.jpg)
building your own theme
![Page 23: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/23.jpg)
starter/base themes
• skeleton• bones• starkers• roots• hybrid• thesis• genesis
![Page 24: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/24.jpg)
![Page 25: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/25.jpg)
child theme/********************************************************Theme Name: WhimTheme URI: http://whimapp.comDescription: A custom theme for Whim based on the Bones starter themeAuthor: Derek ChristensenAuthor URI: http://www.media-spine.comVersion: 1.0Tags: html5, framework, css3, developmentTemplate: bones********************************************************/
![Page 26: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/26.jpg)
![Page 27: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/27.jpg)
![Page 28: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/28.jpg)
![Page 29: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/29.jpg)
![Page 30: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/30.jpg)
start building
• low-hanging fruit• hundreds of right ways to do it – the perfect is
the enemy of the good• study and understand the structure of your
parent theme
![Page 31: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/31.jpg)
body {
/* Fallback if browser cannot support CSS3 gradients */ background-color: #abc5df; background-image: url("background_tall.jpg") ; background-position: top; background-repeat: repeat-x fixed; background: -webkit-gradient(radial, center center, 0, center center, 460, from(#fff), to(#abc5df)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-radial-gradient(circle, #fff, #abc5df); /* Safari 5.1+, Chrome 10+ */ background: -moz-radial-gradient(circle, #fff, #abc5df); /* Firefox 3.6+ */ background: -ms-radial-gradient(circle, #fff, #abc5df); /* IE 10 */ }
![Page 32: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/32.jpg)
![Page 33: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/33.jpg)
footer {background-color:#394253;height:185px;margin-top:0;border-top:0;padding: 0 0 0 0;
}
![Page 34: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/34.jpg)
![Page 35: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/35.jpg)
![Page 36: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/36.jpg)
![Page 37: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/37.jpg)
#content {width: 960px;margin: 0 auto;padding: 0;
}
![Page 38: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/38.jpg)
![Page 39: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/39.jpg)
body:before { display: block; height: 0px; content: url(background_cloud.png); float: right;}
:before selector inserts content before the content of that element
![Page 40: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/40.jpg)
![Page 41: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/41.jpg)
#slideshow {background-image: url(background_skyline.png);background-position: right bottom;background-repeat: no-repeat;
}
![Page 42: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/42.jpg)
![Page 43: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/43.jpg)
<div id="content" class="clearfix"><div id="slideshow" class="clearfix">
<div id="iphone" class="clearfix"></div> <!-- end #iphone --><div id="text" class="clearfix"></div><!-- end #text --><div id="download" class="clearfix"></div> <!-- end #download -->
</div> <!-- end #slideshow --></div> <!-- end #content -->
![Page 44: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/44.jpg)
#iphone{height: 575px;width: 300px;background-image: url(iphone4frame.png);background-repeat: no-repeat;float: left;
}
![Page 45: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/45.jpg)
![Page 46: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/46.jpg)
#text { background: transparent; height: 250px; width: 620px; color: #394253; font-family: Arial, Helvetica, Verdana; font-size: 14pt; text-decoration: none;float:right;}
![Page 47: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/47.jpg)
![Page 48: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/48.jpg)
#download{background-image: url(download.png);background-repeat: no-repeat;height:135px;
}
![Page 49: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/49.jpg)
![Page 50: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/50.jpg)
@font-face {font-family: SerifBD;src: url('serifbd.ttf');
}
![Page 51: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/51.jpg)
h1, .h1, h2, .h2, h3, .h3 {font-family: SerifBD, Arial, Helvetica, Verdana;color: #394253;
}h2, .h2 {
margin: 0 0 7px 0;}h3, .h3 {
margin: 0 0 7px 0;font-size: 14pt
}h1 a, h2 a, h3 a {
font-family: SerifBD, Arial, Helvetica, Verdana;color: #394253;
}
![Page 52: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/52.jpg)
![Page 53: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/53.jpg)
nav[role=navigation] {}nav[role=navigation] .menu ul {
background: transparent;padding-top: 32px;
}nav[role=navigation] .menu ul li {}nav[role=navigation] .menu ul li a {
color: #394253;display: block;padding: 10px 20px;font-family: SerifBD, Arial, Helvetica, Verdana;font-size: 14pt;
}nav[role=navigation] .menu ul li a:hover {
background: #fff; -moz-border-radius: 17px;-webkit-border-radius: 17px;border-radius: 17px;
}nav[role=navigation] .menu ul li.current-menu-item a, .nav ul li.current_page_item a {
background: #fff; -moz-border-radius: 17px;-webkit-border-radius: 17px;border-radius: 17px;
}
![Page 54: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/54.jpg)
![Page 55: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/55.jpg)
![Page 56: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/56.jpg)
<body <?php body_class(); ?>> <div id="container"> <header role="banner"> <div id="inner-header" class="clearfix"> <nav role="navigation" class="clearfix"> <?php bones_main_nav();?> </nav> </div> <!-- end #inner-header --> </header> <!-- end header -->
![Page 57: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/57.jpg)
header[role=banner] { position: relative;width: 960px;margin: 0 auto;padding: 0;
}
![Page 58: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/58.jpg)
![Page 59: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/59.jpg)
#navigation{width: 620px;float: right;
}
![Page 60: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/60.jpg)
<p id="logo"> <a href="<?php echo home_url(); ?>" rel="nofollow"> <img src="wp-content/themes/whim/WhimLogo.png" /> </a></p>
![Page 61: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/61.jpg)
#logo{width: 340px;margin-bottom:0px;float:left;
}
![Page 62: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/62.jpg)
![Page 63: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/63.jpg)
![Page 64: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/64.jpg)
![Page 65: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/65.jpg)
http://whimapp.com
![Page 66: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/66.jpg)
tools
• e-text editor (Like textmate, but for windows)• XAMPP• adobe photoshop (or gimp)• adobe illustrator (or inkscape)• firebug for firefox
![Page 67: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/67.jpg)
web resources
• http://slideshare.net/derekdac/• http://css3please.com/• http://css-tricks.com/• http://nettuts.com/• http://stackexchange.com/• http://fontsquirrel.com/• http://yoast.com/wordpress-theme-anatomy/
![Page 68: From PSD to WordPress Theme: Bringing designs to life](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c702334a795980768b4569/html5/thumbnails/68.jpg)
questions?
(name)
(website)
(email)
http://slideshare.net/derekdac/