Adobe Photoshop CC Web Design Responsive Design UI

Learn how to design a professional quality website in Photoshop CC.
Adobe Photoshop CC Web Design Responsive Design UI
File Size :
2.47 GB
Total length :
2h 43m



Daniel Walter Scott


Last update




Adobe Photoshop CC Web Design Responsive Design UI

What you’ll 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.

Adobe Photoshop CC Web Design Responsive Design UI


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.


Section 1: Overview

Lecture 1 Introduction

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

Lecture 3 What is Photoshop’s role when designing a website

Lecture 4 What are the production videos?

Section 2: Before you get started

Lecture 5 Getting your workspace ready for UI work

Lecture 6 Adjusting the Photoshop preferences

Lecture 7 Download the exercise files

Section 3: Mobile friendly web design

Lecture 8 Understanding responsive mobile & tablet design

Lecture 9 Understanding grid systems & BootStrap

Section 4: The tools you’ll need

Lecture 10 Tips for zooming & navigating your document

Lecture 11 Measuring & spacing tools

Lecture 12 Layer shortcuts you need to know

Lecture 13 The eye dropper tool

Lecture 14 The transform tool

Lecture 15 The ‘f’ key

Section 5: Triple check it works!

Lecture 16 Testing on iPhone & iPad using Adobe Device Preview

Lecture 17 What is technically possible in web design

Lecture 18 Screen sizes for desktop, tablet & mobile

Section 6: Your pages

Lecture 19 Using art boards

Lecture 20 What about page heights?

Lecture 21 Page guides, columns & rulers

Section 7: Website Colors

Lecture 22 Picking website colors

Section 8: Adding structure to your website design

Lecture 23 Adding structure to your site with the vector shapes

Lecture 24 Production video – adding structure to your web design

Section 9: Using text in website design

Lecture 25 Expanding & fixed width text boxes in Photoshop

Lecture 26 How to design using web safe fonts via Google Fonts

Lecture 27 Place holder text with Lorem Ipsum

Lecture 28 Production video – adding all of our text

Section 10: Page adjustments

Lecture 29 Adjusting your page edges

Section 11: Using images in your website design.

Lecture 30 Where to get commercial use free images

Lecture 31 Embedding or linking your images?

Lecture 32 How to mask your images using a clipping mask

Lecture 33 Masking images for rounded corners & circles

Lecture 34 How to create large background images

Lecture 35 Production video – adding our images

Section 12: Using icons in your website design.

Lecture 36 Where to get commercial use, free icons for your Photoshop website design.

Lecture 37 Production video – adding our icons

Section 13: Mastering layers

Lecture 38 How to tidy up with layer grouping

Lecture 39 Find what you need quickly with layer search

Lecture 40 Naming your layers like a pro

Section 14: Forms and footers

Lecture 41 Designing a form for your website design

Lecture 42 How to create a footer for your website

Lecture 43 Production video – finishing up our desktop view

Section 15: Designing for mobile websites

Lecture 44 Designing your mobile website view

Lecture 45 Production video – completing our mobile view

Section 16: Exporting your Photoshop website design

Lecture 46 Exporting your web images

Lecture 47 Exporting CSS from Photoshop

Lecture 48 Using Adobe Generate to make image export amazing

Section 17: Conclusion

Lecture 49 I don’t want this to be over. What next Dan?

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.

Course Information:

Udemy | English | 2h 43m | 2.47 GB
Created by: Daniel Walter Scott

You Can See More Courses in the Design >> Greetings from

New Courses

Scroll to Top