Photoshop CC for Responsive Web Design

Learn how to use Photoshop in the process of designing and building full responsive web mock-ups.

4.40 (49 reviews)
Udemy
platform
English
language
Web Design
category
instructor
Photoshop CC for Responsive Web Design
1,183
students
3.5 hours
content
Feb 2016
last update
$19.99
regular price

What you will learn

Asses responsive web design structure and functionality

Repurpose content for excellent user experience (UX) across multiple devices

Customize the Photoshop CC workspace specifically for web design.

Build mock ups with an understanding of responsive design principles

Navigate the Photoshop CC interface with ease.

Organize their Photoshop files for simpler navigation and way finding.

Draw simple and complex vector shapes.

Style readable and legible typography quickly.

Apply "non-destructive" styles and effects to custom graphics.

Edit photographs; the backbone that makes Photoshop so successful.

Why take this course?

Learn the concepts of responsive website design and how to customize Photoshop to create full page mock-ups.

Become an integral part in the overall process of web design and development with this beginner course.

  • Learn responsive web design concepts and tools
  • Customize Photoshop for a more streamline workflow
  • Build a consistent web site user experience
  • Prepare your designs for development


Be the fixture that turns ideas into reality

Learning how to create website mock-ups puts you at the apex of the web design process. This is where brainstorming ideas and concepts become a reality. With this skillset, you’ll bring “left-brained” design thinkers ideas to life. In addition you’ll be the liaison to the “right-brained” web developers.

Employees or freelancers with this ability are typically involved in parts of both the creative process, and development process. You benefit by being a more valualbe asset that can take part in conversations in many different phases of a project.

Content and Overview

Suitable for beginners, through this course of 49 lectures and almost 4 hours of instruction I’ll show you how Photoshop can, and is, being used in modern web design work flows. We’ll start off by covering some core concepts of web design, including how the web is evolving with the advent of mobile devices and why you’d want to use Photoshop for web design in the first place.

From there, you and I are going to be working together to create a full website mockup for a fictional restaurant called Bordeaux. I’ll show you how to set up your Photoshop environment for web work. Create templates for responsive web design projects. Design aesthetic elements like UI components. We’ll finally assemble a finished mockup. And then, I’ll show you how to deliver your final results to your client or to a developer.

Content

Concepts You Need To Understand

Exploring a responsive site
Planning a responsive site
Where you and Photoshop fit into the design process
Screen size vs. resolution

Customizing our Photoshop setup

Arranging the workspace
Understanding color
Color Handout
Adjusting Photoshop's color settings
Organization

Designing for Multiple Devices

Determining breakpoints
Grid handout
Bootstrap Grid
Opening a new document
Creating our large grid
Creating our medium grid
Creating our small grid

The Backbone of Photoshop – Layers

Using the layers panel

Color

Creating custom color swatches
Working with Adobe Color

Working with Basic Shapes

Vector vs. Rasterized graphics
Three ways to use the shape tools
Converting shapes to paths
Drawing rectangles and ellipse's polygons and stars
Drawing lines
Building the large grid graphic elements
Building the x-small grid graphical elements
Building the main content sections
Building the sidebar
The pen tool
Finishing The Graphical Elements

Working with Text

Web safe fonts
Google fonts
Point and paragraph text
Styling Text
Setting up paragraph styles
Setting up character styles
Text for Mobile Devices
Icon fonts

Importing Artwork

Layer Masks
Importing our logo and imagery

Adding Effects

Adjustment Layers
Understanding layer styles
Saving layer styles
Blend Modes

Gathering our Assets

Understanding web file formats
Exploring the save for web dialogue box
Adobe Generator

Final Thoughts

Goodbye

Screenshots

Photoshop CC for Responsive Web Design - Screenshot_01Photoshop CC for Responsive Web Design - Screenshot_02Photoshop CC for Responsive Web Design - Screenshot_03Photoshop CC for Responsive Web Design - Screenshot_04

Reviews

Jim
January 15, 2020
Very good instructor with lots of good tips and techniques. However, the course is quite old and has not been brought up to date to reflect changes in photoshop. Menu structures and tools are different from what has been presented in the tutorial. The next thing is seeing how to actually code the page with these assets.
Harish
September 17, 2017
Clear step by step understanding of Designing concept .. one of the best course to list in my favorites. I strongly recommend ever PSD web designing aspirant to take this course its worth it. 5/5 Stars of it!
E
February 8, 2017
The knowledge that is presented is solid in building good foundations in responsive design. The instructor demonstrates the math in building a grid, which is very helpful.
Lorena
September 4, 2016
Excellent course! Easy to follow. The pacing is great and the instructor is pleasant. The material is kept short, but goes beyond the basics. All of the topics discussed are relevant. Lot's of time-saving workflow tips. A good number of resources, Photoshop files and handouts, made available, which I found very useful. I would highly recommend this course to any designer, beginner to intermediate, who is interested in creating responsive mockups in Photoshop.
Kate
July 17, 2016
Early on in the course, the content was exactly as advertised (responsive web), but as I got further along, it became more of a rudimentary Photoshop course. The section on how to select the correct document sizes was far too brief. Then the instructor completely skipped many elements, including the building of HALF of the responsive layouts. This should be advertised as a quickie, beginners guide to Photoshop for web layouts. Very disappointed.
Christian
June 12, 2016
Very easy to understand explanations and useful basic Photoshop CC tricks for web, but not much topics about a way to manage the responsive design itself within a Photoshop CC project, as advertised.
Meaghan
February 13, 2016
It was very easy to follow along with the instructor because I could download the necessary files for each lesson. I never had to worry about falling behind. Can't recommend this enough.
Wolf
February 13, 2016
I found this course very informative and easy to follow. The instructor spoke clearly and at a pace that made learning fun again. His explanation of the hexadecimal color codes was much easier to understand and learn than it was in my computer programming course. I hope that this instructor will have other courses available in the near future.
Theo
February 8, 2016
I couldn't ask for more value from a single course. This is honestly the only thing anyone will need to become a web designer. I wish i had it when i started...

Charts

Price

Photoshop CC for Responsive Web Design - Price chart

Rating

Photoshop CC for Responsive Web Design - Ratings chart

Enrollment distribution

Photoshop CC for Responsive Web Design - Distribution chart
661148
udemy ID
11/5/2015
course created date
7/30/2020
course indexed date
Bot
course submited by