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

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

68 of 68 students recommendSee All

Wonderful class, simple and detailed explanations
a gifted teacher!
Great class! I really recommend it! :-)

962

Students

5

Projects

Daniel Scott

Web Designer for BYOL international

I'm a Web Designer, Graphic Designer & teacher for 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 wife (a lovely Irish girl) and kids. I have lived and worked in many places (as Kiwis tend to do) – but most of my 14+ years of creating and teaching has had one overriding theme: bringing others along for the ride as we all try to change the world with our stories, our labours of love and our art.

I'm a certified Adobe instructor (ACI) in Ireland. I'm also an Adobe Certified Expert (ACE) and have completed the Adobe Certified Associate training (ACA). And I don't just do Adobe. Remember, media is a very broad term – digital blew out the borders, so we are all constantly learning.

I've been teaching for 14+ years. I come from being a media designer and content creator – so I understand exactly where you're at now. I've been there. I love this stuff. Print, digital publishing, web and video. I can see how it all connects. And I can see how we can share those connections.

I built Bring Your Own Laptop in Ireland, New Zealand, Australia & online. I have a great team working with me to keep BYOL at the top of Adobe and digital media training. I understand business, I have one – so I know how important it is to get it right and make it work for you.

Now my focus is on Udemy. It's my mission to bring you the best training for digital media on Udemy.

Daniel Walter Scott