Layout and Composition Demo

[00:00:00]
>> Sarah Drasner: All right, demo time, so let's go into Photoshop here and let's go like that. I'm gonna go to create new and then we're gonna create a new composition here. I already put a grid onto this and that's one of the preferences I have set up. If you need to do that, you go view, and you go show, and you go grid or if you get good at those quick keys, command and single quote.

[00:00:36]
You can also snap to grid and right now we're going to snap to grid, you can see that we also have rulers here. If I got CTRL R, it removes the rulers, if I bring, let's say Ctrl R brings them back. Also, if I have the rulers on the board, I can bring guides, so I can use these guides to, how we're lining things up.

[00:00:58]
So if you don't wanna use a grid, you don't have to, you could also say. View, Show, Grid, and then you can just use these kinds of anchoring guides instead, so let's do View, Show, Grid again. So let's make a couple of compositions, just with some circles and squares and things like that.

[00:01:20]
So I'm actually gonna do a darker grey, so that you can see. So maybe we'll just start with a giant square or rectangle. Actually, I'm gonna go all the way across, here you can see how it's snapping, and then I hit G and Draw something, right? So here we've got a boring rectangle.

[00:01:48]
All right, so then if I wanna make a new square, I would have to get out of that, that move tool. And so I hit V and then M, so now I'm back into the marquee tool, but I have to toggle between tools. You can see this toolbar here, has all the tools, so here's the marquee, here's the elliptical marquee.

[00:02:08]
Here I'm gonna hit Shift and M, and that will give me a circle, Shift and M will give me a square, right? This Move tool is the thing that will allow me to move things, convert to a normal layer, let's do this again, go back.
>> Sarah Drasner: And make a new layer here and [INAUDIBLE] layer.

[00:02:36]
>> Sarah Drasner: Okay, cool, so now maybe I wanna cut this up a little bit cuz I don't want just one image spanning the entire thing, we talked about how that might be a little bit boring. So maybe I want some text here, except maybe going up and down or something instead of just normal.

[00:02:55]
So I can actually turn text on its head and then I'm gonna make the column here, no maybe here. All right, so I'm deciding right now that this is probably a photo, and this is gonna be a column of text. Maybe I have another little piece of text down here that fits along with this column, and I probably need a nav too, right?

[00:03:21]
So first I'm gonna just go across like that as well and then we've got a really boring grid. But so maybe we wanna break up this nav a little bit and I wanna do, probably I don't span all the way with this content. I don't have that many allies in my nav, but we talked about those circles.

[00:03:43]
So maybe we do Shift and M to make a circle, and go a little bit bigger. We talked about how we make it a little bit bigger, so then I can make the circle, and then maybe I wanna move it into place. So that's a composition, I'm actually gonna group all of this stuff, that's how I group, so I selected all of these and I put them in a group.

[00:04:07]
So now I can toggle these compositions, okay, that's a composition, that's a composition. So maybe I try to make something like this in code just to try things out right. Lets try one more. I'm gonna remove these rulers, maybe this time, let's just do something that's skinny across it.

[00:04:38]
>> Sarah Drasner: Let's start with something like that,
>> Sarah Drasner: Okay, so maybe we want to have columns of texts under. Maybe this is a few different images or something like that. So let's break up the images, I think this time let's try to break up the images over here on this side.

[00:05:05]
And then maybe we have a column of text over here.
>> Sarah Drasner: And actually, let's put this on its own layer so that it can duplicate, so maybe we want another column of text.
>> Sarah Drasner: Over here, and then maybe we want a nav kind of thing but we want it to line up with this guy, with the anchoring, so maybe we do,

[00:05:42]
>> Sarah Drasner: Something like that, well, a new layer, and then we probably want a circle somewhere. So let's do Shift + M, and I'm gonna put a little logo in the corner here, shift,
>> Sarah Drasner: Okay, cool, but we talked about diagonals, maybe we wanna introduce a diagonal somewhere in this.

[00:06:14]
So maybe we don't want it to be part of the composition, but something that's a piece of the background or something like that. So I'm gonna grab this Polygonal Lasso Tool and break that grid.
>> Sarah Drasner: And we're gonna put this on it's own layer, add it in. And then I'm gonna reduce the opacity of this layer so that it's just a piece of the composition instead of a thing.

[00:06:47]
Maybe I wanna duplicate or mirror that somewhere else in this composition so that it's not the only diagonal. I could also maybe take a bite out of this one, actually that's wrong. By the way, you'll get stuck in these diagonal lasso tools, it will keep going until it finds its first part.

[00:07:13]
And you'll know it found its first part because a little circle will come on the side, so if you go down, around here and then you see the little circle up here in the corner? It's like a little circle. Now I can go find the layer that this is on, I think it's this one, yeah, and go into there and delete.

[00:07:35]
I don't know, maybe it's, again, not the best compositions in the world but still a bit more interesting and intriguing than what you usually start with. So you can start to see how thinking just about the layout and just about the composition without thinking about everything else. Without thinking about the typography or the color or anything else, simplifies that process a little bit, you can just think about the shapes and take them and remove them.

[00:08:03]
And maybe I'm presenting this to somebody and I can just go, well here's one idea, here's another idea, here's another idea, and we can talk through these concepts. And which one's the strongest or what needs to be built off of it, maybe we work off of these things a little bit later.

[00:08:21]
None of these are final or anything, but you can see how its a conversation-opener to like, do we wanna have this circular layout, or how would that work?