#web graphic tutorial

Step 1. Find pics of the CD you wanna make gifs of.

I usually use discogs for this, but sometimes discogs doesnt have what I need and I resort to just looking up "[insert album name] cd" and try to find pics thag way. Occasionally, I can't find any solid straight-on pics of a cd or its case, which in that case I have to do some photo-manipulation to make it look nice. I also sometimes color-correct the pics I find if the colors look weird.

Step 2. Get them lookin right.

This step is easier to see in the video but basically just overlay the pic of the cd onto a png of a cd and put the album cover into a cd case frame (if its not already in one..)

Step 3. Make the cd spin

Go to this website and use the clockwise spin mode to made it spin..

Step 4. Resize your stuff to make it compatible with eachother

This is also easier to explain if you watch the video but basically just go to ezgif and crop n resize the stuff so they fit together and the cd isn't like super small compared to the case or anything like that.

These graphics dont have any standard size i dont think, but mine are (as of recent) standardized so that the cd pngs are 2048x2048 pixels, the cd gifs are 253x253, the cd cases are 304x266, and put together the gifs are 430x266 pixels.

Step 5. Overlay the CD case onto the CD

Go to overlay on ezgif and put the cd case about halfway over the cd. You'll probably need to expand the canvas size to do this, just crop the empty pixels when you're done.

Heres the video tutorial

Oh oh oh and heres a couple CD case png overlays I use when I can't find good scans of the CD cases

the canvas size is 386 x 56

you fill the whole canvas with a solid color, and (while using the Symmetry ruler/tool) you smooth the edges using an eraser.

add a new layer above the one with the solid color, then add a black border around it

for the rest of the steps, always have the layers Clipping unto the solid color background, so that the additions dont go past the black border

for the shine, turn on the Ruler tool and put a shine in the middle of the button. use the Airbrush eraser to erase a bit of the top.

set the opacity to 40%-30%

draw 1 thin slanted white line, then copy and paste it until it fills the whole background. then set the opacity to 10%

to make the solid colored background more interesting, i use the Pavement image thats provided for free by ibispaint.

i set the Blending Mode to Color Burn and adjust the opacity until it looks nice for the color im using

then boom! this is the base i use for all of my buttons, i just change the color and the opacity of the Pavement texture to whatever i want

add text and a transparent image underneath the shine and the slanted lines, and hooray you have a button!!! remember to save it as a transparent image :3