So I made a lil gif tutorial on how to create thicc contour in Paint Tool Sai. As you know (or not) Sai doesnāt have much layer effects and as chibi drawing artist this type of white/black/colorful border around your chibi (or just drawing) is very desired. This is a method I personally use all the time that is quick and leave quite decent reasults (at least quicker that opening photoshop) :> It takes like 30s on any possible drawing and I donāt need to jump between programs for silly contour effect! yay or nay?
Anyway, maybe someone will use it. If not, enjoy Nene getting her thicc contour ^^
i know not everyone can figure it out, and i decided i would show you how i personally do it! everything is beneath the cut, as it would be a very long post otherwise.
so first, youāre going to open your imagine in photoshop, and crop/resize to the necessary size. for this instance weāre doing 100x100 to make it simple.
youāre going to first double click on your background layer to make it a layer instead of a background for later. then youāre going to make 3 groups. one group will be for the cap, one for the psd, and the other to hold everything together and make it easier for click and drag over future icons! youāll put the two groups into the third group, but donāt move the icon into the cap group just yet. save that for later! then youāll make a new layer above those groups.
zoom in so that you can see easier! go to the shape tool, the square/rectangular one and make sure its set to path!!! go to the little gear icon and enter your dimensions, for this example thatād be a fixed size of 100x100.
click and drag the square shape so itās perfectly aligned with the document borders.
press ctrl+t once itās aligned, and where it has the angle option, instead of 0.00 that itās at, type in -45 so it becomes like a diamond like the above picture. then click the little check mark to make the changes.
next youāre gonna click selection! leave it as it is, 0 feathering! otherwise it wonāt work!
now youāre going to have a selection looking like this. your next task is to go to the selection tool, have it set toĀ āadd to selectionā and instead of fixed ratio or size, go to normal!
now youāre going to add whichever angles you donāt want! for this instance weāre getting rid of the top righthand side and the bottom lefthand side! so now itāll look like this unless of course you got rid of different angles. itās up to you how you want your angled icon to look!
with your paint tool, color in the whole selection with the first color if your border. i use the html c5c5c5 for my grey border portion, but its up to you if you want lighter or darker! then youāre going to deselect everything!
take your magic wand tool and select the colored area. then youāre going to go to edit>fill and fill with your foreground color! this makes it evenly colored.
next, youāre going to go to select>modify>contract and make sure itās contract by 1px! select okay.
youāll have noticed that only the angled portions contracted, so you have to do the straight edges manually. go to your selection tool again, and make it subtract selection! then go to fixed size, and for this example, the fixed size will be 1 px width by 100px height. subject the right and left side. then youāll switch them around so its 100px width and 1px height, and subject the top and bottom edges.
then you go back to your paint brush and fill the selection with white!
go to select>modify>contract 1px again and then go to edit>clear and your border is now complete!
final step is to take your magic wand tool, and select inside the border. go to the group for your psd and click the little mask tool. repeat that process for the group your cap goes in. then drag your icon into the cap folder and look! itās all done! now you just have to add your psd and save!
hi there! =] could i please get some advice on how to add gif icons inside a border psd in photoshop? as it never seems to work properly it just sits on top of the icon instead of the icon being within the border, any help would be greatly appreciated thank you :3
Using masks:
blythestheticsmoved
virgilsandcrs
octomoosey
Other:
shevamp
ghostiezak
monsoonrps
lcvato
marawrder
showmaxter
And youāll find various borders and icon PSDs in this tag here! -C
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 !!
do you know of any tutorials for using icon borders on gifs? i'm making some gif icons for a character and would really like to use the same borders i use for icons but i'm having trouble figuring out how to do it. :(
i couldnāt really find any tutorials on that exactly, so i figured iād give it a shot and try to show you myself ! lemme just apologize ahead of time because im the worst at explaining things lmao, but under the cut are some steps/screeenshots on how to add borders to gif icons.
STEP ONE. okay so the first thing you want to do is have your already made gif icon opened up, as well as have your preferred icon border open on another tab.
STEP TWO. then you want to make sure the very last layer of your gif is selected, that way the border goes onto the whole gif & not just the first layer and then disappears.
STEP THREE. next your just going to drag the border onto the gif like you would an icon. so it should look like the screenshot below, where the border is now a whole new layer on the layerās tab.
STEP FOUR. and then you just save it ( ctrl + alt shift + S ) like you would a normal gif. make sure the drop-down option under preset is selected as gif.Ā
STEP FIVE. & then you just save it to your computer and you should get your finished product as that gif, like the one i did below if you have any questions about any of these steps i mentioned, just shoot me another message & iāll try to help you, babes. hope this helped you.
hey so i have a question for cassie: your gif icon borders are phenomenal. i was wondering, how do you get it so there's different coloring within vs. outside the border? i hope this makes sense, i've been trying to figure out how to do icons like that for ages.
Oh my, thank you! I bet you mean my current admin gif icons, donāt you? Please correct me if Iām wrong. Honestly, it took me ages as well, although itās so easy to make!Ā
Create your gif icons + psds, borders, sharpened, etc.Ā
Make a new layer, gradient or layer fill with your wished color or gradient
Click on the layer mask of your new color layerĀ
Select the rectangular marquee tool and select the part you donāt want in that color (on my icons itās the inner part).
Select the erase tool and erase it (make sure the part is still selected) and tada, two different colors!
QuickĀ tip: Ā If you want it the other way around, right click the selected part and clickĀ āselect inverseā and do as in step 5.
!!!! Is there a possible way to put a border on tags in post notes ? Not w/ a bg but just a border :3 also on certain themes people have their blockquote curved is there anything you know about that :?
hello there anon,
both of those things are to do with tweaking/adding borders to things and you would usually do this in the css part of your codeā¦Ā
lets start with basic bordersā¦all borders need at least three pieces of information, a colour, a width/thickness and a style.
border: 1px solid #000;
this will add a one pixel wide black border around the whole of your object.
changing the basics -width - just change the 1px to whatever you would likecolor - you can make the border any color by choosing a hex code. Ā a good reference for colours is colorpicker.style - there are several default values for style. Ā solid, dotted, dashed, double, groove, inset and outset - for examples of different styles check out this page.
partial borders & blockquotes-you donāt have to have the border around the full object. Ā you can choose to have it appear only on the top, bottom, left or right of your object. Ā the border on blockquotes makes use of this, for example;
border-left; 1px solid #000
so in your css, you might have something like thisā¦
border radius -Ā if you want to curve the edges, you need to add something called a border radius. Ā this is usually done by defining the number of pixels to curve - the larger the number, the bigger the curve.
e.g. this is a border radius of 5px
this is a border radius of 25px
depending on the size of your object it can make a larger or smaller difference. Ā this is also how you can create circular shapes, by using a border radius that is half the height of your objectā¦
border radius sometimes has cross browser compatible issues - so the easy way to make sure you get it right, is to use a border radius generator like cssmatic.
