How to Design a Website in Photoshop

Daniel Scott, Digital Designer & UX/UI specialist!

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

About This Class

Hi - my name is Dan and I’ll be leading you through this course on how to Build Professional Website Mockups using Photoshop.

3ee6ab7a

These are the skills employers want. And UI/UX design skills are where the high paying jobs are at.

I built this course for - beginners - for the people nervous about changing their careers into web design. For people new to the web world - as well as for developers who lack any design skills.

We cover everything you need to design your first web mock ups without getting too technical. During the course we’ll create this website for a mock creative agency - creativing mobile and desktop versions.  

With exercise files you can download and work along with me. I also have printable notes so you can follow along and scribble your own personal notes.  

I’ll be teaching you how to setup your new documents - how to work with mobile, tablet and desktop views.  

You’ll be able to easily pick web safe colours and fonts for your website and preview them on your iPhone or Ipad.

You’ll learn how to crop images and make full backgrounds all the way through to exporting all the right files for your website.

Know that I’ll be around to help - when you’re ready you can send me your work and I’ll see if they are any suggestions I can offer.  

Now it’s time to upgrade your skills, get that better job and impress your clients.

Daniel Walter Scott
Photoshop Certified Instructor, Photoshop Certified Expert, Photoshop Certifed Associate (Visual Communications). 

ac994dbc

161 of 162 students recommendSee All

If I had to learn Photoshop, this is how I would want to learn it. There are 49 videos, but don't let that intimidate you. They are all rather short; you learn Photoshop for its components, and can take those skills, and use them outside of web development if you'd like.
nice and easy for the beginners!
Very thorough and approachable.

2,139

Students

11

Projects

Daniel Scott

Digital Designer & UX/UI specialist!

I'm a Digital Designer & teacher at BYOL international. Sharing is who I am, and teaching is where I am at my best, because I've been on both sides of that equation, and getting to deliver useful training is my meaningful way to be a part of the creative community.

I've spent a long time watching others learn, and teach, to refine how I work with you to be efficient, useful and, most importantly, memorable. I want you to carry what I've shown you into a bright future.

I have a w...

See full profile