Animated Sunburst with Portrait in Photoshop

    ●   Create a Sunburst Background behind your Picture or Portrait and make it Animate.

Learn About:

Lasso ToolAnimated .gifsLayer VisibilityHue/Saturation

• This tutorial is used as part of the Home Sweet Home Portrait, Photoshop Portrait Project, the We Can Be Heroes! Project.

Other People's Work:

Here are examples of work inspired by this tutorial.


Step #1: Open a Picture of Yourself in PhotoShop ~

Open a picture of yourself in PhotoShop

… and crop the image to get just your face.

Step #2: Trace Around your Head ~

Use the Magnetic Lasso Tool

… and begin to trace around your head and shoulders.

The goal is to cut out around your head, deleting the background.

Step #3: Choose Colors ~

Choose some bright colors …

… by clicking on the colors palette and select two bright colors you like.

Step #4: Shape Tool ~

Select the Custom Shape Tool or just hit the letter (U) …

… and click the Shape Picker on the menu bar.

Do this:

Step #5: Choose the "Registration Target" ~

Choose the element shown below:

… make sure Pixels is selected in "Pick tool mode" …

Step #6: Zoom Out ~

Get the Zoom Tool by hitting the keyboard shortcut letter (z) …

… select the Zoom Out zoom out button in the menu bar

zoom out

… or just hit Cmd (⌘) - (minus) to Zoom Out.

Step #7: Drag the Image ~

Stretch out the shape far beyond the image:

To zoom back in hit Cmd (⌘) plus.

Step #8: Make a New Layer ~

Make another New Layer below the others.

antoher new layer

Step #9: Swap Colors ~

Swap your colors by clicking swap hitting the keyboard shortcut letter (x).

Step #10: Fill the Layer ~

Hit the keyboard shortcut letters: Alt (⌥) + Backspace/Delete + to fill the area with the foreground color.

Step #11: Merge Layers ~

Shift-click the bottom 2 layers to select them both …

… then Right-Click and select Merge layers or hit the keyboard shortcut: Cmd(⌘) + E

Step #12: Duplicate the Layer ~

Right-Click and duplicate the merged layer …

duplicate layer

and then duplicate it AT LEAST 3 more times.

Step #13: Change the Color ~

Then go to: Image > Adjustments > Hue/Saturation and change the background color of one layer.

Step #14: Change Each Layer ~

Then change the colors of each layer so they are different from each other.

Step #15: Animation ~

Then go to: Window > Timeline and the Timeline window appears click "Create Frame Animation" (if necessary) …

Step #16: Layer Visibility ~

Turn OFF the visibility of all your layers except your face and the bottom layer by clicking on the eye

Step #17: .01 or .02 Seconds ~

Click the seconds at the bottom of the frame and set it to .1 or .2

Step #18: Add New Frames ~

Click the little icon at the bottom to "Duplicate selected frames …"

… and with the Duplicate Frame selected …

… turn the visibility ON in the next layer up.

Step #19: Keep Going ~

Create a new frame for each layer layer you made.

Step #20: Play ~

Play your animation by clicking on the Play button.

The goal is to make the background animate.

Step #21: Forever ~

Set the number of times your animation plays, click here …

select looping options

… set it to Forever.



To speed up or slow down your animation, select all the frames by holding shift-key and clicking on the first and last frames.


You probably want your animation to play quickly …

Step #22: Save for Web …

When you are done with all your layers, go to: File > Save for Web … and save your work as a .gif …

Check the file size in the lower left hand corner. Try to keep below 2 megabytes if you can.

Animated gifs are supposed to be small - that's their purpose. To make your file smaller, shrink the pixel size …

Step #23: Insert the animation in your Project …

Attach your animated gif to your portfolio or whatever project you're working on - USE IT!





… (Remember: all these tutorials are intended to be applied to your projects) …


Last Step: The Link ~

If you're using your portfolio, navigate to the EXACT PAGE in your browser where your files and reflections are posted …

… copy the URL address of your page …

    ●   Then paste the URL address of THE SPECIFIC PAGE of your Portfolio so that when the link is clicked, it takes you directly to the example on your website.

Remember: Paste the address into your reply so when the link is clicked it goes directly to the page that contains your evidence.

Attach your Photoshop Document Also ~

Also attach your completed Photoshop file too!