Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Art direction is a technique for drawing attention to the most important parts of an image as it's viewed on different devices.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Art direction is a technique for drawing
attention to the most important part of
0:04
an image as it's viewed on different
devices.
0:09
Let's say that we have a photo of a person
that's taken from a wide angle,
0:12
like our banner image.
0:16
On large screens, this probably looks fine
and
0:18
can be helpful because the surrounding
environment provides some context.
0:22
However on a small screen, the image may
be resized
0:27
to the the point where we can't even see
the person anymore.
0:32
In these cases, we need to do some art
direction, and
0:35
provide different crops and focal points
for our image.
0:38
We've already been doing a little bit of
art direction,
0:43
by using different image sources, with
different crops.
0:46
But there's more that we can do.
0:49
For instance, our banner image looks
pretty good when in landscape, but
0:52
what if a device has a portrait
orientation?
0:57
Then we just have a really small image,
1:00
when typically a banner image should be
large and impactful.
1:03
It would be better if we provided a square
crop of the image.
1:07
This is something we'll have to do in an
image editing tool, like Photoshop, so
1:13
let's take a look.
1:18
Now, I've already created some square
crops of our images,
1:20
but I just want to show you what this
looks like.
1:25
So I'm going to open the image folder in
workspaces and
1:28
I'll expand this a little bit so we can
see the names of the files.
1:34
And here we have our wide banner images.
1:37
And you can see the crops there.
1:40
So we've already been doing a little bit
of art direction.
1:42
But here I have banner square large and
banner square medium.
1:45
These square images have a different
aspect ratio than our wider banner images.
1:53
So we only want them to display when the
browser has an aspect ratio
2:00
that's thinner than it is wide.
2:05
Or in other words when its in portrait
mode.
2:08
The source set and sizes attributes don't
give us tight control over
2:11
which image gets chosen to be displayed.
2:16
Like I said earlier,
2:19
Chrome will always use the highest
resolution image it has in cache.
2:20
While it's better to use source set, and
sizes most of the time,
2:26
if we absolutely have to chose the source
image ourselves,
2:30
like in the case of art direction, then we
should use the picture element.
2:34
And that is what we'll learn about next.
2:39
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up