This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Photoshop CC for Responsive Web Design
Learn how to use Photoshop in the process of designing and building full responsive web mock-ups.
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.
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.
Concepts You Need To Understand
Customizing our Photoshop setup
-
2
Exploring a responsive siteIn this video we'll explore a responsive site to get a better idea of the design theories.
-
3
Planning a responsive site
Planning a responsive design can be frustrating, but in these few key points can help you plan better responsive sites.
-
4
Where you and Photoshop fit into the design process
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.
-
5
Screen size vs. resolution
Before we start learning how to create web graphics, we first need to understand the difference between resolution and screen size.
Designing for Multiple Devices
-
6
Arranging the workspace
Let's customize Photoshop so that we can work easier developing responsive websites.
-
7
Understanding color
Understand how color on screen works.
-
8
Color Handout -
9
Adjusting Photoshop's color settings
Understand how to set color so that your web graphics look as good as possible from one screen to the next.
-
10
Organization
Naming layers and organizing them so that other possible team members can work with you.
The Backbone of Photoshop – Layers
-
11
Determining breakpoints
When does your design need to change depending on someones screen size?
-
12
Grid handout
-
13
Bootstrap Grid
Let's use the grid system of the world most popular responsive website development framework as a starting point for our designs.
-
14
Opening a new document
Setting our preferences for a new document.
-
15
Creating our large grid
Setting up our large grid system for our "desktop" size website design.
-
16
Creating our medium grid
Setting up our medium grid system for our "landscape tablet" size website design.
-
17
Creating our small grid
Setting up our small grid systems for our "portrait tablet and mobile" size website design.
Working with Basic Shapes
Working with Text
-
21
Vector vs. Rasterized graphics
Learn the extreme differences between vector and bitmap graphics.
-
22
Three ways to use the shape tools
Different ways to draw shapes.
-
23
Converting shapes to paths
Learn the difference between shapes and paths and why each is ideal in different situations.
-
24
Drawing rectangles and ellipse's polygons and stars
Learn all the different types of shape tools in Photoshop
-
25
Drawing lines
Learn what exactly happens when you draw a line.
-
26
Building the large grid graphic elements
-
27
Building the x-small grid graphical elements
-
28
Building the main content sections
-
29
Building the sidebar
-
30
The pen tool
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.
-
31
Finishing The Graphical Elements
Use the selection and direct selection tools to finish the complex graphical elements.
Importing Artwork
-
32
Web safe fonts
Using system fonts in your designs and the possible success rate.
-
33
Google fonts
Apply the always growing library of online web fonts to your designs.
-
34
Point and paragraph text
What's the difference between the two types of text boxes in Photoshop.
-
35
Styling Text
Using the Character and Paragraph styles panels
-
36
Setting up paragraph styles
Saving styles in the Paragraph styles panel to quickly format text.
-
37
Setting up character styles
Character styles can make little style adjustments quickly and easily.
-
38
Text for Mobile Devices
A quick brief on some things you may not know about mobile typography.
-
39
Icon fonts
Implementing the surge of icon fonts has made the transition from design to development very easy.
Adding Effects
Gathering our Assets
-
42
Adjustment Layers
Adjustment layers are a powerful Photoshop tool to make stunning effects.
-
43
Understanding layer styles
Add interesting effects to your artwork "non-destructively"
-
44
Saving layer styles
Save and export layer styles for quick use and sharing amongst your team.
-
45
Blend Modes
Add powerful photographic effects to your Photoshop layers.
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!