HOW I USE CLIPPING MASKS && RECTANGLE SELECT TO CREATE MY ICON BORDERS. this post will include framing the rp icon itself, the border around the icon && adding on optional block quotesâalso, a bonus how-to for applying patterns to your block quotes and/or icon border; in case you're after some zesty editing !
pictured below is a simple, PRE-MADE icon that we will be attempting to recreate in this tutorial. all you need is a screencap && photopea ! as for the blockquote pattern, it is an optional design / example that i will provide later on in the tutorial ! this tutorial will involve rectangle select & clipping masks and i will cover how to do them both.
start a New Project, make sure the background is transparent. pick what size you'd like the overall border to be, not the icon itself.
you should start out with a transparent rectangle, as seen above. for this particular recreation, i've listed the width & height of my standard icon border sizes below. if you don't know, these sizes are determined by pixels.
W: 640 H: 107 i.e., W: 640 pixels H: 107 pixels.
next step: select Layer>New>Layer as seen highlighted below. this new layer is where your icon base will be/your clipping mask will go.
now that we've added a new layer for the icon base/mask to go, we're going to use rectangle select to set the size of our icon. right click where the yellow highlight(left bar) is pointing in the example below && drag your cursor to expand the "rectangle select" to whatever size icon you want. for this example(as seen below) i've chosen the size 80x80.
after you've set your desired icon size, you can now drag the selection(you should see a dotted border outlining your selection) to where you'd like your icon to be placed. i personally chose to place mine in the centerâi did accidentally forget this step in the tutorial, so don't mind it if you see it move in the next two examples. though not an incredibly important detail, you can always move it after you fill it in !
once you have placed your base, select your brush tool && choose a color(highlighted in yellow, located on the left bar in the example below). you can use whatever color you'd like here, as long as it stands out to youâi usually choose red or green so that it can stand out from the background. once you've picked your color, you're going to color inside of the selection that you've made. don't be afraid to color outside of the lines...the brush will not exceed past what you've selected in advance with your rectangle tool !
once your base is colored in, you may now de-select your rectangle select tool(right click>deselect).
pictured below is an example of our current progress. as you can see i finally moved my icon to the center.
this colored shape will be your 'x marks the spot'âit is where your screencap(as a clipping mask) will be going once we finish the border of the icon.
speaking of which, now it's time to create our border ! add a new layer with the same process as before. Layer>New>Layer. name it whatever you'd like. i've simply labeled the new layer as "icon border" because it will be the layer the border goes on. make sure it is on a layer that is separate from the icon base.
in the "icon border" layer, repeat the rectangle select process outside of each side of your square/icon base. selecting one side at a time, be sure to fill it with the color of your desired border. i will be using a white border, which will be 3 pixels wide on each side. (example is of me expanding the select tool to the preferred pixel height/width outside of the base)
once you've finished creating a selection && filling each section, you can deselect && should be left with something like this:
this is optional, of course, but if you'd like you can also make an outer border/border edge. you can do this in a new layer or simply place it on the same layer as the white border. in the example icon at the top of the post, you can see that the icon i made has a gray outline outside of the white border. to do that, simply repeat the rectangle select option; and this time, only select 1 px width of space(or more, depending on how thick you want it/if your border is wider) on the outer edges of the white border. with you're new color(mine being gray as depicted) you can fill each of these edges. here's what we got going on so far !
now, to add your icon inside of the border! (it doesn't really matter if you do it before or after, just as long as you got your layers right!)
as you can see, i already added my icon to the base; you can do this before or after you've created your border && border edge. in the image above, the rectangle select you're seeing is an example of where the outer border/edge was filled in with gray.
of course, to add your icon, file>open and place>choose your screencap. once your screencap is opened, right click it && once you're met with the drop down, left click the option that says "clipping mask." doing this will give you free reign to zoom in or out and move your icon around(to move it, edit>free transform && drag) all within the confines of the icon base you've created with your selection tool && brush.
our current result:
now... for optional blockquotes. make sure to start a new layer for your blockquote/s. once again, you're going to use the rectangle select tool; choose the width && height of your blockquote by dragging/expanding the tool with your cursor. i've made my blockquote 2 pixels wide because i prefer them thinâif you would choose wider blockquotes, just expand the selection.
once selected, fill that selection with the preferred color of your desired blockquotes. most people choose gray or colors relevant to their charactersâi will be using red because i will be treating this as a clipping mask, so i can show you how to put a pattern into the blockquotes if you want something that stands out.
you can see ive put two blockquotes in place. you can choose to move them however you want them, or include both the blockquotes in one layer or seperate layers. i've personally separated mine for this example. (layers bq 1 + bq 2 on the side)
ADDING A PATTERN: do the same thing you did with your screencap...file>open and place>choose image. i will be using this abhorrent little pattern(free to use!) i created for the sake of this tutorial. and just like you did with placing your screencap, right click and select "clipping mask" on the dropdown. again, you can move it, zoom in and out however you please. just make sure the image is lined up with the blockquotes!
and here's what you should end up with, or something similar !
EXTRA / ADDING A PATTERN TO YOUR BORDER:
once you've gotten the hang of rectangle select/clipping masks, this part is self explanatory. basically, if you'd like to put a pattern inside your border (this will be the white border you created) you can repeat steps you took to add a pattern to your blockquote, this time placing your clipping mask over the layer with your border.
and that's pretty much the formula of all formulas for me personallyâthese tools come in hand for a lot of my editing !
A trope that gets to me: 'guard dog' character and their partner who are both fully aware of it and honestly don't care/kind of like it. Someone says "call your guard dog off" and their partner does call them off. That person, their 'guard dog', is someone who is unreservedly, irrefutably loyal to them. Someone undoubtedly dangerous who is willing to kill, to maim, to obey, simply because of their love for one another. There's no manipulation involvedâ it is loyalty, brutal, dogged loyalty. And it goes both ways.
i like the concept of soulmatesânot a âyouâre destined to meet me, and love meâ kind of soulmate, but a âiâd pick you, every time.â kind of soulmate. a âno matter what happens, and what has happened, i want to go through it with you.â kind of soulmate. a âi love you by choice, and youâre a blessing, and iâm going to continue thinking about you this way not because i have to but because i want to.â kind of soulmate. a âyou help me rest easy when everything is difficultâ kind of soulmate. a âin every possible outcome, i want you there, to share it with me.â kind of soulmate.
it's always so fascinating and heartbreaking when a character in a story is simultaneously idolized and abused. a chosen prophet destined for martyrdom. a child prodigy forced to grow up too fast. a powerful warrior raised as nothing but a weapon. there's just something so uniquely messed up about singing someone's praises whilst destroying them.
some graphic design resources cause im bored and itching to write something but i cant write anything i'm happy with--- anywayssss
unsplash for lots of royalty free pics
heres a cool site to learn how to pair fonts together
heres another site to learn kerning [spacing]
in fact heres a bunch of games to help u get better at graphic design stuff
some free online video editors x x x
color accessibility resources :]
savee.it - like pinterest but for designers!! unfortunately it has a save limit for free users but u should still be able to browse it for inspo i think?
some free fonts
aside from coolors i really love adobe color!! it has color palette generator [triads, monochrome, complementary, etc.], accessibility tools, palettes+gradients extractors, and color palettes inspired by trends within diff industries.
make moodboards online for freeee i miss u polyvore
spline and womp for web based 3d design! + blender of course [go make that donut!]
we all know and love them: photopea [photoshop but free and on a browser?!] and canva [no introduction needed im sure]
upscale the resolution / quality of pics it says anime but it works really well with most stuff like video game screenshots [gets rid of hard edges/pixels]
typography inspo
more color palette generators [already meets accessibility guidelines]
filmgrab - a curation of movie scenes đ
here's another one but for color palettes from films
more inspo and tutorials
cargo - for web design stuffs
an archive of BRANDING GUIDES
free online zine hosting
milanote - very very useful for organizing creative projects :D kinda like a mix of notion and pinterest ? [its basically notion but more visual]
a collection of free luts
lots of pngs for editing
freepik - lots and lots of free design assets.
flaticon - lots of flat icons / vectors. i haven't used this in a while, but it was free last i checked
in case u need more help pairing fonts go here and here
origamiaround
kaledo-art
pixelskylines
tangentwithtanner
ellievsbear
izzy806
gummygunk
discoholicmusic
2087
vaporwave
annaxmalina
