How to Design a Website in Photoshop
Daniel Scott, Adobe Certified Trainer & UI/UX Expert
-
-
Intro
1:43 -
What do we need to deliver at the end of our project
0:49 -
What is Photoshop's role when designing a website
0:55 -
What are the production videos
0:24 -
Getting your workspace ready for UI work
0:45 -
Adjusting the Photoshop preferences
2:04 -
Download the exercise files
0:45 -
Understanding responsive mobile & tablet design
1:44 -
Understanding grid systems & Bootstrap
6:28 -
Tips for zooming & navigating your document
2:02 -
Measuring & spacing tools
3:53 -
Layer shortcuts you need to know
2:48 -
The eye dropper tool
1:28 -
The transform tool
1:40 -
The 'f' key
1:34 -
Screen sizes for desktop, tablet & mobile
1:51 -
Testing on iPhone & iPad using Adobe Device Preview
5:46 -
What is technically possible in web design
3:05 -
Using art boards
3:48 -
What about page heights
1:18 -
Page guides, columns & rulers
2:14 -
Picking website colors
3:42 -
Adding structure to your site with the vector shapes
4:04 -
Production video - adding structure to your web design
3:12 -
Expanding & fixed width text boxes in Photoshop
3:12 -
How to design using web safe fonts via Google fonts
4:07 -
Place holder text with Lorem Ipsum
1:23 -
Production video - adding all of our text
6:16 -
Adjusting your page edges
1:28 -
Where to get commercial use free images
2:10 -
Embedding or linking your images?
2:12 -
How to mask your image using a clipping mask
3:04 -
Masking images for rounded corners & circles
2:52 -
How to create large background images
5:00 -
Production video - adding our images
9:24 -
Where to get commercial use, free icons for your Photoshop web design
5:03 -
Production video - adding our icons
2:29 -
How to tidy up with layer grouping
4:34 -
Find what you need quickly with layer search
1:28 -
Naming your layers like a pro
1:11 -
Designing a form for your website
4:12 -
How to create a footer for your website
1:17 -
Production video - finishing up our desktop
1:19 -
Designing your mobile website view
7:56 -
Production video - completing our mobile view
16:46 -
Exporting your web images
8:43 -
Exporting CSS from photoshop
2:47 -
Using Adobe Generate to make image export amazing
4:49 -
I don't want this to be over. What next, Dan?
0:50
-