Design for Developers

Scale and Cropping

Design for Developers

Check out a free preview of the full Design for Developers course

The "Scale and Cropping" Lesson is part of the full, Design for Developers course featured in this preview video. Here's what you'd learn in this lesson:

By highlighting examples of playing with scale and cropping, Sarah shows how these tools can be used to create visually interesting and dynamic compositions with simple shapes and subjects.


Transcript from the "Scale and Cropping" Lesson

>> Sarah Drasner: All right, let's talk about Scale. This is a really good one because this is one that is so simple, but it's so effective for changing things up and getting a new kind of concept for your designs. So if we have an image and we change the scale of that image instead of plopping it on the page, it becomes a piece of the layout, or it becomes a piece of the grid, or it becomes a little bit more dynamic or interesting.

So, any one of these things, like the O2, let's say somebody said, okay, make me a composition with an O and a two. You might put that on the page and be like, nah, I don't know what to do with this, but that's actually a pretty good composition.

You look at the like, hand with the vectory skeleton. That's a pretty boring image actually, but they made it really dynamic by blowing up the scale, by turning it diagonal, by cropping it in a really awkward kinda way that's a little bit unique or unusual. Even with the woman in the dress, that's just one image.

They took her, blew her up, don't care about noise, she's cropped. You're not even seeing her full body. And then they took her again and duplicated her again and kind of pushed her out of there a bit. And all of a sudden you have a beautiful composition or as if it was just a picture of her on the page, maybe not so interesting, right?

So that can also be a great way to introducing something that's a bit more unique and something that other people don't do quite as much.
>> Sarah Drasner: I was given this project there was somebody giving a keynote for Microsoft, and they had this table. And it was kind of like just a table and so they were like, okay, four hours.

Make a design, go. So I just kind of skimmed the table, and that's pretty boring. So I took this image and I turned it on its side, I blew it up really big. It's actually like a giant image, I'm only showing you a tiny little piece of it.

But we get that background, the kind of texture that most people wouldn't have even noticed in the image, and it's not important, right? It's not important that people understand every bit of what's in that image. What they need to see and understand is that their's a little bit of coffee beans and also that maybe it's not the most important, it's not the focal point of this design, it's a table, right?

Really they're paying attention to the table and they should. So, it's pushed into the background. The other thing I'm gonna show you today when we're working in Photoshop is how to make these masks, and how to work with an image. Crop scale, mask it so that you can have it kind of fade into the background and not just be plopped onto the page.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now