psd to wordpress theme
TRANSCRIPT
PSD to WordPress Theme
Lauren Pittenger@laurenpittenger
1
2
Why workthis way?
3
Strategy
14
Efficiency
25
Intentionality
16
Design
7
Development
8
9
Underscores
10
Starter theme1,000-hour head startWell-commentedHandy template tagsHTML5JavaScript mobile menuCSS or Sass
Why Underscores?
11
Other Starter Themes
Make your own!
BonesFoundationGenesis
12
Download from
Unzip file & place inwp-content/themes/my-theme
Activate it at
Appearance > Themes
underscores.me
Starting withUnderscores
13
All Done! Yay!
14
Visit Site
15
Functionality
16
LogoMenuSliderWidgetsCustom FieldsCustomizer
PlanningWordPressIntegration
17
What is our goal?What does the client need?
Who are our users?
18
Use a named layer groupto organize elements
PSD Layers Groups
19
Layout
20
Layout ToolsBootstrapSusyBourbon Neat
Worth having a chat about!
21
View > Show > Guides
Use a Grid
22
PS Ruler ToolMeasure all the thingsfrom column widths topadding widths andbeyond
23
Measuring Layout
24
Measuring Layout
25
Header
.site-header { max-width: 1170px; margin: 0 auto;}
26
27
AutomatedColumnsMarginsGutters
GuideGuidePS Plugin
guideguide.me
28
Images
29
SizesCustom WP image sizes
ImagesConsiderations
// in functions.php
if ( function_exists( 'add_image_size' ) ) { add_image_size( 'portfolio-thumb', 375, 375, true );}
Codex: add_image_size()
30
Placing vs. EmbeddingEmbedding an imageinto a PSD makes PSDmore transportablePlacing an image allowsus to easily save it outfrom within Photoshop
ImagesConsiderations
31
Typography
32
Font FamilyFont SizesLine HeightParagraph Styles
Fonts Panel
33
Enqueue Google FontsAdd font styles
Font Styles
34
35
// in functions.php
function psd_to_wp_theme_scripts() { // other code here - removed for brevity
wp_enqueue_script( 'psd-to-wp-theme-roboto', '//fonts.googleapis.com/css?family=Roboto:400,700,300' );}add_action( 'wp_enqueue_scripts', 'psd_to_wp_theme_scripts' );
Enqueue Roboto Google Font
/* in style.css
.main-navigation ul { font-family: "Roboto"; font-weight: 700; /* "Bold" in Photoshop */ font-size: 16px;}
Use it in CSS!
36
37
Colors
38
Finding the Color
39
Handy way to savecolor paletteEasily copy them toSASS variablesBeware usingeyedropper tool ontransparent colors
Color Swatches
40
Other Cool Tools
41
Take any website and turnit into a layered PSD file
Page Layers App
www.pagelayers.com
42
Photoshop plugin whichinstantly turns layer stylesto CSS3!
CSS HAT
madebysource.com
43
Finishing Touches
44
themes/mytheme/screenshot.png1200x900px
Theme Screenshot
45
ResourcesDesign
Adobe PhotoshopPage LayersAspect Ratio Calculator
DevelopmentWordPress CodexCSS HatUnderscoresBonesFoundationGenesisSASSSusyBourbon NeatBootstrap
Theme + PSDgithub.com/lepittenger/psd-to-wp-theme
46
Thank you!Questions?
Lauren Pittengerlaurenpittenger.com
@laurenpittenger
47