本サイトの記事は、「動画」に「デザイナーの現場感」を加えて、書籍以上のものを目指して書かれたものです。原則、初心者向けに書かれていますが、最新の機能も必ずいれるようにしていますので、中級者以上にも満足していただけると思います。 Illustrator（イラストレーター）は機能を覚えるというよりも、まずは作りたいものを作ってみるという覚え方が一番効率が良いです。 illustratorでできること ロゴ、アイコン、イラスト、文字組みなどを利用して雑誌の紙面やフライヤー、ポスターなどの平面のデザインをつくることを得意としたソフトです。 一方、よく比較されるPhotoshop（フォトショップ）は写真の加工や合成、色調整など、画像を扱ったデザインを得意とするソフトです。 illustratorとPhotoshopの違いはこちらから
その他のスクリプト： テキストでちょっと便利 パスでちょっと便利 その他にちょっと便利 画像でちょっと便利 フォルダ一括でちょっと便利 このサイトのスクリプトは お役に立ってますか？ 皆様からの動作報告、ご意見やご要望などをお待ちしています。 「これがうまく動かない！」「こういう風に動作するように改良してほしい！」「こんな事ができるスクリプトが欲しい！」などなど、お気軽にこちらの送信フォームからお送りください。 メッセージ送信用の ウィンドウが開きます。 ここからは、メッセージ以外の情報（メールアドレスやＩＰアドレスなど）は一切送信されません。単に「使ってるよ」という意味で空メッセージを送っていただくだけでも喜びます。お気軽にどうぞ。 （「web拍手」の配布スクリプトを使わせていただいています） 免責事項 これらのスクリプトは無保証です。お使いになってどのような損害が生じたとしても責任はと
Illustratorをウェブ制作に使い、ビットマップ書き出しするときのアレコレについて、これまでいろいろと取り上げてきましたが、現在、下記の制作方針が最強だと思われます（ツッコミ歓迎ですので、何かあればお気軽に）。 ドキュメントプロファイルは「Web」。［プレビューモード］を「ピクセル」に変更、［新規オブジェクトをピクセルグリッドに整合］はオフ ［線の位置］を「内側」にして作業 ［アピアランス］パネルメニューの［新規アートに基本アピアランスを適用］のチェックをはずしておく ［新規オブジェクトをピクセルグリッドに整合］はオフに ［プレビュー境界を使用］にチェックを入れる キー入力を「1ピクセル」に アートボードの座標に注意 sRGBを基準に これによって、次のような問題を回避できます。 プリントメディアの設定で制作されたドキュメントをWeb向けに利用しようとすると、エッジがにじむ。 ［新規
昨今、マルチデバイス化にともなってデジタルメディアのデザインでもベクターデータの需要が上がってきました。それにともないIllustratorやSketchでUIデザインを制作する機会も増えてきたと思います。 そんな中、流行りものが好きでミーハーな私は「イラレでUI作るといいらしいよ…」という噂を聞き、早速やってみることにしました。 約半年間のナレッジを「環境設定、管理、効率化」という章に分けてご紹介します。 環境設定編 「株式会社三階ラボ」さんの記事を一読して、やってる間に慣れます。 Notes こちらの本も大変参考になります！ Web制作者のためのIllustrator＆ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術 管理編 文字、色、パーツをしっかり管理して複数人作業、作業効率化、うっかり反映漏れを防ぎます。 汎用パーツのシンボル管理 できるだけ最
1.新規アートボードを用意。背景色を敷く 新規ドキュメントを作成。今回は 左右150mm × 天地100mm のサイズで作成しました。 アートボード全体に背景となる色を敷きます。 今回は［C:0% M:30% Y:100% K:0％］のオレンジ色で作成。作った色はグローバルスウォッチとして登録しておきます。 2.エンボス加工をかけたい文字をタイプする 文字の設定はこちらです。［Avenir Next Heavy 60Q オプティカル トラッキング+50］ 3.アピアランス機能で文字に色を付ける テキストを選択し、アピアランスパネルの「塗り」で文字に色を付けます。 背景色と同系統で薄い色だと効果的なので、背景色の50％にします。 4.文字をコピーし、太らせ、ずらす アピアランスパネルで、塗りを選択した状態で、パネル左下の「新規塗りを追加」をクリック。 背景に新しい塗りがコピーされる。 背景に
Fireworksのヘビーユーザーだったので、ディスコンになってからUI作成のツールをどれにしたらいいかが悩みでした。 Fireworksの前はPhotoshopでデザインを行っていたのですが、Fireworksの効率良さに慣れてしまうとPhotoshopには戻りたくなくなりました。他に良いツールがないものか・・・と思いつつ、とりあえずまだ使えるのでFireworksを使っていました。 ですが、ディスコンになる以上別のツールを探さないといけないので、改めてPhotoshopとillustratorについて調べてみたところ、illustratorの設定を適切に行えばFireworksチックに操作できることがわかりました。 今回はillustratorでUIデザインカンプを作る際の設定について書こうと思います。Webデザインでもほぼ同じ設定で大丈夫ではないかと思っています。ちなみに自分のill
Illustrator は印刷物で使う「ミリ」や「インチ」を使用するイメージが強いと思いますが、ウェブデザインやアプリケーションデザインなど、ディスプレイで表示することが目的のデザインを行う場合、一般的に「ピクセル」という単位をベースに作業を行います。この「ピクセル」をベースにした作業で一番重要なポイントが「数値の小数」です。今回は、Illustrator のピクセル単位で作業するときに発生する小数について、レベルにあわせてまとめてみます。（以下、Illustrator CC 2014 で検証した結果です。） Illustrator と小数値 入門編 小数が入るとどうなるの まず、100px × 100px の矩形を描いてみます。この矩形の座標を小数にし、100%表示してみましょう。 座標に小数が入っている矩形 このように、端に意図しないアンチエイリアス（疑似的になめらかにみせるためのボケ
Illustratorでウェブやアプリなどのインターフェイスをデザインする時に役立つ14の時短テクニックを紹介します。 Speed Design with Illustrator Illustratorの時短チップスを書いたのはVincent Le Moign氏で、彼の別サイト「WEBALYS」ではたくさんのフリー素材を配布しているので覗いてみてください。 WEBALYS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。無断翻訳・まとめ記事の転載をしているあのブログの注意喚起を海外のブロガーから聞くのでご注意ください。 時短でボタンをつくる 1クリックでテキストをデザイン カラー変更の強い味方「グローバルカラー」 モジュール式のデザイン アイコンフォントを簡単に扱う方法 グリッドの設計 グリッドにスナップさせる アートボードの活用 サイ
Illustrator CCで寸法線とかフォント指定などの情報をサクっと描けちゃうSpecctrが最強！ Fireworksの機能拡張として開発されていた「Specctr」（スペクター）が、なんとIllustrator CC対応になっています。 Specctrを使うことで次のことが可能になります（単位は選択している単位の種類に依存します）。 選択したオブジェクトの幅、高さを計測して寸法線として描画する 2つのオブジェクトの間隔を計測して寸法線として描画する オブジェクトを1つだけ選択しているときには、アートボードの上と左からの距離を計測して描画 選択したオブジェクトの塗りや線、不透明度などの情報を描画する 選択したテキストのフォント、フォントサイズ、塗りなどの情報を描画する Web制作を行われている方なら説明不要だと思いますが、カンプなどを作成するとき、ビジュアルデザイナーからコーダーへの
最近、セミナーでスクリプトを紹介すると評判がよいので、10個選りすぐってみました。 これらを提供してくださっている作者さんたちに感謝します。 はまりどころを見つけると「むちゃくちゃ早く終わる」「手作業ではムリ」なことが実現できるので、「ここでこういうことができると快適になるのに」をリストアップしておいて、たまに棚卸ししてみるとよいと思います。 追記 2017更新版を公開しました。 Illustratorを使うとき、私が手放せない10個のスクリプト（2017更新版）＋ 入手できるスクリプト一覧 - DTP Transit なぜ、スクリプトを使うの？ Illustratorでの作業を効率化するには、キーボードショートカットやアクションを使う方法がありますが、そもそも次のような場合には、有償のプラグインを使うほか、スクリプトを使う方法があります。 Illustratorではできないこと できるけ
ホームOld【無料・商用可】デザイン・資料に最適！シルエットベクター素材15,000個以上「All-Silhouettes.com」 どうも、やなぎさわです。無料で商用可のシルエットベクター素材がダウンロードできるサイト「All-Silhouettes.com」をご紹介します。 何が良いて、325種類のセットがあり、総数でなんと15,000個以上ものシルエットベクター素材があるそうです。 見つからないシルエットは無いのではないでしょうか！デザインや提案資料などに使うのに便利ですよ。 最強のシルエット素材「All-Silhouettes.com」 とにかく何も考えずに探してみてほしいです。Search機能があるので、この時期でいうと「snow」で検索するとクリスマス系などのシルエットが出てきます！ 素材データは全て、ベクターデータですので、Adobe Illustrator、Photosho
ご存知の通り、IllustratorにはPhotoshopに搭載されているシャドウ（内側）のような効果はありません。 近いものでいうと[スタイライズ] → [光彩（内側）]を使う方法なのですが、これだと境界線全体から内側にシャドウが適用されてしまいます。 テキストをアウトライン化 → 元の位置にコピー → 元のオブジェクトから少しずらして前面オブジェクトで切り抜き → ぼかし（ガウス） → クリッピングマスクという方法もあるのですが、けっこう面倒です。 普通のオブジェクトであればこの方法でもいいのですが、テキストなどの部分で修正があるとさすがにもう一度同じ行程をおこなうのは大変ですね。 そこで今回はアピアランスを使って、擬似的にこれに近いものを作成します。 まずはアピアランスに塗りを2枚追加します。 下の塗りは後で変更しますが、この段階では同じ色で大丈夫です。 今回は#808080を
JUSO Coworkingで10/4に行われた「ウェブ時代のデザイナーのための文字組入門 」に参加してきました。講師はなんでやねんDTPで有名な大石さん。最近パンフレットなど印刷物をご依頼いただく機会も増え、本を買って読むもののなかなか疑問を解消できないわたしにはぴったりの勉強会でした。今回の記事はIllustratorで印刷物のデータを作る、という前提です。 そもそも文字組・文字詰めは何のため webデザインでは、デバイステキストを自由に詰めたり組んだりすることがむつかしいため、文字組・文字詰めと聞くと「なんか難しそう」と構えてしまいがちです。 私たちがよく使うフォントというのは、四角い箱の中でデザインされています。しかし日本語のように「ひらがな」「カタカナ」「漢字」と様々な文字の形があると、当然小さい形、大きい形が出てきます。また、約物と言われる「」や（）や・などは、隣り合うと何だか
個人的に、今はWebデザインはイラレでやります。Photoshopは画像の調整にしか使いません。 これからは、徐々にDesigning in the browserにシフトして、ワイヤー、ラフ、パーツ制作にイラレを使用していくつもりです。 ただ、まだまだデザインカンプの作成が必須となっていて、なかなかシフト出来ないのが現状です。 なぜIllustratorか？ そもそもイラレの方がレイアウトが組みやすい。 これが一番の理由なんですが。。。 いや、これ以外にも、いろいろとあって、 以前は、とにかく画像画像だったパーツ（ナビゲーションとかボタンとか見出しとか）が、CSS3で表現出来るようになり、Webフォントやアイコンフォントが主流になってきて、画像で書き出すパーツが大幅に減った。 さらに、Retina等、解像度の違うディスプレイが登場して、今後も増えてくる事を考えるとSVGの使用も増えてくる
【360freevectors】はロイヤリティフリーのベクター素材サイトです。個人・商用問わずノンクレジットにてご利用いただけます。Download Royalty free vecotrs.360 Free Vectorsについて 【 360 Free Vectors 】のご利用ありがとうございます。 当サイトは個人が運営する、フリーベクター素材サイトです。 個人・商用問わずロイヤリティフリーでご利用いただけます。 全ての素材は無料で、加工やアレンジも自由です。 クレジット・リンク表記は不要です。 使用前、使用後の連絡・報告等も不要です。 Web・印刷物・映像などあらゆる媒体にてお使いいただけます。 データのご利用についてはこちらの「User's Guide」をご確認ください。 データについて 「illustrator CS6」を使用し、「illustrator 10」形式にて保存して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![Illustratorで雲を描く、(たぶん)世界で一番簡単な方法[Adobe イラストレーター] – クリエイター丙](https://cdn-ak-scissors.b.st-hatena.com/image/square/51b641e2ea81fe0f470485c4148fb933665da8d8/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fcreator-hey.com%2Fwp-content%2Fuploads%2Fhow-to-draw-clouds-in-ai1.jpg)
