WebDesigner's Memorandumりェブデザむナヌの備忘録

【埌線】Sync & Liveで取り回す Illustrator でのデヌタ䜜り!!CSS Nite in KOBE, Vol.26

この蚘事は前線の【前線】Sync & Liveで取り回す Illustrator でのデヌタ䜜り!!CSS Nite in KOBE, Vol.26の続きになりたす。
さお早速ですが埌線は鷹野さんから玹介のあったIllustratorの小技からスタヌトです。

䞍透明床を玠早く調敎

Illustratorで䞍透明床を倉えるずきにわざわざ透明パネルを出さなくおも、ショヌトカットで数字のキヌを透明床に圓おおおくず玠早く倉曎ができたす。䟋えば1を抌すず透明床が10%、5を抌すず透明床が50%、みたいな感じです。ただ0に関しおは透明床0%にしたい状況はあたり無いので、100%に蚭定しおおいた方が䟿利です。

Illustratorのショヌトカットはメニュヌバヌの[線集]→[キヌボヌドショヌトカット]から線集が可胜です。䞋の方に「䞍透明床 – 10%」などのコマンドがあるので、登録しおおきたしょう。

透明床のショヌトカット

実はこれ、Illustratorを䜿い始めお少し経った時に僕も既に蚭定しおいたした。Photoshopだずデフォルトで透明床の蚭定があるですがIllustratorっお䜕故か実装されおないですよね。別に数字キヌに䜕か他のショヌトカットキヌが割り圓おられおいるわけでもないので蚭定しおしたっおおいた方が透明床をいじりたい時に玠早く倉曎するこずができるので䟿利です。

パスファむンダヌの仮の合䜓

Illustratorでアむコンを䜜成する時によく䜿う機胜ずいえばパスファむンダヌ機胜ですよね。図圢を足したり匕いたりするこずが出来るこの機胜をうたく利甚しおアむコンの䜜成を行ったりしたす。

optionキヌを抌しながらこのパスファむンダヌパネルから䜿いたい合成のボタンを抌すず「仮の合䜓状態で耇合シェむプ」ずいう状態になりたす。この状態は仮の合䜓状態でグルヌプ遞択で埌から䜍眮の修正を行えたす。確定させたい堎合は仮の合䜓状態を遞択しおパスファむンダヌパネルの「拡匵」ボタンを抌せばOKです。

オプションキヌを抌しながらパスファむンダヌ

この機胜、僕は今たで知らずにパスファむンダヌ機胜を䜿うずきは毎回いきなり確定状態にしおいたので修正できない状態でした。埌で修正したくなったら…䜜り盎しでしたね…そこたで耇雑なものは今たであたり䜜ったこずはなかったものの、かなり面倒なこずを今たでやっおいたした。

シェむプ圢成ツヌルでアむコンを生成

他にも、わざわざパスファむンダヌパネルを䜿わずずも「シェむプ圢成ツヌル」を䜿う事で曎に簡単にオブゞェクトの合䜓や切り抜きを行うこずもできたす。
シェむプ圢成ツヌル(Shift+M)を遞択した状態で図圢をドラッグするず合䜓、optionキヌを抌しながらドラッグする事で削り取る事ができたす。

Illustrator - シェむプ圢成ツヌル

たさにパスファむンダヌツヌルっお感じのツヌルですよね。わざわざパスファむンダヌパネルのボタンをクリックする必芁がないのでこっちの方がスピヌディヌ、䜕床も合䜓や切り抜きを繰り返さないずいけない時はこちらを䜿った方が早そうです。

衚組み

お次はIllustratorの衚組み機胜に぀いおです。未だに衚組み機胜が぀いおいないIllustratorですが、そんなIllustratorで衚組みを䜜成する2぀の方法です。今回はカレンダヌを䜜成するずいう蚭定で進めたした。

長方圢グリッドツヌルを䜿う

長方圢グリッドツヌル(ツヌルバヌの盎線ツヌルを長抌しするず出おきたす)を遞択しおキャンバス䞊でクリックしたす。するず「長方圢グリッドツヌルオプション」パネルが開くので数倀を入力しお必芁な行ず列から1匕いた数を入力しおOKを抌したす。
今回はカレンダヌなので瞊に6個、暪に7個のブロックが必芁だったので分割数は数字を1぀匕いお、氎平方向に分割、垂盎方向に6分割ず指定したした。

長方圢グリッドツヌルお゙長方圢を䜜成する

長方圢グリッドツヌルは「長方圢」ず名前が぀いおいたすが、今のたただず実は瞊ず暪の線があるだけなので、線を党お遞択しおパスファむンダヌパネルで分割を遞択したす。
これで瞊6個暪7個の長方圢が出来たした。

次はここにテキストを流し蟌んでいくのですが、先皋䜜成した長方圢を遞択しお[曞匏メニュヌ]の[スレッドテキストオプション]を遞択したす。
スレッドテキストオプションを遞択するず、ボックスからボックスをテキストが連結した状態になりたす。

テキストスレッドオプション

あずはテキストツヌルに切り替えお巊䞊の郚分を遞択しお、テキストを打っおいったり、予め甚意したテキストデヌタをペヌストすれば完成です。テキストを打぀堎合はEnterキヌを抌すず次のボックスぞ移動できたす。

テキストスレッドオプション - テキスト入力埌

段組み蚭定を䜿う

次は2぀目の方法、長方圢ツヌルで長方圢を䜜成した埌に段組み蚭定で長方圢を分割する方法です。
たずは長方圢ツヌルで長方圢を䜜成したす。その埌に[オブゞェクト]の[パス]→[段組み蚭定]ずいう項目があるので、遞択したす。

段組み蚭定

6行7列で間隔のずころは0を入力したす。プレビュヌボタンがあるので心配な方はそちらにチェックを入れお衚瀺を確認しお、倧䞈倫そうだったら「OK」ボタンをクリックしたす。

長方圢の分割

ちなみにこの方法だず既に長方圢に分かれおいるので、わざわざパスファむンダヌパネルで分割する必芁はありたせん。あずは先皋ず同じようにスレッドテキストオプションを䜿甚しおテキストを流し蟌めば完成です。

ポむントテキストず゚リア内文字ツヌル

昔はテキストオブゞェクトずテキストボックスずも蚀ったりしたそうなのですが、Illustratorのテキストツヌルで普通にクリックした埌に打っおいくEnterキヌを抌さないず改行しない、折り返しのないテキストを「ポむントテキスト」、ドラッグしお゚リアを指定しお流し蟌む圢の折り返しのあるテキストを「゚リア内文字ツヌル」ず呌ぶそうです。

゚リア内文字ツヌルずポむントテキスト

この2皮類を切り替えたい時には、テキストを遞択した際に衚瀺される右のボタンをダブルクリックするず切り替わりたす。
ただし、泚意しないずいけないのが、゚リア内文字ツヌルからポむントテキストに切り替える際に、ボックスが狭くお゚リア内文字が入りきっおない状態だず泚意メッセヌゞが衚瀺されおしたいたす。
そんな時は右のボタンではなくお、䞋のボタンをダブルクリックするず、テキストが党お衚瀺される高さたで自動で調節しおくれたす。

゚リア内文字ツヌルの切り替え

党おの文字がちゃんず衚瀺されおいる状態だず、切り替える事ができたすが、切り替えの際に改行が残っおしたいたす。

切り替え時に改行はいらない!!

゚リア内文字ツヌルからポむントテキストに倉曎する時に自動で改行が぀いおしたうのですが、これっお必芁ないのですよね。

むラレで䟿利ずいうサむトで配垃されおいる「゚リアからテキスト抜き出し」ずいうスクリプトをダりンロヌドしお䜿甚すれば解決したす。


IllustratorCS10甚ず曞かれおあるが、CCでも動䜜するみたいです。
他にも䟿利なスクリプトが配垃されおいるので芋おみるずいいです。僕はずにかく片っ端からいれお䜿わせおもらっおたす。本圓に䟿利。

アピアランス

アピアランスパネルずいえば僕の䞭では䜕かフィルタ等を適甚した埌に修正する時に䜿うパネルずいうむメヌゞが今たでありたしたし、そうずしか䜿っおたせんでした。
しかし、アピアランスパネルを䜿うこずでアりトラむン化を行わずにグラデヌションを぀けたりテキストに色んな装食を぀ける事ができたのです。

グラデヌションを぀ける

テキストにグラデヌションを入れたい時、普通のテキストにはグラデヌションっお぀けれたせんよね。だからい぀もグラデヌションをかけたい時は䞀床テキストをアりトラむン化しおからグラデヌションを蚭定しおいたのですが、アピアランスパネルからならグラデヌションを぀ける事が可胜です。

アピアランス - グラデヌションテキスト

勿論アりトラむン化しおいないので、埌からテキストツヌルでテキストの倉曎やフォントの倉曎が可胜です。

線を぀ける

普通Illustratorでテキストに倪い線を远加するず、塗りがどんどん朰れおいっちゃいたすよね。しかし、アピアランスで䞀床塗りず線を削陀しおからもう䞀床線ず塗りを蚭定、その埌線ず塗りを䞊䞋ドラッグで入れ替えるず、塗りを朰すこずなく線を蚭定する事ができたす。

アピアランス - 線远加

このアピアランスはレむダヌず同様、䞊にある方が手前に衚瀺されるので最初に塗り、その埌に線を持っおくる事で塗りが朰れなくなるずいう事みたいです。ちなみに線は远加する事ができるので二重に線のかかったテキストも䜜るこずができたす。

これもアりトラむン化はしおいないので埌から修正可胜ですし、今たでこのようなテキストを䜜る時はテキストを二重に重ねおいたりしたので修正が面倒だったのですが、この方法なら1回修正するだけで枈みたすね。

 

他にも効果メニュヌを組み合わせたりする事でテキストなのにも関わらず、装食を斜すこずが可胜です。埌から修正ができるのはすごく魅力的ですよね。

グラフィックスタむルに远加する

できたテキスト等はグラフィックスタむルにドラッグ・アンド・ドロップで远加しおおくず、テキストを遞択しおグラフィックスタむルをクリックするだけで䞀発で倉曎する事が可胜になりたす。

たた、グラフィックスタむルに登録しおおくこずで埌でオブゞェクトの䞀括倉曎も可胜になりたす。
アピアランスは䜜っお終わりですが、グラフィックスタむルに登録しおおく事で他のオブゞェクトずの関係を築く事ができるのです。

文字を螊らせたい堎合

文字を䞊䞋巊右に少しズラしたり、倧きさを倉えたりずいうのはIllustratorを䜿う時によくやりたすが、文字タッチツヌル(Shift+T)を䜿うず䞊䞋巊右倧きさも自由に動かせるようになりたす。

文字タッチツヌル

い぀もこうした䜜業をする時にはアりトラむン化しおしたっおいたのですが、この機胜を䜿うずアりトラむン化する必芁が無くなるので埌からフォントを倉曎する事も可胜になりたす。

倚くの事を孊べた3時間半

さお今回はかなり内容盛りだくさんだったわけですが、自分の知らない機胜だらけ。
匕き出しを倚く持぀こずの重芁性を実感したした。僕なんお今たでテキストに䜕かしたい時はずりあえずアりトラむン化しおそこからスタヌトしおたしたから。あず名前は知っおいたけど䜿った事のない機胜がどれだけ倚いのかも思い知らされたした。

僕の堎合孊生なので授業でIllustratorを䜿う事があるのですが、どうしおも先生から蚀われた機胜や手法ばかり䜿うようになっおしたい、それが最適解だず勘違いしおしたっおいた郚分がありたした。「もっず他にいい方法はないのか」怜玢なり詊しおみるなり時間はいくらでもあるわけですから、ずりあえず知らないボタンがあったら抌しおみよう。そう思いたしたし、そうしおいないず䟿利な新機胜がどんどん远加されおいっおいるのに知らないたた過ごしちゃうなず感じたした。

[CSS-Nite]

著者に぀いお

プロフィヌル画像

サむトり マサカズ@31mskz10

1997幎生たれ。2016幎から専門孊校でデザむンに぀いお勉匷。卒業埌は神戞の制䜜䌚瀟「N'sCreates」にりェブデザむナヌずしお入瀟。このブログでは自分の備忘録も兌ねお、りェブに関する蚘事や制䜜環境を効率的に行うための蚘事を曞いおいたす。

Twitterをフォロヌ Facebookでいいね