Overview
  • Introduction
  • 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?
  • What are we making in Photoshop?
Before you get started
  • Getting your workspace ready for UI work
  • Adjusting the Photoshop preferences
  • Download the exercise files
  • A good web designer is alway prepared.
Mobile friendly web design
  • Understanding responsive mobile & tablet design
  • Understanding grid systems & BootStrap
  • Know my grids.
The tools you’ll need
  • 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
  • Name that web design tool
Triple check it works!
  • Testing on iPhone & iPad using Adobe Device Preview
  • What is technically possible in web design
  • Screen sizes for desktop, tablet & mobile
  • Testing, testing... 1, 2, 3
Your pages
  • Using art boards
  • What about page heights?
  • Page guides, columns & rulers
  • How important are your page heights?
Website Colors
  • Picking website colors
  • Know what colors to use.
Adding structure to your website design
  • Adding structure to your site with the vector shapes
  • Production video - adding structure to your web design
  • Adding structure
Using text in website 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
  • It all looks Latin to me.
Page adjustments
  • Adjusting your page edges
  • Page adjustment
Using images in your website design.
  • Where to get commercial use free images
  • Embedding or linking your images?
  • How to mask your images using a clipping mask
  • Masking images for rounded corners & circles
  • How to create large background images
  • Production video - adding our images
  • Images
Using icons in your website design.
  • Where to get commercial use, free icons for your Photoshop website design.
  • Production video - adding our icons
  • Coloring your website icons
Mastering layers
  • How to tidy up with layer grouping
  • Find what you need quickly with layer search
  • Naming your layers like a pro
  • Become a Photoshop layer professional
Forms and footers
  • Designing a form for your website design
  • How to create a footer for your website
  • Production video - finishing up our desktop view
  • Forms in Photoshop
Designing for mobile websites
  • Designing your mobile website view
  • Production video - completing our mobile view
  • Mobile, Tablet or Desktop first?
Exporting your Photoshop website design
  • Exporting your web images
  • Exporting CSS from Photoshop
  • Using Adobe Generate to make image export amazing
  • Web image types
Conclusion
  • I don’t want this to be over. What next Dan?