Photoshop CC for Responsive Web Design
4.8 (29 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,110 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Photoshop CC for Responsive Web Design to your Wishlist.

Add to Wishlist

Photoshop CC for Responsive Web Design

Learn how to use Photoshop in the process of designing and building full responsive web mock-ups.
4.8 (29 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,110 students enrolled
Created by Marc Rogall
Last updated 2/2016
English
Current price: $10 Original price: $35 Discount: 71% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 35 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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.
View Curriculum
Requirements
  • An installed version of Photoshop CC.
Description

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.

Who is the target audience?
  • The ideal student for this course for anyone wanting to expand they’re current skill set. Whether that be a UX specialist, web developer or for any beginner who’s looking for initial Photoshop training.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
49 Lectures
03:28:40
+
Intro – What is responsive design?
1 Lecture 02:52
+
Concepts You Need To Understand
4 Lectures 19:12

In this video we'll explore a responsive site to get a better idea of the design theories.

Preview 09:01

Planning a responsive design can be frustrating, but in these few key points can help you plan better responsive sites.

Planning a responsive site
03:05

In no way will you only be a part of any one phase of the process, but this video will shed some light on where you might fit.

Where you and Photoshop fit into the design process
03:33

Before we start learning how to create web graphics, we first need to understand the difference between resolution and screen size.

Screen size vs. resolution
03:33
+
Customizing our Photoshop setup
5 Lectures 16:07

Let's customize Photoshop so that we can work easier developing responsive websites.

Arranging the workspace
05:17

Understand how color on screen works.

Understanding color
04:27

Color Handout
2 pages

Understand how to set color so that your web graphics look as good as possible from one screen to the next.

Adjusting Photoshop's color settings
03:55

Naming layers and organizing them so that other possible team members can work with you.

Organization
02:28
+
Designing for Multiple Devices
7 Lectures 34:11

When does your design need to change depending on someones screen size?

Determining breakpoints
01:03

Grid handout
2 pages

Let's use the grid system of the world most popular responsive website development framework as a starting point for our designs.

Bootstrap Grid
04:33

Setting our preferences for a new document.

Opening a new document
03:17

Setting up our large grid system for our "desktop" size website design.

Creating our large grid
10:15

Setting up our medium grid system for our "landscape tablet" size website design.

Creating our medium grid
08:02

Setting up our small grid systems for our "portrait tablet and mobile" size website design.

Creating our small grid
07:01
+
The Backbone of Photoshop – Layers
1 Lecture 05:53

Learn all the in's and out's, and the true power of the layers panel. Quite possibly your most important tool.

Using the layers panel
05:53
+
Color
2 Lectures 06:34

Make your workflow process easier by having colors available quickly.

Creating custom color swatches
03:56

Integrate Adobe's online color tool with Photoshop, and share them with the rest of your team.

Working with Adobe Color
02:38
+
Working with Basic Shapes
11 Lectures 59:47

Learn the extreme differences between vector and bitmap graphics.

Vector vs. Rasterized graphics
02:55

Different ways to draw shapes.

Three ways to use the shape tools
03:59

Learn the difference between shapes and paths and why each is ideal in different situations.

Converting shapes to paths
01:45

Learn all the different types of shape tools in Photoshop

Drawing rectangles and ellipse's polygons and stars
03:38

Learn what exactly happens when you draw a line.

Drawing lines
02:08

Building the large grid graphic elements
06:34

Building the x-small grid graphical elements
09:40

Building the main content sections
07:04

Building the sidebar
06:18

The pen tool is a powerful Photoshop tool, one you will probably have to learn to like. Once you do, you'll be a more powerful designer.

The pen tool
07:40

Use the selection and direct selection tools to finish the complex graphical elements.

Finishing The Graphical Elements
08:06
+
Working with Text
8 Lectures 26:15

Using system fonts in your designs and the possible success rate.

Web safe fonts
01:51

Apply the always growing library of online web fonts to your designs.

Google fonts
02:35

What's the difference between the two types of text boxes in Photoshop.

Point and paragraph text
01:41

Using the Character and Paragraph styles panels

Styling Text
05:57

Saving styles in the Paragraph styles panel to quickly format text.

Setting up paragraph styles
02:45

Character styles can make little style adjustments quickly and easily.

Setting up character styles
03:32

A quick brief on some things you may not know about mobile typography.

Text for Mobile Devices
03:24

Implementing the surge of icon fonts has made the transition from design to development very easy.

Icon fonts
04:30
+
Importing Artwork
2 Lectures 10:25

The power, and one of the main cornerstones, of layer masks.

Layer Masks
05:27

Several ways to import our artwork into the website design.

Importing our logo and imagery
04:58
+
Adding Effects
4 Lectures 11:36

Adjustment layers are a powerful Photoshop tool to make stunning effects.

Adjustment Layers
02:40

Add interesting effects to your artwork "non-destructively"

Understanding layer styles
03:05

Save and export layer styles for quick use and sharing amongst your team.

Saving layer styles
02:06

Add powerful photographic effects to your Photoshop layers.

Blend Modes
03:45
2 More Sections
About the Instructor
Marc Rogall
4.8 Average rating
28 Reviews
1,110 Students
1 Course
Web Designer, Post-Secondary Professor

I've been designing since 2001 when I began my post-secondary education and received by diploma in graphic design.

Throughout my career, I have worked for companies that specialize in software development, which has provided me with extensive experience in interaction design. During this time, I enjoyed working with smaller freelance clients as well. It was at this point when I really started to enjoy designing and developing user interfaces and user experiences.

I currently teach and co-ordinate a web design and development program at a private career college, as well as teach part time at the local community college in the graphic design program where I received my diploma. I still maintain a list of steady freelance clients part-time.

I make my living teaching and developing curriculum while my freelance work continues to whet my creative appetite. I do however get just as excited seeing students succeed.