Adobe Stockの画像とCSSを使用して、webサイト用の魅力的なアニメーションを作成しましょう。

最適な写真を見つける

Adobe Stockでアニメーション用の美しい画像を見つけることから始めます。Adobe Stockなら、写真の内容を示すキーワードなど、様々な条件で検索できます。

お気に入りの写真が見つかったらプレビューをダウンロードするか、Creative Cloudライブラリに追加します。

もう1枚、たくさんの星が瞬く夜空の写真を探して保存します。

create-web-graphics-step1_900x506

空をマスクする

Photoshopで、クイック選択ツールとレイヤーマスクを使用して街のビル群の写真から空を削除します。その後、透明な部分を維持するためにファイルを透過PNGとして保存します。

まず、配置した写真の背面に明るい透明グラデーションのレイヤーを追加します。合成後、夜空に街の明るさが反映されるような効果を得られます。

次に、写真のレイヤーの夜空をマスクします。そして、便利な「書き出し形式」オプションを使用してPNGファイルを作成します。書き出しダイアログボックスで、「透明部分」オプションを有効にして画像の透過性を維持します。

create-web-graphics-step2_900x506

さらに星を追加する

星の写真を開きます。この写真をCSSを使って回転させます。Photoshopでキャンバスを拡大し、回転時にエッジが表示されないように星の写真を大きくします。コンテンツに応じた塗りつぶしを使用して、元の画像からサンプリングされた星でキャンバスを埋めます。写真を保存します。

create-web-graphics-step3_900x506

CSSで動きを設定する

Dreamweaverなどで、コーディングをおこないます。以下の記述例では、回転させる夜空の写真を#starsとして、プロパティを設定しています。#starsのCSSルールにアニメーションのプロパティを追加し、いくつかの値を指定します。星が一定してゆっくりと動くように、長さを210秒に、アニメーションスタイルをlinear(線形)に、ループの制限をinfinite(無限)に設定します。

create-web-graphics-step4_900x506

完成

Adobe Stockの画像とCSSを使用することで、webサイト用の魅力的なアニメーションを作成できました。

create-web-graphics-step5_900x506

Adobe Stockの厳選されたコレクションから、次回のプロジェクトに活用できる素材を見つけてください。

05/16/2019
このページは役に立ちましたか。