Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Digital Media Through Photoshop!
You have completed Digital Media Through Photoshop!
Preview
Our artboards are ready. Now we will add in the elements and lay them out to fit each artboard.
New Terms:
- Hand Tool - allows us to navigate within a document, helpful for multiple artboards or while zoomed in.
- Embed - Embedded files keep associated graphics within the photoshop document, as opposed to creating a link or reference to that file, keeping the document contained while also increasing file size.
- Eyedropper Tool - samples color for use as foreground, background and text color.
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
Let's now bring in our image.
0:00
There are many ways to do this, but
since we already have the image open
0:02
in another Photoshop tab,
we'll use the marquee tool.
0:05
Select the marquee tool and press Cmd+ A,
then press Cmd+C to copy it.
0:10
We'll navigate to our new document and
then paste into the largest artboard.
0:17
Remember, because we're
using our Raster Image,
0:22
we can reduce the image size to
accommodate smaller artboards.
0:25
We're not able to enlarge
it without losing fidelity.
0:29
Let's paste it into our widest
artboard first, the iPhone artboard.
0:33
Select it from the Layers panel and
press Cmd+ V.
0:37
To ensure I've got the proper width,
I'll open the Properties panel and
0:42
type in the exact width
of the iPhone artboard,
0:48
which is 2,208 pixels and press Return.
0:52
And we can now move this image within
the artboard to best position it,
0:55
using the move tool.
0:59
I'll go ahead and
close this Properties panel.
1:04
When moving the layer, we can hold down
the Shift key while using the arrows
1:08
to nudge the layer more than just
simply pressing the arrow key.
1:12
Remember, it's okay to have
content outside the artboard.
1:16
It won't end up in our final image,
that looks good.
1:19
Well, let's name the layer real
quick from within the Layers panel.
1:22
I'm gonna name it background image.
1:27
Now here's where artboards shine.
1:31
We can simply duplicate this layer and
1:33
move the image to each artboard,
adjust the size to fit.
1:35
And position appropriately,
while being able to see
1:40
all three versions next to each
other to help maintain consistency.
1:43
To duplicate the layer,
we'll head to the Layers panel, and
1:48
click and drag the layer on top
of the new layer button twice.
1:51
Since we're going to be
working between layers,
1:55
I'm gonna rearrange my panels just a bit
to make sure we have plenty of room.
1:58
I'll collapse this column and
expand this one.
2:06
Click and drag twice.
2:20
Now we're able to move each image
layer into its respective artboard
2:25
by clicking and
dragging the layer in the Layers panel.
2:29
We'll then resize each of these images
appropriately for each artboard.
2:34
I use the hand tool to move between
artboards by pressing the space bar
2:40
while I click and drag.
2:43
Using the move tool,
we can resize this image by clicking and
2:46
dragging on any of the handles.
2:50
And again, I'm going to hold down
the Shift button actually while I resize.
2:53
Again, I can use the arrow keys to
move the image up in the layer.
2:58
We can be precise by using
the Properties panel.
3:03
Or we can use the move tool,
clicking and dragging the handles.
3:06
Occasionally, when you
move between artboards,
3:17
you may be asked to
commit to your changes.
3:20
That's pretty common.
3:22
Go ahead and click Apply.
3:23
Finally, let's head to our Twitter
artboard and resize this one as well.
3:26
I'm gonna use the arrow keys to move it
down just a bit and press Enter to commit.
3:41
We now need to add
the logo to our artboards.
3:47
Since we don't have this file open,
we'll use the file in place embedded.
3:50
The embedded option will keep the logo
file in the Photoshop document.
3:59
So just in case we share the file,
we won't need to include the original
4:03
logo files separately from
the Photoshop document.
4:07
And selecting the page is fine,
and press OK.
4:13
Let's go ahead and place this logo
about in the spot where we may want it.
4:17
Press Enter, let's go ahead and
duplicate the logo for each artboard,
4:23
using the same technique used for
the image layer.
4:27
Now we'll want to resize the logo.
4:41
Since the logo is in Adobe Illustrator
format, it's a vector graphic.
4:44
Meaning we can resize the graphic in
any way and it won't lose fidelity.
4:48
Let's resize it to fit just about
half the height of the image,
4:53
while leaving some breathing
room on each side.
4:57
Again, I'll use the hand tool
to navigate between artboards.
5:08
Sometimes, selecting the layer while you
have the move tool active will bring up
5:16
the bounding boxes, making it a little bit
easier to click and drag those handles.
5:20
Again, use the Shift key as
you're resizing your image
5:24
to maintain the aspect ratio and
not distort the dimensions.
5:28
Press Enter to commit the changes, and
let's move on to our last artboard.
5:34
Actually gonna adjust this one here,
move it up slightly.
5:51
And this one as well on our Twitter.
6:00
Of course we can be as exact or
as precise as we want to be.
6:07
But in this case,
we're just gonna eyeball it just a bit.
6:11
Okay, we've got all three
variations laid out now.
6:16
Finally, let's add the tagline
the client provided.
6:20
Nature Sells.
6:22
Let Us Capture It.
6:23
Using the text tool,
we'll use the Georgia font and
6:25
align that text to the N
in the Naturelight logo.
6:30
We'll increase the font size just a bit.
6:46
Next, let's change the font color
to match the red paint on the shed.
6:55
With the text tool selected,
let's go ahead and
7:00
click on the color within the top toolbar.
7:02
Now if we move our cursor
outside of our color dialog,
7:05
we can use the eye dropper
tool to sample the red paint.
7:09
This will help tie our image to the text.
7:13
Let's duplicate our text for each artboard
and place appropriately, and resize.
7:19
And instead of using the move tool for
our text, however, we'll go ahead and
7:25
adjust the font size individually.
7:28
Placement of the text is up to you.
7:48
I would just make sure that
there is enough space so
7:51
it doesn't impede on our logo.
7:55
And looks pretty close to how
our iPhone version looks.
7:58
Again, use the arrow
keys to modify the size.
8:24
All right, let's zoom out and take a look.
8:28
Now we've got all three variations
laid out for each specification, and
8:33
they match even though the aspect
ratios are slightly different.
8:37
In the next video, we'll prepare and
8:41
export these images to
deliver to our client.
8:44
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