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
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
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
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
42. CONTENT design based around the amount of
43. DO YOUR DIVS STRETCH? ARE THEY FLUID? DO THEY NEED TO BE?
45. WORDPRESS CONSIDERATIONS 003 what would wordpress do?
46. RE-USE DESIGN ELEMENTS eg - keep sidebar elements the same size
48. POWERING YOUR CONTENT how is your content powered by wordpress?
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
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??