Layout Tools

[00:00:00]
>> Sarah Drasner: All right, so let's talk about tools, many of you know these tools but in case you don't let's just go over them very briefly. Because maybe you know the tools but you might not know why you would reach for one over another. Photoshop and Illustrator are made by Adobe, they are both very old.

[00:00:17]
And so people who have worked on the web for a long time probably know they way around them. I'm one of these people, so I have all of these shortcuts and things as I work with Photoshop and Illustrator. I work with Sketch but I'm not as comfortable in Sketch because it's a little bit of a newer tool.

[00:00:35]
Photoshop is really great for JPEGs, Bitmaps, like those masks we were talking about earlier, transparencies, effects, filters, things like that. It's a really, really powerful tool, and it actually does do shapes now, and it does do things like artboards and stuff. So they've borrowed from other programs, it used to be very clear, if you're doing x, use Photoshop, if you're doing y, use Illustrator.

[00:01:03]
They've actually learned a bit from each other, so the delineation isn't so striking anymore. Illustrator was originally intended for things that are more like vectors. So if you're creating an SVG, Illustrator is really great for that. Drawing path points and if you do make a gradient, the gradient is made in code not like with pixelly things.

[00:01:28]
So creating things that have like a lot of gradient, with a lot of patterns and textures. Probably going to work a little bit better in Photoshop. Illustrator has those capabilities too, if you only had Illustrator, you could totally get by, but those are where their strengths lie, I would say.

[00:01:45]
It's a little bit more clumsy to work with the shapes in Photoshop than in Illustrator. Illustrator has all sorts of ways to combine shapes and break them apart and clip them and things like that. Sketch is a newer tool that took the world by storm, if you go into any development office today you're probably gonna see a lot of designers using sketch.

[00:02:07]
And the reason for that is it's really efficient at having multiple ideas in one place. So when I'm working with Sketch, I can have an art board that shows a more desktop-y view, a move mobile-y view. Just like a bunch of lines, some symbols, things like that, and they can all exist on the same page and it really doesn't slow down.

[00:02:31]
It doesn't go like, [SOUND] And your computer sounds like it's gonna fly away. I mean eventually you can make an artboard that is just too much. But Sketch is really good for that, Sketch is really good at housing those things. It's really good at reusable symbols, so you can take a bunch of icons and drop them into designs really well, it's not good at exporting those symbols.

[00:02:54]
I'm gonna talk a lot about that tomorrow in the SVG animation course. But Illustrator is way, way superior in terms of their export because they have Dmitri Baranovski who is the person who wrote snap SVG. So it's just like really, really awesome. Sketch gives you all these nested groups that are created in a way that's really hard to optimize and even if you do, it's not easy to animate or work with.

[00:03:21]
So there are some differences in the way that they handle vector-y things. All of these tools are awesome, and none of them are wrong. So you can make beautiful things in every single one of them. It's like when people say, which JavaScript framework should I use? Same kinda thing, same kinda thing.

[00:03:42]
We're like, all get the job done, it depends on personal preference for some of this stuff.