Photoshop CC for Responsive Web Design

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

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

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.

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

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

Understand how color on screen works.

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

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

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

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

Setting our preferences for a new document.

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

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

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

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

Make your workflow process easier by having colors available quickly.

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

Learn the extreme differences between vector and bitmap graphics.

Different ways to draw shapes.

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

Learn all the different types of shape tools in Photoshop

Learn what exactly happens when you draw a line.

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.

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

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

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

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

Using the Character and Paragraph styles panels

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

Character styles can make little style adjustments quickly and easily.

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

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

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

Several ways to import our artwork into the website design.

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

Add interesting effects to your artwork "non-destructively"

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

Add powerful photographic effects to your Photoshop layers.