#icon border tutorial

[dear-indies]

hey darlings! would you have any resources/links for icon border tutorials? especially the transparent around the icon ones? thankyou!

Hey anon, I’ve updated this masterlist for you! To make a transparent border around icons though you simply make the canvas size bigger than the icon size and save it as a PNG. It’s important you save it as a PNG to make sure the background is transparent. 

TUTORIAL: How to make a transparent border around icons!

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.

[drippingsadism]

how to make an icon border for rpers!

for my friend, saint, here is a general guidance on how to make a border for your roleplaying icons. should you have any question once the tutorial is over, feel free to reach out to me via IM or askbox. well, first of all, here is some of the borders i’ll be guiding you guys on to make:

(1) basic borders - dark outline, with white lines.

(2) dotted or dashed borders 

(3) or how to add borders on a rounded icon

note: the brown-background is merely to show how the border would look like in case the white background doesn’t allow you to see it, but rest assured we will be having our icons in .png to support transparency. on another note , i’m very aware that the icons aren’t pretty — i don’t put any psd or any adjustment on the icon itself (taken from here) — but feel free to adjust the borders or your icon later on once you’ve fully understood the tutorials because im really teaching you the basics of how i usually do it and it’s really adjustable :))

what you will need:

photoshop, definitely. 

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 !

[helpersofindie-archive]

( ICON BORDER TUTORIAL. )

this tutorial is how to make icon borders like the ones below ! this works for both GIF & STATIC icons, & must be done in any version of photoshop that supports gifs. this tutorial is made by KENDALL.

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 !!

[peccatriix-blog]

What border do you use for your icons? Can you release it or show us how you do it? Please and thank you!

sinless; oH i just use the square shape in paint — here; i’ll show you in screen caps ^_^ i hope they help, nonnie. 

first; select the icon you want to edit — then up top you should see an option where it tells you were to open it and just click the drop down arrow to open it in paint ( or you can just right click tbh )

once you’ve got it open in paint click that little square i horridly circled for ya — then you’ll wanna change the primary color ‘color 1′ to white ( if you wanna do ‘em like mine ) and then click that drop down arrow on size and make sure it’s on the third one down 

i find it easier to zoom in on the icon so you can see wtf you’re doin’ cause for me it looks real small in paint but then you just drag from one corner to the other; if you want the main border to be exactly like mine be sure it says 96 x 96 to the left of where it tells you the main image’s size. 

now; to do the outlining border go back to ‘color 1′ and change it to the light grey i’ve indicated in the image above ( again; this is only really if you want ‘em to be exactly like mine. you can do whatever colors you want okay ) and change the size to the first one in your drop down selections. drag it along the outer edges of the icon and be sure that to the left of the original size ( if it’s 100x100 icons; results may vary depending on size ) it reads 100x100 as well.  now, there are two options for saving. you can either a: push the purple bottom featured in the image below — it is circled for you or  you can save as which is within the blue drop down options to the bottom-left-ish of the purple auto-save button. 

here’s your final product: