#mine:tutorial

open a new composition on after effects. you can set the dimensions to anything, but i’m using 540 x 300px for this tutorial. the duration i set to 5 seconds, but we’ll probably have to cut it down after we finish animating it.

1. select the pen tool (G) and draw the basic eye shape. this is going to be the whites of the eye, so set the fill to white. 

you can set the stroke to any color if you want a border around your eye, too.

to help with drawing the eye shape, i recommend turning on the proportion grid.

to draw the eye, i 

(1) start with the left corner and set an anchor point (click), (2) go to the top-middle, click and hold shift while dragging the handle to the right to fill 2 boxes, (3) go to the right corner and click, (4) go to the bottom-middle and hold shift while dragging the handle to the left to fill 2 boxes. 

hopefully that wasn’t too confusing??

this is the basic shape, so you can adjust it however you want depending on what you think looks best! i’ll be keeping it this way here.

2. draw the pupil of the eye, all you need is the ellipse tool. at the toolbar on the top, you can either click and hold the rectangle tool to get to the ellipse, or you can press Q three times. 

be sure to press shift while you draw the shape so that it’s a perfect circle!

you can set the fill to anything, i’m making it black in this tutorial.

center the the pupil to the white of the eye by selecting both of them, going to the align panel to the right, and selecting these two buttons:

i turned off the proportional grid here, too, bc you don’t really need it anymore.

3. animating: moving the pupil

here, you can make the eye do whatever you want but i’ll just be going over the basic animation!

- select the pupil layer and press P to bring up position.

- click on the stopwatch to bring up a keyframe.

this is the starting position of your pupil. you can place the pupil anywhere, but i’m placing it at the center.

- move a couple of frames forward (here i moved 5 frames forward) with the current time indicator and copy and paste the first key frame. this is so that the eye will stay at the center for a few before moving on.

- move a couple of frames forward and move the pupil anywhere. i’m making it go to the right.

i want the eye movement to be a bit jerky, so i’ll be copy and pasting this keyframe a couple of frames forward before moving the pupil to another place (here, i’m going to the left).

- repeat the last 2 steps until you’re satisfied. i’m only moving the eye three times here (center --> right --> left).

i also cut the composition time here to 1 second long. move the time indicator to 1 second and hit N to cut your work area down.

so far, your animation might look a bit like this:

which is honestly a bit boring.

so, i changed the path of the pupil a bit. right now, the path is all straight lines. instead, i’m going to be curving the paths.

- select the anchor point to get to the handles and drag the handles to create curves. play around with them until you’re satisfied!

now, your animation might look like this:

getting better! last thing i did was add easy ease to the keyframes. it just makes it flow a bit better.

select all your keyframes and either hit F9, or right click > keyframe assistant > easy ease. it’ll turn your keyframes from diamonds to hourglass shapes.

now it looks like this:

and that’s the basic animation!

one more thing: it’s not noticeable on the gif above bc the bg is the same color as the pupil, but the pupil is actually spilling over the eye right now. (i actually made this mistake on my gfx, too, haha!)

changing the bg color to gray so that you can see:

all you have to do is set a track matte.

- duplicate the white and move it on top of the pupil. (cmd/ctrl + D)

- set the track matte of the pupil to alpha matte. you might have to toggle switches/mode at the bottom.

and it should be fixed now!

4. animating: opening/closing the eye

- select all of your layers and pre compose them. (right click > pre compose). your eye should be all in one layer now.

closing the eye:

- select the pen tool and your precomposed layer. draw a rough eye shape around the eye. no need to be exact.

- move to just a few frames before the end of the composition. press alt/option + M to create a keyframe for mask path. move to the end of your comp and drag the first top point of your mask downwards to close the eye.

(i changed the bg color back to black so you can see better :’))

i also added easy ease to the keyframes afterwards. 

opening the eye:

- just copy and paste the last two keyframes and put them in the beginning, but be sure to reverse the order. that’s it!

if you’ve been following this tutorial pretty closely, there’ll be timing issues in your animation. here’s how it looks for me right now:

imo, it’s too fast right now.

5. fixing the timing

- first, i extended the time for the work area to 1 second and 15 frames instead of just 1 second.

- double click the precomp layer to bring up all the separate layers from step 1-3. 

- because the eye opens after 5 frames, i’m shifting all of the pupil keyframes to the 5th frame of the comp.

- go back to the main composition where the only layer is your precomp. i’m going to be bringing the last two keyframes (the ones where the eye is closing) a bit before the end. (here i chose 5 frames before the end)

- i still felt like the eye opens and closes too fast, so i extended the work area time to 1 second and 25 seconds.

and finished!! here’s the final product:

disclaimer: this is the way i did it in some of my edits. im not claiming this is the correct/easiest/best way. it may not work for your editing style. this is a very simple animation so it will look best on flat vector type gfx and when its viewed from a distance. 01: open your gfx in after effects- if you have hair strands that are over the eyes make sure the hair is on a seperate layer (i made the illustration in ps and just saved the hair/bg layer as a seperate pngs). 

02: select the pen tool and create a layer for the eyelid (closed). make sure there are anchor points on the inner and outer corners of the eye. adjust the fill color of the shape so that it matches the color used for the skin.

03: hit the stopwatch on ur layer under contents > shape 1 > path 1 > path

04: move the time indicator forward a bit and then drag the path on the outer corner of the eye up and towards the inner corner so that u have a nice curve for the opened eyelid. u can play it once to see if u like the result and if not adjust it.

05: optional: add a bit of depth with a drop shadow. keep the distance low. u may have to add a mask to prevent the shadow from peeking out at the top. 

(no shadow)

(shadow) 

1: open your picture in photoshop (here’s the picture of hobi if u wanna follow along)

2: find the quick selection tool

you’ll find it in the left sidebar, fourth from the top. i’ll often use this and the tool above it (polygonal lasso tool) depending on the photo. the quick selection tool is faster but more tedious, in my opinion, but hoseok was easy enough to cut out just using the quick select. use both! whatever u are comfortable with. 

here are my settings for the tool:

i almost always keep it at 3px. unless the image is huge, then i’ll go up to 5px, but never really above that. 

3: trace over your subject(s) (aka hobi) by dragging the tool along the edges, until you’re happy with the accuracy: 

4: find Select and Mask (directly above the image):

and here are the settings i’m using:

then press ‘Ok’ !

5: Select Inverse (right click inside subject)

now we’re going to press ‘backspace’ on your keyboard, and the background will be gone~ 

make sure your file isn’t locked! it should be labeled ‘Layer 0′ and not ‘Background’ (if it’s locked, just double click it and press ‘Ok’ on the window that pops up)

after pressing backspace to delete the background, it should look like this: 

then deselect it all. now is the time to look closer at your newly made render and see if there’s any cleaning up to do. i’m good to go, so i’m gonna continue on with making my header. 

tip: drag the subject (hobi) with the move tool (very top tool on your left sidebar) to the center so he’s in the very middle. it should click to the center (you’ll see the pink line) 

it’s not necessary for the tutorial but if you plan on saving this render as a .png and dispersing the renders you make-- it’s just cleaner looking to have them centered! 

6: File > New 

i always use 800 x 430 for mobile headers. for gifs, i size it down to 650 x 349.

7: resize and drag hobi into the new canvas (Image > Image Resize) 

for single subjects like this i usually resize them to ~300 to ~400. whatever you think looks best tbh

now drag the file from its place up top:

then the file from where it’s labeled ‘Layer 0′

8: now hobi is inside the canvas where the actual header is going to be made~ you can get rid of the render, or save it as a .png, whatever u plan on doing w it

i’m gonna center my hobi for the header i plan on making! from this point it’s just gonna be coloring, sharpening, etc. if you’re interested in using any textures like flowers or bring in other renders of objects, DeviantArt is a great place to search for texture packs. @beapanda on DeviantArt makes beautiful resources (kpop and non kpop related) be sure to credit them or whoever u save ur textures from! 

for this header i’m not going to be using any outside resources, i just want my hobi to be the focus~ 

for the background, i’m gonna use a gradient from this site (this pack is 200 images. phew) 

i’m using no. 200 from that pack.

9: optional- i’m gonna make some extra layers and start coloring hobi using clipping masks. 

make a new layer > right click the new layer and find ‘create clippink mask’ > set the layer to either color, overlay, or multiply (whatever you think looks best and does what u are trying to achieve)

here i’ve just make layers to color things like his hair, his hoodie, and baby mang

here’s with vs without: 

and when you’re done, go ahead and right click your primary layer (subject layer) and click ‘merge clipping mask’.

10: coloring~ 

find a psd you like or being to color the header yourself. for this header i’m gonna be using a homemade psd. i’m not gonna go into detail bc there are sooo many places to find psds on tumblr and deviantart. just like you brought hobi into the header canvas, drag your psd there, and that’s how u apply a psd. 

when u are happy with the coloring, right click the bottom layer and flatten the image. 

11: topaz clean + unmask sharpen

topaz clean is an addition u have to manually add to your photoshop program. u can google how to do it, but if anyone’s struggling i can show u how i did if i remember (but i’m pretty sure i do)

topaz settings:

unsharp mask settings (go to filter > sharpen > unsharp mask): 

honestly, topaz is completely unnecessary, but i like the way it looks so i’m gonna go with it anyway. sharpening the header alone will still give you a great outcome

12: final step, header border time~

over on my film/tv blog @gusdapperton​ i’ve made a header template pack (click here if u just wanna use my premade borders) but for this tutorial i’m gonna show u how i actually made those (minus the cloud one, i was just fucking around lol) (it’s so simple)

>>> if u DO just save one of the borders i made in that pack, resize it so the width is at 800 and drag it to your header canvas. set the layer to ‘screen’ and bang there u go! 

BUT with that method u can’t change the color from white. so if u want a border with any other color, keep following the tutorial >>>

go to view > rulers and select that to show the rulers (duh)

click from inside the ruler (light grey) and drag out your guides. here are where i’m placing mine:

they should ‘snap’ right into place, but if they don’t, make sure u go to view > snap and that’ll fix it. u will know what i mean once u try it lol

select the curvature pen tool (right click the pen tool to show more tool options):

and begin to place your dots. thanks to the guides, these dots will also snap into place

here are mine: 

(i eyeballed the two in the middle, it doesn’t need to look perfect tbh)

this next step is sorta stupid but i haven’t found a better way to do it yet lol

to close the shape just make sure to closely follow the direction of the dot you last placed, then go around to make your way back to the first... it looks silly but like this:

just play around with the shape and the tool... u will get the hang of it lol

now look up ^ and press Selection

then ‘Ok’ in the next window. then boom~ there’s your selection for the border we’re about to make.

make a new layer then select the rectangular marquee tool (second from the top on the left sidebar) and either drag with your mouse or use the arrow keys to move the selection we just made. here is where i’m placing mine:

then select your paint bucket tool (if you can’t find it, right click the gradient tool and it’ll be one of the sub tools, like i showed u with the pen tool)

make a new layer, then fill it in (i’m using white)

you can stop there, but to make that line like i did in my border template pack, press the down arrow on your keyboard and go down 5-10 pixels, press backspace, go down the same amount of pixels, and re-fill that area. 

now unselect. there’s the border~ 

now go to view > clear guides to get rid of those. u don’t need em anymore :) i’m also going to move the border we’ve just made down to the bottom of the canvas since we don’t need that big gap there. 

>>> tip, don’t fill in the white directly on the layer if you wanna change the color. create a new layer on top of the border layer, right click > create clipping mask > fill the layer with the color u want for the background. example: 

it saves the integrity of the shape. if you color fill right over the white, look closely and you’ll see it looks sort of pixelated and not as clean or smooth. it’s subtle but noticeable enough to me where it bothers me. 

since this color i chose is kinda vibrant and clashes, i’m gonna help it out some. go back to the quick select tool and select everything inside your border layer. make a new layer, fill the layer with black (any color will do, it doesn’t matter) and set the fill to 0%. double click that new layer, and a new screen will pop up. go to drop shadow, find the settings you like, and boom. here’s what i did and what it’ll look like: 

now u are finished~ i didn’t do this but u can skip sharpening the header earlier in the tutorial and reflatten the image again to sharpen it at this point instead but, yknow, i didn’t do that lol

here’s the final product (save by going to file > export > save for web)

preview of how it looks on mobile:

background: 8bd4ed

to start , create ur canvas . it depends on the dimensions of the graphic ur going to make but for the sake of this tutorial , my image is 220 x 350 . u’ll have a pretty , blank canvas like so :

now this step is important . make sure u open and place ur image into ur canvas . don’t copy and paste it in . the image can’t be a smart image or the filters won’t work right and u’ll get a bunch of error messages . for the purpose of this tutorial , i’m using a picture of emrata . get ur image positioned the way u want and then report back here when it’s situated to ur liking .

the first step to editing ur image from here is lvcifer’s gif sharpening action . now i realize this isn’t a gif , but trust me , it looks stunning on pictures . u can find a link to her action here . so after u have ur action installed , go ahead and apply it to ur image . 

u can see the image is already sharper . and on the right , u can see that the action was successful as u can see the various filters that have been applied to ur layer . next is topaz . the link that i found for topaz clean has been deleted and i don’t feel comfortable posting a new download link myself . so either go the website and sign urself up for a free trial or find another source to download topaz clean . i’m sorry that i can’t provide it for u myself but i’m not about to risk my shit by providing downloads for purchased apps . it’s super popular , though , so finding a link shouldn’t be hard .

the topaz layer that i add is located here . u can apply topaz actions in just the same way u apply normal actions , so go ahead and punch that button !

ur almost done ! home stretch ! next u’ll want to duplicate ur base image by right clicking on the layer and selecting duplicate image :

now click on ur duplicated image . once it’s selected , go to the top bar and select filter > blur > motion blur . here’s a visual of that pathway :

once u click on motion blur , here are the values that i use :

now after u apply this filter , things might look a bit wonky . that is why we want to lower the opacity on that image significantly so it gives us this airbrush - like glow that we’re going after . go ahead and lower the opacity to that duplicated layer to 30% .

and that’s it ! all there is to it ! it’s a super simple method to get a really cool looking image . here is a link to my finished product after i applied a psd .

So first I pick the image I want to use, for this I’m going to be using a picture of Keira I got off google 

1. open and crop your image to 500x500 px. If you’re going to make the background different this is now, and do your coloring etc (I’m not going to do any for this tutorial but lets pretend I did lmao)  

2. select the elliptical marquee tool 

and then on the top bar, select fixed size in the dropdown menu for style and set the size to 499x499 (or if you want to make it smaller a smaller size) 

3. now click on your image and an elliptical selection will show up and just move it so that it is placed how you want on your image (don’t worry if it’s not centered we will do this later) and then right click and click select inverse (or shift + command + i for mac) 

4. now delete! and make sure your background is set to transparent!

now before deselecting I center the image, and I do this by hitting command + a and then select the move tool (v) and now on the top bar you’ll see this:

What you want to do is click on align vertical centers and align horizontal centers to make sure that your icon is centered :) 

5. resize the image to 500x500 (if you need to) and apply an action if you feel like it! I like to use this action for my icons

so this is now what it looks like: 

6. upload to tumblr and it will show up like this :) 

COLORING

So this is the gif we are starting with:

Before we can do any kind of alterations to the gif we want to make sure the ADJUSTMENTS window is up. It can be found on the top underneath WINDOW. 

Now all our adjustment options should be to the right of the gif and we can start.

The first thing I notice is that it’s too dark and I want to brighten it up, so I want to add either a CURVE layer or a LEVELS layer. I usually like to start with curves.

You can play around with it and see what looks nice but this is where I would put it first. 

This gif now looks like this:

It certainly brightened it up but we are no where near finished. For the rest I’m just going to show you how to access each adjustment and what I would do to make the gif look better.

VIBRANCE is next. I like my gifs very vibrant.

Gif now looks like this:

I added a couple more CURVES and VIBRANCE layers for a while until I got to this:

And this is where SELECTIVE COLOR layers come in!! My favorite part. 

I will just show you the all of my settings that I used for the SELECTIVE COLOR layer (sometimes I use multiple selective color layers).

And now the gif looks much prettier, like this:

I usually like to add a COLOR BALANCE layer at the end to just make sure everything looks right. Unless the situation is dire, like in bad lighting or very blue scenes, I usually use the COLOR BALANCE sparingly.

This are my settings:

And the gif now looks like this:

Subtle change but it’s noticeable to me. I’m happy with how this gif looks so now we are done coloring!

SHARPENING

Sharpening a gif is tricky because you want it to look crisp without it looking grainy. Before you even begin to sharpen at all, you need to make sure that your gif is the right dimensions. Always always always sharpen your gif last so it looks the best. If you are unsure about gif dimensions, please see my previous post of gif making.

Before you can sharpen the gif, however, you need it to be a smart object. Select all the layers in your gif, excluding the adjustment layers.

Then, you want to go to the top bar and hit FILTER and then hit the COVERT FOR SMART FILTERS button. Now you’re gif still plays, but at this point is it treated like one layer so you cannot change any of the frames so this is why you always sharpen last. Now to actually sharpen,

At the top bar you want to go FILTER > SHARPEN > SMART SHARPEN.... This will allow you to sharpen the gif while also getting rid of noise, which is the grainy-ness that sometimes comes with sharpening a gif. These are my settings, but I change them around based on the gif:

Finally, your finished gif looks like this:

It’s colorful, it’s sharpened, and it looks great! The only other advice I have it play around with things, try things and see what they can do to your gif. I learned a majority of what I know about photoshop and making gifs through experimentation so don’t be afraid!

file > open

right click on ‘video group’ in the bottom right corner, then ‘convert to smart object’

image > canvas size

i do 268 pixels by 150 pixels (but do whatever size you’d like!) > ok

cmd+t

hold down the shift key while you drag the corner to size/move your gif into the visible window (holding down shift stops it from distorting)

click on ‘place’ once you have it where you want it

open your psd (if using one) and drag it over the top of the image

make sure you’re clicked on ‘video group 1′ and color the image the way you want it (i usually just go to image > adjustments > levels and change it to either ‘darker’ or ‘lighter’ in the drop down menu) > ok

next go to file > export > save for web (legacy)

make sure you click on ‘forever’ in the looping options, then save

next you’re gonna go to open, and then open your gif

you’ll see all of the frames in the timeline at the bottom

click on this icon with the four bars

then ‘select all frames’

click on the little down arrow in the bottom corner of any of the frames (they’re all selected so they should all follow suit)

then click ‘other...’

choose your frame delay (for gifs under 40 frames, i generally set the frame delay to 0.07 / 40-60 frames i set it to 0.06 / 60+ frames i set it to 0.05) > ok

then back to file > export > save for web (legacy)

make sure ‘forever’ is still selected in the looping options, then hit ‘save’

all done!