#icon border tutorial

1) Load your icon in / make it on whatever program or website you’re using. For this instance I’ll be using Photopea which is basically a free Photoshop website.

2) Locate the canvas size tool, on Photopea it’s Image > Canvas Size. Set your canvas to be bigger than your icon size. In this case my icon size is 100px and I’ve set the border to 120px. If you’re using another icon size that’s fine, just always make the canvas size bigger.

3) The checkered background means something is transparent, the checkered pattern will not show once saved. So, SAVE! When using Photopea it’s File > Export > PNG. Remember to always save as PNG.

1. BASIC BORDERS ICON

for starters let’s start with the first one so, have your icon — set it in whatever size you want ( the new trend is the smaller the better , i set mine usually at 65x65 although for this tutorial it would be 100x100, but you do what you like my friends ) — and leave it be .

now my next step is only an advisable step — like you don’t have follow it if you don’t want (you can still do your border in any case) but what i would do is create some transparency space behind a.k.a.

(1) make sure you duplicate your picture so it could be another layer (or you could turn the background into a layer itself) (2) and just use the crop tool to expand the size a little bit

if a pop up showed up to ensure if you really wanna do that and name it, just press okay (in my case, i don’t bother naming them unless it gets crowded later), and then you would be left with this

NOW SEE HOW I MAKE SURE THE BACKGROUND LAYER WON’T BE AVAILABLE ??? yes, do that please. just click the eye of the background layer (NOT THE BACKGROUND COPY) and we can move on to out next step, which is secure a few spaces behind the icon in transparency.

of course it doesn’t have to be as a lot as i’ve done it above^ , but that’s just to make sure that people can understand what i meant. now to do the next border is very easy. there’s a lot of ways of course, to do it, but what i did is —

(1) locate your quick selection tool (2) just select the heck outta your icon until it covers all area (3) create a new, EMPTY layer (4) go to edit > stroke > changes the setting to 3px and a white colour and click ‘OK’ (5) locate your quick selection tool again, do step (2) till step (4) except this time it’s on your WHITE BORDER layer and change the setting to 1px and a darker colour than white and click ‘OK’

and the picture demonstration would be:

figures above showed the located quick selection tool as per Step (1)

figure above showed the area of the icon are being wholly selected as per Step (2)

figure above showed ONE OF THE MOST IMPORTANT STEP i.e. add a new layer pls as per Step (3)

two figures above showed the process of Step 4

figure above shows the result of Step (4) aka you made your white already border yay !!!! but we’re not done yet. because the outline of that white border still needed to be implemented to “complete” the look. but since you know the previous step, just re-follow it. however, here are the picture demonstration in case you need it :)

three figure above shows the repeated steps done to create the darker outline to the WHITE BORDER as step 5

the end result:

a.k.a

note: feel free to get rid of the extra transparency space if you wanna !

2. DOTTED OR DASHED BORDER

usually, the dashed or dotted border comes with the basic icon border. meaning people tended to do the basic icon border and then added another outline outside that border to make it extra fancy and nice ! The steps i’ll be taking to do that would be

(1) All of the steps above to make the Basic Icon Border (2) Locate your Custom Shape Tool (3) Click your Rectangle Tool (4) Adjust it on your border (5) Once the shape is determined, go to fill and reduces it from 100% to 0% (6) Make necessary adjustment if you’d like, and you’re done !

the picture demonstration would be

figure above shows an icon with complete basic border icon ready as per Step (1)

figure above shows the located custom shape tool as per Step (2)

two figures above shows the next step once the custom shape tool is selected

figure above shows the result the custom shape tool once the area is selected as per Step (5). however, worry not! because the next step will guide you on how to adjust it 

FIRST, if your custom shape tool ends up giving you this

instead of dashed or dotted outline, just do the next steps, which are

once you’ve chosen your preferred outline, go to your Layers, and change your Fill

figure above shows the steps to reduce the Fill from 100% to 0% as per Step (5)

it should give you this:

figure above shows the end result

figure above shows any available spots to adjust your dotted border further as per Step (6)

THE END RESULT

a.k.a.

3. ADD BORDERS ON ROUNDED ICONS

Alright, since this is a tutorial to make borders, I won’t go into how to make ‘Rounded Rectangle Icon’. If it’s requested, sure, but for now — I’m making the tutorial with the intention the rounded icon have already been created. So the steps are as followed:

(1) Have your icon ready at whatever size you need with the Rounded Rectangle already in place. (2) Locate the Custom Shape Tool > Rounded Rectangle Tool (3) Create the shape following your icon, and adjust until you’re satisfied. (4) Changes the shape into Smart Filter so you can select the whole area using Quick Selection Tool. Once changed, select it fully. Then closes the Rounded Rectangle Shape. (5) Add a new layer. Go to Edit > Stroke > Adjust your width and color > Press ‘Okay’. In assumption that this will be your WHITE BORDER layer, your width should be at 3px and the color should be white #fff.  (6) Now select the areas of the WHITE BORDER layer. Create a new layer. Go to Edit > Stroke > Adjust your width and color > press ‘Okay’. In assumption that this will be your OUTLINE DARKER BORDER, your width should be at 1px and the colour should be of darker color than white. (7) You should be done.

pictures demonstration are as followed:

figure above showed the rounded icon are in place as per Step (1)

fIgure above shows the step in accordance to Step (2)

figure above shows any adjustment done to fit ur icon as per Step (3)

three figure above shows the steps in converting the Rounded Rectangle Shape into Smart Filters, selecting it using Quick Selection Tool and closing the layer as per Step (4)

four figure above shows the addition of a new layer (WHITE BORDER LAYER), the steps to choose stroke and give a white layer to the icon as per Step (5)

three figure above shows the selection into making darker outline as per Step (6)

THE END RESULT

a.k.a.

AND YOU’RE DONE.

note: my advice is, you should put all of the layers of the making of your borders under one file and put it ON TOP of the layers of your coloring PSD and save it. that way, you don’t have to repeat the process every time cause it’s already saved along with your psd file.

of course, any confusion at all, just hit me up.

and below, are some of my icon creation feat. different borders !

first things first, open your timeline / animation, open the gif you’re using, & crop it into a square. resize to 100 px by 100 px.

make sure your first frame is selected on the timeline, & the last layer in the layer bar. create a new layer. first, we’re gonna make the white border line. 

click the rectangle marquee too, & on the top bar change “ normal ” setting to “ fixed size ”. set the size to 75 px by 75 px ( or tbh, whatever size you want, but make sure to remember the size for later !! ) 

click over the icon in the middle-ish, select whatever color you want the border to be in the color pick ( i use white ), & click inside the box.

to center it completely, press ctrl + a to highlight everything, & the move tool. click align horizontal & align verticals at the top !!

now i like my borders to only be a pixel in diameter, so go back to the marquee tool & decrease your original fixed ratio by TWO pixels ( 73 x 73 for me !! ) click to place the box, & line it up inside the filled box. press delete on your keyboard. optional : i set my border to about 50% opacity because i like it ?? there’s really no reason.

open the psd you want to use on the outer rim of the icon. & drag it over. rearrange the layers so that the psd is UNDER the white border we just made. i’m using THIS psd ( elsa ). imo, black & white psds look better on the side.

click create a layer mask while on the psd. double click the white square that’s created with the layer mask, & press invert.

WHILE STILL SELECTED ON THE NOW BLACK LAYER MASK, go back to the marquee tool & your original fixed size dimension ( 75 x 75 ). hover the box over the border again, & once lined up go to select > inverse. & then press delete.

now we’re basically doing the same thing on the inside !! open up your psd ( i use a psd i made myself for punzie ), basically any colorful psd that works with your muses skin tone, the lighting of the film, etc. for ideas go to itsphotoshop.com/psds. ** make sure your psd doesn’t whitewash if your muse is poc. 

drag the psd over to the gif, & arrange the layers so it’s under the first psd. create a layer mask again, & invert like above !!

now ( the black layer mask should still be selected ), using the marquee tool, line it up with the border once again ( still 75 px by 75 px ), but don’t use the inverse. simply press delete on your keyboard.

to add a name, watermark, etc, is completely optional, but simply create a text layer, type what you want. i use THIS font, but you can use whatever !! & just move the layer over where you want it. move the text layer to over the border as well. on my icons, i have a drop shadow under my name which you can achieve by going to layer > layer style > drop shadow, & playing around with the color, & other settings. 

now for me, photoshop does this weird thing where the drop shadow only sticks to the first frame of the gif, so because i’m too lazy to do the drop shadow step to each frame, i just copy my text layer, & delete the original text layer, & the drop shadow is applied to each frame. it’s weird ??? but it works.

for final touches i add a pattern fill for a texture ( which the tutorial is here ). i put it over the psds, but under the border. 

to save a gif go to file > save for web > & make sure the type is set to gif !! 

to reuse the border on another icon, you CAN’T save it as a png. you MUST save it as a psd. for JUST the border, not the gif, i delete all the frames & animation ( you can delete by going to the lil tabby thing on the timeline & you’ll see the delete animation option ), and then save it as a psd just to keep it cleaner i guess ?? 

then open your next gif, crop & resize --- select each part of the border by clicking the bottom layer, holding down shift, & clicking the top layer. & drag it to the new gif, & line it up, and just save the gif again, & repeat !!