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