Illustrator（イラストレーター）などを始めとするデザインツールには、様々なショートカットキーが存在します。通常の操作では時間がかかる作業も、ショートカットキーを駆使することで作業効率を飛躍的にアップさせることが可能です。 今回は、覚えておきたいショートカットキーを目的別に150個まとめました。 なお、当記事ではWindowsを基準にしております。 WinのCtrlキーはMacのコマンドに相当します。 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

イラストレーター「みふねたかし」さんによる、利用無料イラスト素材集サイト「いらすとや」。かわいい絵柄で人気のサイトです。 pixivやTwitter上でも、その絵柄を真似した画像がいくつか投稿されています。 僕も描きたくなったので、自分のTwitterプロフィール画像を「いらすとや」風なイラストにしてみました。 どのようにこのイラストを描いたかを説明します。Adobe Creative Suite CS6の利用を前提にしています。 Adobe Illustratorを使います。 参考に、僕が作成した.aiファイルを置いておきます。 以下のようにするとよいでしょう。 目はにっこり笑ったものか、女性のまつげ線がついたものにする。より「いらすとや」テイストだと認識してもらいやすくなる。 髪の毛は縦ストライプにする。これも、「いらすとや」テイストだという記号として機能する。 ほおの赤みを忘れない。

Illustrator CS5から「線」パネルで「矢印」の設定ができるようになっていますが、矢印のデザインによってはどうにもこうにも扱いにくい。ってことで、解決策を個人的にめもめも。構造が少し複雑なので、アピアランスの操作に慣れている方向け。

Illstrator シェイプ形成ツールを使って簡単に効率よくアイコンやイラスト作成をしよう by ナツコ · 2014-10-03 こんにちは、デザイナーのナツコです。 フラットデザイン、SVG、CSS3、など…最近のwebデザインのトレンドで デザイナーのみなさんは以前よりもIllustratorを使う機会が増えたのではないでしょうか？ 最近は、様々なサイトで素敵なアイコンやイラストが配布されていますが、 デザイナーであれば出来ればオリジナルで作成したいものですよね。 そこで、今回はオリジナルのアイコンやイラストを作成する際にとっても便利な「シャイプ形成ツール」の基本的な機能、使い方をまとめたいと思います。 シェイプ形成ツールとは シェイプ形成ツールは、重なった複数のシェイプを結合、削除できるツールです。 同じような機能でパスファインダーがありますが、 結合させたい部分や消去したい部分

クリエイティブなプロデザイナーが実践する、デザインテクニックを身につけるチュートリアルやつくり方をまとめています。 豊富すぎるツールは Illustrator ビギナーにとって、戸惑うことも多いでしょう。そんなときは順番ごとにデザインを進める、実践的なチュートリアルを参考に、基本的なツールを学んでみましょう。テクニックが増えていくことで、Illustrator をより自在に操作することができるでしょう。 詳細は以下から。 Illustrator をしっかり学びたいひとへ。参考にしたい入門チュートリアル、つくり方まとめ 夏をテーマにしたカラフルなアイコンを作成する方法 ペンツールを使ってデザインする、シンプルでかわいいアイコンパックのつくり方。 惑星アイコンのつくり方 銀河系の惑星をひとつずつ、色鮮やかな配色のフラットスタイルで描いたアイコン素材セット。 ゲームに出てくるファンタジーな武器を

みなさんこんにちは、フォノグラム デザイナーのニッキーです！ 突然ですがみなさんは、自分で書いた手書きのイラストをデザインに使用する際どうやっていますか？ 私は描いたイラストをスキャンしてIllustratorで「ライブトレース」機能を使ってシェイプ化したり… もしくはスキャンしたイラストをそのままペンツールでちまちまトレースしていました。 そんな私だったのですが…神アプリを見つけてしまいました。 もうイラレで人力トレースは不要の時代になったのです！！パスを引く時代は終わったのです！ もし私と同じような工程でイラスト作成をしている方がいたら、ぜひスマホアプリ「Adobe Capture」を試していただきたいです！ Adobe Captureでらくらくベクター化！ Adobe Capture CCって？ Adobe Capture CC Adobe Capture CCモバイルアプリでは、1

個人的に、今はWebデザインはイラレでやります。Photoshopは画像の調整にしか使いません。 これからは、徐々にDesigning in the browserにシフトして、ワイヤー、ラフ、パーツ制作にイラレを使用していくつもりです。 ただ、まだまだデザインカンプの作成が必須となっていて、なかなかシフト出来ないのが現状です。 なぜIllustratorか？ そもそもイラレの方がレイアウトが組みやすい。 これが一番の理由なんですが。。。 いや、これ以外にも、いろいろとあって、 以前は、とにかく画像画像だったパーツ（ナビゲーションとかボタンとか見出しとか）が、CSS3で表現出来るようになり、Webフォントやアイコンフォントが主流になってきて、画像で書き出すパーツが大幅に減った。 さらに、Retina等、解像度の違うディスプレイが登場して、今後も増えてくる事を考えるとSVGの使用も増えてくる

完了日: 2024年3月 数千ページを超えるグローバルサイトのGDPR対応にむけた事前調査を担当。Cookie同意管理ツールの導入を視野に、全ページのCookieの状況を調べるためのプログラムを用意し、調査とレポーティングを実施。 完了日: 2024年3月 地方自治体の政務情報発信サイト（役所常設のタブレット専用サイト）の制作。システム会社と共に、UI設計からコーディング、ページの自動制御や調整を担当。 完了日: 2024年3月 BtoB企業向けの受発注管理アプリのプロトタイプの制作を担当。本開発前の検証やブラッシュアップのためのプロトタイプとして、HTMLとJavaScriptで制作。

Browse: Home » 【IllustratorでのWEBデザイン編】WEBのコーディングでググって調べた基礎の基礎のまとめ 1週間ほど前まで、毎日作業していたWEBのコーディング案件で、ググって調べた基礎の基礎をまとめておきます。 前回のコーディングの案件の時にも、作業が終わってから「久々のWEBのコーディングでググって調べた基礎の基礎のまとめ」、「【第2段】久々のWEBのコーディングでググって調べた基礎の基礎のまとめ」とググったことをまとめておきました。人間、どうしても同じようなところでつまずいたり、ミスをしてしまうところがあるものなので、このようにまとめておくとこはとても有益で、今回のコーディングもこれらのまとめ記事からリンクを見て確認することが何度かありました。 コーディングに関することはググれば出てくるのだから、別にまとめておかなくてもいいじゃん！と思う人もいるかもしれませ

Adobe Illustrator CC は、毎年6月に CC 2014 → CC 2015 のようにメジャーアップデートされますが、2016年6月は CC 2016 ではなく「CC 2015.3」というマイナーアップデートでした。 しかし、Web制作者にとっては嬉しい機能も追加されたため紹介します。 アセットの書き出し Photoshop には随分前から付いていましたが、ようやく Illustrator にも付きました。 アセットの書き出し方法はいくつかあり、 書き出したいオブジェクトやグループを「アセットの書き出し」パネルにドラッグする 書き出したいオブジェクトやグループを選択してアートボード上で右クリックし、［収拾 (書き出し用)］メニューを選択する 書き出したいオブジェクトやグループを選択してアートボード上で右クリックし、［選択範囲を書き出し…］メニューを選択する 書き出したいオブ

こんにちは。ゆうこ(chibiyuko_0124)です！ 公開したと思っていたら、ずっと下書き状態の記事をアップします…… 先日ご紹介したPhotoshopの画像アセット記事(レイヤーが画像として自動生成される機能)ですが、なんとIllustratorにも同じような機能がありました！！ その名もLayer Exporter！ 今回はその機能についてフォーカスしてみよーと思います◎ Layer ExporterはIllustratorの無料のエクステンションだよ ざっくり要点をまとめるとこんなんです。 ・レイヤー名を「XXX.png」とすると、「XXX.png」で画像生成される ・生成できる画像の種類はpng、jpg、svg ・選択オブジェクトのみのレイヤーの結合や単独レイヤーの作成ができる ・html、CSSジェネレーター機能もあり(今回は触れていません) ・バージョンはCCで利用できる

12/11追記・・・JPEG書き出し追加とファイル名の拡張子が重なる場合のバグを修正しました。 9/10追記・・・保存先指定と、オブジェクト名からファイル名を付ける機能を追加しました 以前、画像切り出し用のスクリプトを作成しましたが、スクリプトの宿命というか実行するたびに「ファイル＞スクリプト＞何々スクリプト」という操作の手間があってビミョーに使いにくい操作性になっていました。 なんとかもっと簡単に書き出しできるようにならないか・・・と色々と調べていくうちに、スクリプトだけでもExtensionのような常駐型のウィンドウで作れるということが分かり、これを使ってより使いやすいスクリプトとして作り直しました。 このスクリプトのコンセプトは「とにかく、手間なく素早く書き出す！！」です。設定や書き出す前の下準備などは最小限に抑え、ワンクリックで書き出せる！ぐらいの気持ちで設計しました。UIもかなり

スライスツールとは？ Webデザインの世界でスライスとは、 1枚の画像を複数に分割する事を指します。 Webデザイナーは、このスライスをするために、 スライスツールをよく使うことが多いです。 Webのカンプデザインをhtmlに組み込む際、 カンプデザインの画像からボタン等をスライスし、 そのまま本番で使うことが多いです。 ちなみにカンプデザインとは、ワイヤーフレームに肉付けをした 完成形のイメージのことを指し、モックと呼ぶ事もあります。 今回は、このスライスツールを使って、 カンプデザインから画像をスライスする方法をご紹介します。 スライスツールの使い方 1.アートボード上に画像(jpeg,psdなど)を配置します。 今回は、カンプデザインした1枚のjpegを配置しました。 2.ツールパネルより、スライスツールをクリックします。 3.まずは、グローバルメニューの各メニューをスライスします。

テクノロジー 第5話 Illustratorのデザインカンプから画像を書き出す方法 - マンガでなれる？WEBデザイナー講座

Illustratorには「Web用に保存」、「スライス範囲で書き出し」など、さまざまな書き出し方法があります。 Web制作では複数のデザインパーツを書き出す事が想定されるので「アートボードごとに書き出す」方法が使いやすいためご紹介します。 ただしIllustratorはアートボードから書き出す方法では以下の不満があります。 ・アートボードを指定しにくい。 ・書き出されるファイル名を後からリネームしないといけない。 ‥など不満があります。 こういった不満点を補ってくれるスクリプトを紹介します！！ 下記のサイトで配布されている「アートボード書き出しダイアログ」です。 http://3fl.jp/is003 （※比較的新しいIllustratorで動作します。CS4など古いIllustratorでは動作しない事を確認しています） このスクリプトを使うとRetina対応の画像を制作する時には「倍