72
INSTRUCTOR
NO
TES
Lesson 13: Preparing Files
for the Web
Up to this point, most of the lessons in this book have been geared toward
pr
i
n
t
output. This lesson represents a web site
production
workflow, though many of
t
he
techniques used in the lesson can also be useful when preparing images for
pr
i
n
t
.
The first part of this lesson involves a more traditional,
desktop-oriented
web
p
age
design, and then starting with the section Designing with Artboards, the
le
ss
on
shifts to creating designs optimized for mobile device display sizes.
Goals
for this lesson
Students create buttons using layers, type, and
fills all
Photoshop skills
t
he
y
ve
u
se
d
in earlier lessons. When student finish this lesson, they should be able to defi
ne
layer groups and describe their benefits, use the two forms of the Export As
d
i
alo
g
box to create assets from layers and layer groups, and create actions to a
ut
oma
t
e
t
asks
.
Remind students that Photoshop c
an
t
export a web site, but Photoshop is
of
t
en
ADOBE PHOTOSHOP CLASSROOM IN A BOOK (2022 RELEASE)
73
Using
the
Frame
tool
The 2019 release of Photoshop added the Frame tool to the Tools panel. In
L
ess
on
13, the Frame tool is used to create placeholders for web page graphics. Make
su
r
e
students
understand
the following points about
f
rame
s
:
Frames are vector objects that are essentially the same as the shapes you c
an
create with the shape tools and Pen tool, such as in Lesson 8.
Frames
aren
t
just for web design. They are useful for any situation where you
want to set aside a space for a graphic to be inserted later. In this way, frames
ar
e
Automating
a
multi-step task
In this lesson, students use Photoshop actions to prepare button files before
t
he
y
r
e
imported into the main document. Encourage students to
brainstorm
about
ot
her
actions they might create. Remind them that actions can be used to
per
f
orm
Placing
files in Photoshop
Students place embedded Smart Object files in this lesson. Discuss the
d
i
ff
er
enc
e
between embedded and linked Smart Object files. Ask students when it might
b
e
better to use each
option.
One way to examine the difference between embedded and linked Smart
O
bjec
t
s
74
INSTRUCTOR
NO
TES
Designing
with Artboards
Artboards join layer groups and layer comps as another way to organize content
i
n
Photoshop. You may want students to compare the three methods and discuss
when
using each one would be advantageous for their projects. As this lesson s
ho
w
s
,
artboards are valuable for creating and viewing multiple related designs in the s
ame
Expor
t
As, Save
for
Web,
and Adobe
G
ener
a
t
or
You may students to review how to export using the File > Export > Export As c
om
–
mand. Students who have used older versions of Photoshop may notice that the Save
for Web command has moved from its traditional location under the File menu,
and
is now named Save for Web
(Legacy).
Adobe
recommends
Export As as the
r
e
pl
ace
–
ment for Save for Web because Export As can do things Save for Web cannot,
suc
h
as export individual artboards or layers. But Save for Web can still do a few
t
hing
s
that Export As cannot (such as exporting an animated GIF when a Photoshop
do
c
u
–
ment contains an animation in the Timeline panel), so it may be worth having a
class discussion that compares those two c
ommand
s
.
You may also want to review how to export selected layers, by choosing Export As
or Quick Export from the Layers panel menu (or context-clicking a layer). This is
useful for exporting specific layers for web site graphics and mobile app
i
n
t
er
f
aces
.
ADOBE PHOTOSHOP CLASSROOM IN A BOOK (2022 RELEASE)
75
Questions
The following questions are not in the
studen
t
s Classroom in a Book.
1
Wha
t
s the difference between embedded and linked Smart
O
bjec
t
s?
2 You want to resize an artboard, but you
don
t
see either the artboard
r
e
si
ze
handles or the scaling values in the Options bar. To see those options, what
two
steps do you need to do first?
Answers
1 Embedded Smart Objects are included in the Photoshop file in their
entirety.