[Nexus 7 Themes and Apps] veeman:
*This guide was originally made for the Kindle Fire, which has a different screen resolution than the Nexus 7. Wherever you see a 1024x600, replace with the desired resolution.*

End Result

Getting Started

YOU WILL NEED

-A computer with Photoshop installed

-Basic knowledge of how Photoshop works

-A bit of patience

So go get a cup of coffee and let's get started. First fire up Photoshop (or whatever image editor you are using) and create a new image that is 800x1280. (Or whatever the screen resolution of your device is)

The 800x1280 is the resolution of your screen. If you want a landscape boot animation, you make it 1280x800.

File>New

Now that we have a canvas that is 800x1280, let's make a background.

BACKGROUND

I used the gradient tool and created a gradient that was dark grey in the middle and went to black near the edges.

This is done using the gradient tool using the radial setting. Drag from the middle to one of the 4 corners.

Now the background looks great right here but I want some more texture. I grabbed a wooden background and put it as a new layer on top of the gradient and set the opacity to 60%

TEXT

Then I added the text "TUTORIAL" in Devil Breeze font with a slight gradient over it.

LOADING BAR

Now that we've got the Background and Text out of the way lets do the loading bar.

Use the rounded rectangle tool with a radius of 5 pixels to make a shape that is roughly 447x48 (doesn't have to be exact)

Here is roughly what it should look like.

Now create a drop shadow using the following settings

Next create an inner shadow using the following settings

Now here's what it should look like. It has some depth and looks like it's sunk into the wooden background.

The background of the Loading bar is done. Now we need the actual moving portion of the bar.

Create a new rounded rectangle shape that is about 1 pixel smaller on each side than the loading bar background that we just created. (You can just duplicate that layer and resize it) I'll pick a nice blue color for it but of course you can choose whatever color you wish.

Plain blue is pretty boring though. Lets make it glossy! Duplicate the layer that we just made and make it white. Then delete the bottom half and set the opacity to around 8%.

Now it's looking snazzy! There's one last thing to do... Well, ANIMATE it of course! That's why it's called a boot animation.

ANIMATION

Now we need to set up Photoshop to do animations... Window>Animation

Now an animation window should come up at the bottom of your screen.

Next we're going to merge some of the layers so it's not so messy. To merge layers Shift+Click on the layers you want and the right click and merge layers.

I merged the Gloss and the blue loading bar to create one loading bar. This should leave you with 4 layers and they should be in this order. (From Top to Bottom)

1. The loading bar

2. Loading bar background

3. Your Text

4. The main background

Now click on the Loading bar layer and go to Layer>Create Clipping Mask

Then give the Loading bar a drop shadow and set the distance to 0. This gives it a slight 3D look.

We're almost done here.. hang tight!

Then move the loading bar layer straight left until you can't see it anymore like so.. and then click on the little clock next to Position.

Next drag the slider over to 04:00f (4 seconds) and then move the Loading Bar layer back over to the right so it's fully visible again. Now if you slide the slider back and forth between 0 and 4 seconds you should be able to see the bar moving.

We're done animating! Pat yourself on the back for making it this far. But hold on... we need to save this don't we?

SAVING

Go to File>Export>Render Video

We're going to name it 0 (Zero) (Otherwise you will have to go through and rename 120 different files), Create a new subfolder and call it part0. Select Image Sequence. In Range we're going to select the In/Out Frame option. This should be from 0-120 because our animation is 4 seconds long at 30 frames per second. Then go ahead and click Render and you're done :)