Adobe Stockの画像とCSSを使用して魅力的なwebグラフィックを作成

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

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

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

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

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

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

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

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

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

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