Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

073054d5848746e939c7165bc90a507b?s=128

WP Australia

April 28, 2013
Tweet

Transcript

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

  2. 50/50

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

    @blazRobar
  4. PHOTOSHOP BEST PRACTICE FOR WORDPRESS

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

    guy
  6. SLEEPY BLAZ ROBAR

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

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

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

  10. 1 SERIOUSLY PISSED OFF WIFE LOVE YA HUNNIE

  11. PHOTOSHOP BEST PRACTICE FOR WORDPRESS the break down

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

    001 002 003
  13. WORKING IN PHOTOSHOP 001 a better work flow. like a

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

  15. None
  16. www.960.gs www.guideguide.me

  17. USE FOLDERS & USE DESCRIPTIVE NAMES name folders like you

    would name your { divs }
  18. KEY TO HAPPINESS

  19. select layers & Ctrl/Cmd+G

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

    smart objects
  21. GOOD WAY TO DIE. HEAVENLY.

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

  23. DOWNLOAD. SORTED.

  24. GET LAZY LEARN SHORTCUTS and make some custom ones

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

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

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

  28. OVER.. WHAT?

  29. 1 PSD FILE IS FINE because updating more than 1

    file is just insane
  30. GROUP A NEW PAGE LAYOUT IN A FOLDER eg -

    Home/ About / Contact
  31. PAGES

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

  33. TRASH IT

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

    references
  35. None
  36. WHAT HAPPENS OUTSIDE OF YOUR CANVAS? people with big screens

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

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

  39. DESIGN WORLD REAL WORLD

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

  41. None
  42. CONTENT design based around the amount of

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

    TO BE?
  44. None
  45. WORDPRESS CONSIDERATIONS 003 what would wordpress do?

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

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

  49. None
  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
  51. THINK OF THE DETAILS devil is in the detail

  52. None
  53. DESIGN WORDPRESS FUNCTIONALITY consider including core wordpress functionality

  54. TAGS LIST CATEGORIES LIST WIDGETS BLOG PAGE COUNTER COMMENTS LATEST

    ARTICLES SEARCH COMMENT COUNT/DATE CORE ELEMENTS TO CONSIDER
  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
  56. CREDITS illustrate free download : www.blazrobar.com icons: www.webdesignerdepot.com/2013/03/free-download-500- vector-mega-icon-pack/

  57. QUESTIONS? SEND HATE MAIL BLAZ@ELEVENMEDIA.COM.AU @blazRobar Styles Demo??