How to Design a Website in Photoshop

Daniel Scott, Adobe Certified Trainer & UI/UX Expert

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
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
41 students are watching this class