自動的に伸びる長方形で商品番号を作成する

前回の記事でチラシの商品価格のレイアウトについて紹介しました。 前回記事:価格のレイアウトを整える 今回は価格の上に商品番号をつけてみようと思います。 チラシでよく見る番号ですね。 商品番号は見る側からしたら重要度が低めの情報なので小さめになっています。 商品番号も価格といっしょで商品の数量分必要になるのでできるだけ作業をラクにしたいところです。 商品番号の桁数、…

続きを読む

価格のレイアウトを整える

チラシなどで商品などと一緒に表示する「価格」のレイアウトを簡単に整えてみます。 たとえばこのような価格表示をしてみようと思います。 同じフォント数で文字を打ってみました。 そのままだと少し価格がわかりにくいのでレイアウトを整えます。 ざっくり上のようなレイアウトにしてみようと思います。 円のフォント数を小さくします。 フォントを小さくす…

続きを読む

アートボードを整列パネルで整列させる

IllustratorCC2018ではアートボードを整列パネルで整列させることができるようになりました。 複数のアートボードを作成、ツールパネルからアートボードツールを選びます。 Shiftを押しながらアートボードをクリックすることで複数のアートボードを選択可能です。 ちなみに、Shiftを押しながらドラッグで複数アートボードを一気に選択することもで…

続きを読む

IllustratorCC2018 アートボードの機能強化

IllustratorCC2018でアートボードの機能が強化されたらしいです。   アートボードを複製 ためしにアートボードを作成しました。 アートボード内にはロボットのイラストを作成。 イラストを配置したレイヤーをロック、その状態でアートボードを複製してみます。 すると複製したアートボード内にはロックされたレイヤー内のイラストも複製されています。 …

続きを読む

パペットワープツールを使ってみる

CC2018になったパペットワープ機能が追加されたので使ってみました。 ADOBEのパペットワープの記事 https://helpx.adobe.com/jp/illustrator/using/puppet-warp.html イラストなどの変形をする際にパペットワープを使うと自然な見た目の変形が可能となります。 例えば キリンのイラストでパペットワープを使用してみま…

続きを読む

IllustratorCC2018のプロパティパネル

IllustratorCC2018の新機能の1つ、プロパティパネルを表示させてみました。 プロパティパネルは、コントロールが必要なときに、必要なコントロールだけが表示されます。 (引用:https://www.adobe.com/jp/products/illustrator/features.html) プロパテイパネルを見ると、ドキュメントについて、定規とグリッド、ガイ…

続きを読む

IllustratorCC2018にしてみた

IllustratorCC2018にしてみました。 新しい機能などは、 プロパティパネル パペットワープツール アートボード関連の強化 バリアブルフォント OpenType SVG フォント テキストへのデザインのセットの適用 書き出しの拡張機能 Creative Cloud ライブラリを使用したテキストアセットの追加と共有 Illustrator での Micr…

続きを読む

イラストの全体に白いフチを付ける

Illustratorでイラストを作成して全体に白いフチをつけてみます。 イラストを黒フチのみにすると、背景が暗い色だとフチが見えなくなりイラストと背景の境界がわかりづらくなる場合があります。その場合に備えて全体に白いフチをつけようと思います。 こうすることで、黒っぽい背景、白っぽい背景どちらでも輪郭がわかるようにします。 イラストの部品には黒いフチが突いていますが、白いフ…

続きを読む

塗りや線を追加して拡大縮小する

アピアランスを使用すると塗りや線を追加できます。 今回は塗りや線を拡大や縮小してみます。 四角のオブジェクトを作成しました。 このおブジェクトに塗りを追加してみます。 オブジェクトを選択状態でアピアランスパネルで塗りを追加します。 新たな塗りはわかりやすいように緑色に変更しました。 アピアランスパネルの緑色の塗りを選択状態で「パスの変形」→…

続きを読む

文字に影を付ける(前方に伸びた影)

文字に影を付ける方法は過去にも紹介しましたが今度は少し見た目のちがう影をつけてみます。 今回作成する影 過去記事 アピアランスを使用して塗りで影をつけてみる ドロップシャドウで影を付ける 今回は文字前方に伸びた影を付けてみます。 では始めてみます。   まず影を付けたい文字を作成します。 仮に「あいうえお」という文字を打…

続きを読む

同心円グリッドツールで六角形を均等に分割してみる

今回は同心円グリッドツールを使用してオブジェクトの分割に使用してみます。 同心円グリッドツールとは? 同心円は同じ中心を持つ円のことです。 つまり、 このような円が同心円ということになる。 グリッドは格子状の罫線です。 つまり同心円グリッドは、同じ中心を持つ円にグリッドが付いたものになります。 では、実際に同心円グリッドツールを使用してみます。 …

続きを読む

アピアランスをスポイトでコピーする

スポイトツールについて オブジェクトの塗りや線をコピーするのにスポイトツールは大変便利です。 塗りなど変更したいオブジェクトを選択、スポイトで別のオブジェクトをクリック。 これだけで塗りや線を同じ色にしたり線幅を同じにすることができます。 ただ、アピアランスが追加されているオブジェクトをスポイトでクリックすると同じ色にならない場合があります。 ためしに黄緑色の円…

続きを読む

Illustratorでアプリ用の画像を書き出しする

Androidアプリ用の画像を書き出してみます。 iosも同じように書き出せるのですが今回はAndoridだけ試してみました。 スマホアプリの場合、機種のサイズや解像度によって画像の表示が変わってきます。 同じ画像を使用して表示される大きさが変わってしまったりします。 方法としては、大きめの画像を縮小して機種ごとに縮小するようにする方法もあるのですが無駄に重たくなる場合もあるので、ざっく…

続きを読む

Illustratorの素材を使ってゲームを作ってみた

最近Unityを使用してAndroidアプリの脱出ゲームを作成していました。 ほぼ初心者のため本やネットで調べながら作成していたのですが脱出ゲームに使う素材をどうしようか悩み結局Illustratorで作成しました。脱出ゲームの場合3Dのイラストが使われていることが多いのですが3Dソフトは使用したことがなく少し敷居が高いのでとりあえず完成を優先してイラレで2D素材で作成することに。 脱出…

続きを読む

複数のアートボードを折り返すように設定する

アートボードの並べ方を変えよう 以前アートボードの基本的な機能や座標での配置方法について紹介しました。アートボードの機能を使用する 今回はアートボードの並べ方を変えて複数のアートボードを折り返して作業しやすいようにしてみます。 まずアートボードを複製や新規アートボード作成でアートボードを増やしてみます。 アートボードを増やしていくと右側に1つずつ追加されていきます。 こ…

続きを読む

IllustratorでSVG形式保存する

Illustratorの.aiファイルをSVG形式で保存してみます。 とりあえずIllustratorで作成したイラストのファイルをSVG形式にしてみようと思います。 aiファイルを開いて「ファイル」→「別名で保存」をします。 ファイルの種類をSVGにして「保存」をクリックします。 SVGオプションが表示されます。 OKすると保存できます。またボタンでSVG…

続きを読む

線幅の太さでオブジェクトの塗りの面積が狭くならないようにする

オブジェクトに線を付ける場合に線幅が細いとあまり気になりませんが、線幅を太くすると塗り部分がとても狭くなってしまう事があります。 今回、線の位置を変更して塗りが狭くならないようにしてみます。 四角形を作成しました。 この四角形に線を付けて試してみようと思います。 線を中央に揃える 四角形にピンク色の線を付けてみました。 比較できるように上に線を付けていない四角形を…

続きを読む

透明オブジェクトが重なった部分の色を保ったまま通常(不透明)にする

オブジェクト同士が重なってる場合に前面オブジェクトを透明にすると、重なった部分の塗りの色が透けて変化します。 透明部分を分割・統合して(不透明にしても)この重なった部分の塗りの色を保つ方法を紹介します。 乗算を使用してみる このような2つのオブジェクトを作成しました。 前面の黄緑色のオブジェクトを選択して透明パレットを乗算にしてみます。 すると重なった部分だけ違…

続きを読む

回転して対称な模様をつくる

回転ツールを使用してシンプルな模様を作成してみます。 画像のように上下左右の形が対称になっている模様を作成する方法です。 歯車っぽいものや花のような形を作成するのに向いている方法かと思います。 今回は試しに上のような形のオブジェクトを作成してみようと思います。 まず部品となる上のようなオブジェクトをペンツールで作成しました。 コピーペーストして180度回…

続きを読む

広告