#tutorial:mine

1. I don't show where I downloaded the video because it depends on what i'm giffing. But I usually download torrent videos.

2. When I click "import > video frames to layers" a screen shows. I move those arrows to find the exact part of the video I wanna gif. If the video is too big, this doesn't work properly - it will open like 500 frames at once. What I do is to crop the video in smaller parts (with 3/4 minutes max) and it makes this process easier. 

3. It's always better to use videos with good quality (at least 720p), because you probably won't like the gif you used a video with low quality.

4. I put directly 80px x 80px (and make sure you selected W x H x Resolution) when I'm about to crop my video. It makes the process faster because you won't need to reduce the gif's size after cropping it.

5. After doing this, I change the time of each frame. I put 0,07 because this video, for some reason, gets too damn fast if I put 0,06. But most gif makers use 0,05 or 0,06 sec per frame.

6. Changing the frames to a timeline is extremely important. The gif won't work if you don't do this. After that you'll select all layers and click on convert to smart object. 

7. After your layers are converted, you'll use a sharpening action. I'm not sure about the settings I used on the video (when I changed PS language all my actions were deleted). But i know the ratius (0,03px) and the gaussian blur are right - edit: i'm using this settings (ratius 0,03px, remove gaussian blur and reduce noise 25%)

8. After that, all you have to do is put a psd !! But make sure your pattern "ends" at the same time as your gifs (if it doesn't, you'll have an extra layer on your gif). 

step 1: open your gif or series of gifs in photoshop.

this is how my workspace looks, with my timeline & frames of the gif at the bottom and layers of the gif on the right side below the color picker.

step 2: set your cropping tool.

in the upper left corner of my workspace, i select my cropping tool and set my dimensions. i like 80px x 80px gif icons, so i set them to that size.

step 3: crop your gif.

if your gif is square like mine, you just have to double click it and it will be automatically resized to 80 x 80. if it’s rectangular, just drag the tool until you have the area you want and double click.

step 4 ( **important** ): select all frames & select the top layer.

this step is important so that your psd lasts the whole gif. highlight (shift + click) from the first frame all the way to the last. then go to your layers and select the top one.

step 5: add your psd.

to save as much time as possible, i saved my psd in a document along with the texture i use set to the right fill/opacity that i like, so all i have to do is drag the group with the psd over the gif i just cropped.

hopefully you see that you just drag and drop the psd group of layers onto the gif.

step 6: make your save action.

unfortunately, photoshop isn’t smart enough to actually find the folder where you save your gif icons on your computer unless you keep one on your desktop (or somewhere that doesn’t change). so i have actions for each of the people i icon regularly that leads to their specific folder on my desktop. how do you make the action though? no worries. i show you.

to the right of where i’ve opened my gif, i have actions in a panel. this is where you make an action. press the button with the folded corner. name your action whatever you want (it doesn’t really matter) and press okay.

press command + alt + shift + S to export/save for web. selecting file > export > save for web is the long way to do that. we’re just saving time. when the window pops up to save...

click save and find the specific folder on your desktop you want to save each gif icon in. this does not have to be named the same thing as your action --- mine just happens to be. if you’re opening the gif from tumblr, it should be automatically called something like tumblr_328m47x2n40.gif.

press save. your action panel after this should look like this.

now click the x on the tab of your gif icon. yep, close out of the gif without touching the action panel. if it asks if you want to save the document, say no.

now your action panel should look like this. press the stop button as indicated.

you're done! now you have an action to save your gif icons into the folder you selected.

okay so start out with a 100x100 gif icon. 

next right click on ONE gif layer (the top one is preferable) and select “select pixels”

next, make a new layer and go to the “edit” dropdown menu at the top of your screen (on mac, idk what pc/windows is like). and select “stroke”.

these are my settings, but you can do whatever

okay so after you’ve done that, use the magic wand tool and select the inside square of your stroke layer you just made.

make a new layer and color in the square. make sure it is fully colored in !

okay then double click on your square layer and a styling box will come up. select “drop shadow”. these are my settings, but you guys can do any angle, any opacity, any color, etc.

after pressing “OK”, right click on your square layer again and select “rasterize layer style”. this will make it a flat layer.

next, erase what is still selected from the layer ( i.e. the black square on mine)

then merge all layers except for the gif and add a psd (under the border layer) !

Okay so first step is to open your image:

Next step is to go to this tutorial and follow the steps listed. You can skip this step if you want, but I prefer to do it. After your image should look like this:

Make sure your selections are still selected!! Next I go to Filter > pixelate > mosaic:

Heres my settings:

My image looks like this (i added a psd):

Next I’m going to add a layer and put some more pink into the selections to add a lil something. Make sure your selections are still selected! Mine looks like this:

Next I just did mosaic again and here’s my final product:

Start out by cropping your image to the desired size.  I cropped mine down to 245x300.  Then just add all your basic sharpening and whatever psd you plan on using.

Lovely.

Now you’ll want to flatten your layers!  What I like to do is duplicate everything, and only merge the copies, just in case I need to change something later on.

Then, create a new layer on top of everything, and use the eyedropper tool (shortcut “i”) to select one of the midtones of your subjects face.  Usually the forehead’s a good place to find one to use.

Now, with your brush tool start filling in the face from the inside out.  Your brush should be on 0% hardness, and as you move out from the middle of the face - after you cover the eyes, nose & mouth - you should be lowering the opacity of the brush.  I like to keep the opacity at around 40-50% after covering the main facial features.

Now you can merge the image and the painted layer, and cut out the figure using the polygonal lasso tool.

Okay so typically when you want to activate the hover property you want your description to appear on hover over a sidebar. I'm going to show you how I did this on this theme. You'll see the hover quality if you hover over the icon on the right. 

This is what my complete html looks like for the sidebars, description, etc:

.icon {     position:absolute;     margin-left:910px;     margin-top:-225px;     height:200px;     width:200px;     padding:7px;     text-align:justify;     background-color:{color:borders};     overflow:hidden;}     .iconimg {     position:absolute;     margin-top:-10px;     margin-left:-10px;     z-index:9999999999999; }     .iconimg img {     height:200px;     width:200px;     margin-left:3px;     MARGIN-TOP:3px;     padding:7px;     z-index:999999999999999999; }    .description {      position:absolute;      overflow:auto;      margin-top:-218px;      margin-left:917px;      color:{color:Desc Text};      width:186px;      height:193px;      padding-left:7px;      padding-right:7px;      padding-top:7px;      text-align:justify;      opacity:0;      font-family:'times new roman';      font-size:10px;      background-color:{color:DescBG};      z-index:9999999999;     -webkit-transition:all 0.5s ease-in-out;     -moz-transition:all 0.5s ease-in-out;     -o-transition:all 0.5s ease-in-out;     transition:all 0.5s ease-in-out; } .description:hover{     opacity:1; }

I chose to make the description APPEAR on hover. You do this by following these steps:

1. Make sure that your description is OVER your image, for example my margins are almost the same, accounting for the padding around my icon image. Since the padding is 7px wide, I added 7px to the margin left on the description.

Another way to account for the padding is to just have your description have the same padding as your sidebar. For example, if I wanted to do it this way my description and sidebar would have the same margin left and padding.

2. Next step is to create your hover property. Make sure that you're making your description APPEAR not making your sidebar DISAPPEAR. If you make your sidebar disappear your links in your description WILL NOT WORK. 

To do this I just write the following:

.description:hover {

opacity:1;}

Also make sure that your description is set on opacity:0; and has the ease in ease out transition like so:

 .description {      position:absolute;      overflow:auto;      margin-top:-218px;      margin-left:917px;      color:{color:Desc Text};      width:186px;      height:193px;      padding-left:7px;      padding-right:7px;      padding-top:7px;      text-align:justify;      opacity:0;      font-family:'times new roman';      font-size:10px;      background-color:{color:DescBG};      z-index:9999999999;     -webkit-transition:all 0.5s ease-in-out;     -moz-transition:all 0.5s ease-in-out;     -o-transition:all 0.5s ease-in-out;     transition:all 0.5s ease-in-out; }

Okay so I'm starting out with a 490x200 canvas Which is pretty self explanatory. I chose to have a transparent background, but it doesn't really matter. I'm going to use the shape tool that looks like this: 

 and make a 140x140 square:

I'm then going to turn it at a 45 degree angle as shown here:

So it will look something like this:

Next I'm going to right click on the layer and select 'Blending options' from the drop down menu.

Next I'm going to select stroke. You can make the outline as large as you want but I'm setting mine at 7px. Make sure you have the stroke set to the INSIDE like so:

Next I'm going to select okay and right click on my shape again, this time selecting 'Rasterize layer style' 

This will make the shape a layer. Next I'm going to select the magic wand tool and click on the INSIDE of the diamond/square. 

After erasing the inside, I right clicked and duplicated the shape twice and moved it to where I wanted them to be. I made my background blue so you could see it better but that step isn't necessary.

Next I got my pictures and lined them up under the diamonds like this:

Next I selected the magic wand tool again and selected one of the diamond layers. I clicked the INSIDE of the diamond.

Next you click on the picture that you want inside of the diamond:

and add a layer mask by clicking this lil thing: 

It should look something like this when you've done the same process to each picture.

Okay, then I added the gifs. Add them UNDER your pictures!!!

This is what my layers looked like:

as you can see I have some gifs over-lapping, so I used layer masks to get rid of those.

I also put a gradient over my graphic. It's named 'TAFFETA' in the gradient pack linked above.

next I added this lil banner thing:

under my gradient and smacked some text on there. (i used georgia bold italic)

And that's how I got my final product: