MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Photoshop CC for Web Design

Course Summary

Learn to create UI elements, web graphics, wireframes, and functional mockups that transition beautifully and easily to production with Photoshop.       

  • +

    Course Syllabus

       Using exercise files
       How to send feedback
    1. Core Concepts
       Understanding the "new web"
       Why use Photoshop for web design?
       Decoding screen size and resolution
    2. Setting Up Photoshop for Web Work
       Creating a web design workspace
       Creating documents for web projects
       Understanding web color models
       Adjusting Photoshop color settings
       Creating a developer-friendly file
    3. Designing Responsively
       What is responsive design?
       Choosing the right breakpoints for your design
       Creating responsive templates in Photoshop
    4. Creating a Wireframe
       Reviewing client specs
       Creating a sketch
       Exploring grid systems
       Setting up your project
       Building your wireframe with shapes and text
    5. Creating Aesthetic Elements
       Developing a color theme
       Choosing the right fonts
       Setting up character and paragraph styles
       Finding images for your mockup
    6. Creating a UI Kit with Photoshop
       Choosing a UI theme
       Using icon fonts and sets
       Adding UI elements to your wireframe
       Saving UI elements as shapes
    7. Assembling a Page Mockup
       Applying your color scheme
       Styling navigation
       Styling input areas
       Adding copy from your client
       Adding images to your mockup
       Adding the finishing touches to your design
    8. Optimizing Web Graphics
       Understanding when to use images vs. CSS
       Decoding web file formats
       Optimizing individual images
       Using the Photoshop web asset generator
       How and when to use SVGs
    9. Creating Image Sprites
       What is an image sprite?
       Developing a sprite grid
       Assembling your sprite
       Optimizing sprite images
    10. Using Other Apps in Your Workflow
       Creating and using CSS with Photoshop
       Exporting HTML from Photoshop to an integrated development environment (IDE)
       Using Edge Reflow to test responsive designs
       Using Photoshop files in Muse websites


Course Fee:
USD 25

Course Type:


Course Status:



4 - 5 hours / week

This course is listed under Development & Implementations and Project & Service Management Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top