Photoshop GIF Tutorial

X-ray Animation in Photoshop. Create a Cool Animated GIF. Simulate a Cool App. Simulated mobile App of a face X-Ray Scanner

This is a cool tutorial. Take any picture of a human face. Download the skull picture. Then use Photoshop to create an animation of an X-ray scanner.

First you need to reshape the skull to the shape of the face. You will use the Warp tool, soft Paintbrush, and a Blur filter. Then add a Layer Mask and change the layer mode to Multiply.

Edit the Layer Mask by making a rectangular selection over the face. Use the Bucket tool to fill the selection with white. This makes the white area on the mask transparent giving the X-ray Effect.

Then make a 15 frames to create an animation of a moving x-ray over the face. We will use the Frames window to play the animation.

Finally we will create an animated GIF for a Web Page, with just a few lines of HTML code.

 

Watch the Video:

 

Download the files:

face_start.psd

face_skull.psd

face_skull_mask.psd

animation.psd

mobile_app_background.psd

mobile_app.psd

pics.zip

 

Contents:

Getting Started

Resize / Reshape the Skull

Add a Layer Mask

Create an Animation of the X-Ray in Photoshop

Save Animated as GIF for HTML Web Page

Simulate a Cool App

Place App Simulation GIF on a Web Page using HTML

 

Getting Started

You can start with any good portrait face picture like below. Open the face_start.psd file.

 

Use the Rectangular tool to create a 512×584 selection of the face. The Skull image is the same size, so we will use those dimensions. First make a selection over the face. Right click the selection and choose Transform Selection. In pixels type in the Width and Height (512×584). Drag the selection over the face.

 

Click the Rectangular tool and in the pop up click Apply. Now we have a 512×584 selection over the face.

 

Then on the menu, go to Image / Crop. The face image is now 512×584.

 

Go to menu / File / Open. Navigate to the folder with the Skull_1 image and Open it. Select the whole image and Copy. Go back to the face_start.psd project tab and Paste. Name the layer skull.

============

Save Project Asface_skull.psd

============

 

Resize / Reshape the Skull

Bring the Opacity of the skull layer to about 50%. You can see the skull is not matching the contours of the face. Go to View / Snap and uncheck it. Then Move the skull layer to center it to the face

 

Go to Bucket tool. Change the foreground color to black, then on the skull layer fill the empty space.

 

Make a selection over the skull. From the menu go to Edit / Transform / Warp. Move the grid points until the eyes and top skull are more centered. Click a tool and Apply. Fill the empty spaces with black.

Edit Skull layer with the Warp tool

 

Use the Lasso tool to make a selection around the nose area. Go to Edit / Transform / Warp. Move the grid to better line up the skull nose with the face.

Edit nose with the Warp tool

 

Make another selection around the jaw area. Go to Edit / Transform / Warp.

Edit jaw with the Warp tool

 

Turn off the face layer and put the Opacity level at 100% for the skull layer. We have to fix the cuts made when we were using Warp.

 

Do this by filling in black open cuts with the selection tool. Then Edit / Fill / Foreground color (black). Around the nose, use the Eyedropper tool to capture similar blue colors and use a soft Brush tool to fill the gaps. Use a soft Brush and a black foreground to fix the cheek bones and inner nose area.

 

Shape the mouth area of the skull layer to match the face. Follow the same process of repairing the cuts.

Finish the skull layer by adding a blur filter. Go to Filter / Blur / Blur more. This will blend any marks left.

 

Add a Layer Mask

On the skull layer, put Opacity back to 100%. Add a layer mask by going to Layer / Mask / Hide All on the menu. Click the skull layer and change the layer mode to Multiply.

 

Click the Layer mask to edit it. Make a rectangular selection over the face. Change the foreground color to white. Use the Bucket tool to fill the selection with white. This makes the white area on the mask fully transparent so you can see through to the skull.

Layer Mask to create transparency

 

============

Save Project Asface_skull_mask.psd

============

 

Create an Animation of the X-Ray in Photoshop

We will use the two layers while moving the transparent mask area down by 24 times. Make a copy of each frame and paste it in a new project.

Click in the grey background to turn off the Rectangular selection.

Click the Move tool . Then click the skull layer mask. Hold Shift / up arrow key on your keyboard to move the transparent area up to the top of the image.

Open a new project, 512×584 pixels. This will contain just the copied frames for the animation.

 

============

Save New Project Asanimation.psd

============

 

On the face_skull_mask.psd project tab, make a Rectangular selection of the entire image. On the menu, go to Edit / Copy Merged. Then go to the new project animation.psd and Paste. This will be the first frame of the animation.

 

Steps to finish all animation frames:

1. Go back to the face_skull_mask.psd project.

2. Click in the grey background to turn off the Rectangular selection.

3. Click the Mask on the skull layer. Click Move in the toolbar. Hold Shift and press the down arrow key on your keyboard twice to move the transparent area down.

4. Make a selection of the whole image. Go to Edit / Copy Merged. Then go to the new project animation.psd and Paste in the next frame… and so on, until all 24 frames are copied over.

Nine frames with intermitted ones omitted:

Animation Layers

 

Below is the final stack of 24 layers in your animation project. To run the animation, on the menu go to Window / Animation. At the bottom, the Frame Animation window opens. Click the Tab group button and select Make Frames From Layers. This will copy and paste all the layers to frames.

Layers into Frames

 

In the bottom left click forever to loop the animation. Click the play button to see a preview animation. It will run at the maximum frame rate.

 

Click the first frame, then hold Shift and click the last frame to group select all frames. Thenr ight click the 0 sec at the bottom of any frame while still group selected. Choose .01 seconds. Run the animation again. This will slow the animation down just enough.

============

Save Project Asanimation.psd

============

 

Save Animation as a GIF for HTML Web Page

Stay with your animation.psd project.

This will show you how to make an animated GIF for a web page like the one I have on this page.

On the menu go to File / Save for Web & Devices. Choose the Optimized tab. This will turn the GIF image to the max 256 colors.

Save animation as a GIF file

 

Click Preview to see what the animation will look like in your browser.

 

Back to the Save for Web & Devices. Make sure the file format to save is GIF, click Save. A new window opens, type a file name and click Save.

To use your GIF in a web page. Type the html code below. Use your real path and the file width and height.

<html>

<body>

<img border=”0″ hspace =0 alt=”XRAY” src=”/Docs/GIFxray.gif” width=136 height=270 >

</body>

</html>

 

Simulate a Cool App for Mobile Devices

Download and open the project mobile_app_background.psd. We will use a simulated mobile device to combine with the new frames for a more cool GIF animation. Make a selection of the white display area. Then delete it to make that area transparent. The screen selection size is 236×354. The whole background size is 272×540.

 

Back to your animation.psd project tab.

Make a selection like below. Then menu / Image / Crop.

 

Go to Image / Image Size to resize the image to match the screen of the mobile background (236×354). This will resize all the layers, but not the frames. We will make new frames later.

 

Go to Image / Canvas Size. Resize the Canvas to match the dimensions of the mobile device background (272×540).

 

Now for the background. Go to mobile_app_background.psd tab. Put a selection on it, then Copy. Go back to your animation.psd project tab and paste as the 25th layer.The pictures in each layer from 1 to 24 need to be centered.

 

Group select layers 1 to 24. Click the Move tool, and use the mouse and keyboard arrows to center the image in the transparent area.

 

We need to delete the old frames. Turn on Window / Animation (if it is not on). Click the tab below and go to Delete Animation.

 

Click the Tab group button again and select Make Frames From Layers. 25 frames are created.

 

Turn on layer 25 to show the background in all frames.

 

If you run the animation the 25th Frame shows as a single frame of animation. To remove it just click the 25th frame (blue edge), and click the Trash Can button to delete it.

 

Group select all 24 frames and set delay to 0.1 sec.

 

Lets create a loop where the x-ray bar animation bounces between the top and bottom. Group select frames 1 to 24. Click the tab group button and choose Copy Frames.

 

Then click the 24th frame, and click the tab again, and choose Paste FramesPaste After Selection. Now you have 48 frames.

 

Group select frames 25 to 48. Click the tab and choose Reverse Frames. Click the run button. Now we have a scan that goes up and down in a forever loop.

============

Save Project Asmobile_app.psd

============

 

Place App Simulation GIF on a Webpage using HTML

This will show you how to make an animated GIF for a webpage like the one I have on this page.

On the menu go to File / Save for Web & Devices. Choose the Optimized tab. GIF to 256 colors.

To make the GIF file smaller change the Image Size by going to Percent. In Percent, scale things down. In this case by 50%. Click Preview if you want, then click Save.

Save GIF as a simulated mobile App

 

Full Size (100%), 75% and 50%. It is a good idea to keep GIF file sizes small on websites.

Different GIF App sizes for X-Ray animation
Photoshop Xray GIF Animation

 

To use your GIF in a web page. Type the html code below. Use your real path and dimensions.

<html>

<body>

<img border=”0″ hspace=0 alt=”Face XRAY” src=”/Docs/Xray_mobile.gif” width=136 height=270>

</body>

</html>

 

This could be turned into a cool App for mobile devices and tablets. If anyone knows programming. What do you think?

 

More Photoshop tutorials:

Even More Photoshop Tutorials:

 

If you liked this tutorial, please share with your friends

Leave a Reply

Your email address will not be published. Required fields are marked *