How to Design a Website in Photoshop

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

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.

Download the exercise files here.

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

• Intro
• What do we need to deliver at the end of our project
• What is Photoshop's role when designing a website
• What are the production videos
• Getting your workspace ready for UI work
• Adjusting the Photoshop preferences
• Download the exercise files
• Understanding responsive mobile & tablet design
• Understanding grid systems & Bootstrap
• Tips for zooming & navigating your document
• Measuring & spacing tools
• Layer shortcuts you need to know
• The eye dropper tool
• The transform tool
• The 'f' key
• Screen sizes for desktop, tablet & mobile
• Testing on iPhone & iPad using Adobe Device Preview
• What is technically possible in web design
• Using art boards
• What about page heights
• Page guides, columns & rulers
• Picking website colors
• Adding structure to your site with the vector shapes
• Production video - adding structure to your web design
• Expanding & fixed width text boxes in Photoshop
• How to design using web safe fonts via Google fonts
• Place holder text with Lorem Ipsum
• Production video - adding all of our text
• Adjusting your page edges
• Where to get commercial use free images
• Embedding or linking your images?
• How to mask your image using a clipping mask
• Masking images for rounded corners & circles
• How to create large background images
• Production video - adding our images
• Where to get commercial use, free icons for your Photoshop web design
• Production video - adding our icons
• How to tidy up with layer grouping
• Find what you need quickly with layer search
• Naming your layers like a pro
• Designing a form for your website
• How to create a footer for your website
• Production video - finishing up our desktop
• Designing your mobile website view
• Production video - completing our mobile view
• Exporting your web images
• Exporting CSS from photoshop
• Using Adobe Generate to make image export amazing
• I don't want this to be over. What next, Dan?