Combine images from Adobe Stock with CSS to create more engaging animated images for your website.

Find great photos

Begin your quest on Adobe Stock to find beautiful images for your animation. Adobe Stock allows you to search on a wide range of criteria, including keywords that describe the content of a photo.

Locate a photo that you like and download a preview — or add it to a Creative Cloud Library.

Locate and save another photo of a clear sky full of evening stars.

create-web-graphics-step1_900x506

Mask out the sky

In Photoshop, use a combination of the Quick Select tool and Layer Masks to remove the sky from the city skyline photo. Save the file as a transparent PNG file to preserve the transparency.

Add in a light transparent gradient behind the city in order to simulate the glow of the city lights against the nighttime sky.

Once you have masked out the evening sky, use the convenient Export As option to create a PNG file. In the Export dialog box, be sure to enable the Transparency option so we can see through the image.

create-web-graphics-step2_900x506

Add even more stars

Extend the canvas in Photoshop so the stars photo is large enough to be rotated without showing the edges. Using the Clone Stamp tool, fill the canvas with stars sampled from the original image.

create-web-graphics-step3_900x506

Set in motion with CSS

Add an animation property to the #stars CSS rule and define a few values. Keep the stars moving slowly and consistently by setting a duration of 210 seconds, an animation style of linear and a looping limit of infinite.

create-web-graphics-step4_900x506

The final result

Combining Adobe Stock with CSS allows us to create an engaging animation for your website.

create-web-graphics-step5_900x506

Check out this curated collection from Adobe Stock with more images that you can use in your next project.

09/16/2019
此页面是否有帮助?