俯瞰表現とアイソメトリック図法 アイソメトリック図法の特徴は、斜め俯瞰で作図して立体的に表現できるところです。箱庭系ゲームでもユニットを組み合わせやすいのでよく使われています。 天藤製薬株式会社:ボラギノールタウン https://www.borraginol.com/town/ TDK株式会社:こんなところにTDK https://www.jp.tdk.com/athletic/experience/ アイソメトリック図法 アイソメトリック図法とは「等角投影図」と呼ばれる立体の表現方法です。手前から奥まで均等に描画する表現手法で、パースといわれる「遠近法」は使いません。具体的にはこのように「縦:横:高さが120°で交わるように描画」します。 制作の手順 ノートPCの作成 ①画面とキーボードの部分を作成してください。画面を構成するパーツ、キーボードを構成するパーツをそれぞれ[グループ]して
こんにちは、デザイナーの花ちゃんです！ 最近、Webサイト制作の案件でアイソメトリックのイラストを作る機会がありました。 アイソメトリックとは、アイキャッチにもあるような、物体を斜め上から見下ろしたような図形のことをいいます。 はじめはこの斜めから見た角度はどうやって作ればいいんだ……？ 俯瞰でイラストを描くのって一番難しいのに……！！ と思っていたのですが、Illustratorの「3D効果」というとっても便利な機能に出会ったおかげで、作るのが楽しくなってきました！！！ 今日はクリスマスということで、アイソメトリックな「プレゼント」と「クリスマスツリー」を作ってみましたので、その方法をご紹介いたします！ アイソメトリックについてはゆうこさんのこちらの記事をご覧ください。
塗りつぶしツールがないのでは？という勘違い イラレにも塗りつぶしツールがあります！癖が強めですが、ライブペイントという機能があります。基礎ではイラレの基礎的な「塗り」の概念。応用では塗りつぶせるライブペイントについて説明します。 基礎：パスを閉じる通常の塗りつぶし Illustratorでは、「線」と「塗り」でできています。長方形ツールなどでオブジェクトを作るだけです。ツールパネルに表示された通りの「線」と「塗り」の色になります。 入れ替え矢印のボタンをクリックすることで、「塗り」と「線」の色が入れ替えることができます。 ツールパネルの塗りと色は上と下の概念があり、上のときにカラーを変更できます。ツールパネルの塗りと線部分をクリックすることで上下が入れ替わります。 それでは実際にやってみましょう。塗りを上にした状態でスウォッチパネルの任意のカラーを選択すると色を変えることができます。 はい
どうもデザイナーのナガレダです〜。社内デザインチームでLIGブログのアイキャッチやバナーの制作を行っています。 最近コロナの影響もあり、オフラインでの撮影の機会が減りました。アイキャッチなどでもイラストを描くことが増えてきています。 もともとイラストを描くことが好きで、趣味で描くときはイラストを描く専用のソフトを使っていました。なので、正直Illustratorでちゃんとしたイラストなんて描けるわけないだろ！ と思っていたのですが……。 Illustratorをいじっていくうちに、すんごいイラスト描きやすいツールが多いことが判明してしまったので、よく使う便利ツールをご紹介します！ 「わからないこと」が一瞬で解決するかも？ Illustratorについて効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、
クロソイド式 角丸長方形を作るスクリプト クロソイド曲線と円弧を組み合わせた曲線を使って、長方形の角を丸めたものを作図するIllustartor用スクリプトです。 角丸長方形の角丸具合にこだわりたい人にオススメです。 BOOTHにて販売中（500円） クロソイド曲線とは 「曲率が曲線の始点からの長さに比例する曲線」をクロソイド曲線（オイラー螺旋、コルニュ螺旋）と呼びます。 曲率とは曲線上の各点での曲線の曲がり具合のことで、詳しく言うと「曲線の接線の角度を曲線長で微分したもの」です。さらに言い換えれば「曲線に沿って進むとき、単位長さあたりどれだけ曲線の向きが変化するか」を表した値です。 ちなみに曲率が常に0なのが直線であり、曲率が0でない一定値なのが円です。 何に使うの？ Illustratorで使われている角丸長方形は、1/4円弧と直線を組み合わせたものです。 Illustratorの角丸
Illustrator グラデーションメッシュとは？ 古くからある機能なんですが、使ったことがなかったり、多少は使ったことあっても使い方がよくわからず挫折したとかそういうことをよく聞く機能の代表例だと思います。 グラデーションメッシュのことを公式サイトにかかれていますが、何を言ってるのかさっぱりわかりませんw メッシュオブジェクトは、カラーを様々な方向に流し込み、ポイント間でのスムーズなカラーの移行を可能にするマルチカラーオブジェクトです。オブジェクトをメッシュオブジェクトに変換すると、メッシュラインと呼ばれる網状のラインがオブジェクト上に作成され、複数のカラーを自由に移行させたグラデーションを定義することができます。メッシュライン上のアンカーポイントを移動または編集すると、カラーの移行量や、カラーを適用する範囲を変更できます。 かんたんに言い換えれば、オブジェクトに複数のグラデーションを
オリジナルのアイコンを作るシンプルで簡単なデザインテクニックを紹介します。 円や矩形などの基本的な形を組み合わせたり、変形させたりして、さまざまなアイコンを作成します。 作業に慣れてしまえば、どれも1分もかからずにアイコンを作成できます。 The Super Simple Guide to Iconography 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 目のアイコンの作り方 矢印のアイコンの作り方 バッテリーのアイコンの作り方 箇条書きリストのアイコンの作り方 クラウドのアイコンの作り方 次に進むのアイコンの作り方 ファンネルのアイコンの作り方 プレイ・ポーズのアイコンの作り方 位置矢印のアイコンの作り方 位置ピンのアイコンの作り方 サウンドのアイコンの作り方 ウェーブのアイコンの作り方 Toptalのアイコンの作り方
Illustratorには標準で整列機能がありますが、テキストオブジェクトについては「見た目」としての正確な整列ができません。これは昔からの仕様で、今後変更される可能性はかなり低いと思っています。そこで、テキストオブジェクトの正確な整列をサポートするスクリプトを作りました。うまく揃わないテキストに悩まされている方は、ぜひ使ってみてください。 更新履歴GitHubのリポジトリをご確認ください対応バージョンIllustrator CS5／CS6／CC／CC 2014／CC 2015／CC 2015.3／CC 2017ダウンロードスクリプトをダウンロードするインストール方法ダウンロードしたファイルを解凍します。所定の場所に「オブジェクトを整列Plus.jsx」をコピーします。Windows版ではお使いのIllustratorの種類によって保存する場所が異なりますのでご注意ください。Illus
先ほどCreative Cloudデスクトップアプリケーションがアップデート（3.9.1335）され、同時にIllustratorやPhotoshopなどのほとんどのアプリケーションがCC（2017）としてリリースされました。今回は下記の新機能をプレビューしてみます。 ピクセルグリッドに自動的に整合 フォントの整理とフィルタリング フォントのライブビュー コンテキストメニューから異体字 特殊文字／空白文字／分割文字の挿入 サンプルテキストの割り付け パス／シェイプへのテキストの読み込み Adobe Stockテンプレート 選択範囲をズーム フラットなUIと新しいアイコン ピクセルグリッドに自動的に整合 デザインのピクセルを最適化 https://helpx.adobe.com/jp/illustrator/how-to/pixel-perfect.html Illustratorから画像書
この文書では Illustrator の調子が悪いときに最初に行っていただきたい対処方法をご紹介します。 以下のような問題が発生した場合、この文書の対処を行うことで改善される可能性があります。 Illustrator が起動しない、起動に時間がかかる。 動作が重い / 遅い。フリーズする。 下記の対処方法で解決しない場合や、特定のエラーメッセージが表示される場合は、別の解決方法の文書が用意されていることがあります。
Illstrator シェイプ形成ツールを使って簡単に効率よくアイコンやイラスト作成をしよう by ナツコ · 2014-10-03 こんにちは、デザイナーのナツコです。 フラットデザイン、SVG、CSS3、など…最近のwebデザインのトレンドで デザイナーのみなさんは以前よりもIllustratorを使う機会が増えたのではないでしょうか？ 最近は、様々なサイトで素敵なアイコンやイラストが配布されていますが、 デザイナーであれば出来ればオリジナルで作成したいものですよね。 そこで、今回はオリジナルのアイコンやイラストを作成する際にとっても便利な「シャイプ形成ツール」の基本的な機能、使い方をまとめたいと思います。 シェイプ形成ツールとは シェイプ形成ツールは、重なった複数のシェイプを結合、削除できるツールです。 同じような機能でパスファインダーがありますが、 結合させたい部分や消去したい部分
曲線から直線へなめらかに移っていくラインをIllustratorで作成するときは、方向線の角度に注意しなければなりません。しかし、アンカーポイントや方向線を微調整していると、それぞれの角度にギャップが出てしまうことがあります。角度を合わせるには、その都度手動で調整するしかないのですが、その負担を少しでも軽くするためのスクリプトを作りました。ロゴやアイコンなどで正確な作図をする機会が多い方には、それなりに便利なものだと思います。 更新履歴GitHubのリポジトリをご確認ください対応バージョンIllustrator CS5／CS6／CC／CC 2014／CC 2015／CC 2015.3ダウンロードスクリプトをダウンロードするインストール方法ダウンロードしたファイルを解凍します。所定の場所に「ハンドルの角度をセグメントに揃える.jsx」をコピーします。Windows版ではお使いのIllus
今回はアピアランスを扱う上で欠かせないアピアランスパネルの操作について解説していきます。 ベテランの方は既にご存知の内容ばかりかもしれませんが、微妙な挙動の違いもまとめていますので、何かひとつでも新しい発見があればうれしいです。 これまでの記事 Illustrator アピアランスのキホン 〜概念編〜 アピアランスパネルがあればなんでもできる 前回の記事で「アピアランスパネルで操作できる要素すべてがアピアランス属性」と書きましたが、実際にアピアランスパネルではアピアランスにまつわるほとんどの操作が可能です。 カラーや線種を適用する 線や塗りの項目のカラーボックスをクリックするとスウォッチパネル、shift+クリックするとカラーパネルを呼び出せます。 さらに、下線のついた「線」をクリックすると線パネルを呼び出せます。 線幅や破線、線幅プロファイルを設定することができて便利です。 効果を適用す
みなさん、Illustratorのスクリプトって使っていますか？ 社内のデザイナーに聞いたところ、日常的に使っている人は9人中1人！そもそも存在さえ知らないよ、なんて人もいます。おいおい(；・∀・) 使わないともったいないぜ！！・・・と思いつつ、ぼくも使っていませんでしたｗ ということで使っていない人からすると、なかなか敷居が高いIllustratorスクリプト。実際の使い方・導入方法、どんな場面で使うといいのか？などなどまとめてみました。 この機会にぼくといっしょに始めてみませんか？ そもそもどんな時にIllustratorスクリプトを使うの？ Illustratorで作業する際、キーボードショートカットやアクションを使って効率化・スピードアップをしていると思います。スクリプトはその延長と考えてもいいと思います。 少しでも早く作業をするため、単純作業を減らすため、よく使う作業を自動化する
地図などをIllustratorで作るとき、ひとつのオブジェクトに複数の線を加えて作業することがよくあります。しかし、線の設定では一度にひとつの線しか操作できず、すべての線幅を変えるには線の数だけ繰り返し作業しなければなりません。これがすごくストレスだったので、すべての線幅を一気に変更するスクリプトを作りました。現在の線幅に対する割合（パーセント）を指定すると、オブジェクトが持っている線すべての幅を一気に変更します。地味に便利だと思いますので、ぜひ使ってみてください。
IllustratorでウェブデザインやUIデザインをするときなどは、繰り返し使うパーツをシンボルにしておくのが基本です。しかし、作業に集中していると、シンボル化をつい忘れて、同じオブジェクトを複製して使ってしまうことがあります。こうなると、あとから置き換えるのが結構大変です。そこで、選択したオブジェクトやグループなどを、一括してシンボルに置き換えするスクリプトを作ってみました。シンボル化をつい忘れることが多い方は、ぜひ使ってみてください。 更新履歴GitHubのリポジトリをご確認ください対応バージョンIllustrator CS5 〜 CC 2017ダウンロードスクリプトをダウンロードする（object-to-symbol-master.zip／zip形式）GitHubのリポジトリからもダウンロードできますインストール方法以下の場所に、「シンボルに置き換え.jsx」をコピーします。Win
Illustrator で、選択したテキストのフォントを変更する場合、書式メニューや文字パネル、コントロールの文字をカーソルで操作すると思います。 このフォントを変更する行為って、地味にクリック数が多かったり、やたらと長いプルダウンメニュー（ドロップダウンメニュー）から選択しなければならなかったり、フォントを絞り込むためにフォント名を入力したり… 何かとめんどくさいです。 それらの不満を解消するために、ぼくらは自作のフォント変更スクリプトを導入しています。このスクリプトを使うことで、面倒なドロップダウンメニューを表示せずに、ダイアログでフォントを変更することができます。機能は極めてシンプルですが、いろいろな不満が解消できます。 不満点とともに、スクリプトの機能を軽く説明させていただきます。 プルダウンメニューがとにかく使いづらい 書式メニューや文字パネルなどで導入されているプルダウンメニュ
ついにきましたねアップデート！Illustratorにも便利そうな新機能が仲間入りです。 早速試してみたので、気になった機能について所感をまとめました。導入やアップグレードを迷っている方の参考になれば嬉しいです。 ちなみに、CC歴代の新機能はこちらにまとまっています。 スプラッシュがまたまた変更 「来るだろうな〜」とは思ってましたが、顔色悪い上に白目剥いちゃってて個人的にとっても怖い。 これを夜中に見る勇気はないので申し訳ないけどスプラッシュ差し替えしました…（スプラッシュの差し替え方法についてはこちら） とは言え、これまではこてこてのベクター調のイラストが選ばれる傾向にあったのに、ちょっと印象違いますよね。元作品はBehanceにあるのですが、Behanceで見るとふつうにかっこいい作品です(；´Д｀) どうやらPhotoshopも併用されてる様子なんですが、どんな風にIllustrat
【Illustrator】 イラレで左右対称の図形を描くときに鏡面編集する方法 【Tips】
『左半分を編集したら、右半分にも反映される（ように見える）』方法です。 イラストレーターで左右対称の図形を描く場合の方法としては、 [片面だけ描く]→[リフレクトツールで反転コピー] が王道だと思います。 しかしこれだと反転後の状態を想像するしかないので、実際反転コピーしたときに「なんか思ったのと違う…」となることが多々あります。 今回ご紹介する方法なら、反転コピーした状態を常にプレビューしながら形を描くことができます。 メタセコイアを弄ったことがある方はミラーリングをイメージしてもらうとわかりやすいと思います。 （実際執筆者は「イラレでメタセコみたいなミラーリング編集できないかなあ」と考えてこの方法にいきつきました） ※ イラレのバージョンによっては手順が異なることがあります（執筆者はCS5使用です） それでは、実際にワイングラスを例にして手順を紹介していきます。 【ワイングラスを描いて
Illustrator CC2015でも使える、画像として使いたいパーツをPNGで書き出してくれるプラグイン「Magic Exporter」の紹介です。 IllustratorでのWebサイト用パーツのスライスがどうにも上手くいかないというか綺麗にできないというか、思ったようにならないというか。それが苦手でPhotoshopばかり使っていました。 CC、CC2014で「Layer Exporter」というエクステンションが使えるようになり、とても便利！それからWebでもIllustratorを多用していたのですが、CC2015に（うっかり）アップデート後、使えない事が判明！こまるー！ それに変わるような良い方法は無いだろうか？と色々探したもののよくわからず、IllustratorやPhotoshop等の書籍を多数執筆されている知人にお伺いしてみると、CC2015でも使える良さそうなプラグイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
