基礎から学ぶ、IllustratorでSVGを最適化して書き出す方法
SVGをWeb制作で使うために、ブラウザーに最適化されたSVGファイルの作成、書き出し、最適化の方法をマスターしましょう。 SVGの勉強を始める前に理解したいことがあります。SVGファイルの最適化は、作成から書き出しまで続く工程です。WebページのHTMLと同様、不出来なSVGファイルを完成後に修正するのは大変です。 書き出してから使える最適化ツールもありますが、想定外のことが起こってファイルが壊れる場合があります。SVGを最適化する確かな知識を身につけ、SVGを活用しましょう。 IllustratorでSVGを作成 SVGをIllustratorで作成するには、最終的な出力がWeb用にうまく最適化されるよう考慮して、以下の工程を進めます。 適切なカラースペースを設定 大半のベクター画像用ソフトウェアと同様、Illustratorは印刷物向けに設計されているため、カラースペースはデフォルト
Illustratorでのイマドキな画像書き出し方法【アセットの書き出し】
2016年12月7日 Illustrator 昔からIllustratorラブ！な私ですが、いつの間にやらWebデザインをする上での便利な機能が増えてきて、ますます嬉しい次第です。その中で今回は画像アセットを使った書き出し方法を紹介します。昔はスライスツールを使っていましたが、そんな面倒なことをしなくてもオブジェクトをドラッグ＆ドロップで簡単に書き出せちゃいますよ。 ↑私が10年以上利用している会計ソフト！ アセットの書き出しって何？ 2016年6月にアップデートされたIllustrator CCでは、従来のスライスとは違う、新感覚の画像書き出し方法である「アセットの書き出し」という機能が追加されました。オブジェクトをパネルにドラッグして追加すると、サイズや解像度、デバイスに合わせたフォーマットに書き出せます。Webやアプリ用のアイコンや、画面全体のデザインを行う上でも欠かせない、便利な機
複合シェイプ（中マド）と複合パスの違い
複合シェイプと複合パスは名前も機能もまぎらわしい。。 と、色々と曖昧な部分があったので、特に複合シェイプ（中マド）と複合パスの違いを中心に整理してみました。 作業に必要そうな特徴と違いだけ簡単に。 それぞれの特徴 複合シェイプと複合パスの使い方と特徴のおさらいから。 複合シェイプ パスファインダーパネルの『形状モード』で、オブジェクト同士を足し算引き算(追加、型抜き、交差、除外)して組み合わせることができます。 複合シェイプはその際『option(Alt)』を押しながらクリックし、編集可能な状態で『形状モード』を適用したオブジェクトのこと。 『拡張』ボタンで編集不可能に、オプションメニューの『複合シェイプを解除』で解除します。 複合パス 複合パスは複数のオブジェクトの重なる部分を透明にして表示させる機能。 【オブジェックト】→【複合パス】→【作成】（『command(Ctrl)』+8）で作
【Adobe】ショートカットファイルはどこ？もう迷わない！Macを移行する際に役立つPhotoshop、Illustrator などのキーボードショートカットファイルのありかまとめ
【Adobe】ショートカットファイルはどこ？もう迷わない！Macを移行する際に役立つPhotoshop、Illustrator などのキーボードショートカットファイルのありかまとめ 読者の皆さまは「キーボードショートカット」、活用していますか？ 活用はしている。多くの方がそうですよね。⌘Sとか⌘Zとか。 さらに、「キーボードショートカットをカスタマイズ」している方はいますか？ あ、そこのあなた、気が合いそうです。「当たり前！」という声が聞こえてきました。 このポストを読まれているんですから当然ですよね。 Adobe製品でショートカットをカスタマイズしていると、Macを移行するときにいつも困るんです。 PhotoshopとIllustratorで、ショートカットファイルの場所が異なってたりする。 「あれ、どこだっけー？」と、アプリケーションごとにWebでショートカットファイルの場所を調べる。
Illustrator：キーボードショートカット設定をほかのPCで使い回すには｜DTP Transit
Illustratorでは、キーボードショートカットのセットを書き出したり、読み込んだりする機能が用意されています。 キーボードショートカットは「/Users/（ユーザー名）/Library/Preferences/Adobe Illustrator CS5 Settings/ja_JP/」内に「.kys」の拡張子がついたファイルとして保存されています。 ほかのPCなどで使い回したいときには、一旦、Illustratorを終了して、上記の場所に「.kys」の拡張子がついたファイルをおき、Illustratorを起動します。 追記（2011年9月5日）： Illustratorのキーボードショートカットに関しては、こちらの記事もご参照ください。 よく使う一覧の作業はアクションに登録 - DTP Transit Illustrator：アクションを使って整列コマンドにキーボードショートカットを
illustratorのaiデータから画像を綺麗にスライスする方法｜Web Design KOJIKA17
illustratorのaiデータから画像を綺麗にスライスする方法 2011-01-08 illustratorのaiデータをWeb用の画像にスライスすると、画像が1pxズレが生じたり、Photoshopのスライス機能と違うので戸惑うことが多いと思います。 関西の某勉強会の懇親会でも「外注に頼んだデザインがaiデータで来て、スライスに凄い時間がかかった」という意見が多く聞いたので、illustratorのスライスの仕方をご紹介させて頂きます。 紹介するillustratorのバージョンはCS2ですが、CS以降のバージョンならほとんど機能が使えるはずです。 スライスの準備 単位 [ファイル]→[ドキュメント設定]で単位がピクセルになっているか確認します。 ここを変更すると、定規などの値も全てピクセルになるはずです。 カラーモード [ファイル]→[ドキュメントのカラーモード]がRGBカラーにな
Web向けにIllustratorを使う上でのコロンブスの卵的なアプローチ｜DTP Transit
2010年にリリースされたIllustrator CS5でのWeb向けの機能強化以降、Web向けにIllustratorを使う上では、次のアプローチが基本とされてきました。 ドキュメントプロファイルに「Web」を選択し、［新規オブジェクトをピクセルグリッドに整合］にチェックを付ける ［ピクセルプレビュー］をオンにする 先週末に行われたdot-ai, Vol.2において、黒葛原 道さん（eater）が、次のアプローチを発表され、「なるほど！」と思ったのでご紹介します。 ［新規オブジェクトをピクセルグリッドに整合］はオフにする グリッドを1ピクセルに設定し、［グリッドにスナップ］をオンにする ［線の位置］は外側に設定する 次の図は、左が従来のもの。右側が黒葛原さん方式です。 Illustratorの「ピクセルグリッドに整合」は、3px x 3px、線幅1pxの図形を描画する際、ピクセルグリッド
[2096][Illustrator]文字数が増減しても背景の塗りのサイズが自動的に変更するための設定（アピアランスの機能利用）
概要 このページではIllustrator 9以降に搭載されているアピアランスの機能を使用して、文字の背景に角丸四角形の色を配置する際の修正しやすい便利な設定を掲載しています。 以下の画像のように、文字の後ろに角丸四角形のオブジェクトを作成して配置しただけでは、最初に作成した①の「PDF入稿」という文字の場合には良いのですが、その文字「PDF」を修正して「Illustrator」にした場合には、背景の角丸四角形のオブジェクトのサイズがそのままなので、角丸四角形のオブジェクトから文字がはみ出てしまいます。 この背景の角丸四角形のオブジェクトが文字に合わせて、以下の画像のように自動的に伸びるようにするようにすることがこのページの目的です。 手順 ※画面はIllustrator CS4です。この手順はIllustrator 9以降で使用できます。 普通に文字を入力し、文字オブジェクトを選択します
![[2096][Illustrator]文字数が増減しても背景の塗りのサイズが自動的に変更するための設定（アピアランスの機能利用）](https://cdn-ak-scissors.b.st-hatena.com/image/square/33c461ebbd36a6c686673fd1b443f8baca960354/height=288;version=1;width=512/https%3A%2F%2Fwww.ddc.co.jp%2Fimg%2Fillustrator%2Ftext-appearance-tips%2Fimages%2Faics4-text-appearance-tips-01.png)
フリーベクター素材セットとIllustratorのチュートリアル「20 Fresh Free Vector Sets and 5 Illustrator Tutorials」
フリーベクター素材セットとIllustratorのチュートリアル「20 Fresh Free Vector Sets and 5 Illustrator Tutorials」 ベクター素材は非常に使い勝手が良く、制作にはとても便利なデータ形式ですが、一から描くのは一苦労。WEBで探していもなかなかイメージ通りのものが見つからない時は困ってしまいますよね。今回はそんな時のために是非ご覧頂きたい、フリーベクター素材セットとIllustratorのチュートリアル「20 Fresh Free Vector Sets and 5 Illustrator Tutorials」を紹介致します。 Free Golden Badges Vector 可愛らしいものやリアルで高級感あるイラスト素材、またその作り方が幅広くまとめられています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
テンパッてる時でもスグ使える！ベクター素材集10個厳選まとめ | Find Job ! Startup
デザイナーにとって時間は命。〆切が差し迫る中、沸騰した頭での素材集めは大変です。そこで今回は面倒な会員登録が不要で、無料で使えるベクター素材のサイトだけを厳選して10個、選んでまとめました。 各Webサイトの利用規約も一緒にまとめました。頭が煮詰まっていて利用 [...]
Adobe Illustrator CS6使い方辞典
すでに描いてある図形を遠近グリッド上に配置する 遠近グリッドに配置したい図形を描いてあるものとします。 遠近図形選択ツールを選択します。遠近グリッドのどの面に図形を配置するかを指定します。 図形をドラッグし遠近グリッド上に配置します。 図形が遠近グリッド上に配置されます。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
gMap 0.7
新着記事
apollo-img.com
http://retrovectors.com/
新着記事
新着記事