How to Design a Website in Photoshop

Daniel Scott, Adobe Certified Trainer & UI/UX Expert

49 Lessons (2h 43m)

- 1. Intro
  
  1:43
- 2. What do we need to deliver at the end of our project
  
  0:49
- 3. What is Photoshop's role when designing a website
  
  0:55
- 4. What are the production videos
  
  0:24
- 5. Getting your workspace ready for UI work
  
  0:45
- 6. Adjusting the Photoshop preferences
  
  2:04
- 7. Download the exercise files
  
  0:45
- 8. Understanding responsive mobile & tablet design
  
  1:44
- 9. Understanding grid systems & Bootstrap
  
  6:28
- 10. Tips for zooming & navigating your document
  
  2:02
- 11. Measuring & spacing tools
  
  3:53
- 12. Layer shortcuts you need to know
  
  2:48
- 13. The eye dropper tool
  
  1:28
- 14. The transform tool
  
  1:40
- 15. The 'f' key
  
  1:34
- 16. Screen sizes for desktop, tablet & mobile
  
  1:51
- 17. Testing on iPhone & iPad using Adobe Device Preview
  
  5:46
- 18. What is technically possible in web design
  
  3:05
- 19. Using art boards
  
  3:48
- 20. What about page heights
  
  1:18
- 21. Page guides, columns & rulers
  
  2:14
- 22. Picking website colors
  
  3:42
- 23. Adding structure to your site with the vector shapes
  
  4:04
- 24. Production video - adding structure to your web design
  
  3:12
- 25. Expanding & fixed width text boxes in Photoshop
  
  3:12
- 26. How to design using web safe fonts via Google fonts
  
  4:07
- 27. Place holder text with Lorem Ipsum
  
  1:23
- 28. Production video - adding all of our text
  
  6:16
- 29. Adjusting your page edges
  
  1:28
- 30. Where to get commercial use free images
  
  2:10
- 31. Embedding or linking your images?
  
  2:12
- 32. How to mask your image using a clipping mask
  
  3:04
- 33. Masking images for rounded corners & circles
  
  2:52
- 34. How to create large background images
  
  5:00
- 35. Production video - adding our images
  
  9:24
- 36. Where to get commercial use, free icons for your Photoshop web design
  
  5:03
- 37. Production video - adding our icons
  
  2:29
- 38. How to tidy up with layer grouping
  
  4:34
- 39. Find what you need quickly with layer search
  
  1:28
- 40. Naming your layers like a pro
  
  1:11
- 41. Designing a form for your website
  
  4:12
- 42. How to create a footer for your website
  
  1:17
- 43. Production video - finishing up our desktop
  
  1:19
- 44. Designing your mobile website view
  
  7:56
- 45. Production video - completing our mobile view
  
  16:46
- 46. Exporting your web images
  
  8:43
- 47. Exporting CSS from photoshop
  
  2:47
- 48. Using Adobe Generate to make image export amazing
  
  4:49
- 49. I don't want this to be over. What next, Dan?
  
  0:50