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 Adobe Illustrator for Web Design!
You have completed Adobe Illustrator for Web Design!
Preview
Turn your Social Media Icons into SVGs to get them onto your site in a scalable manner.
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
Down at the bottom here we want to replace
0:00
these placeholders with
actual social media icons.
0:04
So I do have some icons I've
downloaded from the Internet.
0:08
I'm gonna open those.
0:11
And you can see we have Facebook,
Twitter, and an RSS feed.
0:16
Gonna marquee over all
of them to select all.
0:22
Hit Command C, And, so
you can see I'll get out of full.
0:26
I'm just going back and
forth between these.
0:33
I'm gonna go back into my wire frame,
organize layers.
0:35
Okay, so now I will choose my
header in the 480 art board.
0:40
Command V to paste.
0:47
And what we want to do now is line
these up perfectly with where they're
0:51
at cuz the placement is right, and we also
want to confirm they're the same size.
0:57
Which these are clearly
bigger at the moment.
1:02
So let's see.
1:04
These are 60 and this is 120 by 120 so
1:09
I am gonna scale this down.
1:15
I'll do the same for these, if I double
click it takes me into isolation mode so
1:18
I just need to click once, and
1:24
that's what's happening is sometimes
I'll double click on accident.
1:26
So, transform 60 by 60, oops.
1:31
Okay, and then we'll do this last one.
1:43
60 by 60,
1:46
and we'll use our align
tools to line these up.
1:51
So I'll select, let's just zoom in
a little bit so you can see better.
1:55
Select the Facebook icon and this first.
2:00
Placeholder.
2:03
And then I'll select the placeholder
one more time because I want it to
2:06
be the target.
2:10
And then we'll do horizontal align center.
2:14
And vertical align center and
you can see that pops right into place,
2:18
that's perfect,that's just what I need.
2:22
I'll do exactly the same thing here,
horizontal line,vertical line.
2:24
Select that one more time.
2:35
Okay, great.
2:42
Good job, I am going to repeat
these steps on the desktop side and
2:43
I will meet you back and
we will move on to type.
2:48
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