BACKSTAGE技術部

群馬職業訓練短期大学校、ポリテクカレッジ群馬のデザイン科卒業生で行われる作品展
「BACKSTAGE」の技術的ブログです。
Adobe Illustrator、Photoshopを中心に手持ちのアプリケーション、デジモノの検証結果やTipsをお伝えしていきたいと思います。
リンクはご自由に。報告も不要です。
Illustratorだけで改行された連番数字を作成
0

    JUGEMテーマ:Adobe Creative Cloud

    スクリーンショット 2017-04-21 0.41.45.png

     

    内容がエスカレートしすぎてきたので初心に戻って簡潔なネタを。

    ということで今回はIllustratorだけで改行された連番数字を作成したいと思います。

    例として1〜100まで。

     

     

    さっそく手順です。

    まず文字ツールを選択します。

    スクリーンショット 2017-04-21 0.29.30.png

     

    適当な場所をクリックして1回リターンキー(エンターキー)を押して改行を入力します。

    スクリーンショット 2017-04-21 0.30.33.png

     

    選択ツールを選択

    スクリーンショット 2017-04-21 0.31.12.png

     

    ポイントテキストとして選択された状態になりますので

    編集>カット

    スクリーンショット 2017-04-21 0.31.43.png

    でクリップボードに改行を記憶させます。

     

    続いて棒グラフツールをダブルクリック。

    スクリーンショット 2017-04-21 0.32.05.png

     

    設定ウィンドウが出ます。

    スクリーンショット 2017-04-21 0.32.30.png

     

    「グラフオプション」を「数値の座標軸」に変更します。

    スクリーンショット 2017-04-21 0.32.56.png

     

    「データから座標値を計算する」にチェックを入れて

    スクリーンショット 2017-04-21 0.34.03.png

    最小値:1

    最大値:100

    間隔:99

    と入力して「OK」

    ※整数の連番作成時は間隔を最大値マイナス最小値にします。

     

    「座標軸の後」にクリップボードに保存した改行を「ペースト」

    スクリーンショット 2017-04-21 0.34.23.png

    ※コンテキストメニューかキーボードショートカットを使います。

     

    そして「OK」ボタン

    スクリーンショット 2017-04-21 0.34.39.png

     

    適当な場所をクリックしてグラフを作成します。

    スクリーンショット 2017-04-21 0.35.24.png

    大きさは何でもOKです。

     

    グラフが作成されました。

    スクリーンショット 2017-04-21 0.36.43.png

     

    作成すると数値入力ウィンドウが出ますが、邪魔でしたら消してOKです。

    スクリーンショット 2017-04-21 0.36.20.png

     

    あとは座標軸の数値をコピーするだけです。

    ダイレクト選択ツールを選択して

    スクリーンショット 2017-04-21 0.36.53.png

     

    数値部分だけを囲んで選択して

    スクリーンショット 2017-04-21 0.37.06.png

     

    編集>コピー

    スクリーンショット 2017-04-21 0.37.39.png

     

    数値がコピーできたらグラフそのものも不要になりますので削除しちゃいましょう。

    グラフ全体を選択して

    スクリーンショット 2017-04-21 0.38.21.png

    スクリーンショット 2017-04-21 0.38.29.png

    消去します。

     

    あとは文字ツールで

    スクリーンショット 2017-04-21 0.39.00.png

     

    入力したい場所へペーストすれば

    スクリーンショット 2017-04-21 0.39.21.png

    スクリーンショット 2017-04-21 0.39.30.png

     

    デデデンと改行された連番数字が出てきます。

    スクリーンショット 2017-04-21 0.39.42.png

     

    この状態だとよく分かりませんが、

    スクリーンショット 2017-04-21 0.40.10.png

    最後にも改行が入っていますので不要でしたら最後の改行は削除してください。

     

    四角のパスに段組設定してスレッドテキスト化。

    そこに流し込んで文字サイズと行間調節すればこんなのも簡単にできます。

    スクリーンショット 2017-04-21 0.41.45.png

     

    グラフの座標値の最小値、最大値、間隔を調節すれば0始まりもOKですし、

    数値の頭や後ろに文字を付け加えることも可能ですので

     

    第1号

    第2号

    第3号

     

     

    0:00

    1:00

    2:00

     

    のような連番も出来ますね。

    ポイントは予め改行をカット(コピー)しておいて「座標軸の後」の最後にペーストするところです。

     

     

    自分の環境だとExcelやらNumbersに切り替えるのが面倒でしたので

    Illustratorだけでどうにかできないものかと考えてみました。

    キーボードショートカットを使うと結構速く作成できますよ。

     

     

     

    先日娘用にぬいぐるみの身長を測るための身長計(最大30cm)を作ったのですが、

    この時には思いつかず、目盛りの数値をひたすら入力してました…

    スクリーンショット 2017-04-21 0.48.54.png

    IMG_2387.jpg

     

     

    2017.04.27追記

     

    1〜300までの連番を作成した動画です。

    途中、グラフの数値部分だけを選択せずまるまるカットしていますが、こちらの方が速いですね。

     

    但し、グラフ設定の「間隔」は最大1000までのようですので、それを越える個数の連番には向かないです。

     

    ゼロフィルも座標軸の最小値を0、最大値を1で間隔1000で区切ると

    0.000

    0.001

    0.002

    0.998

    0.999

    1.000

    となりますのでペースト後

    (他に「.」を使っているテキストがあった場合はグループ化して編集モードに入って)

    検索・置換で「.」を無くせばOKですね。

    ですので事前に座標軸の前に必要なだけ「0」を追加しておけば好きな桁数でゼロフィルにできそう。

    ただ1000番とかあるとかなり時間がかかります。

    ブログランキング・にほんブログ村へ
    にほんブログ村
    | タナカ | Illustrator | 02:25 | comments(0) | - | - |
    Illustratorで見る角度も変えられて積み重ねも可能なレゴ風ブロックを作ってみよう。
    0

      JUGEMテーマ:Adobe Creative Cloud

      スクリーンショット 2016-12-10 0.58.37.png

      Illustratorの3D機能は複数のオブジェクトを組み合わせるのが非常に難しいですね。

      俯瞰の角度は変えられません&距離計算がちょっとメンドクサイですが、

      左右の角度をフレキシブルに変更できる積み重ね可能なブロックを作ってみたいと思います。

       

      角度を大きく変更するときはこちらの記事のスクリプトがあると重宝します。

      【Illustratorスクリプト】位置で前後・サイズで前後にする。【CS4以降対応】

       

      今回は恐らく過去最長の記事ですので時間があるときにじっくりと遊んでみてください。

      餅は餅屋という言葉もあるとおり、本来なら3Dソフトの範疇ですので実用性はあまりありませんが(ないのに長いですゴメンナサイ)

      Illustratorでもやろうと思えばここまで出来るということで、ちょっと不思議な感覚を味わえると思います。

       

      今回は作例として

      上の画像にある木を完成目標として以下の仕様で進めたいと思います。

      CMYKモード

      土台部分が20mm×20mm×20mm

      ジョイント部分が直径5mm×高さ3mm×4つ

      俯瞰の角度は60°

       

      ※途中三角関数を用いた計算値が出てきますが、俯瞰の角度・土台部分の奥行き・ジョイント部分の奥行き全てのフォームにそれぞれ希望の数値を入力するとカスタム地として入力する値が表示されるようになっています。

       

       

      ではまずブロック作成のための材料から作っていきます。

       

      まず、長方形ツールを選択して

      スクリーンショット 2016-12-10 1.02.20.png

       

      適当なところでクリック

      スクリーンショット 2016-12-10 1.03.05.png

      幅:20mm、高さ:20mmでOK。

       

      線なし、塗りはK100%にします。

      スクリーンショット 2016-12-10 1.03.34.png

       

      ブラシに登録します。

      先ほどの四角が選択された状態でブラシパレットのメニューから「新規ブラシ」

      スクリーンショット 2016-12-10 1.03.50.png

       

      散布ブラシを選択してOK

      スクリーンショット 2016-12-10 1.04.09.png

       

      今回は名前を付けた方が分かりやすいので名前をつけます。他回転の基準と彩色の方式を変更します。

      スクリーンショット 2016-12-10 1.04.31.png

      名前:ベース

      回転の基準:パス

      彩色の方式:淡彩

      それ以外はデフォルトのままでOK


      スクリーンショット 2016-12-10 1.04.30.png

      四角がブラシに登録されました。

       

      描いた四角は不要ですので削除します。

      スクリーンショット 2016-12-10 1.04.52.png

       

      続いてジョイント部分を作ります。

      楕円形ツールを選択して

      スクリーンショット 2016-12-10 1.05.18.png

       

      適当なところでクリック

      スクリーンショット 2016-12-10 1.05.37.png

      幅:5mm、高さ:5mm

       

      スクリーンショット 2016-12-10 1.06.06.png

      この円を移動して複製します。

      オブジェクト>変形>移動

      スクリーンショット 2016-12-10 1.06.21.png

       

      水平方向10mm、垂直方向0mmで「コピー」

      スクリーンショット 2016-12-10 1.06.56.png

      スクリーンショット 2016-12-10 1.07.25.png

       

      全てを選択します。

      スクリーンショット 2016-12-10 1.07.33.png

      スクリーンショット 2016-12-10 1.07.59.png

       

      再び

      オブジェクト>変形>移動

      スクリーンショット 2016-12-10 1.08.20.png

       

      今度は

      水平方向0mm、垂直方向10mmで「コピー」

      スクリーンショット 2016-12-10 1.08.36.png

      スクリーンショット 2016-12-10 1.08.47.png

       

      全てを選択して

      スクリーンショット 2016-12-10 1.09.06.png

      ブラシに登録します。

      ブラシパレットのメニューから「新規ブラシ」

      スクリーンショット 2016-12-10 1.09.34.png

       

      散布ブラシを選択してOK

      スクリーンショット 2016-12-10 1.09.45.png

       

      スクリーンショット 2016-12-10 1.11.07.png

      名前:ジョイント

      回転の基準:パス

      彩色の方式:淡彩

      それ以外はデフォルトのままでOK

       

      スクリーンショット 2016-12-10 1.11.39.png

      ジョイント部分もブラシに登録されました。

       

      登録が終わったら先ほど作成したマル4つのオブジェクトは不要ですので削除します。
      スクリーンショット 2016-12-10 1.11.51.png

       

       

      これでブロックの材料が揃いました。

      ここからいよいよブロックを作っていきます。

       

      ペンツールに切り替えて

      スクリーンショット 2016-12-10 1.12.05.png

       

      かなり短めな垂直線を描きます。

      スクリーンショット 2016-12-10 1.12.39.png

      方向を決めるためのものですので数mmあれば十分です。

      長すぎると散布ブラシの次のオブジェクトが出現してしまうので短めな方が良いです。

       

      塗りなし、線に好きな色を付けます。(これがブロックの色となります)
      スクリーンショット 2016-12-10 1.14.05.png

       

      「ベース」散布ブラシを適用。

      スクリーンショット 2016-12-10 1.14.25.pngスクリーンショット 2016-12-10 1.14.37.png

       

      アピアランスパネルで「線」を選択します。

      スクリーンショット 2016-12-10 1.15.02.png

       

      効果>3D>押し出し・ベベル

      スクリーンショット 2016-12-10 1.15.20.png

      スクリーンショット 2016-12-10 1.15.44.png

      回転の度数を上から

       

      60°(←これが俯瞰の角度となります)

      カスタム角度: °

       

       

       

      とします。

      遠近感は必ず「0°」にしておきます。

      押し出しの奥行きを56.69pt(20mmと入力して抜けると変換されます)

      カスタム奥行き: mm=0pt

      後はお好みですが、

      描画の負荷を考慮してブレンドの階調を4としました。(設定をジョイント部分に流用しますので)

       

      スクリーンショット 2016-12-10 1.16.15.png

      このようになります。

       

      で、ここが【重要ポイント】なんですが、

      最終的にオブジェクトを回転させてその回転に応じて3D化した場合も問題なく見えるようにするためには

      回転の角度と上面の辺の角度が一致していないといけません。

       

      この時点で3D化した上面が画面上で正方形(元のオブジェクトの形)になっていないと角度の差が生じて

      3Dオブジェクトを並べた時にズレますので上下に拡大して上面を正方形にします。

       

      効果>パスの変形>変形

      スクリーンショット 2016-12-10 1.16.38.png

       

      その比率ですが、1÷cos(俯瞰の角度)になりますので

      60°の時は1÷cos(60°) = 1÷0.5 = 2

      という事で200%となります。

      スクリーンショット 2016-12-10 1.17.07.png

      拡大・縮小の垂直方向に「200%」と入力してOK

      カスタム縦拡大率:1÷cos(60°)✕100% = 200%

      上面が正方形になりました。

       

      続いてジョイント部分を作ります。

      アピアランスパネルで先ほどの「線」が選択された状態で「選択した項目を複製」ボタンを押します。

      スクリーンショット 2016-12-10 1.17.54.png

      スクリーンショット 2016-12-10 1.18.10.png

      複製されました。

       

      上に複製された線のブラシを「ベース」から「ジョイント」へ変更します。

      スクリーンショット 2016-12-10 1.18.28.pngスクリーンショット 2016-12-10 1.18.57.png

       

      その線の「3D押し出し・ベベル」効果をクリック

      スクリーンショット 2016-12-10 1.19.12.png

       

      ここでの変更は「押し出しの奥行き」のみです。

      スクリーンショット 2016-12-10 1.19.35.png

      8.5pt(3mm)と変更してOK

      ジョイント部の奥行き: mm=0pt

       

      続いて同じ線の「変形」効果をクリック

      スクリーンショット 2016-12-10 1.19.48.png


      ここで垂直方向上方へ移動させてブロック上面から生えているように見せるのですが

      その移動距離の計算はまた三角関数の出番です。

      (ベースの奥行き÷2 + ジョイントの奥行き÷2)×sin(俯瞰の角度)×垂直方向の拡大率

      =(20÷2+3÷2)×0.866×2

      =19.918

      カスタムジョイントオフセット:(203)÷2✕sin(60°)✕縦拡大率 = 19.918mm

      スクリーンショット 2016-12-10 1.20.06.png

      という事で移動の垂直方向へ「-19.918mm」と入力してOK

      カスタム値:-19.918mm

      これで一つ目のブロックが完成です。

      (この時点でオブジェクトを回転に合わせて3Dオブジェクトの向きが変わるようになっています)

       

      ここから上にブロックを積み重ねていきましょう。

      アピアランスパレットで先ほどの「ジョイント」の線と「ベース」の線を両方を選択して

      「選択した項目を複製」ボタンを押します。

      スクリーンショット 2016-12-10 1.21.17.png

      スクリーンショット 2016-12-10 1.21.35.png

       

      上のベース線の「変形」効果をクリック。

      スクリーンショット 2016-12-10 1.22.01.png

       

      今度は1ブロック分上に移動させます。

      1ブロック分の距離は

      ベースの奥行き×sin(俯瞰の角度)×垂直方向の拡大率

      20✕0.866✕2 = 34.64mm

      カスタムベース間隔:20✕sin(60°)✕縦拡大率 = 36.64mm

      となりますので

      スクリーンショット 2016-12-10 1.22.55.png

      という事で移動の垂直方向へ「-34.64mm」と入力してOK

      カスタム値:-36.64mm

       

      続いて同様にジョイント部分も「変形」効果をクリック。

      スクリーンショット 2016-12-10 1.23.20.png

       

      こちらは垂直方向に「-19.918mm」と入力されていますのでこの値から34.64mmマイナスします。スクリーンショット 2016-12-10 1.23.37.png

      「-19.918」と「mm」の間にカーソルを持っていって「-34.64」と入力してOK。

      カスタム値:「-19.918」と「mm」の間にカーソルを持っていって「-36.64

       

      2段目完成

      スクリーンショット 2016-12-10 1.24.20.png

       

      段数が分かりやすいように色を変えておきましょう。

      2段目の「ベース」と「ジョイント」の色を変更します。

      スクリーンショット 2016-12-10 1.24.49.pngスクリーンショット 2016-12-10 1.25.02.png

       

      あとは必要な回数だけ再び

      「ジョイント」の線と「ベース」の線を両方を選択して「選択した項目を複製」

      スクリーンショット 2016-12-10 1.25.13.png

       

      複製した線の「変形」効果で垂直方向に「-34.64」を入れ込んでOK

      カスタム値:-36.64mm

      スクリーンショット 2016-12-10 1.25.38.png

      スクリーンショット 2016-12-10 1.25.55.png

       

      色を変更

      スクリーンショット 2016-12-10 1.26.19.pngスクリーンショット 2016-12-10 1.26.36.png

      してどんどん積み重ねましょう。

       

       

      今回は7段まで用意しました。

      スクリーンショット 2016-12-10 1.28.48.png

      色は後で変更したり非表示にしたりしますので適当でOKです。

       

      用意できたところでアピアランスパレットの目玉アイコンをクリックして

      一旦全ての線を非表示にします。

      スクリーンショット 2016-12-10 1.29.24.png

      スクリーンショット 2016-12-10 1.30.28.png

      これが基本の1列となります。

      そしてこれを複製していくのですが、後で角度を変える場合に前面・背面の関係が影響しますので

      見せる角度も意識した方向に複製していきます。

      (「位置で前後」スクリプトを使う場合は気にしなくて良いです。)

       

      とりあえず右下が前面に来るように意識して複製していきましょう。

      オブジェクト>変形>移動

      スクリーンショット 2016-12-10 1.30.48.png

       

      水平方向に「20mm」と入力して「コピー」

      スクリーンショット 2016-12-10 1.31.02.png

       

      スクリーンショット 2016-12-10 1.31.18.png

      (元オブジェクトの選択状態の残骸が…)

       

      オブジェクト>変形>変形の繰り返し

      スクリーンショット 2016-12-10 1.31.38.png

      スクリーンショット 2016-12-10 1.31.53.png

      これを繰り返して全部で5つになるまで複製します。

       

      全てを選択します。

      スクリーンショット 2016-12-10 1.32.28.png

      スクリーンショット 2016-12-10 1.32.39.png

       

      今度は下方へ複製

      オブジェクト>変形>移動

      スクリーンショット 2016-12-10 1.32.58.png

      スクリーンショット 2016-12-10 1.33.16.png

      垂直方向へ「20mm」と入力して「コピー」

       

      スクリーンショット 2016-12-10 1.33.24.png

       

      オブジェクト>変形>変形の繰り返し

      スクリーンショット 2016-12-10 1.33.39.png

      を繰り返して縦も同じように5列になるまで複製します。

       

      全てを選択します。

      スクリーンショット 2016-12-10 1.34.08.png

      スクリーンショット 2016-12-10 1.34.32.png

       

      選択解除してしまうとどこに元の線があるか分からなくなってしまいますのでガイドを作成しておきましょう。

      編集>コピー

      スクリーンショット 2016-12-10 1.35.09.png

       

      ガイドに変換するのに余分なアピアランスが残っていると処理が重くなる気分がするので(気がするだけ?)

      アピアランスパネルで「アピアランスを消去」ボタン

      スクリーンショット 2016-12-10 1.35.31.png

       

      表示>ガイド>ガイドを作成

      スクリーンショット 2016-12-10 1.36.37.png

      スクリーンショット 2016-12-10 1.37.20.png

      (操作が前後したためスクリーンショットに選択状態の残骸が見えますが気にしないで下さい。)

       

      編集>前面へペースト

      スクリーンショット 2016-12-10 1.37.21.png

      スクリーンショット 2016-12-10 1.38.13.png

       

      ここから狙った形にブロックを表示させて形を作っていきます。

       

      中心の幹から積み上げましょうか。

      真ん中のオブジェクトを選択します。

      スクリーンショット 2016-12-10 1.39.28.png

       

      アピアランスパネルで下二つの線を表示します。(最終的に隠れてしまうジョイント部分は非表示のままでも構いません)

      スクリーンショット 2016-12-10 1.39.57.png

       

      その線の色を変更します。

      スクリーンショット 2016-12-10 1.40.20.png

      スクリーンショット 2016-12-10 1.40.39.png

      適当に木の幹っぽい色

       

      同様に一つ一つ表示しては色を付けていきます。

      スクリーンショット 2016-12-10 1.42.10.png

       

      ざっくり中心の1本全て色を付けて表示しました。

      スクリーンショット 2016-12-10 1.42.50.png

       

      続いてその隣のオブジェクトを選択して同様に愛アランスパネルで表示&色付け

      スクリーンショット 2016-12-10 1.43.54.png

       

      同じ表示状態&色であればスポイトツールが使えます。

      スクリーンショット 2016-12-10 1.45.07.png

       

      中央を挟んで向かい側のオブジェクトを選択して、先ほど設定したオブジェクトのアピアランスを拾います。

      スクリーンショット 2016-12-10 1.45.18.png

       

      一発で複製

      スクリーンショット 2016-12-10 1.45.43.png

       

      中心の前後も同様に選択してアピアランスを拾います

      スクリーンショット 2016-12-10 1.46.26.pngスクリーンショット 2016-12-10 1.46.50.png

       

      メンドクサイのでその角になるオブジェクトもまとめて…

      スクリーンショット 2016-12-10 1.47.17.png

       

      次に再外のオブジェクトを選択

      スクリーンショット 2016-12-10 1.47.42.png

       

      アピアランスパレットで表示&色指定

      スクリーンショット 2016-12-10 1.48.34.png

       

      周囲の同様のオブジェクトを選択してスポイトでピアランスを拾います。

      スクリーンショット 2016-12-10 1.49.08.png

       

      オマケで裏側に果実を模したものを表示してみましょうか

      スクリーンショット 2016-12-10 1.49.58.png

       

      必要なパーツの表示&色付けができたら

      全てを選択して

      スクリーンショット 2016-12-10 1.51.02.png

       

      オブジェクト>グループ

      スクリーンショット 2016-12-10 1.51.23.png

       

      もう今回はこれで必要な部品は色付け終了と言うことでガイドも消去しておきます。

      表示>ガイド>ガイドを消去

      スクリーンショット 2016-12-10 1.52.47.png

      スクリーンショット 2016-12-10 1.53.35.png

      ガイド消えました。

       

      再びグループ化したオブジェクトを選択

      スクリーンショット 2016-12-10 1.54.03.png

      スクリーンショット 2016-12-10 1.55.03.png

       

      グループに対して上下を縮小します。

      効果>パスの変形>変形

      スクリーンショット 2016-12-10 1.55.47.png

      スクリーンショット 2016-12-10 1.56.25.png

      拡大・縮小の「垂直方向」に「50%」と入力してOK

      カスタム縮小率:50%

       

      これで完成です!!!!

       

       

      あとは回転ツールでグリグリ回してみましょう。

      回転ツールを選択して

      スクリーンショット 2016-12-10 1.57.03.png

       

      下の方を右から左へ少しドラッグ

      スクリーンショット 2016-12-10 1.59.00.png

      隠れていたブロックも見えるようになりました。

       

      さらに回転

      スクリーンショット 2016-12-10 1.59.19.png

       

      さらに回転

      スクリーンショット 2016-12-10 1.59.50.png

       

      もーっと回転すると…

      スクリーンショット 2016-12-10 2.00.37.png

      何かおかしな事に!

       

      これはグループ化したオブジェクトの中で前面のオブジェクトが奥側に回ってしまったために起こります。

      パスの前後関係を下にあるものほど前面にもってくれば解消されますが、全部手動でやるのはメンドクサイですね。

      ここで

      【Illustratorスクリプト】位置で前後・サイズで前後にする。【CS4以降対応】

      この記事で紹介したスクリプトの出番です。

      forward_backward_from_position_and_size.zip

       

      ↑ここからもダウンロード出来ます。

       

      ファイル>スクリプト>位置で前後

      スクリーンショット 2016-12-10 2.00.53.png

       

      パネルが表示されますので

      スクリーンショット 2016-12-10 2.01.09.png

      グループが選択された状態で「下を前面に」ボタンを押します。

       

      スクリーンショット 2016-12-10 2.01.22.png

      一発で意図通りの前後関係になりました。

       

      さらにぐる〜〜〜っと回しておかしくなっても

      スクリーンショット 2016-12-10 2.01.43.png

       

      ボタン一発

      スクリーンショット 2016-12-10 2.02.03.png

       

      以上です。

      3D機能が進化したと思わせることができるかも…

       

      長い記事にお付き合い頂きありがとうございました。

       

       

      ■オマケギャラリー

      スクリーンショット 2016-12-10 2.08.21.png

      ブロック積み上げたロゴ

      必要最低限のオブジェクトだけにすれば動作が比較的軽くなります。

       

       

      スクリーンショット 2016-12-10 2.11.48.png

      これは最小ブロックをジョイントの○1つ分にして作り込みましたが、

      ブロックの位置が掴みきれなくなった上に描画負荷も高くて

      かえって修正しづらくなってしまいました。

       

       

      ■距離計算用資料

      厚みのイメージ.png

      回転したイメージ.png

      複数のオブジェクトの組み合わせは厳密には違うんですが、

      自分が理解しやすいのと計算方法は間違ってなさそうですので参考程度に。

      ブログランキング・にほんブログ村へ
      にほんブログ村
      | タナカ | Illustrator | 23:34 | comments(0) | - | - |
      Illustratorで多数のアンカーポイント上に一気に同じオブジェクトを置いてみよう。
      0

        JUGEMテーマ:Adobe Creative Cloud

        スクリーンショット 2016-11-11 0.39.17.png

         

        以前Illustratorで選択したパスの全てのアンカーポイント上に同じオブジェクトを置きたいことがあったんですが

        良い方法が思いつかずコピーして全部手動で置いた記憶がうっすらあります。

        今となっては状況までは思い出せず…

        忘れた頃に「コレダ!」みたいな方法が思いつくんですよねぇ。

         

        今回はアンカーポイント上にオブジェクトを置く典型的な例の星座を作成してみたいと思います。

        簡単に説明するとアンカーポイントを「余分なポイント(孤立点)」にして散布ブラシを適用します。

        (部分的にCS5以降の機能を使用します)

         

        「余分なポイント」を使いますので最終的には

        選択>オブジェクト>余分なポイント

        編集>アピアランスを分割

        の作業をしないで印刷に回すと事故る可能性がありますので

        余所に出す場合はアピアランスを分割しましょう。

         

        では手順です。

        (材料作るところからですのでかなり長めです)

        材料をもう用意されているようでしたらこのあたりから読んで下さい。

         

        サンプルとして夜空の写真を用意しました。

        特に利用制限はありませんのでご自由にお使い下さい。

        ※この画像を使用して発生したトラブルや損害につきましては、責任を負いかねますのでご了承下さい。

         

        では、まず下絵の星空写真をIllustratorで開きます。

        スクリーンショット 2016-11-11 0.40.38.png

        今回からCC2017で作業してます。

         

        スクリーンショット-2016-11-11-0.41.17.jpg

        開きました。

        アートボードが合っていませんので合わせましょう。

         

        アートボードツールに切り替えて

        スクリーンショット 2016-11-11 0.42.05.png

         

        コントロールパネルのプリセットから「オブジェクト全体に合わせる」を選択。

        スクリーンショット 2016-11-11 0.42.27.png

         

        スクリーンショット-2016-11-11-0.43.07.jpg

        これでアートボードの線が気になりません。

         

        レイヤーをロックします。

        スクリーンショット 2016-11-12 23.50.40.png

         

        そして新規レイヤーを作成

        スクリーンショット 2016-11-12 23.51.34.png

        スクリーンショット 2016-11-12 23.51.43.png

         

         

        新しく作ったレイヤーで星座の線を描きます。

        スクリーンショット-2016-11-12-23.52.26.jpg

        線の色は今回

        R:0

        G:170

        B:255

        にしてみました。

         

         

        アンカーポイント上に置くオブジェクト、今回は星の形(☆)を作成します。

        ☆型はサイズの中心点と重心の位置がズレます。

        中心点と重心は同じ方が好ましいですので重心用にまずは円を作成します。

        (散布ブラシの元となりますので中心点の位置が非常に重要となります。)

         

        楕円形ツールを選択して

        スクリーンショット 2016-11-12 23.53.52.png

         

        邪魔にならない場所をクリックして

        スクリーンショット 2016-11-12 23.54.14.png

        幅5mm、高さ5mmの円を作成します。

        スクリーンショット 2016-11-12 23.54.27.png

         

        重心用ですので塗りも線も色はナシにします。

        スクリーンショット 2016-11-12 23.55.04.png

         

        次に星を作成します。

        スターツールに切り替えて

        スクリーンショット 2016-11-12 23.55.18.png

         

        先ほどの円の付近でクリックして

        スクリーンショット 2016-11-12 23.55.41.png

        第1半径:2.5mm(円の幅、高さの半分)

        第2半径:1.5mm

        点の数:5

        でOK

         

        スクリーンショット 2016-11-12 23.56.41.png

        スクリーンショット 2016-11-12 23.57.02.png

        線を

        R:0

        G:170

        B:255

        塗りを

        R:255

        G:255

        B:0

        としてみました。

        後々色を変更する可能性がある場合はグローバルカラーにしておくと良いと思います。

         

        線幅と角の形状も少し変更

        スクリーンショット 2016-11-12 23.57.54.png

        線幅:4pt

        角の形状:ラウンド結合

         

        アピアランスパレットで線を塗りの背面に移動します。

         

        全体的にはこのような感じです。

        スクリーンショット 2016-11-12 23.58.37.png

         

        先に作成した円と位置を合わせます。

        ※環境設定の一般で「プレビュー境界を使用」のチェックは外しておいて下さい。

        選択ツールに切り替えて

        スクリーンショット 2016-11-12 23.59.17.png

         

        円と星両方を選択します。

        スクリーンショット 2016-11-12 23.59.18.png

         

        コントロールパネルの「整列」、もしくは整列パネルで

        整列の基準を「選択範囲に整列」にします。

         

        スクリーンショット 2016-11-12 23.59.39.png

        「水平方向中央に整列」をクリックして

         

        スクリーンショット 2016-11-12 23.59.58.png

        「垂直方向に整列」をクリックします。

         

        スクリーンショット 2016-11-13 0.00.10.png

        星の上部アンカーポイントと円の上部アンカーポイントが重なり

        円と星の重心が揃いました。

         

        ただ星に線幅をつけましたので円より上に線がちょっとはみ出します。

        ブラシに登録するとやはり中心点と重心にズレが発生しますので

        円を大きくして星が完全に内側になるようにしてしまいましょう。

         

        shiftキーを押しながら星オブジェクトをクリックして選択を解除します。
        スクリーンショット 2016-11-13 0.02.01.png

        スクリーンショット 2016-11-13 0.02.12.png

         

        拡大・縮小ツールをダブルクリック

        スクリーンショット 2016-11-13 0.02.39.png

        スクリーンショット 2016-11-13 0.03.17.png

        元のオブジェクトの大きさと線幅を考慮して拡大率を設定します。

        今回は150%に設定してOK。

         

        スクリーンショット 2016-11-13 0.03.31.png

        星が線幅も含めて完全に円の内側になりました。

         

        選択ツールに切り替えて

        スクリーンショット 2016-11-13 0.03.55.png

         

        円と星両方を選択

        スクリーンショット 2016-11-13 0.04.04.png

         

        選択したオブジェクトををブラシパレットへドラッグしてブラシ登録します。

        スクリーンショット 2016-11-13 0.04.25.png

         

        ブラシの種類は「散布ブラシ」

        スクリーンショット 2016-11-13 0.04.42.png

        スクリーンショット 2016-11-13 0.05.07.png

        設定は特に変更しなくてOKです。

         

        登録したオブジェクトはもう不要ですので削除します。

        スクリーンショット 2016-11-13 0.05.32.png

         

        これで材料の準備が完了しました。

         

        いよいよアンカーポイントを「余分なポイント」にする作業に入ります。

         

        星座の線を全て選択します。

        スクリーンショット 2016-11-13 0.06.22.png

        スクリーンショット-2016-11-13-0.06.43.jpg

         

        線をコピーします。

        スクリーンショット 2016-11-13 0.06.59.png

         

        前面へペースト

        スクリーンショット 2016-11-13 0.07.18.png

         

        選択>オブジェクト>方向線のハンドル

        スクリーンショット 2016-11-13 0.07.39.png

         

        これでアンカーポイント以外の辺部分が全て選択されます。

        スクリーンショット-2016-11-13-0.08.00.jpg

         

        その「辺」部分を消去

        スクリーンショット 2016-11-13 0.08.40.png

        スクリーンショット-2016-11-13-0.08.57.jpg

        これでアンカーポイントを全て「余分なポイント」にすることができました。

         

        あとはこれに先ほどの散布ブラシを適用するだけ…

        と言いたいところなんですが、この状態だと線が分岐している部分はアンカーポイントが複数重なっているんです。

        そこで重なっているアンカーポイントを一つにする作業が入ります。

         

        以前の記事

        IllustratorCS5以降の「連結」で色々な形状を作成&検証

        で検証中にCS5以降の「連結」で重なった複数の端点が一つにというのを知りましたので、

        その挙動を利用します。

         

        オブジェクト>パス>連結

        スクリーンショット 2016-11-13 0.10.08.png

        スクリーンショット-2016-11-13-0.10.27.jpg

        結構グチャグチャになりますが、この時に全く同じ位置にあった「余分なポイント」は一つになります。

         

        再び

        選択>オブジェクト>方向線のハンドル

        スクリーンショット 2016-11-13 0.11.04.png

        スクリーンショット-2016-11-13-0.11.19.jpg

         

        選択された辺を消去

        スクリーンショット 2016-11-13 0.11.40.png

        これで重なったポイントがない「余分なポイント」ができました。

         

        ※分岐しているポイントが無ければ連結からここまでの作業は不要です。

         

        あとはこの「余分なポイント」に先ほどの散布ブラシを適用するだけです。

        スクリーンショット-2016-11-13-0.13.27.jpg

        スクリーンショット-2016-11-13-0.13.48.jpg

        これで全てのアンカーポイントに一発でオブジェクトを配置することが出来ました。

         

        線への適用ですので大きさを変更するときは線幅を変更します。

        線幅を2ptにすると

        スクリーンショット 2016-11-13 0.16.48.png

        スクリーンショット-2016-11-13-0.17.25.jpg

        縦横2倍の大きさのオブジェクトになります。

         

        散布ブラシにまた別のオブジェクトを登録すればオブジェクトの差し替えも可能です。

         

        最大のデメリットはブラシに登録するオブジェクトはグラデーションが使えないという事でしょうか。

         

        色々想定しながら書いていたら無駄に長くなってしまいましたが、

        手順はそれ程難しくありませんので

        既にあるアンカーポイントを利用して同じオブジェクトを配置したい場合はかなり楽出来ると思います。

         

         

         

        ※注意点

         

        アピアランスを分割していない状態では回転しても星そのものの向きは変わりません。

        全てを選択してグループ化しても、

        散布ブラシの「回転の基準」を「ページ」ではなく「オブジェクト」にした場合でも

        「余分なポイント」には方向がないため星の向きを変えることは出来ません。

        (これはこれで何かに利用できそう…)

         

        散布ブラシの「回転」の設定を変更すれば星そのものの向きを変えることが可能ですが

        他のオブジェクトと同時に回転させたときに角度がシンクロしませんのであまり実用的ではないです。

         

        グループ化して

        効果>パスの変形>変形

        を使うとオブジェクトと同時に散布ブラシの向きもシンクロして回転させる事ができます。


         

        さらに余談です。

        ※ココ以降は検証ですので気になる方のみ見てください。

         

        「余分なポイント」が1種類のブラシのみで使われている場合はそれ程気にしなくて良いですが、

        複数の種類のブラシを使用していたり、本来の「余分なポイント」が別の事由から作成されてしまっていたりすると

        同じブラシを適用した「余分なポイント」のみを選択するのが困難になります。

        ですので、ブラシを適用した直後の選択状況を記憶させておくと

        スクリーンショット 2016-11-13 0.12.46.pngスクリーンショット 2016-11-13 0.13.09.png

        後から特定のブラシの「余分なポイント」だけを選択しやすくなります。

         

        また、この記憶させた選択範囲の再選択にも注意点がありまして

        何も選択されていない状態から記憶させた選択範囲を選択すると

        スクリーンショット 2016-11-13 0.14.28.png

         

        アンカーポイントの選択自体はされているようなんですが、

        選択されたオブジェクトに対するメニューがグレーアウトとなります。

        スクリーンショット 2016-11-13 0.15.43.png

        スクリーンショット 2016-11-13 0.15.12.png

         

        回避方法は再び同じブラシを適用してみたり

        スクリーンショット 2016-11-13 0.16.03.png

        他にもカーソルキーで1回移動してアンドゥなど、

        ワンアクションはさめばメニューがアクティブになるようです。

        スクリーンショット 2016-11-13 0.16.31.png

         

        長いネタにお付き合い頂いてありがとうございました。

        ブログランキング・にほんブログ村へ
        にほんブログ村
        | タナカ | Illustrator | 00:13 | comments(0) | - | - |
        Illustratorで風のような効果
        0

          JUGEMテーマ:Adobe Creative Cloud

          スクリーンショット 2016-10-09 0.35.04.png

           

          Illustratorで風のような効果を表現してみたいと思います。

          上の画像でいうところのテキストの右側にビュンビュン伸びてるヤツです。

           

          文字に適用した場合でもアウトライン化も必要としませんので打ち替えやフォント変更も可能です

          (かなり負荷が高いですけどね…こんなんばっかりだなぁ)

           

          簡単に言えば光跡というか残像というかの部分を散布ブラシに設定して線に適用するだけです。

           

           

          では早速手順を。

           

          まずブラシの元を作成します。

          長方形ツールで

          スクリーンショット 2016-10-09 22.30.22.png

           

          適当な正方形を作成します。

          スクリーンショット 2016-10-09 22.30.44.png

          とりあえず10mm×10mm。

          大きさは後から別途調整しますので正方形であればサイズは何でも構いません。

          スクリーンショット 2016-10-09 22.30.56.png

           

          色を設定

          スクリーンショット 2016-10-09 22.31.20.png

          塗り黒、線なしにします。

           

          作成した正方形が選択された状態で

          回転ツールをダブルクリックして

          スクリーンショット 2016-10-09 22.32.03.png

           

          45度傾けます。

          スクリーンショット 2016-10-09 22.32.24.png

           

          ダイレクト選択ツールに切り替えて

          スクリーンショット 2016-10-09 22.32.40.png

           

          左側の頂点を囲んでそのアンカーポイントだけ選択します。

          スクリーンショット 2016-10-09 22.33.00.png

          スクリーンショット 2016-10-09 22.33.09.png

           

          編集>カット

          スクリーンショット 2016-10-09 22.33.20.png

          スクリーンショット 2016-10-09 22.33.47.png

           

          オブジェクト>パス>連結

          スクリーンショット 2016-10-09 22.34.00.png

           

          編集>背面へペースト(前面でも可)

          スクリーンショット 2016-10-09 22.34.22.png

          スクリーンショット 2016-10-09 22.34.42.png

           

          塗りをなしに設定

          スクリーンショット 2016-10-09 22.35.45.png

           

          オブジェクト>パス>連結

          スクリーンショット 2016-10-09 22.36.00.png

           

          ※上の2回の「連結」は気分的なものですので必須ではないです。

           

          選択ツールに切り替えて

          スクリーンショット 2016-10-09 22.36.25.png

           

          先ほどの2つのオブジェクトを選択します。

          スクリーンショット 2016-10-09 22.36.35.png

          スクリーンショット 2016-10-09 22.36.41.png

           

          変形パレットで

          スクリーンショット 2016-10-09 22.55.51.png

          W : を10mm(極端に長くしたり短くしたりしたい場合はそれに合わせて調節して下さい。)

          H : を0.353mm(1pt)

          とします。

           

          ブラシパレットを表示して

          選択されているオブジェクトをブラシに追加します。

          スクリーンショット 2016-10-09 22.56.09.png

           

          新規ブラシダイアログで「散布ブラシ」を選択してOK

          スクリーンショット 2016-10-09 22.56.47.png

           

          散布ブラシオプションを以下の様に設定します。

          スクリーンショット 2016-10-09 22.57.08.png

          サイズ : ランダム「10%」〜「100%」

          間隔 : ランダム「10%」〜「20%」※自分の環境では最小値を1%にすると負荷が高すぎなのか後から調節が効かなくなりました。

          散布 : 固定「0%」(デフォルト)

          回転 : 固定「0°」(デフォルト)

          回転の基準 : 「ページ」(デフォルト)

          彩色 : 「淡彩」(CS5以前は「色合いを付ける」)

          キーカラーを黒にしてOK。

           

          元のオブジェクトは不要ですので消去します。

          スクリーンショット 2016-10-09 22.57.24.png

           

          続いて風の効果を適用するオブジェクトを用意。

          今回テキストオブジェクトとしました。

          スクリーンショット 2016-10-09 22.58.04.png

          ヒラギノ角ゴシックW8 72ptと大きめのサイズです。

          テキストオブジェクトの初期の塗りはパスオブジェクトと少し仕様が異なり、線と塗りの上下を入れ替えられませんので、

          手っ取り早く初期のグラフィックスタイルを適用してパスオブジェクト仕様の塗りに変えちゃいましょう。

          スクリーンショット 2016-10-09 22.58.41.png

          選択ツールで文字が選択された状態で、

          グラフィックスタイルパレットから「初期設定のグラフィックスタイル」をクリック。

          スクリーンショット 2016-10-09 22.58.52.png

          こうなります。

           

          念のため確認。

          テキストツールで選択すると

           

          スクリーンショット 2016-10-09 22.59.08.png

          線も塗りもなしとなっています。

           

          再び選択ツールで選択して

          アピアランスパレットで「線」を塗りの下へドラッグして移動します。

          スクリーンショット 2016-10-09 22.59.35.png

          スクリーンショット 2016-10-09 22.59.46.png

          線が背面になります。

           

          塗りに好きな色を付けます。

          スクリーンショット 2016-10-09 23.00.12.png

           

          アピアランスパレットで「線」を選択して

          スクリーンショット 2016-10-09 23.00.38.png

           

          先ほど作った散布ブラシを適用します。

          スクリーンショット 2016-10-09 23.00.56.png

          スクリーンショット 2016-10-09 23.01.07.png

          この状態だとちょいちょいはみ出してるのが気になりますので、

          少し内側に引っ込めます。

           

          アピアランスパレットで線が選択された状態で

          効果>パス>パスのオフセット

          スクリーンショット 2016-10-09 23.01.38.png

           

          プレビューにチェックを入れてはみ出しが来ならなくなるところまでオフセット値を下げます。

          スクリーンショット 2016-10-09 23.03.48.png

          今回は-0.3528mm(1pt)分でギリギリOKかな?

          よーく見ると風上側がまだ僅かに見えてる部分がありますが許容範囲です。

          あまり下げすぎても上下が狭くなってしまいますので

          どうしても気になる場合は

          効果>パスの変形>変形で風下方向に少しずらしましょう。

           

          基本的にはこれで終了ですが、

          線を重ねたりするともう少し躍動感がでますので

          線を増やして重ねた表現もしてみたいと思います。

           

          まずアピアランスパレットで不透明度を変更します。

          スクリーンショット 2016-10-09 23.04.07.png

          スクリーンショット 2016-10-09 23.04.34.png

          黒い残像で使う場合は描画モードを「乗算」にした方が良いです。

          不透明度は20%程度。

          スクリーンショット 2016-10-09 23.04.45.png

           

          この線をアピアランスパレットで複製します。

          線を選択して複製ボタン。

          スクリーンショット 2016-10-09 23.05.36.png

          スクリーンショット 2016-10-09 23.05.59.png

           

           

          何度か線の複製を繰り返すと

          スクリーンショット 2016-10-09 23.06.52.png

          このように濃淡がついて躍動感が出ると思います。

           

           

          ちなみに一番上の画像は(背面にグラデーションを敷いて)

          スクリーンショット 2016-10-09 23.07.52.png

          テキストオブジェクトの塗りにグラデーションを設定

          (ウィンドウ>スウォッチライブラリ>グラデーション>メタル の「銅」です。)

          ブラシを適用していない通常の4ptの線を追加(色は白)

          その線に対して

          効果>ぼかし>ぼかしガウス

          ブラシを適用した線を幅3ptに変更、色を白にして描画モードを「スクリーン」に、不透明度も30%としました。

          テキストに白いフチぼかしのおかげではみ出しがごまかせますのでオフセットも不要となり削除。

           

          もちろんテキスト以外にも適用できます。

          イラストなどをグループ化してグループに線を追加。

          その線を内容の背面へもっていってブラシを適用。

          スクリーンショット 2016-10-09 23.13.53.png

           

          オブジェクトを選択してブラシパレットの「選択中のオブジェクトのオプション」ボタンで

          適用したブラシに対して個別で設定も変更可能ですので

          この様に後から回転に数値を入れて角度を変えることも可能です。

           

          複数ブラシを適用している場合は全てのブラシに対して設定する必要がありますが、

          変更する部分が同じであれば一つ変更して、

          アピアランスパレットで他のブラシを削除

           

          変更したブラシを複製

          するのがが手っ取り早いと思います。

           

           

          うーん散布ブラシ楽しい。

          ブログランキング・にほんブログ村へ
          にほんブログ村
          | タナカ | Illustrator | 01:56 | comments(0) | - | - |
          IllustratorCS5以降の「連結」で色々な形状を作成&検証
          0

            JUGEMテーマ:Adobe Creative Cloud

             

            スクリーンショット 2016-10-06 22.44.30.png


            スクリーンショット 2016-10-06 22.41.16.png

            以前に「Illustratorで「連結」を使って色々な形状を作成」という記事を書きましたが、

            今回はCS5からパワーアップした「連結」機能について色々試してみました。

             

            CS4まではダイレクト選択ツールでオープンパスの端点(孤立点でもOK)

            2つだけを選択して連結しないとエラーダイアログが出ましたが、

            CS5以降はオープンパス全体を選択しても連結できるようになりました。

            しかも複数のオープンパスを一度に連結できます。

             

            ショートカットキーはCommand(WindowsはCtrl)+Jですので

            下のような場合も連結自体はCommand+Jを2回押すだけです。

            スクリーンショット 2016-10-06 23.04.54.png

             

            端点となるアンカーポイント同士の距離が一番近いものから順番に繋げていって

            最後の距離が一番遠い部分だけ繋がないという仕様のようです。

             

            例えば下のように

            あるオブジェクトを選択してから

            メニューの

            選択>オブジェクト>方向線のハンドル

            でパスのセグメントのみを選択した後に削除するとそのオブジェクトを構成していたアンカーポイントだけ孤立点として残ります。

            その孤立点が選択された状態で連結すると

            この様に距離が近いアンカーポイントから繋がってそうなのがなんとなく分かります。

            そして最後の部分は繋ぎません。

             

            最後の部分が繋がらないのは

            恐らく下の様な並びのパスを連結したときは最初と最後は繋がらない方が有り難いからだと思います。

            スクリーンショット 2016-10-06 23.08.43.png

             

            これもパス同士の距離が変われば繋がり方も変わります。

            スクリーンショット 2016-10-06 23.09.11.png

             

            となると、アンカーポイント同士が同じ距離だった場合は何が優先なのか気になりますね。

            パスの方向も関係あるかも知れませんので片側を矢印にして試してみました。

            スクリーンショット 2016-10-06 23.10.04.png

            方向による影響はありそうですが、一部おかしな部分もありますので保証は無さそうです。

            前面か背面かは違いがありませんでした。

             

            距離が同じ場合はアンカーポイントの数も影響するようで

            30本の平行線を連結したときは綺麗な矩形波状に繋がるのに対し、

            スクリーンショット 2016-10-06 23.07.33.png

            29本の時には途中で斜めになってしまいました。

            スクリーンショット 2016-10-06 23.08.07.png

            斜めになった部分から端点までを選択して反転すれば矩形波状に直せます。

             

            何度か書き直してやってみたところ自分が検証した範囲では

            偶数本の時は毎回矩形波状になりました。

            奇数本の時は斜めに繋がる場合があったりなかったりと

            再現性がありませんでしたので、Illsutrator内部での位置計算の誤差で変わるのかな?

             

            そして、途中が斜めに繋がるというのが

            繋げる順番の仕様を確認する上で重要なポイントで

             

            上でも書きましたが、最初に全ての端点・孤立点の中から一番近いところを繋げたら

            次にその繋がり始めた部分からでは無く、

            また残った端点の中から一番近いもの同士を繋げて…

            というのを繰り返して最終的に一番遠い部分が残る。

            となっているようです。

            上の連結で斜めになっている部分は最後のしわ寄せが原因だと思います。

             

             

            ちなみに端点同士がピッタリくっついて1周している場合は連結1回でクローズドパスになります。

            重なっている二つのアンカーポイントを一つにしてくれるってとこが興味深いです。

            他の使い道がありそう…

             

            以上で検証終わりですが、

            この事を頭に入れておくと作業スピードも大幅アップ!するかも!

            ガシガシ繋げて面白い形を作ってみましょう。

             

            あ、遠い端点同士を繋げたい場合はきちんとその繋げたいポイントだけ選択して連結して下さいね。

             

             

            ■オマケ

            一番上の画像のように等間隔でハの字型の線を描く方法。

            1.横一色線を引きます。

            スクリーンショット 2016-10-06 23.28.26.png

             

            2.効果>パスの変形>ジグザグ

            スクリーンショット 2016-10-06 23.28.50.png

             

            3.オブジェクト>アピアランスを分割

            スクリーンショット 2016-10-06 23.29.10.png

             

            4.ダイレクト選択ツールで片方の端点の選択を解除して「選択したアンカーポイントでパスを切断」ボタン

             

            ※一部選択解除しないと「選択したアンカーポイントでパスを切断」ボタンは出現しません。

             

            5.オブジェクト>変形>個別に変形

            水平方向を60%等100%より小さくしてOK

            スクリーンショット 2016-10-06 23.29.50.png

            これで等間隔にハの字型の線が並びます。

            ブログランキング・にほんブログ村へ
            にほんブログ村
            | タナカ | Illustrator | 00:15 | comments(0) | - | - |
            Illustratorでオブジェクトが重なっている部分のみの線分を抽出してみよう
            0
              JUGEMテーマ:Adobe Creative Cloud
              スクリーンショット 2016-06-02 22.38.49.png

              Illustratorでシマシマの線にマスクをかけてマスクがかかっている部分だけ線を抽出したいと思った事はありませんか?
              大概はマスクをかけたまま使ったり、シマシマのパターンを作成して塗ってしまえば用が済んでしまうんですが、
              線の端の効果を生かしたいときにマスクのままだと上手くいかず、中身の線分を抽出したくなるんですよねぇ。

              ということで今回はオブジェクトが重なった部分のみの線分を抽出してみたいと思います(※マスクは使いません)

              まずシマシマを用意します。
              ペンツールを選択して
              スクリーンショット 2016-06-02 23.46.47.png

              塗りを「なし」にして
              スクリーンショット 2016-06-02 23.47.03.png

              シマシマの元となる線を描きます。
              スクリーンショット 2016-06-02 23.47.32.png
              直線でももちろんOK

              選択ツールに切り替えて
              スクリーンショット 2016-06-02 23.47.44.png

              描いたパスを選択
              スクリーンショット 2016-06-02 23.48.05.png

              コピーして
              スクリーンショット 2016-06-02 23.48.30.png

              前面へペースト
              スクリーンショット 2016-06-02 23.48.45.png

              ペーストしたものを横へ移動させます。


              両方を選択して
              スクリーンショット 2016-06-02 23.50.00.png

              オブジェクト>ブレンド>作成
              スクリーンショット 2016-06-02 23.50.36.png
              スクリーンショット 2016-06-02 23.51.00.png
              スカスカですので密度を調節します。

              オブジェクト>ブレンド>ブレンドオプション
              スクリーンショット 2016-06-02 23.51.11.png

              間隔を「ステップ数」にしてお好みの数値を入れて「OK」
              スクリーンショット 2016-06-02 23.51.41.png

              オブジェクト>ブレンド>拡張
              スクリーンショット 2016-06-02 23.52.02.png
              スクリーンショット 2016-06-02 23.52.27.png
              これでシマシマ完成。

              オブジェクト>ロック>選択
              でシマシマを一旦ロックしておきます。
              スクリーンショット 2016-06-02 23.53.52.png

              次に線分を切り抜きしたいオブジェクトを用意します。
              色は線の色とかけ離れた色にして下さい。
              スクリーンショット 2016-06-02 23.54.30.png
              今回は小塚ゴシックHで入力したテキストを使用しました。
              色はマゼンタ100%。

              テキストの状態だと線を抽出できませんので、アウトラインを作成します。
              書式>アウトラインを作成

              スクリーンショット 2016-06-02 23.55.31.png

              次に長方形ツールを選択
              スクリーンショット 2016-06-02 23.55.42.png

              シマシマ部分も全て覆う長方形を描きます。
              スクリーンショット 2016-06-02 23.56.06.png
              スクリーンショット 2016-06-02 23.56.26.png

              その長方形を最背面へもっていきます。
              オブジェクト>重ね順>最背面へ
              スクリーンショット 2016-06-02 23.56.38.png
              スクリーンショット 2016-06-02 23.56.53.png

              選択>全てを選択(シマシマ部分はロック中)
              スクリーンショット 2016-06-02 23.57.07.png
              スクリーンショット 2016-06-02 23.57.21.png

              パスファインダーで「中マド」
              スクリーンショット 2016-06-02 23.57.37.png
              スクリーンショット 2016-06-02 23.57.50.png

              シマシマのロックを解除します。
              オブジェクト>すべてをロック解除
              スクリーンショット 2016-06-02 23.58.01.png
              スクリーンショット 2016-06-02 23.58.15.png

              全てを選択しなおして
              スクリーンショット 2016-06-02 23.58.25.png
              スクリーンショット 2016-06-02 23.58.39.png

              オブジェクト>ライブペイント>作成
              スクリーンショット 2016-06-02 23.58.52.png

              即拡張します。
              オブジェクト>ライブペイント>拡張
              スクリーンショット 2016-06-02 23.59.08.png
              スクリーンショット 2016-06-02 23.59.23.png
              なんとなく線だけ抽出できそうな感じになってきました。

              自動選択ツールに切り替えて
              スクリーンショット 2016-06-02 23.59.38.png

              マゼンタのオブジェクトをクリック
              スクリーンショット 2016-06-02 23.59.49.png
              スクリーンショット 2016-06-03 0.00.01.png

              選択されたオブジェクトを消去します。
              スクリーンショット 2016-06-03 0.00.19.png

              これで線分が抽出できました。
              スクリーンショット 2016-06-03 0.00.36.png

              選択状態
              スクリーンショット 2016-06-03 0.00.55.png


              線の太さやプロファイルを変更してみると

              このようにマスクやパターンでは表現できないものが作成できます。

              横シマももちろんOKですし、先端の形状(矢印)を変更してもアクセント付いていいですね。
              スクリーンショット 2016-06-03 0.05.25.png

              破線やブラシを適用しても先端がきちんと表現できますのでロゴの作成などにも使えるのではないでしょうか。
              スクリーンショット 2016-06-03 0.09.08.png
              スクリーンショット 2016-06-03 0.13.13.png
              日本地図や色々なシルエット形状でやってみるのも面白そうですね。


              自分が一番やりたかったのは写真のハッチング表現。
              Photoshopでグレースケール変換後、
              ポスタリゼーションで階調数を落として階調毎にレイヤー化。
              Illustratorで開いてレイヤー毎にトレース。
              濃い部分ほど線が重なるようにしました。
              スクリーンショット 2016-06-03 0.15.42.png
              絵っぽくなるかと思いましたが結構写真ぽさが残るものですね。
              元の写真をもう少し絵っぽく加工しておいた方が良さそう。

              拡大です。
              スクリーンショット 2016-06-03 0.15.05.png
              線の「入り」と「抜き」を表現したかったのでわざわざ線を抽出したのですが
              この感じだとパターンの塗りで十分だったかもしれません。

              あ、これを元の写真に重ねてたらどうだろう!
              ということでちょっとやってみました。

              水彩画フィルターもかけてみましたがハッチングの目が細かすぎたかな?

              もう少し数値変えたりして色々研究してみたいと思います。
              ブログランキング・にほんブログ村へ
              にほんブログ村
              | タナカ | Illustrator | 07:10 | comments(4) | - | - |
              Illustratorでパスのセグメント(辺)やアンカーポイントを一つおきに選択
              0
                JUGEMテーマ:Adobe Creative Cloud
                スクリーンショット 2016-02-12 0.59.46.png
                Illustratorで「選択範囲を保存」って使ってますか?
                ワタクシほぼ使ったことなかったんですが、
                検証のネタにしようと仕様を調べていたところ、
                思わぬ特徴を発見!
                アンカーポイントやセグメントを一つおきに選択するする方法を見つけました。


                ■アンカーポイント編

                ありがちな第1半径と第2半径の差が少なくアンカーポイントも多いスター(いわゆるバクダン)の
                外側だけとか内側だけとかを選択したいときなど。

                例えばこんな形。アンカーポイントが160あります。
                スクリーンショット 2016-02-12 23.02.46.png
                早速外側のみ、内側のみを選択できるようにしてみましょう。

                最初に準備としてアピアランスパレットのメニューを出して
                「新規アートに基本アピアランスを適用」にチェックが入っていたら外しておきます。
                スクリーンショット-2016-02-12-23.03.19.png

                スターを選択します。
                スクリーンショット 2016-02-12 23.04.22.png

                もしグループ化されている一部だった場合は「編集モード」に入って作業します。
                スクリーンショット 2016-02-12 23.04.38.png

                まず選択範囲用のオブジェクトを作成します。

                ペンツールを選択して
                スクリーンショット 2016-02-12 23.05.19.png

                少し長めに水平線を描きます。
                スクリーンショット 2016-02-12 23.06.02.png
                あとで繋げますのである程度スターに近め。(近過ぎは×)

                効果>パスの変形>ジグザグ
                スクリーンショット 2016-02-12 23.06.20.png
                スクリーンショット 2016-02-12 23.07.00.png
                折り返しを100にしてOK。
                本来であればここでスターのアンカーポイント数(160)以上の折り返しを作成したいところですが、
                折り返しの最大値が100ですのでとりあえず100でOK。

                折り返しを増やすため直線にアンカーポイントを追加します。(適当な位置でOK)
                スクリーンショット 2016-02-12 23.07.44.png
                念のためもう一箇所追加。
                スクリーンショット 2016-02-12 23.07.52.png
                今回は1箇所で十分ですが多少多くても問題ありません。

                オブジェクト>アピアランスを分割
                スクリーンショット 2016-02-12 23.08.07.png
                スクリーンショット 2016-02-12 23.08.18.png
                ジグザグのアピアランスを分割します。

                ダイレクト選択ツールに切り替えて
                スクリーンショット 2016-02-12 23.08.26.png

                ジグザクの上のポイントだけを囲むように選択。
                スクリーンショット 2016-02-12 23.08.35.png

                上のアンカーポイントだけ選択されました。
                スクリーンショット 2016-02-12 23.08.45.png
                一つおきにアンカーポイントが選択されている状態です。

                選択>選択範囲を保存
                スクリーンショット 2016-02-12 23.09.08.png

                「スター全然関係ないオブジェクトの選択範囲を保存しちゃってどうするの!?」って感じですが気にせず
                スクリーンショット 2016-02-12 23.09.24.png
                好きな名前を付けて保存します。

                同様に下のアンカーポイントを選択
                スクリーンショット 2016-02-12 23.09.33.png
                スクリーンショット 2016-02-12 23.09.45.png
                スクリーンショット 2016-02-12 23.10.03.png
                スクリーンショット 2016-02-12 23.10.17.png
                こちらも選択範囲を保存します。
                これで選択範囲の保存は終了。

                いよいよスターに選択範囲を移動させます。

                はさみツールに切り替えて
                スクリーンショット 2016-02-12 23.10.38.png

                どこでも良いのでスターの頂点を一箇所切断します。
                スクリーンショット 2016-02-12 23.10.56.png

                ペンツールに切換。
                スクリーンショット 2016-02-12 23.11.13.png

                ジグザグの終点から
                スクリーンショット 2016-02-12 23.11.40.png

                先ほど切断したポイントまで線を繋げます。
                スクリーンショット-2016-02-12-23.11.56.png
                この繋げる順番は非常に重要で、逆に繋ぐと今までの作業が無駄になってしまいますので注意してください。

                一度繋がってしまえばジグザグ部分はもう不要ですので削除します。

                ダイレクト選択ツールに切り替えて
                スクリーンショット 2016-02-12 23.12.27.png

                ジグザグ部分を囲むように選択。
                スクリーンショット 2016-02-12 23.12.40.png
                スクリーンショット 2016-02-12 23.12.51.png

                削除します。
                スクリーンショット 2016-02-12 23.13.00.png
                スクリーンショット 2016-02-12 23.13.09.png
                これで先ほど保存した選択範囲がこのスターに移動しました。

                続けて先ほどはさみツールで切断した部分を繋ぎ直します。
                オブジェクト>パス>連結
                スクリーンショット 2016-02-12 23.13.24.png

                あとは選択メニューから
                保存した選択範囲名を選べば
                スクリーンショット 2016-02-12 23.13.41.png
                スクリーンショット 2016-02-12 23.13.56.png
                ダイレクト選択ツールのままだとCCではコーナーウィジェットが出て見づらい…
                選択ツールにしてみます。
                スクリーンショット 2016-02-12 23.14.10.png
                スクリーンショット 2016-02-12 23.14.20.png
                外側のアンカーポイントだけ選択されたのが分かると思います。

                もう一つの方を選べば
                スクリーンショット 2016-02-12 23.14.38.png
                スクリーンショット 2016-02-12 23.14.45.png
                内側のアンカーポイントだけ選択されました。

                あとは、拡大・縮小したり
                スクリーンショット 2016-02-12 23.15.25.png

                アンカーポイントをスムーズポイントに切り替えたり
                スクリーンショット 2016-02-12 23.16.10.png
                スクリーンショット 2016-02-12 23.16.24.png

                選択したアンカーポイントでパスを切断したり
                スクリーンショット 2016-02-12 23.16.51.png
                スクリーンショット 2016-02-12 23.16.59.png
                目的に合わせて加工しましょう。


                ■セグメント編

                正多角形の辺を一つおきに選択してみます。
                スクリーンショット 2016-02-12 23.19.37.png
                正24角形を用意しました。

                基本的にはアンカーポイントの選択と一緒ですが、
                セグメント(辺)を交互に選択しやすい形状を作成するのがポイントです。

                水平線を描きます。
                スクリーンショット 2016-02-12 23.19.57.png

                効果>パスの変形>ジグザグ
                スクリーンショット 2016-02-12 23.20.52.png
                スクリーンショット 2016-02-12 23.21.10.png
                角を丸めますのでアンカーポイント編のときより少し大きさを大きめにします。(6mm)
                折り返しは100で。
                今回は24角形ですのでアンカーポイントの追加無しですすめます。

                続いて
                効果>スタイライズ>角を丸くする
                スクリーンショット 2016-02-12 23.21.22.png
                スクリーンショット 2016-02-12 23.21.38.png
                半径はジグザグの大きさの半分(今回3mm)くらいが良いです。

                オブジェクト>アピアランスを分割
                スクリーンショット 2016-02-12 23.21.48.png
                スクリーンショット 2016-02-12 23.21.58.png

                ダイレクト選択ツールに切り替えて
                スクリーンショット 2016-02-12 23.22.03.png

                上下中央部分のパスを囲むように選択
                スクリーンショット 2016-02-12 23.22.16.png
                スクリーンショット 2016-02-12 23.22.33.png
                選択>選択範囲を保存
                スクリーンショット 2016-02-12 23.22.48.png
                スクリーンショット 2016-02-12 23.23.20.png
                名前を付けて保存します。

                次にジグザグの上のコーナー部分を囲むように選択。
                スクリーンショット 2016-02-12 23.23.34.png
                続けてShiftキーを押しながら下のコーナー部分も囲むように選択。
                スクリーンショット 2016-02-12 23.24.03.png
                ※この時にアンカーポイントを含まないように気をつけます。

                選択>選択範囲を保存
                スクリーンショット 2016-02-12 23.24.16.png
                スクリーンショット 2016-02-12 23.24.27.png
                名前を付けて保存します。

                あとはアンカーポイントの時と同じ作業です。
                はさみツールに切り替えて
                スクリーンショット 2016-02-12 23.24.38.png

                頂点を切断
                スクリーンショット 2016-02-12 23.24.55.png

                ペンツールで
                スクリーンショット 2016-02-12 23.25.14.png

                ジグザグオブジェクトと多角形の切断部を連結
                スクリーンショット 2016-02-12 23.25.31.png
                スクリーンショット 2016-02-12 23.25.41.png

                ジグザグ部分を削除
                スクリーンショット 2016-02-12 23.26.20.png
                スクリーンショット 2016-02-12 23.26.36.png
                スクリーンショット 2016-02-12 23.26.46.png

                切断部分を連結
                スクリーンショット 2016-02-12 23.27.06.png

                あとは選択メニューから選択範囲名を選択すればOK
                スクリーンショット 2016-02-12 23.27.30.png

                ただ、セグメントの場合は交互に選択されている部分がどちらか分かりません。
                スクリーンショット 2016-02-12 23.27.50.png

                カット等して確認してみましょう。
                スクリーンショット 2016-02-12 23.28.18.png
                スクリーンショット 2016-02-12 23.28.29.png
                辺が一つおきに選択されていたのが分かりました。

                こういったオープンパスも同様にして辺を一つおきに選択することが出来ます。
                スクリーンショット 2016-02-12 23.31.22.png

                選択用オブジェクトを作成して繋げて
                スクリーンショット 2016-02-12 23.33.19.png

                不要部分削除
                スクリーンショット 2016-02-12 23.33.37.png

                選択メニューから選択範囲名を選択すればOK
                スクリーンショット 2016-02-12 23.33.59.png

                カットすれば破線の出来上がり〜
                スクリーンショット 2016-02-12 23.34.39.png
                って破線が目的だったら線の設定で破線にすれば良いだけなんですけどね。

                セグメントのみの選択なのでオープンパスの場合、
                元のオブジェクトの端点が孤立点として残ることがありますので注意しましょう。
                スクリーンショット 2016-02-12 23.34.51.png

                ■オマケ
                第1半径と第2半径にそこそこ差があるスターの場合はなげなわツールを使った方が圧倒的に早いです。
                例えばこんな形の赤いスターの内側のアンカーポイントを選択したい場合。
                スクリーンショット 2016-02-12 1.00.06.png

                赤いスターを選択して
                スクリーンショット 2016-02-12 1.00.26.png
                編集モードへ
                スクリーンショット 2016-02-12 1.00.40.png

                なげなわツールを選択。
                スクリーンショット 2016-02-12 1.01.15.png

                内側だけ囲みます。
                スクリーンショット 2016-02-12 1.01.29.png
                スクリーンショット 2016-02-12 1.01.42.png
                内側のアンカーポイントだけを一発で選択出来ました。

                外側は少し面倒ですが、ドーナツ状に囲めば
                スクリーンショット 2016-02-12 1.02.02.png
                スクリーンショット 2016-02-12 1.02.23.png
                こちらも一発で選択出来ます。

                ちなみに全選択状態からoption(alt)押しながら内側だけ選択して
                選択範囲から除外しても出来そうですが…
                スクリーンショット 2016-02-12 1.02.40.png
                スクリーンショット 2016-02-12 1.02.55.png
                選択が全て解除されてしまいました。


                ■まとめ

                長々と書きましたが、一行で書くと

                ジグザグを作成→選択範囲を保存→繋げて削除する。

                実はこれだけです。


                パスの一部が選択された状態で「選択範囲を保存」した時は
                「始点から何番目の部分」という情報で保存されるようですので
                始点をずらせばその分選択範囲が移動することになります。
                選択範囲を保存するオブジェクトの形状次第で2つおきや3つおきの選択も出来そうですね。

                気付いたときには思わず鼻息荒くなっちゃいましたけど
                別のオブジェクトを描画する時間がまるまる掛かかりますので
                ぶっちゃけバクダンの内側だけサイズ変えるとかは作成し直した方が早いです。

                なんだか書いていくほど利用範囲がせばまってしまう気がする…

                アンカーポイントの数が大量にあるオブジェクトのアンカーポイントやセグメントを
                規則的に選択する必要があった時に是非利用してください。
                なげなわツールより確実性は高いですよ〜
                ブログランキング・にほんブログ村へ
                にほんブログ村
                | タナカ | Illustrator | 06:30 | comments(0) | - | - |
                Illustratorのライブペイント大検証
                0
                  JUGEMテーマ:Adobe Creative Cloud
                  スクリーンショット 2016-01-30 22.47.49.png
                  単発イラスト描くときにお世話になっている「ライブペイント」について色々試してみました。
                  ライブペイント好きなんですよね〜

                  こんなサンプルオブジェクトを作成してみました。
                  スクリーンショット 2016-01-31 23.18.23.png

                  試したことが分かりやすいように下地を透明グリッドにします。
                  スクリーンショット 2016-01-31 23.18.36.png
                  スクリーンショット 2016-01-31 23.18.54.png
                  パスの状態は
                  スクリーンショット 2016-01-31 23.18.55.png
                  この様な感じ。

                  ライブペイント化する前に区切り目的だけのパスを線色なしにしておくと後がラクですので予め線の色をなしにしておきます。

                  目的のパスを選択して
                  スクリーンショット 2016-01-31 23.18.56.png

                  色をなしにします。
                  スクリーンショット 2016-01-31 23.18.57.png

                  次にライブペイントを作成します。
                  変換したいパスを選択。
                  スクリーンショット 2016-01-31 23.18.58.png

                  オブジェクト>ライブペイント>作成
                  スクリーンショット 2016-01-31 23.18.59.png

                  オプションバーがライブペイントに変わり、ライブペイントが作成されました。


                  そのオプションバーに「ライブペイントに結合」というボタンがありますが


                  ライブペイント化されたものとそうでないものが同時に選択されたときにアクティブになり、
                  後から作成したオブジェクトもライブペイントに結合できます。


                  ライブペイント選択ツールに切り替えて
                  スクリーンショット 2016-01-31 23.19.02.png

                  塗りを選択したり
                  スクリーンショット 2016-01-31 23.19.03.png

                  線を選択したり


                  パスで区切られた部分単位で選択出来ます。

                  そして様々な色や線幅を試した結果がこれです。
                  スクリーンショット 2016-01-31 23.24.21.png
                  色々詰め込みすぎた…

                  では早速検証!


                  ■塗りについて

                  通常の塗りはもちろん、パターン、グラデーション共にOKですが、
                  通常の塗りに対しては透明度や描画モードを設定出来ません。
                  スクリーンショット 2016-02-01 0.10.12.png
                  変更しても
                  スクリーンショット 2016-02-01 0.10.31.png
                  もう一度設定を見てみるとデフォルトに戻ります。

                  グラデーションでは不透明度を設定することができます。
                  スクリーンショット 2016-02-01 0.11.41.png
                  ですので
                  グラデーションの始点と終点を同じ色・同じ不透明度にすればベタ塗りで透明度を設定することも可能です。
                  スクリーンショット 2016-02-01 0.12.03.png

                  更にパターンの使用もOKですので
                  透明度や描画モードを設定した正(長)方形をパターンに登録すれば、ベタ塗りの透明度と描画モードの設定も出来ます。

                  色を変更するのが面倒くさくなりますので、グローバルカラーを設定しておくと少しラクです。


                  ■線について

                  スクリーンショット 2016-02-01 0.15.08.png
                  ぶっ続けに描いた1本のパスでも途中で他のパスや自分のパスが交差している部分があると、
                  その交点を境目にして線の設定を変更できます。

                  色や太さはもちろん、破線や、角の形状も交点で区切られた範囲で変更可能です。

                  色無しの線で交点を作れば一見分岐点がなさそうに見せつつ線の設定を変更する事が出来ます。

                  途中から線の色なしにしたり


                  ちょっと見づらいですが
                  途中から角の形状を変更したり(緑の線)


                  直交限定ですが、道路の立体交差のような表現も可能です。


                  はみ出た線をなしにしたりするのにも簡単にできますね。

                  線端を「丸型線端」や「突出線端」にしているときは隣接部分にはみ出ますので注意が必要です。


                  次は角が交差ポイントとなっている線の「角の形状」がどうなるかも見てみます。


                  線の太さや色、角の設定など全ての設定が同じであれば、角の設定が反映されます。


                  太さが違ったり


                  同じ太さでも色が違えば

                  角の設定が反映されません。

                  Ver.CS6以降は線にグラデーションが設定出来ますが、
                  ライブペイントの線に対しては
                  「パスに沿ってグラデーションを適用」と「パスに交差してグラデーションを適用」
                  は選べません。


                  更にライブペイントの線に対してはグラデーションツールが使用できませんでした。(塗りに対しては使用できました)
                  スクリーンショット 2016-02-01 0.23.01.png
                  スクリーンショット 2016-02-01 0.23.12.png

                  グラデーションの角度を変えたいときなどはグラデーションパレットで数値入力する必要があるようです。
                  スクリーンショット 2016-02-01 0.22.49.png

                  円形グラデーションも同様グラデーションツールが使えませんので中心点の位置を変更することも出来ません。
                  スクリーンショット 2016-02-01 0.23.31.png

                  透明度の設定は出来ます。
                  スクリーンショット 2016-02-01 0.25.29.png

                  塗り同様、パターンを使用すれば透明度・描画モード共に設定可能です。


                  線の前面・背面についてですが、前後関係が分かりやすいように線端を丸型にして見てみます。

                  ライブペイント化してもパス単位での前面・背面の情報は存在しますので、
                  当たり前ですが前面にあるオブジェクトが前面になります。
                  オープンパスでは同一パスの線種の分岐点では始点に近い方が前面になります。

                  ペンツールで始点をクリックすればそちらが終点に変わりますので前面・背面の関係を変更する事が出来ます。

                  一度始点をクリックして方向を変更した後にまた戻すときは終点側に書き足しが必要になるようです。

                  クローズドパスの場合でもアンカーポイントのどれかがに始点になっていますので

                  始点が含まれている部分からパスの方向順に背面になっていきます。
                  クローズドパス単独のパスの方向変更ってどうやるんでしょ?
                  これはちょっとやり方が分かりませんでした。


                  ■ライブペイントその他の特徴

                  ○線を塗りの背面には出来ません。

                  ○クローズドパスでも線の位置を内側・外側に変更出来ません。

                  ○ブラシが適用出来ません。

                  ○線幅ツールが使用できません。

                  ○ライブペイントの一部だけをグループ化は出来ません。

                  ○複合パス(中マドにしたパスなど)は解除され、空洞の部分は塗り無しのライブペイントとなります。

                  ○部分的なライブペイントの解除機能はありませんのでカット&前面ペーストやコピー&前面ペーストでそれぞれ不要部分を削除する必要があります。

                  ○スポイトツールで他のオブジェクトから色・線の太さも適用できます。

                  ○選択>共通> に関しては同一ライブペイント内のものしか選択されません。

                  ○同一ライブペイント内の塗りが同じ色か「なし」であったり、線が同じ色か「なし」である場合は選択ツールでパスを選択した状態で色を変更できます。


                  ○ライブペイント全体に対しては描画モード・不透明度共に通常の方法で設定出来ます。


                  所々最初に作ったサンプル以外の画像も使いましたが、
                  まだまだ調べ切れていない特徴があったり、
                  何か手順を踏めば上で「出来ない」と書いた事も出来るかも知れません。

                  線の前後関係などは実践で利用することはほぼないんですが、
                  こういった特徴をなんとなくでも知っておくと思いがけないところで
                  出来ないと思い込んでいた事が出来るようになる事がありますので、
                  たまには一つの機能に絞って実験してみるのも面白いですね。


                  ■オマケ
                  数年前ライブペイントを使って写真をトレースしたものです。

                  ざっくり手順など。
                  1)線がT字に交わる部分はみ出すように線画を描いてライブペイント化。
                  2)はみ出した部分を色無しに。
                  3)その線画レイヤーを2つ複製して線なしに。
                  4)その2つのレイヤーをボディカラーとそれ以外の色のレイヤーとして必要な部分に色を入れる。(ベタ塗り)
                  5)更にどっちかのレイヤーを複製して塗り色なしにして陰影をつけたい数だけ複製。
                  6)陰影のの境界線となるパスを追加してライブペイントに結合。
                  7)明るい部分と暗い部分をそれぞれ白と黒の塗りを適用して透明度設定。
                  8)ハイライト追加

                  上に挙げた特徴の
                  ○同一ライブペイント内の塗りが同じ色か「なし」であったり、線が同じ色か「なし」である場合は選択ツールでパスを選択した状態で色を変更できます。
                  を利用してボディカラーを簡単に変更できるようにしてあります。




                  このファイル久々に開いたんですが、良く見たら…


                  複雑にパスが入り組む場合には塗り忘れに注意しましょう。
                  ブログランキング・にほんブログ村へ
                  にほんブログ村
                  | タナカ | Illustrator | 06:58 | comments(0) | - | - |
                  Illustratorで1本の線から効果の「変形」を使って雪の結晶を作ってみよう
                  0
                    JUGEMテーマ:Adobe CS5
                    スクリーンショット 2016-01-19 1.12.40.png
                    寒い季節定番の飾り物、
                    雪の結晶を1本の線を元に効果の変形を重ねて作成してみたいと思います。

                    イメージが掴みやすいように
                    最初に背面に黒を敷きます。

                    長方形−ツールで
                    スクリーンショット 2016-01-19 0.42.40.png
                    適当に四角を作成
                    スクリーンショット 2016-01-19 0.43.07.png
                    線なし、色を黒にします。

                    次にペンツールで
                    スクリーンショット 2016-01-19 0.44.32.png

                    適当に直線を描きます。
                    スクリーンショット 2016-01-19 0.44.45.png

                    選択ツールに切り替えて
                    スクリーンショット 2016-01-19 0.44.54.png

                    描いた線を選択。
                    スクリーンショット 2016-01-19 0.45.09.png

                    スクリーンショット 2016-01-19 0.45.26.png
                    塗りをなしにして線の色を白に。

                    変形パレットで
                    スクリーンショット 2016-01-19 0.46.04.png
                    Wを0mm
                    Hを3mm
                    線幅はとりあえず1ptとしておきます。

                    アピアランスパネルで「パス」を選択。
                    スクリーンショット 2016-01-19 0.47.23.png

                    効果>パスの変形>変形
                    スクリーンショット 2016-01-19 0.47.45.png

                    回転の角度:120°
                    変形の基準点:中央上
                    コピー:2
                    でOK

                    再び
                    効果>パスの変形>変形
                    スクリーンショット 2016-01-19 0.47.45.png

                    このメッセージが出たら「近畿効果を適用」をクリック。
                    (この後まだ数回変形をかけますので出る度に「新規効果を適用」をクリックします)

                    拡大・縮小の
                    水平方向:120%
                    垂直方向:120%
                    移動の
                    垂直方向:3mm
                    変形の基準点:中央下
                    コピー:3
                    でOK

                    更に
                    効果>パスの変形>変形
                    (メニュー画像略)

                    回転の角度:120°
                    変形の基準点:中央下
                    コピー:2
                    でOK

                    更にもう一度
                    効果>パスの変形>変形
                    (メニュー画像略)

                    回転の角度:60°
                    変形の基準点:中央下
                    コピー:5
                    でOK

                    基本形完成です。
                    スクリーンショット 2016-01-19 0.50.38.png

                    線にブラシを適用して更にクオリティアップしてみます。

                    直径1ptの円を半分にしてブラシにします。
                    楕円形ツールで
                    スクリーンショット 2016-01-19 0.50.58.png

                    直径1pt(0.3528mm)の円を作成
                    スクリーンショット 2016-01-19 0.51.25.png

                    右のアンカーポイントをダイレクト選択ツールで選択して削除して連結します。


                    半円の作成はコチラを参考に
                    Illustratorで「連結」を使って色々な形状を作成

                    出来上がった半円をブラシに登録します。
                    スクリーンショット 2016-01-19 0.54.33.png
                    スクリーンショット 2016-01-19 0.56.28.png
                    ブラシの種類は「アートブラシ」でOK。


                    方向:←(左)
                    彩色の方式:淡彩(CS5以前は「色合いを付ける」)
                    でOK

                    雪の結晶の元の線に先ほど登録したブラシを適用します。

                    もしブラシの方向が逆になってしまった時は
                    ブラシのオプションで方向を逆にするか
                    軸に沿って反転するか
                    ブラシパレットから選択中のオブジェクトのオプションをクリックして軸に沿って反転するか
                    のいずれかをします。

                    スクリーンショット 2016-01-19 0.59.35.png
                    それらしくなりました。

                    スクリーンショット 2016-01-19 1.00.45.png
                    線幅を2ptに変更するとボリュームアップします。


                    他のバリエーションも作ってみます。
                    スクリーンショット 2016-01-19 1.05.44.png
                    線の長さ(変形パレットのH):2mm
                    長さを変更すると変形の移動距離が変わることがありますので
                    アピアランスの2番目にかけた変形の垂直方向を3mmに

                    ちょっと変えただけで雰囲気が変わりますね。


                    今度はIllustratorに用意されている他のブラシを適用してみます。
                    元のオブジェクト
                    スクリーンショット 2016-01-19 0.50.38.png

                    ブラシパレットのメニューから
                    ブラシライブラリを開く>装飾>豪華なカールブラシとフローラルブラシのセット
                    スクリーンショット 2016-01-19 1.07.20.png

                    「フック」を選択
                    スクリーンショット 2016-01-19 1.08.20.png
                    スクリーンショット 2016-01-19 1.08.30.png
                    一旦こんなんになります。

                    スクリーンショット 2016-01-19 1.08.58.png
                    線幅を0.05ptに変更。
                    豪華ですね。

                    少しおとなしめにしてみましょう。

                    アピアランスパネルで2番目にかけた「変形」の設定で
                    コピーを2回に減らします。


                    元の線の長さや線幅・ブラシを変更したり、変形の距離や回数・基準点の位置なども
                    少し変えるだけで色々なバリエーションの結晶が出来ます。
                    スクリーンショット 2016-01-19 1.12.58.png

                    出来上がった雪の結晶を加工する際は元をとっておいて
                    パスのアウトライン(ブラシを適用した場合は不要)、アピアランスの分割をして外形をとったオブジェクトにしてしまいましょう。
                    回転したり拡大縮小したりするときに形が変わってしまったり、線幅の制限に引っかかったりします。
                    ブログランキング・にほんブログ村へ
                    にほんブログ村
                    | タナカ | Illustrator | 07:06 | comments(8) | - | - |
                    Illustratorで水彩画タッチのグラフィックスタイルを作成
                    0
                      JUGEMテーマ:Adobe CS5
                      スクリーンショット 2016-01-04 23.05.07.png
                      今回はIllustratorで適当に描いたベタ塗りイラストを
                      水彩画タッチにするグラフィックスタイルを作ってみたいと思います。

                      効果の単位にmm等を使いますので、
                      グラフィックスタイルを適用するイラストのサイズをある程度決めておかないと効果の影響が多すぎたり少なすぎたりします。
                      今回は15cm四方程度を想定。

                      まず、「プリント」プロファイルで新規書類をを作成。

                      スクリーンショット 2016-01-04 23.06.37.png
                      長方形ツールを選択して適当な場所をクリック
                      スクリーンショット 2016-01-04 23.06.51.png
                      幅、高さ共に100mm(グラフィックスタイルを作成するためのオブジェクトなので適当な大きさでOK)
                      スクリーンショット 2016-01-04 23.07.17.png

                      色を変更します。
                      スクリーンショット 2016-01-04 23.07.47.png
                      線なし、塗りK50%

                      アピアランスパレットで「塗り」を選択
                      スクリーンショット 2016-01-04 23.08.09.png

                      効果>テクスチャ>粒状
                      スクリーンショット 2016-01-04 23.08.31.png
                      スクリーンショット 2016-01-04 23.09.09.png
                      密度:40
                      コントラスト:50
                      粒子の種類:凝集
                      でOK


                      続けて
                      効果>スタイライズ>光彩(内側)
                      スクリーンショット 2016-01-04 23.10.18.png
                      スクリーンショット 2016-01-04 23.10.50.png
                      描画モード:スクリーン
                      色:白
                      不透明度:80%
                      ぼかし:10mm(想定するイラストのサイズに応じて変更)
                      「中心」
                      でOK

                      塗りの描画モードを変更します。
                      スクリーンショット 2016-01-04 23.11.26.png
                      「ハードライト」に変更(不透明度は100%のまま)

                      アピアランスパレットで「パス」を選択
                      スクリーンショット 2016-01-04 23.11.41.png

                      効果>パスの変形>ラフ
                      スクリーンショット 2016-01-04 23.12.02.png
                      スクリーンショット 2016-01-04 23.12.31.png
                      「入力値」にして
                      サイズ:1mm(想定するイラストのサイズに応じて変更)
                      詳細:10/inch
                      ポイントは「ギザギザ」
                      でOK

                      続いて
                      効果>スタイライズ>角を丸くする
                      スクリーンショット 2016-01-04 23.12.46.png
                      スクリーンショット 2016-01-04 23.13.21.png
                      半径:3.528mm(特に設定をいじってなければデフォルトでこの値になっていると思います。なっていなければ「10pt」)
                      でOK

                      さらに追加で
                      効果>パスの変形>ラフ
                      スクリーンショット 2016-01-04 23.13.38.png
                      スクリーンショット 2016-01-04 23.13.50.png
                      もしこのダイアログが出たら「新規効果を適用」ボタンをクリック。

                      スクリーンショット 2016-01-04 23.14.12.png
                      「入力値」にして
                      サイズ:0.5mm(想定するイラストのサイズに応じて変更)
                      詳細:100/inch
                      ポイントは「ギザギザ」
                      でOK

                      これで効果をかける作業は終了です。

                      選択ツールに切り替えて
                      スクリーンショット 2016-01-04 23.14.47.png

                      今作成したオブジェクトを
                      グラフィックスタイルパレットにドラッグして
                      スクリーンショット 2016-01-04 23.15.02.png
                      スクリーンショット 2016-01-04 23.15.22.png
                      グラフィックスタイルに登録します。


                      次に水彩画タッチにしたいイラストを用意します。
                      スクリーンショット 2016-01-04 23.16.00.png
                      横幅は約15cm
                      曲線を使わず本当に適当に描いたようなものでOK。むしろそれくらいの方が良いと思います。
                      塗りはベタ塗りが良いです。

                      イラスト全てを選択します。
                      スクリーンショット 2016-01-04 23.16.38.png
                      スクリーンショット 2016-01-04 23.16.47.png

                      グループ化していなければ
                      オブジェクト>グループ
                      スクリーンショット 2016-01-04 23.17.19.png

                      効果>パスファインダー>合流
                      スクリーンショット 2016-01-04 23.17.41.png
                      分割して同じ色の部分を繋げます。

                      そして、ここが一番のポイントになります。
                      グラフィックスタイルパレットでoption(Winはalt)を押しながら
                      先ほど登録したグラフィックスタイルをクリック。

                      スクリーンショット 2016-01-04 23.18.03.png
                      optionを押しながらグラフィックスタイルを適用することで
                      既存の効果やカラーを残したままグラフィックスタイルを追加することができます。

                      適用したグラフィックスタイルのラフの効果で線が手書き風になります。
                      スクリーンショット 2016-01-04 23.18.26.png
                      選択解除すると
                      スクリーンショット 2016-01-04 23.19.20.png
                      まだこの状態では色がベタ塗りのままですので

                      イラストが選択された状態で
                      アピアランスパレットの「内容」を「塗り」の下へドラッグします。
                      スクリーンショット 2016-01-04 23.20.14.png

                      スクリーンショット 2016-01-04 23.20.34.png
                      選択解除すると
                      スクリーンショット 2016-01-04 23.20.55.png
                      これで水彩画タッチのイラスト完成。

                      「塗り」のグレーの濃度を変更すると全体的な色の濃度も後から変更できますよ。

                      30%
                      淡い感じ…


                      70%
                      ちょっと汚れた感じがでてコレはコレで良い味出てます。


                      アピアランスの「光彩(内側)」をオフにすると
                      スクリーンショット 2016-01-04 23.23.36.png
                      スクリーンショット 2016-01-04 23.23.54.png
                      ちぎり絵風にも…


                      アナログチックな表現もIllustratorだと後から修正できるので良いですね。
                      効果の数値を色々変更するとまた違った雰囲気にもできると思います。
                      オブジェクトが多いと負荷が大きいですが…
                      ブログランキング・にほんブログ村へ
                      にほんブログ村
                      | タナカ | Illustrator | 01:16 | comments(0) | - | - |
                      スマホ版
                            1
                      2345678
                      9101112131415
                      16171819202122
                      23242526272829
                      30      
                      << April 2017 >>
                      + SELECTED ENTRIES
                      + RECENT COMMENTS
                      • Macのカレンダー.appを使って定期的にアプリケーションを実行してみよう
                        タナカ (12/02)
                      • Macのカレンダー.appを使って定期的にアプリケーションを実行してみよう
                        カール (12/01)
                      • Macのカレンダー.appを使って定期的にアプリケーションを実行してみよう
                        タナカ (12/01)
                      • Macのカレンダー.appを使って定期的にアプリケーションを実行してみよう
                        タナカ (11/30)
                      • Macのカレンダー.appを使って定期的にアプリケーションを実行してみよう
                        カール (11/30)
                      • Illustratorでオブジェクトが重なっている部分のみの線分を抽出してみよう
                        タナカ (06/30)
                      • Illustratorでオブジェクトが重なっている部分のみの線分を抽出してみよう
                        ニャーン (06/29)
                      • Illustratorでオブジェクトが重なっている部分のみの線分を抽出してみよう
                        タナカ (06/19)
                      • Illustratorでオブジェクトが重なっている部分のみの線分を抽出してみよう
                        ニャーン (06/18)
                      • Illustratorで1本の線から効果の「変形」を使って雪の結晶を作ってみよう
                        ニャーン (02/13)
                      + CATEGORIES
                      + ARCHIVES
                      + BACKSTAGE
                      + Amazon
                      + 広告

                      + にほんブログ村ランキング
                      + MOBILE
                      qrcode
                      + LINKS
                      + PROFILE