Photoshop for Web Design

About

Course URL

Introduction

Fontea plugin - gives access to Google fonts

Magic Scripts speed up some tasks

Adobe libraries - these are in the cloud and must be linked in order to work. URLs are provided in course.

Project Setup

Start designing small so it will work on any size; small, medium, large

StatCounter shows avg screen resolution

Graphics and web workspace

Layers panel at the top of panel list (used a lot)

Most used panels should be in horizontal panes while less used panles can remain in vertical pane

Layer comps used for button states?

Keep Fontea panel near character panel

Change rulers to pixels (rt click on ruler to change)

Snap should be on AND Snap To

Create workspace, then save custom workspace. Save any time it is changed

When creating new psd doc, check the artboars box

Psd artboards work like layer groups

Properties pane allows you to resize artboards more exactly

sRGB = standard RGB

When creating new doc, under advanced options, select sRGB. Also select square pixels

This can also be changed in edit>color settings

Libraries are in the cloud

Can also search for adobe stock images in libraries

Stores colors, text, layer styles, images, vectors, etc.

Images from adobe stock have watermarks until they are purchased.

Can share or collaborate on libraries

Design Responsively

Designing for a variety of devices so your design is displayed best.

Keys to responsive designs: Fluid grids, flexible images, media queries

Breakpoint: the point at which your layout will change to provide the user with the best interface.

Design for smallest viewport first (mobile first)

Helps biol down what the most important info on your site is

Creating grids

View>New Guide Layout

Set column number, column width, gutter width, etc.

Mobile: 6 col

Large screen: 12 col + 15pt gutter + 20pt margin (make sure to lock guides)

In complex layouts it may be hard to find which layer an object is on. If you have the Move tool (V) selected and press the Ctrl key you can select objects or elements. Clicking objects activates the layer that object is on.

It's possible to sample colors outside of the Photoshop window. With the Eyedropper tool selected, click and hold within the Photoshop window and drag the cursor outside the window. This keeps the Eyedropper tool active. When you release the mouse button, the color the cursor was hovering over will be selected.

Snapshots (in the History panel) allow you to save versions of your document so you can revert to a certain point if need be. These are good for deciding of you like a design one way or another without Ctrl+Z-ing a bunch.

Snapshots are TEMPORARY though. Once Photoshop is closed, the snapshots disappear.

Type anti-aliasing setting should be set to CRISP.

Layer Comps are handy for saving different versions of a design. This tool tracks layer states like visibility, position, and appearance. 

Smart Objects

Embedded: a separate psd file stored within the main psd file. Edits made to the embedded psd only affect the embedded version.

Linked: a separate psd file stored outside the main psd file. Edits made to the linked psd affect all instances that psd is linked to.

Design Process

Moodboards

purely for discussion - visual to word or phrase

Colors create mood, pictures enforce that mood.

Size does not matter

Can use moodboard template

Larger images should be most important to the mood

Wireframes

made before artwork is developed - keeps consistency between layout sizes

No graphics or design elements. No color, no lorem ipsum text

Shows how site will work, not what it will look like.

Reusable UI

Brad Frost - Atomic Web Design article

Jonathon Snook - SMACSS article

Use libraries to save and resue these elements

Adobe Stock has UI kits available. Are any FREE?

Can probably find free ones elsewhere online.

Create Comps

Just place graphics, add colors, and other design elements that are needed to complete the comp's appearance.

Style Guides

Like a brand guidelines for the web

• Logo treatment
  • How the logo should appear against diff backgrounds
• Colors
  • RGB
  • HEX
  • Also include colors for hover, link, on page colors
• Icons
  • Diff colors that may be used
• Typography
  • What setting are used for diff heading levels and body copy
  • Visually show how links should appear
• Buttons
  • Hover
  • Click
  • On Page
• Form Elements
  • Stay consistent with button elements
• Images
  • Styles to be used
  • How images should be used
• Do's and Don'ts
• Spacing

Style guide can be made using same grid as webpage it will be used for

Comps for Clients

Place in context so client understands how the various sizes are used

Export artboards to PDF

Retina Displays and Creating Retina Designs

• Device Pixel - smallest physical unit displayed
• Pixel Density - number of pixels displayed in a given space
• Resolution - number of pixels across the entire H or W of the device
• Pixels Per Inch (PPI) or Dots Per Inch (DPI) - amount of pixels you get when you divide the physical width of the display by the number of horizontal pixels displayed
• High DPI - Display density of 200 pixels per inch or greater

Physical screen size might be the same between devices but actual resolution can vary with pixel density

Generator

Generates exports according to layer name.

Add .jpg/.png/etc. extension to the layer name

Adding a 1-9 after the extension changes the quality. 1=10%, 9=90%, no number =100%