Mastering Photoshop for Web Design (Smashing Magazine)

283 Pages·2010·7.12 MB·English

by  Thomas Giannattasio

Table of Contents
Introduction
About the Author
Imprint
Chapter 1, Color Management
Chapter 2, Paths
Chapter 3, Layer Styles
Chapter 4, Brushes
Chapter 5, Typography
Chapter 6, Photography
Chapter 7, Exporting
Summary
Smashing eBooks Series
Introduction
This book was written in the hope of filling a gap — a gap that has
existed for as long as designers have been using Photoshop for Web
design; a gap that we so often fill with tutorials focused on the latest
trends and on inspiration galleries that are quickly browsed and
forgotten; a gap that is growing as quickly as our technologies. It’s a gap
of foundation.

The fast pace of the Internet has focused us on the latest and greatest
techniques, which typically have a lifespan of only a few months. Rarely
do we focus on the fundamentals, the principles that outlive the trends.
Unfortunately, the principles are often less appealing than the shiny and
new. Photoshop tutorials offer quick results. They hold our hands step by
step until something incredible appears, but they rarely go in depth to
explain the principles that enable us to create something unique and
incredible of our own.

Mastering the fundamentals of our tools opens our minds and unlocks
our inherent creativity. It helps us recognize the difference between
timeless and trendy. It increases our efficiency and ultimately makes us
and our work more valuable.

My hope is that this book helps you gain a deeper understanding of
Photoshop. If you’re a beginner, I hope it gives you the comprehension
you need to bring your ideas to life. If you’re a veteran, I hope it unveils
some of the mysteries that have always boggled you. Ultimately, though,
I hope this book increases your appreciation of the fundamentals and the
subtleties that make Photoshop such a powerful tool.
About the Author Thomas Giannattasio
is an interactive designer who resides in
the Washington DC metro area. He
specializes in Web design and front-end
development, particularly art direction,
website design and application design,
and has 14 years of experience. Thomas
cares strongly about typography,
simplicity and user experience.
Currently he works as a senior designer
for a global marketing firm and
freelances under the name attasi.
Dedicated to my relentlessly supportive wife, Maggie, without whom this book
would not be possible. Thanks for putting up with me!

— Tom
Imprint

Published in July 2010
Smashing Media GmbH, Freiburg, Germany
Book Cover Design: Andrea Austoni
Proofreading: Andrew Lobo
Layout: Jessica Bordeau, Vitaly Friedman
Concept & Editing: Sven Lennartz, Vitaly Friedman
Chapter 1, Color Management

Maintaining a consistent appearance on the Web is difficult because you never
know the end user’s environment. They may be viewing a website on their home
computer or on a mobile device. They could be on a Windows platform or
running a Mac. Even within these parameters, a multitude of other variables
affect how their monitor is calibrated. All of these factors amount to an
unremediable loss of control over the final output. Colors can appear lighter or
darker, more or less saturated, cooler or warmer, or just plain wrong depending
on the user’s environment. This can be quite a problem, especially with a client’s
brand-specific colors As Web designers, our responsibility is to ensure that the
experiences we craft are as true to the original as possible. To do this, you need
to manage and align every step of the design process with how the majority of
users will be viewing your work. This requires a complex and equally confusing
system of color management. While it doesn’t completely solve the problem of
color shifting, it makes it far less severe and ensures the maximum preservation
of colors across a majority of devices.
Calibrating the Display
Gaining control of your color output starts by controlling your input (i.e. your
monitor). A properly calibrated monitor is crucial: it lays the foundation for a
properly managed workflow. Calibrating your monitor can be done with
software, but it is better left to a colorimeter. Purchasing a colorimeter is a good
idea if you’re concerned about accuracy. A number of companies sell affordable
solutions: Monaco Optix, LaCie blue eye, basICColor displaySQUID, etc.
Whether you use hardware or software to calibrate your monitor, let your
monitor warm up for about half an hour. Also ensure that the lighting in the
room is soft and evenly distributed and that no light shines directly on the
monitor.

Because our work will be displayed on both Macs and Windows machines, our
gamma and white point should be set to the most common settings. Gamma is
basically a value that represents the relationship between luminance values of
the monitor. The higher the number, the darker the display appears. Windows
machines run a gamma of 2.2, while Macs run 1.8 — although, Snow Leopard
now defaults to 2.2. A gamma of 2.2 is the most common setting of Web users,
and for this reason your monitor should be set to match. The most common
white point is D65, and you’re best off following suit.
The LaCie blue eye colorimeter (http://bit.ly/cHphAV)
ICC Profiles
Managing color across the ever-increasing spectrum of devices would be
impossible without a universal standard. The International Color Consortium
(ICC) has provided just that. By specifying vendor-neutral color specifications,
the ICC has created the ability for devices to interpret and display color as
intended. In order for the ICC specification to work, both devices and files need
to have profiles attached to them. An image file’s ICC profile essentially tells the
device how to interpret its color data, and the device’s profile tells the system
how to display that color data.

The sRGB color gamut. (http://bit.ly/aYuSGV)