How to Design a Website in Photoshop
4.4 (124 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
691 students enrolled
Wishlisted Wishlist

Please confirm that you want to add How to Design a Website in Photoshop to your Wishlist.

Add to Wishlist

How to Design a Website in Photoshop

Learn how to design a professional quality website in Photoshop CC.
4.4 (124 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
691 students enrolled
Last updated 10/2015
Current price: $10 Original price: $95 Discount: 89% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Take on paid commercial web design projects.
  • Design professional web design mockups using Photoshop.
  • Create web designs for mobile, tablets and desktop.
  • Present your concepts on actual mobile devices.
  • Supply files to a web developer.
View Curriculum
  • No previous experience in Photoshop is necessary.
  • You will need a copy of Photoshop CC 2015 installed. Free trials can be downloads from Adobe

Hi - my name is Dan and I’ll be leading you through this course on how to Build Professional Website Mockups using Photoshop. This course is for people serious about making money building professional website mockups using Photoshop.

These are the skills employers want. 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 - as well as for developers who lack any design skills. No experience in Photoshop or web design is necessary before taking this class.

During the course we’ll create this website for a mock creative agency - creating mobile and desktop versions. 

With exercise files you can download and work along with me. While we’ll start right at the basics we’ll move quickly into the professional tricks of the trade.

This course is a mixture of head and shoulders style presentations and HD screen captures. The course also includes printable notes as well as quizzes to help retain what you have learnt.

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.

If you’ve ever wondered how to design a website in Photoshop than this is the course for you.

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

Who is the target audience?
  • This course is for people who want to start earning money as a web designer.
  • This course is for beginners wanting to learn to use Photoshop for web design.
  • This course is not intended for people wanting to learn Photoshop for graphic design or photography uses.
Compare to Other Photoshop Courses
Curriculum For This Course
49 Lectures
4 Lectures 03:51

This lecture we'll discuss what your final deliverables are. What files need to be made. What code needs to be created and supplied to a web developer.

What do we need to deliver at the end of our project?

Photoshop is amazing at many things. In terms of designing websites it’s the most commonly used tool and if you’re looking for employment in the web design world it’s essential. So Photoshop can do so much in the planning and concept stage. As far as a completed website (online and taking orders) Photoshop can do very little. Once you’ve had your Photoshop mockup signed of and agreed to. You hand over the images and styles you’ve created and either you or your web developer needs to start build the site in HTML & CSS.
What is Photoshop’s role when designing a website

These sessions are where I’m busy building our concept site using the tools we’ve learnt.

What are the production videos?

What are we making in Photoshop?
1 question
Before you get started
3 Lectures 03:34

This video will ensure you have Photoshop ready before your web designing work can begin.

Getting your workspace ready for UI work

By default Photoshop is setup for graphic design and photography work. After this video you'll have all the correct preferences for designing web sites.

Adjusting the Photoshop preferences

Download all the exercise files, templates and links for this course:

Preview 00:45

This quiz will test if you remember the main points about getting Photoshop ready for professional web design.
A good web designer is alway prepared.
1 question
Mobile friendly web design
2 Lectures 08:12

After this lecture you'll know what responsive design is and how it impacts your Photoshop design work.

Understanding responsive mobile & tablet design

After this video you'll know how to use a grid system to design your web sites.

Preview 06:28

Grids are super important in web design - it's useful to know who the big players are.

Know my grids.
1 question
The tools you’ll need
6 Lectures 13:25

You'll be able to move around your web design project quickly and professionally.

Tips for zooming & navigating your document

You will be able to measure the distance between objects on your page for accurate web design development.

Measuring & spacing tools

After this lecture you'll be a master of the layers panel. Switching layers and moving each layer around the document effortlessly.

Layer shortcuts you need to know

After this lecture you'll know how to choose and reuse colors accurately throughout your web site design.

The eye dropper tool

After this lecture you will be able to resize objects, type and buttons quickly.

The transform tool

You'll know how to display your web design concepts in presentation mode in Photoshop.

The ‘f’ key

Fun for all the family.

Name that web design tool
2 questions
Triple check it works!
3 Lectures 10:42

After this lecture you'll be able to preview your Photoshop web design mockups on your iPhone or iPad using the Adobe Device Preview app. You'll be able to preview and impress your concepts to colleagues and clients on the device!

Preview 05:46

After this lecture you'll know what you can and can't do in your Photoshop web design mockups. You'll know how to save time and pain when it comes to the actual web development of your page.

What is technically possible in web design

After this lecture you'll know what size your pages should be when designing for different devices like iPhone's, iPads and laptop screens.

Screen sizes for desktop, tablet & mobile

Testing, testing... 1, 2, 3
1 question
Your pages
3 Lectures 07:20

After this lecture you'll know how to use art boards to create your desktop, tablet and mobile views of your website.

Using art boards

On completing this lecture you'll know what heights your mobile & desktop pages need to be in Photoshop.

What about page heights?

After this lecture you'll know how to set page guides & columns using your rulers.

Page guides, columns & rulers

How important are your page heights?
1 question
Website Colors
1 Lecture 03:42

After this lecture you'll be able to pick colors for your website using Adobe Color.

Picking website colors

Know what colors to use.
1 question
Adding structure to your website design
2 Lectures 07:16

After this lecture you'll know how to create your navigation, body boxes and footer boxes for your website.

Adding structure to your site with the vector shapes

Production video - adding structure to your web design

Adding structure
1 question
Using text in website design
4 Lectures 14:58

After this lecture you'll know when to use fixed and expanding text boxes in your Photoshop web design concepts.

Expanding & fixed width text boxes in Photoshop

After this lecture you'll be the boss of web fonts!

How to design using web safe fonts via Google Fonts

After this lecture you'll know how to hold the place of text if the copy hasn't been created yet.

Place holder text with Lorem Ipsum

Production video - adding all of our text

Understanding lorem ipsum.

It all looks Latin to me.
1 question
Page adjustments
1 Lecture 01:28

After this lecture you'll know how to adjust the sides of your Photoshop pages to accommodate your web design.

Adjusting your page edges

Page adjustment
1 question
7 More Sections
About the Instructor
Daniel Walter Scott
4.6 Average rating
1,096 Reviews
15,804 Students
15 Courses
Microsoft trainer and Adobe Certified Instructor

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