@grinu has this shirt and I really wanted one too and we even saw it in the store but then they closed so now I only have this drawing of Rin wearing it
hiii so sorry if this is a stupid question but how do you make icons that arenāt squares? the only canvas i can make Is square š„²
how to make shaped icons!
no worries anon! things like this can be a little confusing at first, so i get you. letās get into it!
first thingās first is creating a new project in photopea. i tend to make my icons 300x300, but it doesnāt really matter the dimensions as long as they match (so you shouldnāt do 750x700, for example.) make sure your background is set to transparent (no worries if you forgot this stepājust delete the colored background layer!)
next thing is getting the shape! i tend to use photopeaās shape tool for this, since itās easiest for me, but you can also just google ācircle pngā or something. (make sure your image is actually transparent, though. click and drag or click and hold and see if the dotted background lingers or goes away!)
for the first icon, iām going to use the ellipse tool. feel free to change the color of your shapeāi usually set backgrounds later, but thatās up to you. the exact dimensions of this shape donāt matter, but like your canvas, they have to match so the circle is even. click and drag to make your shape
as you can see, my shape isnāt centered just yetābut i corrected that by using the click and drag tool: the one at very top of your sidebar. photopea will center and align your shape for you if you move it towards the middle
now you have your base! time to start adding backgrounds and such things. i used my usual method for the background, but you can do whatever. one thing to make sure for this step is to set all your layers to clipping mask (putting the shape below all your other layers)
to find clipping mask click the button that says layer at the top
as you can see, my gradient fill is already clipped maskāed. if for whatever reason you want your layers un-clipping maskāed later, just go back and click the clipping mask button again. (iāve said clipping mask too many times. it feels like a fake word.)
(hello, haruka!) this is how my icon looks so far! everything is clipped maskāed to my circle. if youād like, you can stop here, and download your image. i went ahead and added a psd. unless youāre using a color fill later or something similar in your psd, that doesnāt really need to be clipping maskāed.
(the psd i used here is really simple and i didnāt save it, but always put your psds in folders, just to make your life easier.)
now that weāve got that done, time to export! make sure that you export as a png. otherwise, your icon will still be square.
the finished product! pretty simple, right? you can use this method for all sorts of shapes. i went ahead and did two other kindsābordered and faded.
for the border, i copied my original shape (a square in this instance) and switched the fill mode to the icon with an x through it, and switched the stroke mode to a solid color, and set the stroke to seven pixels. i think for bordered icons you can also shift the border so that thereās a space between it and your icon, but i left it where it was this time
as you can see, i didnāt change any other layers, except that i duplicated my gradient fill! this is the same project i was working on before, just with a different base.
now for the faded icon! i used a heart shape for this, as thatās pretty standard, ābut wait! photopeaās shape tool doesnāt have a heart option!ā it does, actually! itās just hidden. click your shape tool and go down to custom shapes. then scroll at the top until you see the little arrow with the star beneath it (which should be as far right as you can scroll.)
wow! so many shapes!! i scrolled down until i found the heart, and added it. the heart i didnāt worry too much about the numbersāi just adjusted it until it looked nice.
now to make our heart faded! first thing to do is to rasterize your shape layer. make sure you have your dimensions and everything set before you do this, as you wonāt be able to correct them after your shape is rasterized.
rasterize can be found in the layer drop-down menu, where you found clipping mask. click that, and now you can blur your shape! the blur tool can be found in filter > blur > gaussian blur. you can also use motion blur or radial blur, but i like gaussian blur
clicking gaussian blur will give you one of our old friends the sliders. just mess with that until it looks about right. click āokā once youāve got it set how you want it
i also adjusted my heartās sizing a bit by going to edit > free transform and making it bigger. just do what looks good to you!
and thereās your faded icon!
i hope this is helpful!! feel free to ask if you have any questions :3
discoholicmusic
tangentwithtanner
prguitarman
annaxmalina
areudirty
jacobvanloon
kaledo-art
titsay
jbbartram-illu
