Working with Images

Arend Pryor
A free video tutorial from Arend Pryor
Top Rated Instructor, Sketch, Web & Mobile Design, & Health
4.1 instructor rating • 8 courses • 44,420 students

Lecture description

Topics Covered:
  • Importing and Resizing images
  • Recommendations on searching for images
  • Cropping
  • Applying a blur effect

Learn more from the full course

Hands on Sketch Training - Learn Mobile App Design

Learn mobile app design with Sketch by duplicating mobile app screens, logos, and more. From basic to advanced

17:05:11 of on-demand video • Updated May 2017

  • Have the skills and confidence to create mobile app screens, logos and more using Sketch
  • Export designs so they can be used during the development process
  • Build a mobile app that looks amazing
  • Submit designs for contests on crowdfunding sites
English [Auto] What's up everybody. Here we are back again talking about the basics of sketch. And today we are covering year. So I've got a few images picked out here from various sources and I want to go ahead and open up a sketch and we'll get started. So it's a couple of different ways to insert images and I have covered this a little bit in previous videos but I wanted to dedicate this one to just images so you can come up here to the Insert menu come down here to image. I'm going to go just to my desk top and I can pull in an image that I want to use a zoom out so you can see that. So that's one way of putting in images. Another one is just you know clicking and dragging it and so a quick one from the desktop will bring that in. And now I have images that I can work with I can add these to art boards whatever I want to do with them use them for a mock up and resize. So a couple of things you can do with images. For the most part you can resize and they will resize proportionally. Just grab a corner here resize and that's going to resize proportionally for you. Now depending on the quality of the image you may get better or worse as you increase in size maybe become a little bit pixilated. So it just depends on the quality. One thing I will say that if you're grabbing images for a particular art board or maybe to use as a background and I'll grab one here as an example to leave these so I'll pull in something that maybe I could use as a background before I do that. A for our board. Let's use the iPhone 6. Let's say I wanted to get some kind of generic image to use. And this was a royalty free image. Don't forget about that. Going to drag it in and I can move that it looks like it's already in my iphone 6 art board. But if I had zoom out I can see kind of the bounds of this image. I can grab it and resize it. So it's important thing to note that when you're looking around for images online you want it to at least be larger than your art board canvas size. So if you're looking on let's say Google and we pull up Google Chrome you can see some of the width and height when you hover over these images. So if you find one that's a little bit tiny You should know that. This one's a little bit tiny and might not be a good choice for a background. If you're going to blurt it out might not be that big a deal. You can stretch it out and I have to worry about having it be crystal clear. But just something to kind of take note of that when you're resizing these things and you just grab a portion of it that you know you may only get a portion of what you actually want. And one quick feature that you know is really helpful when you're resizing just come up here to the inspector. Change your height to the height of the art board and now you can hold shift and just kind of shift is going to keep it from moving up and down that's just going to go left and right. Or if I hold shift then I try to go up and down it's just going to go up and down. Well let me go left right so all the kind of lock it in place and slide it around so you kind of play with that kind of hard to see. Sorry I should zoom in when I do that. But you get the idea. So something to think about when you're working with images and you're going to use them as a background. Once you do have an image that you do want to use I would definitely recommend cropping that image so that you don't have the the areas outside of that bounds taking up more memory on your app or your system while you're developing or designing this. And the way you do that is you can double click on the image and now you have a new little menu over here. And right now you're using this selection tool so you can just come over here click and drag over the portion that you like to keep. Come over here and just say crop now it's going to crop that I don't have the portions on the left and right side anymore. And that's exactly what we wanted. Now if you want to do something a little more drastic or a little more in depth to your images such as removing a background sketch can definitely do that too to a certain extent. It's not meant to do that but you should probably use in other programs such as Photoshop if you want to remove backgrounds and you want it to be really crisp depending on what you're trying to remove from the background if it's kind of easy to do then you might be able to take an example here. I mean go ahead and get out of this edit mode. Let's go ahead and drag in this image here. Now I've got kind of a multicolored background here and let's double click this let's change to our magic wand tool and say I want to remove the background here. I could click and that's kind of just a slight little portion of that background. So this is an example of something you probably have trouble with if you are trying to resume images get back deleted it suddenly you have a problem with if it was an all white background or something a solid color it would probably be a little bit easier to do even if I used my magic wand. I click and hold. It's going to as I drag away from the center reference point that's going to increase the tolerance of what's selected which is nice and you will maybe if you get lucky get the portions deleted that you like to. But it's definitely not as precise as maybe Photoshop so I got a pretty good selection there and you might be able to get in between here to delete those as well. I hit delete so I got a pretty good selection there but once again not really what sketches designed to do. But you can get away with. You can get away with it if it's pretty easy and a good image to work with. So one more thing I wanted to cover. I think we talked about this before and this was kind of the blurred background but I wanted to show you kind of one more thing. A lot of apps will have either have a transparent kind of nav bar. I think I did it where the whole image was covered before so the width is 375. That's what I want to go ahead and set the fill color for this to a white. I'm going to come down here to my blur and I'm just going to click the double arrows and choose background color. I'm going to bring this down. Let's drop it down to like two and let's drop the opacity down. And as I drop it down you'll see that I can see through there and I can apply a blur to this layer. Kind of you know I don't think I'm blurring the right thing. There we go. So now as I blur it the background is going to get a little bit blurry. I think I know the problem is not getting very blurry at all change this opacity back up to 100 I need to change the opacity here from my FIL let's drop that down to 50. Now I've got a blur. So if I drop this down to where I had it before. That's the effect I was going for. So if I had logos up here I'd have a slightly blurred background and then as I scroll my image I don't want to it as I scroll my image it'll stay blurry and I'll be able to see slightly what's behind it. So some little effect that you can try for your top level NAV or if you have a tab bar on the bottom here you can have that you can get that effect with Scotch. So that's pretty much all I had for images. We're going to go ahead and call it done there and move ahead to the next.