記事一覧
PhotoshopでAPNGやWebPアニメーションを作ろう
Photoshopのタイムライン機能を使ってアニメーションを作成し、APNGやWebPアニメーションとして書き出す方法についてご紹介します。
サンプルファイルサンプルファイルはこちらからダウンロードできます。
タイムラインパネル「m_logo.psd」をPhotoshopで開き、メニューバーの「ウィンドウ」から「タイムライン」をクリックして、タイムラインパネルを表示します。
下向き矢印をクリ
SVG Tips vol.2 - SVGをウェブページに表示する方法
前回の記事（SVG Tips vol.1）では、SVGの特徴とIllustratorから適切に書き出す方法について紹介しました。
今回は、書き出したSVGをウェブページに表示する方法について解説します。サンプルファイルも用意しているので、ぜひ一緒に手を動かしてみてください。
サンプルファイルのダウンロード上記のダウンロードボタンからダウンロードできない方はこちらからどうぞ。
SVGをウェブペ
SVG Tips vol.1 - IllustratorからSVGを書き出す方法
ウェブページでベクター形式のSVG画像を使うと、拡大しても画像が荒くならない、アニメーションできるなど、様々なメリットがあります。Illustratorからイラストやロゴを適切にSVG形式で書き出して、ウェブページに挿入する方法を、2回に分けてご紹介します。
アイコンやロゴをSVG形式で納品する際に困らないよう、普段ウェブに関わらないグラフィックデザイナーさんにも知っておいていただきたい内容です。
すぐ使えるXD Tips vol.4 - テキストアニメーションをデザイン編
Adobe XDの「自動アニメーション」を利用し、背景が透けて見える無限ループテキストアニメーションを作る方法を、動画で解説します。
使用している画像素材と完成形のXDファイルは、こちらからダウンロードできます。
・background.jpg / 画像素材
・text_animation.xd / 完成形のXDファイル
動画をご覧いただくのが分かりやすいと思いますが、下記に作業の流れを記載
［サンプルファイルあり］Adobe XD ユーザーフェス特別企画・自動アニメーションハンズオン講座 当日用資料
2020年9月26日（土）にオンラインで開催されるAdobe XD User Festival 2020の特別企画として行われるハンズオン講座の資料です。
アーカイブ動画当日の動画はこちらでご覧いただけます。
XDサンプルファイル ダウンロード
ハンズオン講座で使用するサンプルファイルは下記からダウンロードしていただけます。
一緒に手を動かしながらAdobe XD User Festiva
すぐ使えるXD Tips vol.1 - ホバーのインタラクションをデザイン編
Adobe XDの2019年11月の新機能「ホバーステート」を利用し、ボタンにマウスオーバー（ホバー）したときのマイクロインタラクションを作成する方法を解説します。
サンプルファイルはこちらからダウンロードできます。
完成系の確認まず今回の完成系を見てみましょう。
ホバーによって、下記の2つの変化が起こっているのがわかります。
・角丸長方形の塗りが透明になる（不透明度が0になる）
・テキス