FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Design Shortcut: Start With an Image

In this lesson, we’ll see how you can get off to a running start by getting the color scheme and “mood” of your design down quickly, something that can typically take a good amount of time. We’ll shortcut the process by starting with a suitable image and drawing color and “feel” from it.

We’ll also be looking at how to bring images into Adobe XD and how to control their placement and appearance.

Once the image is in place, we’ll pull from it the first two colors to be used in our design: the site background color, and the site wrapper background color.

Related Links

2.2 Design Shortcut: Start With an Image

Hey, welcome back to Code-Friendly Design With Adobe XD. In this lesson, I'm gonna show you one of my favorite shortcuts to help speed up the process of getting your color scheme down, and your look and feel down, that overall vision that you need for a website to get the ball rolling. This method is actually pretty simple, but it's not necessarily obvious until you go through the process a couple of times. And what it involves is starting by picking out a really really cool image. Something that fits what you know, the side is supposed to be designed for. Bringing that image into your design and then drawing from it to get your color scheme and the overall feel of your site. So then you can go on to choose typography that matches the feel of the image. Once you've got that seed from a really good image, it helps all the other dominoes fall over quicker. Now I'm at splash which is a place that you can get a really, really great selection of free images. So when I'm doing a design, often this is the place that I'll start. I'll go through and I'll pick a cool image here. Something that has colors that I can see are going to work well in a web design. And then I'll use that to kick off the whole design process. If you're doing your site for a business client, then instead of using a photograph like this, you can do the same process that I'm about to show you with a logo instead. And this is why in freelancing, my approach was always to ask for the logo before any of the design was done. Because that way you can sample the colors from the logo and the logo informs you as to the look and feel that customer needs to have a website that is consistent with their branding. So for this site, I already have an image that I picked earlier. I can see from this photo that the colors that we have here are gonna work really well. We've got this really nice blackish blue here that we're gonna be able to sample from. We've got this softish orange. If we bump the saturation up on that, we can actually be able to get some really nice orange ones from for these, like, links and buttons. And then this, even though this looks great, this is actually a shade of blue up here as well, and that's going to work really well for any light elements, light backgrounds, light text colors and so on. So credit to Kyla Trottner for this photo. Excellent photo that's going to be really helpful for this project. There's a link to this image in the notes below this video, so you can go to this image, download a copy, and then you're ready to use it. So here I am in Adobe XD. I've already set up a canvas. The canvas is 1920 wide by 8090 high. And then inside here we have a site wrapper that is 1200 pixels wide by 8050 high and we're going to put the image that we just selected in a box at the top of the side here. This will be the welcome panel to the sign. So let's go ahead and import that image. So just go up to here, and choose import, browse for the image and then that's gonna bring it in. I'm just gonna zoom out. And let's just shrink this image down a bit so that it's around about the width of our site wrapper. It doesn't have to be perfect, because we're gonna mask this image. All right, now next up, we need to create a shape that we're going to use to clip the edges of this image so that it's coming up the right aspect ratio for our top panel. And because it runs pretty used to a 16 by 9 ratio, I'm going to create a box that will be 16 by 9. So I'm just gonna grab the rectangle tool and just draw our a box, we'll adjust the height of this later. Just gonna turn off that border and now to make this box a 16:9 ratio we already have it set to 1200 pixels wide. We're also going to set it to 675 pixels high. Now we're just going to show our image here again. To use this box this, 16:9 box we created to clip this image below. Grab the selection tool, select the rectangle and select the image. Right-click and choose Mask with shape. So now we have our image clicked off, but we can still move around the image inside to reposition it. So just click here. This mass group icon to expand the two. Select the image layout and we can still move that around. So now we just wanna sort of center it horizontally and vertically. We want that horizon roughly in the middle of this box and we want it to be centered horizontally as well. So, now, we have our image in place. The first thing that we're gonna do, now that we've got this image in, is sample some colors that we can use for the main site background. Our site wrapper background, and some of the panels that are gonna be added into the design as well. So we have a background rectangle here, just unlock that. Gonna go over to the fill, actually turn off this border, that's unnecessary. Go over to the fill and choose the color picker. And now, we could start selecting colors that might work for our background. We could also sample from the road as well, so we can keep playing around until we find a color that we like. I've already been through this process, and completed this whole design, I'm just recreating it here for you now. And the color that I settled on for the site background, I'll copy it in and paste it in, it's 8b 959D. So even though this specific color might not be obviously in this photo here, the hue being used has come directly from this photo. So you've got these two benefits right away. One, you've been able to shortcut the process of choosing a color that works in the background. And two, it meshes well with this image. It can be a lot more difficult to choose your color scheme first and then try to find images that match it. So now let's also choose a color for our site background. So we've got a lightish background color here, so we're gonna go for a darkish background color around here. So, once again, we'll choose the Color Picker and now we're gonna look more around this dark part of the road. So that's a little too gray. We want a little bit more of a blue hue in there. It's a little too green, but you can see the process. You pretty much want to just keep experimenting with color sampling until you find colors that work well together here. For this site wrapper, the completed design I use the color code 1d262d. You can see how similar that hue is to these road colors. So all of that blends in really well together. Now we can also select a color that can apply to the shadow to go around this site wrapper to give it a bit of a separation from that background. So I'm going to add a shadow here. These two figures I'm going to leave as they are but I'm going to boost the blur up to 20 pixels. And to generate the shadow color, what I did here was I took one of these colors that I'd already used. Added it in as the shadow color, and then just adjusted the parameters a bit more, sorry. Just by dragging it around until we get to a good color, and what I arrived at was the color 252835 with an opacity of 60%. So now you can see that we're already off to a running start. This is already starting to take shape and it's already starting to develop its own feel. So we're gonna select one more color as a part of this process. We've got the color here for dark portions of this website, but it's often nice to alternate between dark backgrounds and light backgrounds. So I'm just gonna add in one more rectangle here. We know we want a light color for this rectangle. So I'll just turn off this border, grab the Color Picker again, and now we're gonna go up to the sky area here to get a nice, light color. So you can see how quickly that worked that color even without any tweaking already fits perfectly in with the design. But I did spend a little bit more time tweaking that color based on samples from the image, and I ended up with this color, DCE4EC. Just a little bit more of a saturated blue color to it. So now right away, we've got three of our main colors that we're going to be able to use in the design. We've got our site background color, we've got a dark background color and a light background color, and that's also gonna get us off to a running start for our text colors. Because we can use this color, this light color for text on the dark background areas here and vice versa. We can use this color for text over light background areas. We can also get some more saturated colors out of this image. Colors that we can use for highlighting things like links and buttons. So I'm just gonna drag out a couple more rectangles. I'm gonna show you that you that you don't necessarily always have to have the same levels of saturation that you have in your source image. So turn that border off and I gonna grab a sample from the crop area up here. This by itself doesn't look very bright. Not very punchy but what we can do is open up the filter and start dragging the slider up so that we have a more saturated color. So now we've got a nice bright color but because the hue is sample from the image, everything is still really coherent. And the orange that I ended up with this design, is D59229, and we can do the same thing to create a brighter looking blue. So turn of that border again and now we gonna sample, from this color here that we already selected. And you remembered that that in turn was bought from this color up here. So we gonna sample that and now we gonna do the same thing again. We just gonna drag the color picker over until we get a nice saturated bright blue color, and the blue that I chose using this exact same process was 2472AF. Right, so now we've all ready got a really solid start to our design. We've got our cool colors, are all ready in place. We're gonna need a couple of extra colors later for some more subtle variations that we're gonna need. And then we're ready to start flashing out the content. So in the next lesson we're gonna focus on this top panel here. We're gonna stylized this image up a little bit and we're gonna add some content inside this panel here that will welcome the visitor when they land. So we're gonna go through that in the next lesson, I'll see you there.

Back to the top