Airbnbが開発したアニメーションライブラリ「Lottie(ロッティー)」の使い方と魅力を解説！
Lottie（公式サイト：https://airbnb.design/lottie/）とは、民泊マッチングサービスAirbnbが開発したアニメーションライブラリです。 Webサイトはもちろん、iOSやAndroidのアプリにも組み込むことができ、従来の方法よりも動作が軽く、簡単に実装することができます。 Lottieでどんなことができるのか、まずは下の作例をご覧ください。 【作例】 マウスオーバーでアイコンが動きます ↓ このように、マウスアクションなどに連動してアニメーションを再生することができます。 この記事では、Lottieの魅力と、実際に作例のメールアイコンを作成し、Webサイトに実装するまで一連の流れをご説明します。 Adobe After Effectの使い方については、詳しく画像付きで解説します。また、HTML・Javascriptは、サンプルコードを記載しています。 ぜひこ
illustratorのaiデータから画像を綺麗にスライスする方法｜Web Design KOJIKA17
illustratorのaiデータから画像を綺麗にスライスする方法 2011-01-08 illustratorのaiデータをWeb用の画像にスライスすると、画像が1pxズレが生じたり、Photoshopのスライス機能と違うので戸惑うことが多いと思います。 関西の某勉強会の懇親会でも「外注に頼んだデザインがaiデータで来て、スライスに凄い時間がかかった」という意見が多く聞いたので、illustratorのスライスの仕方をご紹介させて頂きます。 紹介するillustratorのバージョンはCS2ですが、CS以降のバージョンならほとんど機能が使えるはずです。 スライスの準備 単位 [ファイル]→[ドキュメント設定]で単位がピクセルになっているか確認します。 ここを変更すると、定規などの値も全てピクセルになるはずです。 カラーモード [ファイル]→[ドキュメントのカラーモード]がRGBカラーにな
井上のきあさんによるIllustrator初心者用講座
イラレに慣れていない段階の初心者さんが陥りやすい「？」や イラレ独特の癖なんかも教えてくださってます。 2月3日に発売されたご自身の著書「アトリエ」から作例を出して アレンジのやり方なんかもレクチャー。 ついぴくからの引用が多いので少し重いかもしれません。ご了承ください。
psdとaiファイルをwindowsで簡単にプレビューする方法 | kzms2 – html,css,javascript
pdsとaiファイルって… WindowsだとPhotoshopやIllustratorを開かないと中身が確認できなくて不便ですよね。 一部のビューアー(IrfanView32など)で見れたりはしますが…サムネイルを見たいだけなのにとりあえず開かなければならないのがもう…！ MacにはQuick LookというSpaceキーを押すだけでプレビュー出来るという神がかった機能があるので非常に嫉妬です。 Windowsでもそれらしいこと出来ないのかなぁ、と調べてみると色々設定すればJPGなどと同じく小さいサムネイルなら見れるように出来るのですね！ やり方や詳細は続きから。 導入の仕方 PSDファイルをエクスプローラでサムネイル表示する：常患室さんより引用しています。 以下に導入の手順を明記します。検証できていないですが、恐らくPhotoshopとIllustratorが入っていないパソコンで
3色ボールペンで行うベジェ曲線の練習方法｜DTP Transit
パス（ベジェ曲線）を極める上で、もっともシビアに精度が求められる「文字」を使って練習する方法をご紹介します。 「文字」を使ってベジェ曲線を理解する Illustrator上で「a」と入力します。Myriad、Helveticaなど、ゴシック系のPostScriptフォント（Type1系のOpenTypeフォントでもOK）を使います（TrueTypeフォントは避けてください）。 薄めのグレーでカラー設定を行い、プリントアウトします。 アンカーポイントがおかれているだろう位置に、黒いインクで点を書き込みます。さらに、それぞれのアンカーポイントから、どのようなハンドルが出ているかを予想して青いインクで書き込みます。 Illustratorに戻り、文字をアウトライン化（［書式］メニューの［アウトラインを作成］、command+shift+Oキー）します。 3.で行った結果が正しいかをチェックし、赤
30+ Fresh & Useful Adobe Illustrator Tutorials & Neat Tips | The Jotform Blog
Adobe Illustrator is a powerful tool for illustrating various elements one can use for web pages and print design. However, it’s important to know what to do in order to powerfully use its tools and achieve certain effects. So, step-by-step tutorials can provide a lot of help, thats why we spent a lot of time searching for Fresh and New high quality tutorials out there and the result was 30 remark
Illustrator Quick Tips #1 - Complex Symbols with Pathfinder
Last week I posted an article showing some great logos using 3D effects and colorful gradients. There are quite a few ways to do create those effects in Illustrator, however for most of them you will have to use the Pathfinder tools. Because of that I will show you an example based on a few logos from that list. References When I was looking for references for a logo design project that I'm still
Learn Adobe Illustrator in 30 Days Crash Course - FREE
Last updated on 1 February 2023 This is the most popular FREE Illustrator training course created for beginners interested to learn Adobe Illustrator. Each lesson will take around 20 mins to complete and you will be able to learn the basic fundamental techniques in 30 days. The course is updated to work with Illustrator CS to Illustrator CS5. (stylerecap.com) No matter what version you installed,
Illustrator Tutorials
Step-by-step Adobe Illustrator tutorials with original source file download. These Illustrator techniques are intended for intermediate users (require some basic knowledge of Illustrator). Disclaimer You are free to link, print, and share these tutorials; however, please do not publish (copy & paste directly) on your site, forums, publications, etc. Halloween Pumpkin Learn how to draw a Halloween
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learn | Adobe Creative Cloud
目を引く文字デザインの作成方法：初級編 |
Illustrator: Blend Tool Spacing
illustrationclass.com
Illustrator｜きれいな3Dの円グラフの作り方チュートリアル - Dynamite Design Blog｜海外Webデザインネタ日本語訳＆作成チュートリアル
実用書には載ってないイラストレーターの使い方。