SVGでやることのまとめ。
SVGは、Webサイトの中では、アイコンやロゴやシンプルなイラストに使われている、拡大してもずっと綺麗な画像ファイルです。画像フォーマットでありながら、XMLに基づくマークアップ言語でもあるので、テキストエディタで編集できてしまえるのも魅力。しかもずっと綺麗なんです。 そんなSVGファイルを作るときに僕がよくやることをちょこちょこまとめてゆきます:)。 書き出しはイラレから XMLに基づくマークアップ言語とはいえ、複雑な図形やイラストは、人力では到底マークアップできません…X‹。 図形やイラストはAdobe Illustrator（以下、イラレ）で制作して、そのままイラレから、SVGファイルとして書き出すことが常です。 ここでは、このサイトの左上にいるパンちゃんアイコンを書き出してみます:)。 イラレのデータを用意 まずは何はなくともaiデータを用意しなくちゃいけません。 「新規...（⌘
イラレからSVG形式で書き出す設定とパーツ別に書き出す方法
2020.4.25 イラレからSVGで書き出す設定 - パーツ別に書き出す方法 SVG（拡張子svg）は容量が軽く、拡大しても劣化することがないファイル形式です。 Adobe Illustratorのアートボード全体をSVG化したり、個別にパーツ単位でSVGで書き出す方法について書きます。 アートボード全体をSVG形式で書き出す アートボードをSVG形式で書き出すには、メニューバーの「ファイル」 → 「書き出し」 → 「書き出し形式」を選びます。 書き出しのパネルのファイル形式で「SVG（svg）」を選択。 「アートボードごとに作成」にチェックを入れます。 「書き出し」をクリックするとSVGオプションが表示されます。 OKをクリックでSVGファイルが書き出されます。 アウトライン化されていないフォントがある場合 書き出したSVGファイルの文字は、ブラウザのデフォルトフォントで表示されてしま
手書きのイラストをIllustratorファイルに。魔法のようなモレスキン・Adobeスマートノートブック
手書きのイラストをIllustratorファイルに。魔法のようなモレスキン・Adobeスマートノートブック 手書きのイラストをスキャンし、Illustratorで編集可能なSVGファイルにしてしまう。そんな、魔法のようなモレスキン・スマートノートブックが登場しました。 モレスキン・スマートノートブックといえば、これまでEvernoteと連携したものがありましたが、今回のそれはAdobe Creative Cloudにファイルを取り込むことができるタイプです。 今回、モレスキン・ノートブックを販売している株式会社エムディーエス様からレビュー用に一冊ノートを頂きましたので、さっそくその機能についてみてみたいと思います。### スケッチ用の厚手のノート Adobe Creative Cloudと連携するモレスキン・スマートノートブックは、ラージサイズの160ページの厚手の中性紙で作られたイラスト
PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売
私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク
IllustratorからWeb用素材を一気に書き出す！アセットの収集と一括書き出し - Adobe Blog
IllustratorからWeb用素材を一気に書き出す！アセットの収集と一括書き出し IllustratorでWebデザインデータを作ると書き出すのが面倒？ ちょっと前までは、IllustratorからWeb用の素材を書き出そうと思うと、アートボード単位で書き出すか、またはひとつひとつ「スライス」を作成して書き出すかのどちらかでした。 「Web用に保存」は便利な機能ですが、高解像度画面用の素材の書き出しには対応しておらず、複数サイズの素材が必要な場合は手間がかかります。 スライスとWeb用に保存の詳しい使い方: Illustrator入門 | Webデザイン編 第6回 デザインから画像を書き出そう 最新のIllustrator CCでは、複数の素材書き出しが必要な場合でもまとめて書き出せる新しい機能が利用できます。また、アイコンのように頻繁に変更されるアセットの書き出しも楽になります。この
SVG画像を書き出す際に重要な設定「小数点以下の桁数」とはなにか？ - 聴く耳を持たない(片方しか)
これはSVG Advent Calendar 2014の参加記事です。 昨日はmemocarilogのSaori Miyazakiさんによる「filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法」でした。 第3日目は私 id:rikuo が担当します。 （※追記）第4日目はイロドルハナ(@shino212)さんの「はじめてSVGでアニメーションを作った時の話」です。 ちなみにまだ空いている枠はあるので、興味のある方は是非ご参加ください。 はじめにSVGはXMLをベースにしているためテキストエディタでも簡単に作れるとは言え、実際の制作は何らかのオーサリングツールを利用することがほとんどでしょう。 中でもAdobe Illustratorはベクター系ソフトウェアの代表的な存在で広く普及しています。このIllustratorか
SVG 形式で書き出す方法 （Illustrator CC）
SVG オプションダイアログボックスで設定を行い、「OK」をクリックします。 ※ 「詳細オプション」ボタンをクリックすると、さらに設定項目が表示されます。 SVG プロファイル ： 文書型定義（SVG XML DTD）を指定します。 文字 ： テキストの保存形式を指定します。 サブセット ： ファイルに埋め込む文字を指定します。 参考方法 ： ラスタライズされた画像を埋め込むか、リンク配置にするかを指定します。画像を埋め込むとファイルサイズがその分大きくなりますが、画像は閲覧環境に依存せずに必ず表示されるようになります。 Illustrator の編集機能を保持 ： AI ファイルを SVG ファイルに埋め込むことによって、Illustrator 固有のデータを保持します。そのため、このオプションを有効にするとファイルサイズは大きくなりますが、後から Illustrator で修正を加える
Photoshop からのアートワークの読み込み
Illustrator ユーザーガイド Illustrator とは Illustrator の概要 Illustrator の新機能 よくある質問 Illustrator の必要システム構成 Apple Silicon での Illustrator の使用 ワークスペース ワークスペースの基本 Illustrator のもっと知るパネルで学習を高速化 ドキュメントの作成 ツールバー デフォルトのショートカットキー ショートカットキーのカスタマイズ アートボード入門 アートボードの管理 ワークスペースのカスタマイズ プロパティパネル 環境設定の指定 タッチワークスペース Illustrator での Microsoft Surface Dial のサポート 編集の取り消しとデザインヒストリーの管理 ビューを回転 定規、グリッド、ガイド Illustrator でのアクセシビリティ セーフモ
似顔絵のコツ（書き方・描き方）Illustratorで簡単に写真からイラストへ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 さて、去る2014年のクリスマス、LIGではSHIFTBRAINさんと合同でクリスマス企画を実施しました。私は企画にはそんなに直接関わっていないのですが、4名（＋お蔵入り1名）のサンタクロースさんの似顔絵イラストを描き、 特設サイト で使っていただきました。 似顔絵って難しいですよね。でも、Illustratorを日々お使いなら、案外カンタンに作ることができるんですよ。というのを本日はお伝えしにきました。 なんでIllustratorならカンタンなの？ 手描きと比べると、という前提が入るかもしれませんが、個人的には以下のような部分が作りやすさをサポートしてくれていると思います。 パーツごとにやり直しがきく ラインが歪んでも「スムーズツール」を使えば楽にキレイなラインに直せる パーツの位置変更が容易 本人との比較がしやすい 肌や髪色を決めやすい なかには
組版に関する問題提起｜DTP Transit
昨日、NPO法人クリエイター育成協会さんのブログ記事『DTPデザインの基本｢文字間隔｣について』に横やり指摘が入り、最終的に記事を取り下げるという一件がありました。 当記事は一度掲載を取下げさせていただきます（元内容：DTPデザインの基本｢文字間隔｣について） | NPO法人クリエイター育成協会 公式ブログ はてなブックマーク - DTPデザインの基本｢文字間隔｣について それを受けて、「Illustratorで和欧間の前後や句読点に続くアキを「なし」にするために、［アキを挿入］を「ベタ」にするのはバッド・ノウハウというより、間違った使い方です」というエントリーを書いていたんですけど、「いや、それもアリかも」っていう気がしてきました。 美的感覚はそれぞれ 主に広告系などの業界で「和欧間の前後や句読点に続くアキを“なし”」にして、ギューギュー詰めたいという要望（ニーズ）があり、次のようなバッ
【パス初心者向け】トレースするときに気をつけていること - デザイナーのイラストノート
SVGの普及かアイコンブームか、パスを使ってイラストを描く方が増えた気がします。前から書いてみたかった、パスでトレースするときに気をつけるといい「作り方」と「考え方」を記事にしてみました。 文字をトレースしてみよう パストレースの練習として、文字やロゴマークをトレースすると言うのはよく聞きます。曲線あり直線有り中抜きあり、で練習にはいい素材です。特にフォントの場合はアウトラインをとることで、どこにアンカーポイントを置けばいいのか参考にすることが出来ます。 試しにこの2つのお題に取り組んでみました。この形を実現するのにどんな方法をとりますか？正解はいくつもありますが、例えばこの方法。 完成！いいじゃない！と思いますか？確かに形としては完璧なんですが、練習であれば個人的にはこちらをおすすめしたいです。 さっきとの違いが分かるでしょうか？3つの図形を組み合わせて文字の形を作っています。文字を書く
Web制作に必ず役立つIllustratorのチュートリアルやスライドのまとめ
ひと昔前までは「IllustratorはDTP」といった感じでしたが、Illustratorのバージョンアップによる機能強化に伴い、徐々にイラレでWeb制作をおこなう人が増えてきました。 ベクターっぽいスタイルのフラット、ベクターデータのSVGなどの影響もあるかもしれません。 Illustratorを使って、Web制作をする時に役立つ環境などの設定方法や注意点をはじめ、レイアウトやエレメントの作り方、スライスの便利技、時短テクニックなどのチュートリアルやスライドを紹介します。Illustratorで一番ネックとなる「にじみ」の理由とその解決方法も勉強になります。 Speed Design with Illustrator 翻訳版：Illustratorでインターフェイスをデザインする時に役立つ時短テクニックのまとめ ウェブやアプリなどのインターフェイスをデザインする時に役立つ14の時短テク
illustratorのaiデータから画像を綺麗にスライスする方法｜Web Design KOJIKA17
illustratorのaiデータから画像を綺麗にスライスする方法 2011-01-08 illustratorのaiデータをWeb用の画像にスライスすると、画像が1pxズレが生じたり、Photoshopのスライス機能と違うので戸惑うことが多いと思います。 関西の某勉強会の懇親会でも「外注に頼んだデザインがaiデータで来て、スライスに凄い時間がかかった」という意見が多く聞いたので、illustratorのスライスの仕方をご紹介させて頂きます。 紹介するillustratorのバージョンはCS2ですが、CS以降のバージョンならほとんど機能が使えるはずです。 スライスの準備 単位 [ファイル]→[ドキュメント設定]で単位がピクセルになっているか確認します。 ここを変更すると、定規などの値も全てピクセルになるはずです。 カラーモード [ファイル]→[ドキュメントのカラーモード]がRGBカラーにな
Illustratorで文字をかっこよくデザイン！タイポグラフィのチュートリアルのまとめ
アートワークとして見るだけでもよい刺激を受ける、そんな素晴らしいタイポグラフィ・テキストエフェクトのチュートリアルをまとめてみました。 解説は英語ですが、苦手な人でも各ステップごとにキャプチャが付いているので分かりやすいと思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/AndHA_design/status/1526397214569902080
https://twitter.com/wkwdesigner/status/1526144002684514305
株式会社アクシス
The Blog | Welcome to Adobe Blog
Webデザインのタネ | Web制作の効率化やトレンド・ノウハウ