Illustratorでアイコンなどを余白も含めた正方形サイズでSVG書き出しするベストプラクティス｜DTP Transit 別館池原さんが問題提起されていた「アイコンなどを余白も含めた正方形サイズでSVG書き出し」する方法について考えてみます。 Illustratorで、アイコンなどを余白も含めた正方形サイズでSVG書き出ししたい場合、一番スマートな方法は…？ — けんじ / UX Designer (@kenji_clown5) January 30, 2024
便利になった新常識とUIの変更点 | ベテランほど知らずに損してるIllustratorの新常識 2022（1）
便利になった新常識とUIの変更点 | ベテランほど知らずに損してるIllustratorの新常識 2022（1） ベテランユーザーが見落としがちな 今のIllustratorならできること その1 35周年を迎えようとするIllustrator。Creative Cloud以降、Illustratorには細かいところに手が入っており、「それはイラレではムリなんだよね〜」という常識が変わりつつあります。 この連載では「イラレなら任せて!!」というベテランの方向けに、今のIllustratorを使うポイントを紹介します。 今回は5個の新常識とUIの変更点を取り上げます。ぜひ、“棚卸し”してみてください。 1日に何十回と利用する「整列」操作。アクションに登録してキーボードショートカットを設定することはできましたが、デフォルトではキーボードショートカットを設定できませんでした。 今のイラレには［オ
2021年10月リリースのIllustrator 2022（26.0）の新機能・機能強化など｜DTP Transit 別館
Adobe MAX 2021のタイミングでCC 2022がリリースされ、Illustratorは26.0になりました。Illustrator 26.0の新機能や変更点をまとめてみました。 Illustrator 26.0（2021年10月リリース）の新機能・変更点 ・「山路」問題：デフォルトでOFF ・Adobe Fontsの自動アクティベート ・共通のテキストを選択する機能 ・［3Dとマテリアル］効果（テクノロジープレビュー） ・HEIF、WebPのサポート ・.psdcのリンク配置 ・可変線幅 ・［もっと知る］パネル pic.twitter.com/dDVz9VljTK — DTP Transit (@DTP_Transit) October 26, 2021
作字テクニックのひとつ「文字を溶かす」を徹底解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザインしてて文字をばちっと決めたいときってありませんか メインビジュアルや見出しなどで、「文字（コピー）をばちっと決めたいッ！」ってときありますよね。そのときに普通の書体をそのまま置くと、 どうしてもデフォルト書体そのまま感が出ちゃうときってありませんか？ もちろん出ちゃわないときもあります。でも出ちゃうときもありませんか？ うん、ですよね。 そんなときの解決策の一つ、「作字」 “デフォルト書体そのまま感”をなくす方法はいくつかありますが、その一つとして「作字」があります。デフォルトの書体を少し調整して文字に特徴をつけることですね。 文字を”ちょっとロゴっぽくする”するという言い方が近いでしょうか（わかりにくいか……）。 作字するといい意味で”違和感”がでて、印象的なビジュアルになります。その作字のひとつに「文字を溶かす」という小ワザがあります。 文字を溶かすって？ Afterの文字を拡
Webデザインツールはどれを使えばいいの？
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 Webデザインのためのツール（アプリ）はいくつもあるため、Webデザインを勉強し始めたばかりの方は何を使っていいのか迷うと思います。 この記事ではデザインツールの特徴だけでなく、「カード型UIデザイン」を例にWebサイトのデザイン制作に使用する機能の比較をしたり、アプリ間の連携についても触れていきます。 デザインツールの種類デザインツールそれぞれの特徴Webサイトのデザイン制作に使用する機能の比
#Illustrator のアートボード管理とスクリプト｜宮澤聖二 | onthehead
Illustrator はドキュメント上にアートボード名が常に表示されません。アートボードツールに切り替えれば目視できますが、その都度アートボードを編集するモードに入ってしまい、作業の流れを中断してしまいます。 また、複数あるアートボードの名称や座標・サイズを管理するのも決して快適とは言えない状態です。 そこで、私たち三階ラボが長年採用しているアートボードの管理方法と共に、アートボードに関するスクリプトをご紹介します。 アートボードをレイヤーで管理する 私たちは特定のレイヤーにグループを配置し、スクリプトでアートボードに変換することによってアートボードを管理しています。 グループにはテキストとパスをそれぞれ１つ入れ、テキストはアートボード名に、パスの座標・サイズはアートボードの座標・サイズに対応します。 こうすることで、常にアートボード名が把握でき、普段使っているツールでアートボード名やア
#Illustrator でアイソメトリック風ボックスを作るスクリプト｜宮澤聖二 | onthehead
イラストや図面などで使用されるアイソメトリック図。 そのアイソメトリック風のボックスを簡単に作るスクリプトを作成しました。 アイソメトリック図（アイソメ図）とは アイソメトリック図は、立体を斜め上から見たパースがかかっていない図のことです。X, Y, Z 軸が 120°で等間隔に表示されます。等角投影図とも呼ばれます。 Illustrator でアイソメトリックなボックスを描く方法 一番簡単なのは、四角形を描いてから 効果メニュー → 3D → 押し出し・ベベル... を選び、位置：アイソメトリック法 - 左面、押し出しの奥行き：に数値を入力する方法です。 この方法は、四角形のサイズを変更したり押し出しの奥行きの数値を自由に変えられるため、後からいろいろ調整できるところが魅力的です。 ただし、3D 化されたオブジェクト同士でスナップできなかったり、アピアランスを分割すると直線が微妙に傾いて
#Illustrator で「ロゴデータ」を作るときのチェックリスト｜宮澤聖二 | onthehead
Adobe Illustratorを使用して、コーポレートやブランド・サービスなどのロゴをデザインし、ビジュアルが決定してからクライアントに納品データとしてお渡しするまでの「ロゴデータを作成する工程」について、私が気をつけていることをまとめてみました。 この「ロゴデータを作成する工程」は気をつけなければならい細かい点が多く、作業に時間がかかります。見落としが発生しやすい作業でもあるため自分の備忘録も兼ねて。 ※ 私が試行錯誤しながら構築した作業工程なので、これが正解というわけではありませんし、後から変わるかもしれないので、あらかじめご注意ください。 📋 アートボードをチェックするアートボードはドキュメントの基盤となるもの。 わかりやすいアートボード名を付け、不要なアートボードは削除する。 1-1： アートボードの座標をチェックする 🆙アートボードの座標・サイズの数値に小数が入っていると
Adobe Illustrator の「角を丸くする」と「ライブコーナー」の違い｜宮澤聖二 | onthehead｜note
グラフィックソフトで当たり前のように搭載される角を丸くする機能。 角丸だったり、コーナーラウンド、Radius、border-radius、と呼ばれたりもします。 Illustrator 場合、効果メニューの「角を丸くする...」から半径を指定する方法と、コーナーウィジェットを表示し角付近にある丸いマークをドラッグ＆ドロップしたり、変形パネルの角丸の半径やコントロールパネルのコーナーの半径を指定する「ライブコーナー」という２つの方法が存在します。 角を丸くするとライブコーナーの比較 角を丸くする効果はオブジェクト全体の角をまとめて丸くし、ライブコーナーは角それぞれを個別に丸くできる。という意味合いで使い分けてる方も多いと思います。 ですが、この２つの方法は全く違う方法で角を丸くしています。 さらに、ライブコーナーには相対値と絶対値という２つの方法が用意されています。 実際にどのくらい違いが
VectorStyler
VectorStyler 1.2, see what is new! For MacOS and Windows. Create illustrations, logos, icons, drawings and typography for screen, print and web The full set of illustration and drawing features available for the Mac and PC, without subscription All the Drawing Tools Use all the drawing tools without subscriptions. VectorStyler provides a complete set of drawing, design and illustration tools neces
モダンなFireworks後継アプリは存在するか？
Webデザイン モダンなFireworks後継アプリは存在するか？ Wednesday, September 18th, 2019 この記事は、DIST.28 「モダンWebデザインワークフロー2019」というWebデザインの勉強会のLTとして私がお話しした内容をまとめたものです。 私は1999年のFireworks 2Jから使用していますが、最近使用しているAffinity DesignerはFireworksと特徴が似ていて、Fireworksが好きだった方にとって後継アプリとして使いやすいのではないかと思っています。 Fireworksと私 私は 神速Photoshop [Webデザイン編] や プロになるためのWebデザイン入門講座 などの本を執筆しています。 私はなぜかFireworksが嫌いな人と思われているようですが、この本の最後に「Fireworksを使っていたが、Phot
XDでpsdやaiをリンクさせたい！CCライブラリを使った方法と注意点｜spicagraph｜note
はじめにみなさんXD使ってますか？XDって みたいなイメージありますよね。サービスやアプリのUIには便利そうだけど、例えば↓こんなデザインを作る場合、IllustratorやPhotoshopの方が向いていそうに見えます。なぜなら、 XDでデザインする場合、↓こんな風にPhotoshopで画像を補正して書き出して…Illustratorでアイコンを作成して書き出して…変更を繰り返すには、ちょっと手間です。 IllustratorやPhotoshopのように、psdやaiファイルをそのままリンクできたら…しかしXDにリンク機能はありません。「読み込み」をすると、オブジェクトとしてファイルの中身が読み込まれます。 しかし、CCライブラリを使うと、psdやaiをリンクするように、編集の呼び出しや変更内容の同期が素早く行えるようになります。 - CCライブラリとは？AdobeのCreativeCl
Illustratorを教える人、大きめアートボードにトンボを描く方法を指南するのはそろそろ終わりにしないか…？｜やも♡脂のレタッチ鰤☀ゲコリノフ
Illustratorを教える人、大きめアートボードにトンボを描く方法を指南するのはそろそろ終わりにしないか…？ この記事は初心者向けではありません。 Illustratorの使い方を 指導する方に向けて 書いています！ ・大きめアートボードにトンボ描いてるよ、という方→印刷会社がEPSで回しているからです。 ・印刷会社が欲しいのは位置情報です。人が見て処理するための描きトンボがいいのか、データに埋め込まれ、描きトンボとして可視化もできるTrimbox等の位置情報を使うのかはワークフローによります。増えてきているPDFネイティブなワークフローでは後者が必要。 ・移行期（の終盤）にあたる今、描きトンボも必要なら、データ上の位置情報と合わせるべきです。 大きめアートボードとは大きめアートボードにトンボを描くやり方、こういうのですね。 アートボードを実寸より大きめにしてから、中に実寸のトンボを描
Affinity Publisherを最強のプロトタイピングツールとして使うために知っておきたいこと
この記事の内容 この記事は、2019年7月19日に開催した「Affinity User Group JAPANミーティング」というイベントで私がお話しした内容をまとめた記事です。 以前話題になった PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売 という記事の続編のような内容です。 主に以下の内容について書いています。 Affinity PublisherによってWebデザインのワークフローがどのように改善するのか「Affinityは軽い」と言われるが、軽いと何が良いのかおすすめの環境設定脱Adobeへの第一歩 動画で観たい方は以下の動画をどうぞ。音声あり、約24分です。 ※他の登壇者の方の内容は、後日別の記事として投稿予定です。 Affinityが目指しているもの あくまでも私の個人的な私見ですが、AffinityはA
用途に応じて適切なPDFをIllustratorから書き出す｜DTP Transit
なお、PDFが重くなる主な原因は配置されているビットマップ画像です。ビットマップ画像をそのままにするのか、ダウンサンプルする（＝解像度を落とす）のか、等の設定を［圧縮］カテゴリで行います。 各プリセットには、その設定が施されていますので、把握しておかれるとよいでしょう。 PDF変換のワークフロー IllustratorからPDF変換（書き出し）を行う流れは次のとおりです。 ［ファイル］メニューの［複製を保存］をクリックして［複製を保存］ダイアログボックスを開く ［ファイル形式］を「Adobe Illustrator（ai）」から「Adobe PDF（pdf）」に変更する（Illustrator CS5では［フォーマット］） ［Adobe PDFを保存］ダイアログボックスが開いたら、［Adobe PDFプリセット］からプリセットを選択し、［トンボと裁ち落とし］などのカテゴリで調整する 書き出
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デザインを完結させるワーク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Illustrator の「テキストからベクター生成（AI生成機能）」で、統一感のあるアイコンを制作する方法
合成フォントダウンロードセンター
「Adobe Illustrator」が起動できない事象が発生中／他社製セキュリティソフトとの競合が原因
Vector Magic: JPG、PNG の画像を SVG、EPS、AI ベクターに変換