- [Ziovo] In today's video, I'm going to be teaching
you how to use Photopea. Photopea is one of the best free online
photo editors available. And it's great because it
is completely browser based, which means you don't
have to download anything. And there's also very,
very similar to Photoshop. In fact, it's so similar
that you can actually open and edit Photoshop files
within Photopea as well. Now together, we're going to be creating
a YouTube thumbnail from start to finish. And along the way, you're going to be
learning how to add images, remove the background, add text, effects and much, much more. Now if you guys like what you see, be sure to hit that
Like button down below. And with that being
said, let's get started. (upbeat music) So the first thing you wanna
do is go on photopea.com and I'm going to quickly be showing you how you guys can actually
edit Photoshop files. So all you gonna do is go to File, Open and you can open up any PSD file. So for example, this is a thumbnail that I made in Photoshop. And as you can see, I can just open it up and automatically access all of the layers
and components of this file. Now we're going to be
creating our YouTube thumbnail from scratch, so I'm just
going to delete that. And what you wanna do is
go to File and go to New, and here you're going to be
able to create your own project. So the first thing you have to do is give your project a name. So I'm just going to name mine Thumbnail, and we're going to keep the
dimensions at 1280 by 720. And you wanna make sure
you have pixels selected because this is the size
of YouTube thumbnails. And we're also going to make
the background transparent. Now, one thing you're going to notice is that Photopea also has a lot
of templates you can use, which are on the right side. And if you're making a
certain type of creative, such as a Facebook cover
photo or a Instagram story, you can just select one
of these presets as well and you can quickly have your file made. But once you're done, you're just going to click on Create and our file is going to open. So the first thing I'm
going to do is quickly just go over to the user interface and we're going to go
over it at a high level because we're going to be
visiting most of these tools as we're actually making our thumbnail. So on the left side, you're
going to see all of your tools. So here you can do things
such as move things around with the move tool, you can
crop, you can add shapes and for all of these tools where there's a arrow on the bottom right. If you click and hold, you can access additional
tools and on the very right, you can see the corresponding
keyboard shortcuts. So for example, if I
wanted to make a rectangle, I can click on the
rectangle button over here, and then I can go ahead
and drag out a rectangle. But if I wanted to make a circle, I could hold down on this Shape Tool and then go to Eclipse
and then click on it and then I can drag out and
create a circle as well. And so that is how the tools work. Now on the top over here, where you're going to see
is the properties bar. So depending on the
tool that you're using, what you're going to be able to do is see the corresponding properties. And so, for example, right
now, we just made this circle. And so if we clicked on Fill, we could change the fill because that is one of the
properties of the circle. And right above the Properties tab, we have some additional settings, which we can use to modify our file, our layer and other images. So for example, under File, you can add other images and
you can save your project. Editing is mostly for
transforming different components, such as your circle or
rectangle and rotating them. Image allows you to adjust
whatever is selected with some basic edits, such as changing the Hue and Saturation or the Color Balance. The Layer settings are for the layers. And then we have the Filter tab, which is used to add basic filters. For example, if you wanted
to blur a certain layer, you'll also have the View tab to change your view of the files, for example, you can zoom out. And then the Window tab is
to have different things show in your actual working space. And so, for example, if
I clicked on Character, the Character tab will pop up right here. Now moving along to the right side, you're going to see two more columns and they might both be closed and like so, but if you click on the double arrows, it actually opens them up. So we're actually going
to open them up right now and here, what you're going
to see is additional tabs that you can edit. And so, for example, right now, we can click on Properties and we'll see the properties
of this circle that's selected. And then right underneath,
we have our Brush settings. And then right underneath that, we have our Characters settings for text as well as the Paragraph settings. And you can change these
by going into your Window and selecting different ones. And then on the right side, we can see the history
of the changes we made as well as some color swatches and then right below that
we actually see our layers. And this is very important because Photopea is a layer base editor, which means that everything that you create is made in a layer and you can manipulate these layers to create your final product. So for example, right now, we have the circle layer
and the rectangle layer, and the circle layer is on top. And so if I was to, for example, go ahead and move the circle. You can see the circle is
on top of the rectangle but if I moved the layer underneath, then the circle goes behind it because that is how it
is in the layer settings. Now, within the layers, you can also click on
the eye button over here to hide a layer, like so. You can click on the lock
button to lock a layer, so if I click on the circle
and then click on lock, now I can't move the circle around because the layer is locked. But of course, I can click
on lock again to unlock it. And then down here, what you can also do is
add some layer adjustments or click on this turning
page to create a new layer. And that is a quick overview
of the Photopea interface. Now one final place you can
make edits to different layers as well as your images
is by right-clicking on a certain layer and
going into Blending Options. And here you can see additional
modifications you can make to that layer, such as
adding a Color Overlay or adding a Gradient Overlay. And if you click on any of these tabs, you can see the specific
settings for those as well. And if we right click on a layer, we can also make a couple other edits, such as converting the
layer to a smart object or changing the layer style but we're going to be
touching on those later. So now we are ready to
start making our thumbnail, so all I'm going to do
is create a new layer and move it to the bottom and
then click on the other layers and delete them because we
don't need them anymore. So the first thing we have to do when making our thumbnail is
to add our background image and I'll link a background
image in the description, but all you wanna do to place
your image is go to File and then go down here into Open & Place. And then what we can do
is look for the file, so mine is in this folder
and it's called background and so I'm going to click on it to add it. Now, if you want to make an image bigger, all you have to do is go to a corner point and drag it, like so. Now if you wanna maintain the proportions, you have to hold on Shift when you drag. And as you can see now, it
is scaling proportionately. So I'm just going to make this larger and make it a bit too big so I can show you how to crop it out. But once your image is placed, all you have to do is
click on the check mark. Now say, you wanted to select this again. If you click right now with
the Move Tool selected, it's actually not letting
you select your image. And if this happens to you, all you have to do is click on
Transform controls over here, and the controls will come back whenever you select something. Now within the Transform controls, what you can also do is if
you go to a corner point and you go up a little bit, you can see the arrow has gone from this white, straight
arrow to this black arrow, which is pointing at 90 degrees. And if you click and drag, now, you can also rotate your image. So I'm just going to
undo that really quickly and go back over here. And so, now what we wanna do is we want to crop this background because it's larger than the actual file. And to do so, all you have to do is click on the Crop Tool and the
Crop Tool is right over here. So once you click on it,
it'll open up the Crop Tool. And then all we have to do is drag it to the size of the rectangle
and it'll snap into place. And then once again, we can
click on the check mark, and now the image is the
size of the background. Now we're going to add a couple
of effects to this image, just so you guys know how
the different effects work. So the first thing I'm going
to do is slightly blur it, which isn't going to
make a big difference, but if you wanted to blur an
image, you can go into Filter, Blur, and then apply one of these. So I'm going to apply a Gaussian Blur and just make it a bit
blurrier, and then click on OK. Of course, if you have a
different kind of image, it'll show up a lot better. Now, another thing I wanna do is I want to darken this background because we're going to have
text and an image on top. And so, there's two ways
that we can do this. The first thing we can do is
we can go to the bottom layer and create a new layer and
have this layer underneath. And then what we can do is
we can go to the Shape Tool, hold down and select Rectangle, and actually just create
a black rectangle, that's going underneath this background. And we can't see it right now, but if we go back to the background layer and we change the Opacity, so
we make it more transparent, we can see that the image gets darker. And this is because as this
image gets less transparent, the layer underneath, which is the black rectangle
starts to show even more. Now, let me just delete this rectangle and have just the background to show you guys one more
way you could do this. Now instead of making a new layer, you can also go to the
background layer again, right click on it and go
into the Blending Options and choose Color Overlay. And here, we can make the
color overlay black, like so, and click on OK and then we can take down the
opacity of the color overlay. So this time, the black
rectangle is on top and we're making the black
rectangle more transparent so that the actual background
is showing through. So as you can see, there's many ways that you can
add the same type of effect and I'm just going to press OK, and our background is good to go. So now that we've made our background, we're going to be adding our main image, which is going to be the MacBook. Now there's actually a
bunch of different ways, you can add images. First of all, if you have
the image open already in Google images, you can right-click, go to Copy Image and then go
over here and then right-click and go to Paste Image
or press Control + V, and it's going to paste the image for you. So I'm going to press
Control + Z to undo that, or what you can do is go
to File and go to Open More and you can open from
the URL of the image. But we already have it saved, so we're just going to go to Open and place again and add our laptop. And we're just going to make
it a little bit smaller, move it to the right side over here and click on the check mark. Now, the next step is to
remove this white background, and this is actually really, really easy. So all you have to do is
right-click on the laptop and convert it to a Smart Object and then right-click on the laptop again and rasterize the layer
and this makes it easier for Photopea to identify
the components of the image. So you can add additional effects, such as removing the background. Now, to actually remove the background, all you have to do is go
to the square with the blob over here, which is the
Object Selection tool, which I don't use very often. And you wanna go down to Magic Wand because this is the tool
we're going to be using. And once you have the Magic Wand selected, all you have to do is click
on the white background and it highlights all of it. And then just press on the Delete key and the background is deleted. Now to de-select this
background that doesn't exist, just press on Control + D. And there we go, the background was removed
in only a couple of seconds. Now, all we have to do is
add a couple more effects to this image, so I'm going
to right click on the laptop and go into Blending Options. And here, what we can do is we can
actually add a Drop Shadow. And so going into the settings, I want there to be a shadow on this image that looks a bit more realistic. So to edit this shadow,
to make it more realistic, I'm going to change the
distance and bring it down. So it's closer to our laptop. I'm then going to increase
the spread of it to about 20 as well as increase the size to about 40. And I think that looks good
and you can just eye it, and I'm going to change the Opacity until it looks like it's popping out. So I think 80 is good and
then I'm gonna press on OK, and our image is added. Now, before we add our text, I'm just going to go
through a couple other tools that you may be using a lot in Photopea. So first of all, we've already been through the Move Tool and the Magic Wand tool
as well as the Crop Tool, but the Eyedropper Tool is great for getting a certain color. And all you have to do is click on it and then click on the color. And as you can see, it selects it as the
default swatch over here. Another good tool to
use is the Brush Tool, which we're going to be touching on later. So next step we have the Eraser Tool and this does exactly what it states. So if we click on the Eraser Tool, basically what it does is it
erases whatever is selected. So right now it's erasing
the laptop layer, like so, because that's the layer that's selected. Now, you can also adjust
the size of your eraser by adjusting the brush over here. And if you don't have this, you just go into Window and then Brush. And so for example, we can make this eraser a lot bigger as well as make it a lot softer. And so now if we erase,
it's a much softer, larger erasing brush. And so that's how you use the Eraser Tool. You're also probably going
to be using the Text Tool, which we'll be touching next. And then there is the Shapes Tool, which we've been over. And finally the Zoom Tool, and so if you click, you can zoom in, but you can also zoom in and
out by pressing Control +, or by pressing Control -, like so. Now, if you want it to actually navigate through a zoomed in image, all you have to do is
use your scroll wheel. So if I scroll up and down, the image goes up and down and if I hold Control and scroll, it goes from left to right. So I'm just going to press
Control - to zoom out, like so, and that's a quick overview of some tools that you're probably going
to be using frequently. Now it's time to actually add our text. So to add the text, I'm
going to create another layer and this text is going to be on top. And then I'm going to go to
the Text Tool right here, and we can see that the text properties
have opened up over here. And so I'm going to go ahead and pick the font that I want to use. And so I'm going to be
using Distant Galaxy. I'm going to make the size 150 and I'm going to make
the color white, like so. Click OK. I'm also going to center this text and then click on the
layer to start typing. And so we're going to make the text MacBook Pro Preview 2020, and then click on the check mark, go to the Move Tool and
then just move it over here. Now this doesn't look bad, but we can definitely make it look better. So we're going to go and
double-click on the layer to select the text. And the first thing I'm going
to do is highlight it all and actually go into the
Paragraph settings over here. And if you don't have
the Paragraph settings, you can go to Window and then Paragraph. But what we're going to
do is we're actually going to change the line spacing since everything is so spread out. And so I'm gonna go ahead
and just go over here and make the line spacing, maybe -60, and that looks good. And I'm also going to
change the text color for the word 2020. So I'm just going to highlight it, go to the Color Swatch and make it a more of a yellow color, like so. Click on OK and there we
go, that looks a lot better. And I'm gonna click on confirm and just move it into place, like so. It's a little bit too big, so I'm going to hold Shift
and go to a corner point and just make it a little bit
smaller and then just move it, so it's aligned to the center. And as you can see, it
automatically shows me when it's centered with this pink line. And there we go, our text is added. Now, the next thing I want
to do is also add a shadow to this text, like our MacBook. Now we can go ahead and
use the Blending Options, but one way to do this faster
is by just right-clicking on the laptop layer and
then going to Layer Style and copying it. And essentially it's copying
all of the components of this layer, which in this
case is the drop shadow. And then I'm gonna go ahead
and go to the text layer, right-click, go to Layer
Style, go to Paste, and it's pasted that shadow
in only a couple of seconds, which is great. Now I'm also going to add
a gradient to this text. So for this, we have to go
into the Blending Options and go and click on in Gradient Overlay. And here we can see, we have the black to
white gradient selected, and we're just going to make
it a little bit less opaque. So we're going to make
it only 10% transparent and it adds this really nice shine because there's a black
and white gradient on top, but it's only showing
through a little bit. And then we're gonna press OK and our text is also done now. Now quickly, one other way, you can align different things is by selecting multiple layers. So for example, if I clicked
on this MacBook Pro text layer, pressed Control and clicked
on the laptop layer, so both are selected. I can actually use the
properties bar up here to align them in different ways, like so. But since we don't need to do that, I'm just going to undo it. I just wanted to show you guys how you can also align
things very quickly. But now it's time to add some more effects to the actual thumbnail, and I think the best way this thumbnail is going to pop
is if we use the Brush Tool to actually add a glow behind this text. So what I'm going to do is I'm
going to go to layer three, which is right between laptop and text. And if you don't have it, you can just create a new layer
and then drag it into place. And once we have this layer selected, I'm just going to go into the Brush Tool, which is right here. And for this brush, we're
going to make it fairly large and we're going to make the Hardness zero. I guess we can still make
it a bit bigger then, and we're going to make
the background glow, more of a pink color so
everything stands out and I'm just going to press OK. And then I'm just going to go ahead and start using the Brush
Tool by clicking and dragging and right now it's very pink but what we're going to
do once we're done is go to this layer and turn
down the Opacity, like so. So it's only a slight glow
and you guys can see it, but it's not popping too much, and it looks really, really
nice with our thumbnail. Okay, so I think we're
finally done our thumbnail because we've added the
background, the image, the text, as well as all of the edits and effects. And so what we're going
to do is go to File, and we're going to go to Save as PSD in case we want to edit this file later on and it's going to save
as a Photoshop file. And to export this file,
we're going to go to File, Export as, and export it as a PNG, but you can also do as a JPEG. And then we're going to save
it as the same dimensions. We're not going to change this, and we're going to maximize the quality. Click on Save and it's actually
going to download the image with the same name as our
file. And if you click on this, we can see that our thumbnail is done. And so that is how you use Photopea as you can see is very, very easy, but also a super powerful tool. But that's about it. Hopefully, this video did help you out. If it did, be sure to give
this video a big thumbs up. And as always, thanks for watching. My name is Ziovo and I'm signing out.
