$30 off During Our Annual Pro Sale. View Details »

Blaz Robar: Photoshop Best Practice for WordPress

Blaz Robar: Photoshop Best Practice for WordPress

Many web designers start off in the Print Design industry and make the bold move over to digital. Unfortunately, this can be a tricky cross over as the many technical restricts that apply in print are completely different for screen design and web design.

WP Australia

April 28, 2013
Tweet

More Decks by WP Australia

Other Decks in Technology

Transcript

  1. HELLO
    WORDPRESS-ERS
    you're a good looking bunch

    View Slide

  2. 50/50

    View Slide

  3. BLAZ ROBAR
    IS THE NAME
    WEB DESIGN
    IS MY GAME
    @blazRobar

    View Slide

  4. PHOTOSHOP
    BEST PRACTICE
    FOR WORDPRESS

    View Slide

  5. A LITTLE
    ABOUT ME
    web designer / all round nice guy

    View Slide

  6. SLEEPY BLAZ ROBAR

    View Slide

  7. ELEVEN MEDIA
    CO-OWNER/WEB DESIGNER
    elevenmedia.com.au

    View Slide

  8. BLAZROBAR.COM
    THE ROBIN HOOD OF FREE PSDS
    OVER 45,000+ WORDPRESS USERS

    View Slide

  9. DESIGN WEBSITES
    DESIGN WEBSITES
    AT WORK I
    AT HOME I

    View Slide

  10. 1 SERIOUSLY PISSED
    OFF WIFE
    LOVE YA HUNNIE

    View Slide

  11. PHOTOSHOP
    BEST PRACTICE
    FOR WORDPRESS
    the break down

    View Slide

  12. WORKING IN
    PHOTOSHOP
    REAL
    CONTENT
    BREAKS
    THINGS
    WORDPRESS
    CONSIDER-
    ATION
    001 002 003

    View Slide

  13. WORKING IN
    PHOTOSHOP
    001
    a better work flow. like a boss

    View Slide

  14. USE ONE!
    GRID
    add some structure to your designs

    View Slide

  15. View Slide

  16. www.960.gs
    www.guideguide.me

    View Slide

  17. USE FOLDERS & USE
    DESCRIPTIVE NAMES
    name folders like you would name your { divs }

    View Slide

  18. KEY TO HAPPINESS

    View Slide

  19. select layers & Ctrl/Cmd+G

    View Slide

  20. DO NOT
    FLATTEN
    YOUR
    LAYERS
    instead - convert them to smart objects

    View Slide

  21. GOOD WAY TO DIE.
    HEAVENLY.

    View Slide

  22. DOWNLOAD YOUR
    GOOGLE FONT
    www.google.com/fonts/

    View Slide

  23. DOWNLOAD. SORTED.

    View Slide

  24. GET LAZY
    LEARN SHORTCUTS
    and make some custom ones

    View Slide

  25. http://www.zerolag.com/wp-content/uploads/2013/03/ZeroLag.com _ photoshop _ screen _ logo2.jpg

    View Slide

  26. I SET UP
    CMD + 1 (SAVE FOR WEB)

    View Slide

  27. DON'T USE
    LAYER BLEND
    'overlay' is not a web thing....yet.

    View Slide

  28. OVER.. WHAT?

    View Slide

  29. 1 PSD FILE
    IS FINE
    because updating more than 1 file is just insane

    View Slide

  30. GROUP A NEW PAGE
    LAYOUT IN A FOLDER
    eg - Home/ About / Contact

    View Slide

  31. PAGES

    View Slide

  32. DELETE UNUSED
    LAYERS
    don't be a layer horder.

    View Slide

  33. TRASH IT

    View Slide

  34. USE TEXT BOXES
    LIKE DIVS
    helps your developer with alignment references

    View Slide

  35. View Slide

  36. WHAT HAPPENS
    OUTSIDE OF YOUR
    CANVAS?
    people with big screens have feelings too

    View Slide

  37. REAL CONTENT
    BREAKS THINGS
    002
    real life content is ugly

    View Slide

  38. ALLOW FOR LONG
    HEADINGS
    do your titles still look good?

    View Slide

  39. DESIGN WORLD REAL WORLD

    View Slide

  40. USE REALISTIC IMAGE
    FORMATS
    super panoramic WILL BRING you PAIN

    View Slide

  41. View Slide

  42. CONTENT
    design based around the amount of

    View Slide

  43. DO YOUR DIVS
    STRETCH?
    ARE THEY FLUID? DO THEY NEED TO BE?

    View Slide

  44. View Slide

  45. WORDPRESS
    CONSIDERATIONS
    003
    what would wordpress do?

    View Slide

  46. RE-USE DESIGN
    ELEMENTS
    eg - keep sidebar elements the same size

    View Slide

  47. View Slide

  48. POWERING YOUR
    CONTENT
    how is your content
    powered by wordpress?

    View Slide

  49. View Slide

  50. IMAGE SLIDER - POST FEATURE IMAGE
    WP NAV / PAGES
    CUSTOM FIELDS
    POST
    FEATURE
    IMAGE
    POST
    FEATURE
    IMAGE
    POST
    FEATURE
    IMAGE
    POST
    POST
    POST
    CUSTOM
    FIELDS

    View Slide

  51. THINK OF THE
    DETAILS
    devil is in the detail

    View Slide

  52. View Slide

  53. DESIGN WORDPRESS
    FUNCTIONALITY
    consider including core
    wordpress functionality

    View Slide

  54. TAGS LIST
    CATEGORIES LIST
    WIDGETS
    BLOG PAGE COUNTER
    COMMENTS
    LATEST ARTICLES
    SEARCH
    COMMENT COUNT/DATE
    CORE ELEMENTS
    TO CONSIDER

    View Slide

  55. SUMMING UP
    Use a grid in Photoshop www.960.gs
    Group your layers & name your folders div names
    1 psd file 1 page per folder
    text boxes ex tend them like divs

    View Slide

  56. CREDITS
    illustrate free download :
    www.blazrobar.com
    icons:
    www.webdesignerdepot.com/2013/03/free-download-500-
    vector-mega-icon-pack/

    View Slide

  57. QUESTIONS?
    SEND HATE MAIL
    [email protected]
    @blazRobar
    Styles Demo??

    View Slide