#p:tut

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

Start out with a clean canvas. Mine is 500x300px but you can do whatever size you want. I then proceeded to unlock the background layer. Do this by double clicking the lock seen on the right of the layer in the layers menu.

Next I made a new layer by clicking the little icon next to the trashcan icon at the bottom of the layers menu.

Then, after selecting the original layer, I right clicked on the icon and pressed ‘select pixels’. Then I clicked on my new layer.

After that I went to edit > stroke.

Here are my settings:

I duplicated the stroked layer and then double clicked on the one on top and a little window pops up named ‘Layer Style’. I checked the ‘Stroke’ box and set it to the settings below:

It doesn’t matter what pattern you use. I forget where I got this particular one but if you go to Deviantart and look up ps patterns than a bunch will probably come up.

 I then but down a texture I had saved on my computer under the border I made. My canvas looks like:

Next i get a gif. I got my ari gif from this gif hunt. Select all of your layer in the timeline like so:

REMEMBER the number of frames your gif has!!! Then you click the little icon above the timeline that looks like this :

and a little dialog will come up.

and select “copy frames”. Next go back to your original document and press the ‘duplicate frame’ button until you have the same amount of frames as your gif. 

Highlight all of your new frames and click the icon above the timeline again. This time select “paste frames” and then check “paste over selection

Thats how you get the gif on your document. I usually group all my gif together so that the layers menu doesnt look cluttered, but if you don’t want to it’s fine. This is what my layers menu looks like (group 1 is my gif):

And I set my group one to lighten:

Then I give the group a layer mask (the square with the circle in the center) and erase any harsh edges:

I then get my gradient and slap it on there.

Next is the text. I used feathergraphy to write” beatriceofrp” and arial black to write “does a tutorial” I just played around with my settings until I found a style that I liked. Here’s my settings for “beatriceofrp”:

“does a tutorial” is just stroked with a gradient overlay. 

then I’m done!

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; }