How to Design a Website in Photoshop (Using Photoshop CC 2015). Premium class

Daniel Scott, Web Designer for BYOL international

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
49 Videos (2h 43m)
    • Intro

      1:43
    • What do we need to deliver at the end of our project

      0:49
    • What is Photoshop's role when designing a website

      0:55
    • What are the production videos

      0:24
    • Getting your workspace ready for UI work

      0:45
    • Adjusting the Photoshop preferences

      2:04
    • Download the exercise files

      0:45
    • Understanding responsive mobile & tablet design

      1:44
    • Understanding grid systems & Bootstrap

      6:28
    • Tips for zooming & navigating your document

      2:02
    • Measuring & spacing tools

      3:53
    • Layer shortcuts you need to know

      2:48
    • The eye dropper tool

      1:28
    • The transform tool

      1:40
    • The 'f' key

      1:34
    • Screen sizes for desktop, tablet & mobile

      1:51
    • Testing on iPhone & iPad using Adobe Device Preview

      5:46
    • What is technically possible in web design

      3:05
    • Using art boards

      3:48
    • What about page heights

      1:18
    • Page guides, columns & rulers

      2:14
    • Picking website colors

      3:42
    • Adding structure to your site with the vector shapes

      4:04
    • Production video - adding structure to your web design

      3:12
    • Expanding & fixed width text boxes in Photoshop

      3:12
    • How to design using web safe fonts via Google fonts

      4:07
    • Place holder text with Lorem Ipsum

      1:23
    • Production video - adding all of our text

      6:16
    • Adjusting your page edges

      1:28
    • Where to get commercial use free images

      2:10
    • Embedding or linking your images?

      2:12
    • How to mask your image using a clipping mask

      3:04
    • Masking images for rounded corners & circles

      2:52
    • How to create large background images

      5:00
    • Production video - adding our images

      9:24
    • Where to get commercial use, free icons for your Photoshop web design

      5:03
    • Production video - adding our icons

      2:29
    • How to tidy up with layer grouping

      4:34
    • Find what you need quickly with layer search

      1:28
    • Naming your layers like a pro

      1:11
    • Designing a form for your website

      4:12
    • How to create a footer for your website

      1:17
    • Production video - finishing up our desktop

      1:19
    • Designing your mobile website view

      7:56
    • Production video - completing our mobile view

      16:46
    • Exporting your web images

      8:43
    • Exporting CSS from photoshop

      2:47
    • Using Adobe Generate to make image export amazing

      4:49
    • I don't want this to be over. What next, Dan?

      0:50