CREATIVE X 第2弾
CREATIVE X 第2弾
2015.10.22

LIGブログで1,000個も作ってきたアイキャッチのPSDデータを大放出中(2)アニメーション編

佐藤タカアキ

こんにちは、デザイナーの佐藤タカアキ(@sato_tkaaki)です。

先日、「LIGブログで1,000個も作ってきたアイキャッチのPSDデータを大放出中(1)社員編」という記事を出したのですが、ありがたいことに需要があったようで、他のシリーズ版のPSDデータも見たいとのご要望をいただきました。ありがとうございます。

デザイナーにとってPSDデータを晒すというのは、裸を晒すような恥ずかしさもあるので割りと勇気のいることですが、前記事でも申し上げた通り、他人のPSDデータを実際に触って学ぶことは多いと思いますので、今回も今まで作ってきたアイキャッチから選定していくつかを配布できればと思います。

なお、Photoshopを使用して他人のPSDデータを見るときは、オプションバー左にあるバウンディングボックスにチェックを入れて弄るのがオススメですよ。

ぼく自身まだまだPhotoshopは勉強中な身でもありますので「そんなやり方しないでこのやり方でやれば2分でできるよ!」などのアドバイスやフィードバックをいただけますと幸いです!

なお、PSDデータを使用する際には、以下の利用規約だけはご確認いただき、同意の上でご活用ください。

利用規約
  • 学習を用途とした個人利用の範囲でご活用ください
  • オリジナルファイルの再配布・販売を禁止します
  • 素材の著作者を偽って公開する行為を禁止します
  • PSDデータの一部をウェブサイトのデザイン素材として使用することを禁止します
  • 素材を犯罪・反社会的行為・公序良俗に反する行為などに利用することを禁止します

▼佐藤タカアキのPhotoshop術

アニメーションをテーマにしたアイキャッチ

さて、第一弾のテーマは「LIGの社員を使用したアイキャッチ」でした。第二弾では主にWebサイト制作でのアニメーションをテーマにしたアイキャッチデザインのPSDデータを紹介&配布します。

LIGのエンジニアの力作揃いの記事と合わせてどうぞ!

1. CSS、canvas、SVGで円周上をアニメーションさせる方法

971
https://liginc.co.jp/web/html-css/html/175526

PSDデータをダウンロードする

2. JavaScriptライブラリTweenMaxでSVGアニメーションを扱う方法

892
https://liginc.co.jp/web/js/other-js/168856

PSDデータをダウンロードする

3. requestAnimationFrameでスクロールアニメーションをさせるTweenクラスの実装方法

884
https://liginc.co.jp/web/js/169944

PSDデータをダウンロードする

  • 1
  • 2