知っておこう、Adobe Illustrator 回転・反転の問題点｜宮澤聖二 | onthehead
私の大好きな Adobe Illustrator。 ロゴやアイコン、サイン、イラスト、図面、印刷物といった様々な用途で使われている、ベクターイメージ編集ソフトです。 そんな超メジャーなソフトですが、細かな不具合やえげつない問題点がいくつか存在します。 中でも、普段あたりまえのように使用する、回転・反転（リフレクト）系の操作に問題が潜んでいます。 まだまだ周知されてないようなので、ざっくりとまとめておきます。 ※このnoteは、以前投稿した内容の簡易版です。詳細については以前投稿した 三階ラボのブログ をご覧ください。 回転・反転させると形状が乱れる Illustrator の回転ツール、リフレクトツール、自由変形ツールを使って、オブジェクトの回転や反転を行うと、オブジェクトの形状が乱れてしまいます。 例えば、オブジェクトを選択し、回転ツールや自由変形ツールで Shift キーを押しながら左
Adobe Illustrator 10開発インタビュー｜樋口泰行
この記事は、DTP Advent Calendar 2018の20日目の記事です。 これは、今から16年前の2002年に休刊になってしまった月刊MACLIFE誌に掲載予定だったIllustrator バージョン10発売時に行ったインタビュー記事です。入稿済みだったにもかかわらず2002年2月号が発刊されずに幻になった原稿です。そのまま日の目を見ずに埋もれさすのも勿体ないので今回掲載します。昔から使ってる方は回顧録みたいな感じかもしれません。分版プレビューってバージョン10から付いたんだーとか3D機能は入ってなかったのかとか分かります。 申し訳ありません！このインタビューですが最終号を確認したら2pで掲載されておりました…。 勘違いで掲載されていなかったのはソフトウェアレビューでした。ただ大幅に削除されているので、このインタビューは完全版として読んでいただければ。 Adobe Illustr
SVG を transform で楽しくアニメーションするための最適化 〜僕らは幸せになるために生まれてきた〜 - Qiita
SVG を transform でアニメーションさせる場合、SVG 内の各要素を指定すると、原点が SVG 全体の左上なってしまいます。translate などは問題ないですが、scale や rotate などは思うようにアニメーションさせることができないです。 動かしたい要素をそれぞれ別の SVG に分けて、重ねて、原点を調整することで、対応することはできます。 しかし、それをひとつひとつ設定していくのは骨が折れる作業になります。とてもやってられないですね。だからといって、SVG ではない要素でつくってひとつひとつ配置していくのは涙が出るほど辛いでしょう。こんなことはエンジニアがやることでないです。僕たちは幸せになるために生まれてきたのだから。まだまだ理想にはほど遠いですが、とりあえず少しは楽になる方法を考えてみました。 作業手順 大きな作業手順としては以下の3ステップです。 svg
絵心がなくても大丈夫！?イラレで "dribbbleっぽい!" イラストの描き方｜ソニックジャム｜note
こんにちは。SONICJAMデザイナーの森田です。 みなさま、dribbble というサイトをご存知でしょうか。 dribbble とはデザイナー向けのSNSコミュニティです。 招待制なので作品を公開できるデザイナーは限られており、作品は一定のクオリティが担保されています。（ちなみにbが３つあるのは『ドメインが取れないから』という理由だそう。） 主にデジタル領域に強いデザイナーが UI 画面やイラスト作品をあげていて、リアルなスキューモフのアイコンを製作していた時代の名残からか、特にイラスト作品は図形を元に簡潔に描かれたジオメトリックなテイストのものが多い傾向にあります。 本日はそんな dribbble 風のイラストの描き方。描く上での考え方をご紹介します。 通常の "ペンツールでパスをトレースして..." といった描き方ではなく、シェイプツールを元に無駄なく形を整えるという発想の描き方で
ASCII.jp － Web Professional（ウェブ・プロフェッショナル）｜デザインからマーケティングまで、Webを仕事にする人の情報サイト
WebPro KUSANAGI Security Editionが進化！ 新機能「SafeUpgrade」でダウンタイムゼロのnginxアップデートを実現 KUSANAGI Security Editionが新機能「KUSANAGI SafeUpgrade」を導入し、nginxのメジャーバージョンアップを無停⽌で実施可能にする。 0 0 WebPro 高速CMS基盤「KUSANAGI Security Edition」がMicrosoft Azureに登場｜自動アップデートで安全性を確保 プライム・ストラテジーが、新しいセキュリティ基盤「KUSANAGI Security Edition」をMicrosoft Azureで提供開始。セキュリティ向上と運用効率... 0 0 WebPro KUSANAGI 9、新たにOracle CloudにAlmaLinux OS 9を採用し、2032年ま
Video File Format Specification Version 9
Stories about our creative apps and services for everyone
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
「自分でイラストを描けたら良いのにな」と思ったことはありませんか？ Illustratorなら、描きたいモチーフの「しくみ」に適切な機能をあてはめることで、複雑なイラストにも挑戦できます。絵を描くのは苦手だという方でも大丈夫です。 今回は実例を交えながら、ブラシ機能や描画まわりのツール、Adobe Captureの活用方法などを中心にご紹介します。 特にCC以降の機能は、イラスト制作の効率を格段に上げるものばかり。新・旧機能の合わせ技で効率よく、更に豊かな表現を目指しましょう！ page2017のクリエイティブゾーンセミナーに登壇させていただいた際のスライドです。実演で解説した部分は概要のみ追加しました。 page2017 http://www.page.jagat.or.jp/ 「新規アートに基本アピアランスを適用」の詳細は「Illustrator アピアランスのキホン 〜流用編〜」の「
Adobe Illustratorのaiファイルに埋め込まれた画像を抽出する
Adobe Illustratorに埋め込まれた画像 ai ファイルに貼り付けた画像がいつの間にか移動していて、ai ファイルがちゃんと開けなくなっている…そんな悲劇を避けるために、画像を「埋め込む」ことがあります。さらに、一度埋め込んだファイルを PowerPoint スライドで使いまわしたい等の理由でなるべく綺麗に取り出したいことがあります。 Illustrator のヘルプにはそのものずばり「Illustrator ヘルプ / 画像の埋め込み解除」という項目があるんですが、対象とされている Adobe Illustrator CS6 では「埋め込みを解除」というボタンが現れません。（代わりに、主要なボタンがグレーアウトした上図のような画面になります。） 試しにGoogle 検索してみると、大量に困っている人がいるようです。そこで、ai ファイルに埋め込まれた画像を簡単に取り出す方法を
[Adobe XD] Illustrator使いさんに捧げる SVG書き出しのコツ
こちらは、Adobe XD Advent Calendar 2016の4日目の記事ですAdobe Experience Design(以下 Adobe XD)で書き出したSVGをIllustratorに読み込んだとき、次のような体験をしたことはありませんか？ 何もなかった！→Illustrator CC 2017で修正されています表示されないモノがあるんだけど？全てを解決する手段はないのですが、今回はなにが起こっているか・どういう対処ができるのかをまとめます。 最初に、Illustrator SVG読み込み問題について確認しましょう。 リピートグリッドのエリアでマスクがかかってしまうオブジェクトが書き出されてないとかそういうものでなく、リピートグリッドのエリアに合わせて作られるクリッピングマスクで隠されているだけなのですが、場合によっては気が付かないですよね？ ずっとIllustrator
![[Adobe XD] Illustrator使いさんに捧げる SVG書き出しのコツ](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e275add8a0913fb4d02eabfd88cdd4ae94459c3/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1200%2F1%2AjgB0dc3l1ie4jk8DhMRoyQ.png)
SVGの各アプリケーション書き出しをあれこれを調べてみた - デザイナーのイラストノート
このブログのロゴにも使用していますが、最近よく目にするようになったSVG。イラストにはうれしい画像形式なので、とても注目しています。しかし、制作するグラフィックツールによって書き出しの設定が本当にまちまち・・・ということでいろいろ試してみた結果です。 SVGとは Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）で「SVG」。拡大縮小しても荒れない画像形式ということで、ロゴやアイコンなどに使用されるシーンも増えてきました。テキストエディタで編集できたり、CSSで色を変えたり、グラフィックツールがなくても画像を編集することができるのが特徴です。タイムリーにも、先日MicrosoftのOfficeでも、SVG形式が利用できるようになるというニュースもありました。 SVGの利点として、変更の差分が取りやすくGitなどで管理しやすい、ということがあります。例
Adobe Illustratorで描いたイラストをSVGで実装する方法 - Hatsuka
SVG Advent Calendar 2015 10日目の記事です。 先週も別のAdvent Calendarに参加していたのですが、先月参加したリクリイベントでSVGについてちょっと勉強したこともあり、こちらのカレンダーにも参加してみることにしました。 今回はリクリで教わったことをベースに、データの作成からサンプル作成までの流れをざっくりと書いてみます。 SVGって？ XMLをベースにした、ベクター画像フォーマットです。 ベクター画像なので、拡大してもきれいなため、高解像度端末でもきれいに見えます。 対応環境 IE9～、Android3～で対応しており、その他のブラウザも最新版であれば問題なく表示されます。 （ちなみに、ChromeよりもIEの方がSVGのレンダリングがきれいだそうです。） 埋め込み方 埋め込み方は大きく見ると4つほどあります。 1.img要素としてHTMLに埋め込む
#Illustrator でフォントを変えるのが面倒くさい
Illustrator で、選択したテキストのフォントを変更する場合、書式メニューや文字パネル、コントロールの文字をカーソルで操作すると思います。 このフォントを変更する行為って、地味にクリック数が多かったり、やたらと長いプルダウンメニュー（ドロップダウンメニュー）から選択しなければならなかったり、フォントを絞り込むためにフォント名を入力したり… 何かとめんどくさいです。 それらの不満を解消するために、ぼくらは自作のフォント変更スクリプトを導入しています。このスクリプトを使うことで、面倒なドロップダウンメニューを表示せずに、ダイアログでフォントを変更することができます。機能は極めてシンプルですが、いろいろな不満が解消できます。 不満点とともに、スクリプトの機能を軽く説明させていただきます。 プルダウンメニューがとにかく使いづらい 書式メニューや文字パネルなどで導入されているプルダウンメニュ
アイテム数値調整ダイアログ
Adjust Items by Dialog は、選択したオブジェクトの座標やサイズの数値を調整する Illustrator スクリプトです。 アイテム数値調整ダイアログ実行時 ウェブデザインやアプリケーションデザイン時に問題となる数値の 小数 や 見えない小数 を調整することができます。 また、ドキュメントの各単位に対応し、px 以外にも mm や inch などの数値も調整できるようになったので印刷物の作業にもお使いいただけます。 入力した各種調整数値を元に、選択したオブジェクトの座標やサイズを調整します。例えば、調整数値に 1 を入力した場合、調整後の数値は 整数（１の倍数） になります。0.5 と入力すれば 0.5 の倍数 に、10 と入力すれば 10 の倍数 といった具合に四捨五入？します。 3flab-adjust_items_by_dialog_2.jsx は、ダイアログで調
ラスタ画像を配置したSVGファイルを作成する際に気をつけること
最近、案件でも使用することの増えてきたSVGですが、ラスタ画像が混在したSVGファイルを作成する際には注意が必要です。それらの注意点をまとめました。 この記事はSVG Advent Calendar 2015の2日目の記事です。1日目は（id:rikuo）さんが「SVG未対応ブラウザにおけるインラインSVGの挙動を細かく検証しました」という記事を書かれています。 サポートしているブラウザも増えてきたため実案件でもSVGを使用することが多くなってきました。とくに図版の場合は拡大してもぼやけずに表示できるため、積極的に使用しています。 ただ図版でも全てベクターで完結せずに、写真やスクリーンキャプチャなどのラスタ画像を配置する場合があります。そのようなラスタ画像を配置したSVGファイルを作成するときに苦労した点がありましたのでまとめてみました。 SVGにはHTMLのimg要素と似たimage要素
素早く画像書き出しできるillustrator向けスクリプト - Two hats
12/11追記・・・JPEG書き出し追加とファイル名の拡張子が重なる場合のバグを修正しました。 9/10追記・・・保存先指定と、オブジェクト名からファイル名を付ける機能を追加しました 以前、画像切り出し用のスクリプトを作成しましたが、スクリプトの宿命というか実行するたびに「ファイル＞スクリプト＞何々スクリプト」という操作の手間があってビミョーに使いにくい操作性になっていました。 なんとかもっと簡単に書き出しできるようにならないか・・・と色々と調べていくうちに、スクリプトだけでもExtensionのような常駐型のウィンドウで作れるということが分かり、これを使ってより使いやすいスクリプトとして作り直しました。 このスクリプトのコンセプトは「とにかく、手間なく素早く書き出す！！」です。設定や書き出す前の下準備などは最小限に抑え、ワンクリックで書き出せる！ぐらいの気持ちで設計しました。UIもかなり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Illustratorで作図した円は歪んでる、という事を説明する図が話題に
The Blog | Welcome to Adobe Blog
Adobe Illustratorの自作スクリプトを公開し続ける株式会社三階ラボのスタンス | Interview | Swings
Adobe Learn
GitHub - iconic/illustrator-svg-exporter: A better way to generate SVGs from Illustrator.
