How to Design a Website in Photoshop CC 2015

Learn how to design a professional quality website in Photoshop CC 2015.
5.0 (64 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.
329 students enrolled
84% off
Take This Course
  • Lectures 49
  • Length 2.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2015 English

Course Description

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. 

What are the requirements?

  • No previous experience in Photoshop is necessary.
  • You will need a copy of Photoshop CC 2015 installed. Free trials can be downloads from Adobe

What am I going to get from this course?

  • 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.

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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Overview

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.

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.

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

What are we making in Photoshop?
1 question
Section 2: Before you get started

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


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.


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

1 question
This quiz will test if you remember the main points about getting Photoshop ready for professional web design.
Section 3: Mobile friendly web design

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


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

1 question

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

Section 4: The tools you’ll need

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


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


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


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


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


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

2 questions

Fun for all the family.

Section 5: Triple check it works!

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!


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.


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

Testing, testing... 1, 2, 3
1 question
Section 6: Your pages

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


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


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

How important are your page heights?
1 question
Section 7: Website Colors

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

Know what colors to use.
1 question
Section 8: Adding structure to your website design

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

Production video - adding structure to your web design
Adding structure
1 question
Section 9: Using text in website design

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


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


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

Production video - adding all of our text
1 question

Understanding lorem ipsum.

Section 10: Page adjustments

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

Page adjustment
1 question
Section 11: Using images in your website design.

After this lecture you'll know the best places to find and download free images that you can use in professional and commercial projects.


After this lecture you'll know the pro's and con's of embedding and linking your images in your web design mockup.


On completing this lecture you'll know how to mask your web images using the professional Photoshop technique called 'clipping masks'.


On completing this lecture you will extend your knowledge of clipping masks to use rounded corner rectangles and circles.


After this lecture you'll be able to build slick background images and graphics. You'll know the techniques needed for blurring, knocking back and making full screen background images.


This production video is about putting in all of our images to complete our website design in Photoshop.

1 question
Section 12: Using icons in your website design.

On completing this lecture you will know the best places to get free icons for your website design. These icons are able to be used in your professional work free of charge.

This production video is about putting in all of our icon to complete our website design in Photoshop.
Coloring your website icons
1 question
Section 13: Mastering layers

Layers can get very messy with large projects like web design concepts. At the end of this lecture you'll have a file ready that even the pickiest web developer will admire.


After watching this lecture you'll be the quickest web designer on the block. Being able to find, sort and change your web design elements with the speed of a website veteran.


Most people take the long way to name their layers. Not you. After this lecture you'll know the secret to speedy layer naming in Photoshop.

Become a Photoshop layer professional
1 question
Section 14: Forms and footers

Forms are an integral part of any website design. After watching this video you'll know the tricks to mocking up your own web form.


After this lecture you'll see how easy creating a website footer is.


This is a big one. We'll be putting the finishing touches on the desktop view of our website. Next step... mobile!

Forms in Photoshop
1 question
Section 15: Designing for mobile websites

After completing this lecture you'll know how to take your desktop design and translate it into a mobile phone ready version.


Using our professional skills we'll work through the process of fully converting our website for mobile display.

Mobile, Tablet or Desktop first?
1 question
Section 16: Exporting your Photoshop website design

This lecture could be the most important of the entire series. This is where the game is won. At the end of the lecture you'll know how to expertly produce the perfect images ready for website design.


After completing this lecture you'll know what style details (CSS) can be extracted from your Photoshop website design. You'll be able to extract and deliver beautiful CSS that will make any web developer jump for joy.


Not all image exporting is created equal. After this lecture you'll be able to turn the process of creating web ready images into an art. This technique will be the envy of your colleagues.

Web image types
1 question
Section 17: Conclusion

Don't worry, it's not over. This lecture will give you the methods to reach out to Dan and share your projects.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Daniel Walter Scott, Media Designer, UX Designer, 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

Ready to start learning?
Take This Course