How to Design a Website in Photoshop

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?