UIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアル
ボタンやパネル、レイアウトなど、最近はWebのユーザインターフェイスでさまざまなアニメーションが利用されています。WebページのUIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアルを紹介します。 アニメーションを魅力的に動かすテクニックを段階的に解説しているので、それぞれの効果がよく分かります。 Giving Animations Life 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Step 1: まずはシンプルに動かしてみよう Step 2: バウンドを加える Step 3: バウンドを自然な動きにする Step 4: ディズニー®の12の基本原則を取り入れる Step 5: アニメーションを誇張する Step 6: アニメーションに命を吹き込む キーフレームを簡単に設定できるスクリプト St
Illustratorで放射状のオブジェクトを作成する方法
ホームページのバナーなどでよく目にする、放射状のオブジェクトをイラレでデザインする方法を紹介します。 円を書いて、破線にするだけ！ 簡単ですよ。画像のように、100px × 100px の塗りの円を書きます。 次に、塗りを線にして、線幅を100pxにします。線を破線にします。はい、できあがり！ （ちなみにこの画像では、線分10px間隔10pxの線にしています。） この放射状オブジェクトに、グラデをかけたりしたい場合は、線で作ったオブジェクトを選択して 「オブジェクト→パス→パスのアウトライン」これで、塗りのオブジェクトになるので、色々と編集可能です。 応用編！好きなパターンのボーダーも描ける！ 単純な事ですが応用として、真っ直ぐな線の線幅を太くして、破線にするとボーダーも簡単にできちゃいます。 （例のごとくこの画像では、線分10px間隔10pxの線にしています。） 放射状のブジェクトの作成
Photoshopを使いこなすための印象的なチュートリアルいろいろ
Photoshopを使えばここまでの作品ができる、ということがよくわかるチュートリアル集が「35 New Photoshop Tutorials with Various Techniques」です。アイコンからSFっぽいイラストまで、さまざまなジャンルにおける作品のメイキングが公開されており、技術が学べるだけでなく、こんなラフスケッチからここまでの作品が……！と製作過程を眺めているだけでも楽しめます。 35 New Photoshop Tutorials with Various Techniques | The Design Inspiration ◆Photohop Tutorial Link: A Cute Cartoon Artwork Creation 鉛筆でのスケッチはこんな感じ。 スケッチをスキャンし、Photoshopを使って着色していきます。 完成作品はこちら。 なお、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
Corona Basics | Corona Labs
