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.

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
    BLAZ@ELEVENMEDIA.COM.AU
    @blazRobar
    Styles Demo??
    

    View Slide