Hello and welcome to sketch together.
my name is Pablo Stanley
and this is part of a series on Photoshop tricks
for UI designers that use Sketch or Figma or Adobe XD
as their main design tool
but still need to use Photoshop for
different quick image adjustments.
On this video we're going to learn how to cut elements from a photo
using three different techniques.
the first tool that we're going to learn is the magic wand.
So the magic wand can select a specific color in the image
and then create a selection from it.
So for example here
I have this white background and then I have my element.
floating there just a sneaker.
So I just click on the white background
and it creates a selection so I'm going to zoom in so you can see
the little ants they're dancing
that means that there's a selection there.
So this kind of tool is like the easiest one there
but it doesn't work in all the images.
This only works when you have flat surfaces as the background.
I'm going to actually also with the one tool selected
I'm going to also select this part so I'm going to press shift
and then select that and now selected that
and then once I have the background selected
I want to invert the selection because if I were to copy this
I'm going to say that I copy these.
and then I create a new file
and then I paste this
as you can see I only pasted the background
so what I wanted to select was the actual Sneaker, not the background.
so what I have to do is to close this
what I have to do here once I have this selection
I'm going to go to select and then inverse
or command, shift, I.
Now that it's inverted now I have only the two selected.
So there you go the shoe is selected, I can copy it
let's create a file
and then it can paste it.
and as you can see it's only just the sneaker.
This works really good when you have a flat background.
but it doesn't work always because usually when you take photos the background is not really flat.
So only use this tool when you have a really concise flat background in the back.
So now that I have this selected I want to create it into a new layer.
So to do that I can just press here
on the new icon
or press command J.
Pressing command J if I hide the other layer.
Now I only have this Sneaker.
That's pretty cool, right?
and now I can just save this document and import it
to any other design tool that I need to use this element.
Something else that you might want to do
once you have your object selected and it's only this that is visible.
You can go to image
and then trim.
This will trim all the transparent pixels.
You say okay and now it trimmed the image
to only fit the sneaker.
this is pretty useful because you didn't
need all of that white space on your image
now you save your image and then you can import it to your other
design tools like sketch or thigma or Adobe XD
now let's see an example where we don't have a flat background.
So here on this photo we have a sneaker that is floating too
but the background is not flat.
So if I were to use the magic wand tool only
it wouldn't be that great
because I have a lot of different colors here.
So for this I can use the magic wand
but I want to start using first the quick selection tool.
The quick selection tool actually works like magic
because it detects shapes and it detects colors
and it creates a really precise selection.
so here on the on the selection I'm going to say quick selection tool
and I'm just going to click and drag on this snicker.
So I'm going to just start clicking and dragging
and see how it's detecting all these shapes
and I in fact keep clicking and I keep dragging
it's going to detect more shapes I'm going to zoom in just to see
what's selected apparently it's not selecting this.
So I'm going to...
make the brush a little bit smaller
and then with the brush I'm going to just select this
I'm going to select this too
and it's creating that it's finding some contrast there some screen in the shape.
I'm going the same here
but I don't want that part so what I can do
is just go to the magic wand
and now that I have the magic wand selected I can press alt
on your keyboard and then by pressing it and keeping the press and then clicking
now you I can deselect that and I'm going to do the same here
that way it creates this selection.
but when I did that it selected all of this
and since this is kind of similar to this color
then it also selected all of this, the magic wand again is not very precise
so I'm going to go back to my quick selection tool
and I'm going to select all this again.
There you go now it's selected again
and then over here it's doing a good job
but probably here it could do a better job so I'm going to just like
do this and I'm going to do the same.
I'm going to go to the quick select magic wand
and I'm going to press alt and minimize this
but I'm pretty sure it did the same over here.
Oh no! It didn't .
It's actually... everything is selected.
My selection is looking really good it's pretty precise
you can get a little bit closer to it if you want to
but just for this exercise I think this is good enough.
So now that I have it this now I can create a mask out of this selection.
So to do that I can just go over here on my layers list
and then you see this little icon with a circle in the middle?
Just press on it with your layer selected.
And now I created a mask.
It created a mask where I only have that a sneaker selected.
That's pretty cool in that way if I want to get rid off
of the mask, I can still...
see the image and below so if I were to just delete the mask
See? It only deleted the mask and the image is still there.
I'm going to command C
And now just as before I'm going to go to image
trim
and then transparent layers
and now I trim the image so I only have that.
So use the quick selection tool
to make these kind of selections where the background is not very flat
but the shape of what you want to select is pretty well defined.
You can use the magic selection tool.
Now probably the most precise way to make a selection
is by using the pen tool the pen tool.
The pen tool actually creates a shape and then that shape, that vector shape
you can use that as a selection.
So I'm going to actually go here on pen tool on your toolbar
now that you have the pen tool you can start making a shape.
just a vector shape.
I prefer having here the fill as none.
Here.
and then adding a stroke.
That way you can see only the stroke and I don't have a fill.
So I'm going to just put black stroke
and then I can just start creating a shape
with this, your curves.
Then I can just continue doing this
this works really great when you have shapes like this.
where... pretty well defined curves.
Okay so now I have my shape done.
As you can see here in the layers list is a new shape.
And then I can come back and just like edit these dots
these notes, apparently some of them could be a little bit better.
So you can go over here to the path selection tool or direct selection tool
and then just to start...
moving those little pads, those little vectors.
so now that you have your shape ready you can create a selection out of this shape
by here, on the layers list, pressing command and...
on the icon on the thumbnail, just pressing
by while pressing command....
and then it creates a selection.
now that you have the selection
now you can go back to your original layer and then create a mask
and now you have that element.
And that's it. I hope this lessons help you on your UI and UX designs
that probably you are using the Sketch or Thigma or AdobeXD or any of those tools.
but you still need to have this kind of precision on your images.
So this is part of a crash course for all those kind of tricks
that you as UI designer might need.
So thank you so much, see you in the next one!