psd to wordpress theme

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