The document provides guidance on best practices for creating clean Photoshop (PSD) files for web design projects. It recommends starting with good file organization habits like logical naming and non-destructive editing using layers and masks. Adjustment layers and effects are preferable to allow easy changes later. Templates can then be reused each month. Specific tips covered include using the "Save for Web" feature to optimize file size, embedding fonts and images to ensure others can open the file properly, and using layer groups to organize elements.

1. Creating Clean psd’s
When you go to build a new psd, you want to start with
good habits because you may end up sharing this file with
a teammate or coming back to it at a later date (like this
time next year when it is “summer clearance again!;) Or
maybe even using this psd as your template for the
monthly store slides. Think about naming and organizing
everything logically right from the start and always use
non-destructive editing and effects (adjustment layers and
masking) so that it is easy to change your mind later and
not have to re-do the same work. Adjustment layers and
effects are also good to use because if you stumble upon
a favorite effect, you can easily copy, paste and apply this
into any other layer in any other psd! It’s all about a little
extra effort in the beginning so you do it once and then
have a “template” that you can use to easily knock out
next month’s offers. I have some examples to show how I
do this and what a clean psd looks like. I also have an
example of what not to do.
WEBSLIDES - DECONSTRUCTED
Here is an example from TFI this month. This store
doesn’t have a huge ad budget (no S|H campaign, print or
TV ads to match) so I went with lifestyle shots I found on
the OEM website. I create one psd file each month for
each store and put each model into it’s own layer group.
When starting from scratch, I’ll open a new ps doc the
correct size I need for the website. I’ll start with the first
model on the list, select my image and build the slide
elements (Choose font, font size, disclaimer font and size,

2. monthly OEM event logo, etc…), and add in the specific
information for this model. Then I’ll select all these layers I
just built and go up into this top menu and choose “new
group from layers” in the drop-down menu. Name it for
the model and click ok. Then, you can right-click on this
new layer group and choose “duplicate group” or you can
hit command-J to duplicate it. Open the copy, update the
contents for the next model on the list and repeat until
you have them all done! The more thorough you are in
your initial file creation, the easier everything is after-the-
fact. Especially when you come back to use it again.
So let’s take a look at a slide I received recently and
compare. (Open Screaming Deals psd.) If all I needed to
do was open this psd and save-for-web it would be fine. If
I want to make any changes…yikes. I do not have the
same fonts they used and some of the items are linked to
a creative cloud library file I do not have. There are a few
things you can do to avoid sending someone something
like this to try and decipher. First of all, create a clean psd!
Name everything and put them into layer groups and in
logical order. Next, only use Adobe Typekit fonts which
are available to every Adobe Creative Cloud user.
Sidenote: if you’ve never explored the Adobe Typekit, it
can be found in the assets folder in your creative cloud
member app. So many cool and free fonts to use that are
web-friendly! And if you have created your file using
obscure versions of helvetica and images found only on
your own hard-drive, you can still be sure you’re sharing
everything a person may need to on their end by

3. choosing “package” from the file drop-down menu. This
will collect all fonts and images you used and put them all
together in a tidy folder to send. I can show you more on
this later should you ever have need for it.
Which brings us into the next topic: Libraries vs
embedded images and logos.
Libraries save a ton of space and are a great way to
organize new model images and logos for the whole year
but keep in mind, when sharing files, you will need to
share the library of images used in that file also.
I created the TFI example by copying and pasting the
images from FIATusa.com directly into the psd. A space-
saving alternative, especially if you’re using only logos
and vehicle images is to build a brand library for the year.
A library makes sense in this case if we keep the same
look and feel throughout the year and advertise the same
models each month. I can just swap out the OEM event
logo, background and offer info each month.
{The new DDC slideshow widget has a lot more html-
friendly ways to build out our slideshows and better
automate them moving forward. I’m excited to experiment
with this!}
QUESTIONS:
JANET: Questions for Summit
Best Practices for Basic settings.
Choose the “graphic and web” setup and customize from
there.

4. Basic settings in Photoshop:
Web standard settings: (Can be viewed under Image >
Mode) RGB and 8 Bits/Channel - Bits per channel refers
to bit-depth, the more bits per channel the more colors
are displayed. Reducing our file to 8 bits per channel
immediately saves 2 bytes per pixel. 72 ppi (pixels per
inch) is a sufficient resolution for PS files that will be
displayed online. (Can be viewed under Image > Size)
Making sure you begin with the correct file size and these
settings will save you time in the end.
Crisp/Smooth/Sharp settings for type - this has to do
with aliasing. Aliasing is the visual stair-stepping of
edges that occurs in an image when the resolution is
too low. Anti-aliasing is the smoothing of jagged
edges in digital images by averaging the colors of the
pixels at a boundary. With our latest version of PS we
can actually go a step further and deal with SUB-
pixel information. Here is a quick video that explains
it: https://helpx.adobe.com/photoshop/how-to/new-
type-rendering-photoshop.html
Bicubic/nearest neighbor - this has to do with
resampling and Photoshop offers five resampling
methods:
• Nearest Neighbor is the most basic, and it's very
fast: To create a new pixel, Photoshop simply looks
at the pixel next to it and copies its value.

5. Unfortunately, the results are usually lousy unless the
image is made of colored lines or shapes (like an
image from Illustrator or FreeHand), but it's often
useful for preserving the readability of screen shots.
• Bilinear is slightly more complex and produces
somewhat better quality: the program sets the color
or gray value of each pixel according to the pixels
surrounding it. Some pictures can be upsampled
pretty well with bilinear interpolation. But we usually
use one of the bicubic options instead.
• Bicubic interpolation creates better effects than
Nearest Neighbor or Bilinear, but takes longer. Like
Bilinear, it looks at surrounding pixels, but the
equation it uses is much more complex and
calculation intensive, producing smoother tonal
gradations.
• Bicubic Smoother is a new interpolation method
specifically designed for upsampling. As its name
suggests, it gives a smoother result that handles
subsequent sharpening better than Bicubic sampling.
• Bicubic Sharper is another new interpolation
method, only this time designed for downsampling. It
does a better job of preserving detail than does
Bicubic.
The new simple rule: Use Bicubic Smoother for
upsampling (but don't expect miracles, particularly with
film scans) and Bicubic Sharper for downsampling.
(Define interpolate: to put (something) between other
things or parts)

6. “Save for web”
When preparing images and graphics for the web we
often need to compromise between file size and image
display quality. We use the settings in the save-for-web
dialog box to preview our optimized images in different
file formats with different settings to see what will display
best. Let’s look at these options now. Click command-W
to save-for-web. This can also be found under the file
menu, inside “export”. Best practices for web that I follow
is trying to keep my overall slide size around 200k or less.
Setting custom defaults on a tool.
If your Photoshop settings do not have the save-for-web
quick key-command set up, here is how to fix that. Go to
edit > keyboard shortcuts and select the “use legacy
channel shortcuts”. Or, you can go through this dialog by
tool, application, and panels to set up your own keyboard
shortcuts for anything you do often in Photoshop.
How much do you save - just the base .PSD with
folders, and only save the specific model/offers .pngs
(in your dealership Monthly Desktop Folder)? I save
everything, however it is a good idea to spring clean once
in awhile and toss out anything that no longer serves you
or that is easily replaced.