PSD to WordPress Theme
-
Upload
lauren-pittenger -
Category
Design
-
view
34 -
download
2
Transcript of PSD to WordPress Theme
![Page 1: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/1.jpg)
PSD to WordPress Theme
Lauren Pittenger@laurenpittenger
1
![Page 2: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/2.jpg)
2
![Page 3: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/3.jpg)
Why workthis way?
3
![Page 4: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/4.jpg)
Strategy
14
![Page 5: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/5.jpg)
Efficiency
25
![Page 6: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/6.jpg)
Intentionality
16
![Page 7: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/7.jpg)
Design
7
![Page 8: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/8.jpg)
Development
8
![Page 9: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/9.jpg)
9
![Page 10: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/10.jpg)
Underscores
10
![Page 11: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/11.jpg)
Starter theme1,000-hour head startWell-commentedHandy template tagsHTML5JavaScript mobile menuCSS or Sass
Why Underscores?
11
![Page 12: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/12.jpg)
Other Starter Themes
Make your own!
BonesFoundationGenesis
12
![Page 13: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/13.jpg)
Download from
Unzip file & place inwp-content/themes/my-theme
Activate it at
Appearance > Themes
underscores.me
Starting withUnderscores
13
![Page 14: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/14.jpg)
All Done! Yay!
14
![Page 15: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/15.jpg)
Visit Site
15
![Page 16: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/16.jpg)
Functionality
16
![Page 17: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/17.jpg)
LogoMenuSliderWidgetsCustom FieldsCustomizer
PlanningWordPressIntegration
17
![Page 18: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/18.jpg)
What is our goal?What does the client need?
Who are our users?
18
![Page 19: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/19.jpg)
Use a named layer groupto organize elements
PSD Layers Groups
19
![Page 20: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/20.jpg)
Layout
20
![Page 21: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/21.jpg)
Layout ToolsBootstrapSusyBourbon Neat
Worth having a chat about!
21
![Page 22: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/22.jpg)
View > Show > Guides
Use a Grid
22
![Page 23: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/23.jpg)
PS Ruler ToolMeasure all the thingsfrom column widths topadding widths andbeyond
23
![Page 24: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/24.jpg)
Measuring Layout
24
![Page 25: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/25.jpg)
Measuring Layout
25
![Page 26: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/26.jpg)
Header
.site-header { max-width: 1170px; margin: 0 auto;}
26
![Page 27: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/27.jpg)
27
![Page 28: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/28.jpg)
AutomatedColumnsMarginsGutters
GuideGuidePS Plugin
guideguide.me
28
![Page 29: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/29.jpg)
Images
29
![Page 30: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/30.jpg)
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
![Page 31: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/31.jpg)
Placing vs. EmbeddingEmbedding an imageinto a PSD makes PSDmore transportablePlacing an image allowsus to easily save it outfrom within Photoshop
ImagesConsiderations
31
![Page 32: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/32.jpg)
Typography
32
![Page 33: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/33.jpg)
Font FamilyFont SizesLine HeightParagraph Styles
Fonts Panel
33
![Page 34: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/34.jpg)
Enqueue Google FontsAdd font styles
Font Styles
34
![Page 35: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/35.jpg)
35
![Page 36: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/36.jpg)
// 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
![Page 37: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/37.jpg)
37
![Page 38: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/38.jpg)
Colors
38
![Page 39: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/39.jpg)
Finding the Color
39
![Page 40: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/40.jpg)
Handy way to savecolor paletteEasily copy them toSASS variablesBeware usingeyedropper tool ontransparent colors
Color Swatches
40
![Page 41: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/41.jpg)
Other Cool Tools
41
![Page 42: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/42.jpg)
Take any website and turnit into a layered PSD file
Page Layers App
www.pagelayers.com
42
![Page 43: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/43.jpg)
Photoshop plugin whichinstantly turns layer stylesto CSS3!
CSS HAT
madebysource.com
43
![Page 44: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/44.jpg)
Finishing Touches
44
![Page 45: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/45.jpg)
themes/mytheme/screenshot.png1200x900px
Theme Screenshot
45
![Page 46: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/46.jpg)
ResourcesDesign
Adobe PhotoshopPage LayersAspect Ratio Calculator
DevelopmentWordPress CodexCSS HatUnderscoresBonesFoundationGenesisSASSSusyBourbon NeatBootstrap
Theme + PSDgithub.com/lepittenger/psd-to-wp-theme
46
![Page 47: PSD to WordPress Theme](https://reader034.fdocuments.us/reader034/viewer/2022051404/5a653a8f7f8b9ace0b8b47d1/html5/thumbnails/47.jpg)
Thank you!Questions?
Lauren Pittengerlaurenpittenger.com
@laurenpittenger
47