超・初心者のAdobe Cloudデザイン制作

イラストレーターを使い始めたばかりの人にとっては、背景画像をどうやって配置するのか？など初歩的なことで迷うこともあるかも知れません。

 

私も当初はそうでしたからよくわかります。

パネルやツールが多すぎて何が何だかわからなくなる気持ちになったりもしました。

 

「フォトショップとイラストレーターの違い」

 

とも一部重複するかも知れませんが、なるべく初めてイラストレーターを扱う人や、それに近い方々に向けてわかりやすい記事を書いて行けたら幸いです。

 

最初にファイル形式を表す拡張子は、ファイルの名前を変更するように変更するものでは無いので、ファイルを書き出したり、別名で保存（Winでは名前をつけて保存）することで自動的に付与されるものでなければなりません。

 

例えば、a.jpgと言うファイルをa.psdにしたい場合は、a.jpgをフォトショップで開いて、コマンド＋Aを押して、コピー＆ペーストすると、新しいレイヤーが自動的に生成されて、同じ画像が2つ重なります。

レイヤーが複数になると、そのまま上書き保存しようとしても、元のa.jpgと言う拡張子の付いたファイルにはならなくなり、別名で保存するような新しい名前を入力する窓が出てきます。

 

 

図の赤枠はa.jpgと言う拡張子の付いたファイルのタブと言う意味です。

画像は当サイトのロゴをモックアップで書き出したものです。

このままの状態ではpsdファイルとして保存することは出来ません。

デスクトップにあるファイルの名前を書き換えても意味が無くて、そのファイルは末尾の拡張子をpsdと入力してもpsdファイルとしては認識されません。

psdファイルはファイル名だけ書き換えても、フォトショップで読み込むことは出来ます。

それでもpsdファイルでは無いわけです。

そこがややこしいのですが。

 

 

図の太い赤枠が全てを選択してコピー＆ペースとしたら新規レイヤーが自動生成された状態が確認できるレイヤータブです。

この状態で、保存、または上書き保存をしようとすると、そのまま保存できずに別のダイアログが開きます。

 

 

図の赤枠は新しい名前を付けるか、そのままa.psdで保存するかを確認する画面ですので、このままa.psdで保存する場合は、右下の青い保存ボタンを押すと新たなファイルa.psdができます。

 

この.psdとファイル名の末尾に自動的に付与されたpsdと言う拡張子は、自分で入力したわけではなくて、複数のレイヤー構造にして上書き保存しようとした時に、最初に開いたa.jpgファイルのままでは保存できなくなり、自動的にpsdファイルになってしまうと言うことです。

 

逆にa.psdファイルを開いて、左のレイヤーパネルにあるハンバーガーメニューから「画像を統合」を選ぶと、レイヤーが全て統合され、１枚のファイルになります。

レイヤーが無くなり、ファイルが統合されてそのファイルが最初のa.jpgになるかと言えばそうではなくて、a.psdのままレイヤーなしの一枚の画像となりますが、拡張子はpsdのままになります。

 

そして、このpsdファイルをイラストレーターで背景画像として配置するには、イラストレーターから配置を選んで好きな場所でクリックするだけの簡単な作業となります。

 

 

図はイラストレーターの画面です。

青く選択されているメニューが「ファイル→配置…」となっています。

ファイルをクリックして、マウスを押したままドラック&ドロップからの配置でマウスから指をします。

そうするとどの画像を配置しますか？

とウィンドウが開きますので配置したい画像の場所を探して選択しクリックします。

 

 

図の大きめの赤枠が配置を選択した後に出てくるウィンドウです。

赤枠の左側の青く選択されているファイルがa.psdファイルです。

ファイルを選択すると右側にサムネイルが表示されますので、中身を確認することができます。

※私は Macでウィンドウの中はカラム表示が好きなので、このようになっていますが、アイコンを選んだ方はサムネイルではなくて、アイコンで直接中身を確認できます。

ここで注目して頂きたいのは、赤枠の下部のリンクチェックボックスにレ点のチェックが入っているところです。

これはデフォルトで自動的にリンクが選択されているので、特にチェックする必要はありません。

リンクしておくことで、イラストレーターに配置した後に、画像を加工した場合は、リンク先にあるイラストレーター上のpsdファイルも変更されますので、大変便利な機能となります。

 

 

配置が完了しました。

青い大きめのバッテンは配置したばかりの画像が選択されている状態を示しています。

この青いバッテンの大きさが画像の大きさであると言うことです。

これで配置に関する記事は終了ですが、余談で少し話しておこうと思うことがありますので、このまま記事を書いて行きます。

 

配置した画像をイラストレーター上でトリミングする、正確にはトリミングではなくてマスク作成によって不必要な表示領域を隠すと言うことになりますが、結果的にフォトショップなどで不要な領域を切り抜いた形に見えます。

 

ただフォトショップで切り抜いてしまうと、切り取られた領域は復元できませんが、イラストレーター上でマスク作成して置くと、配置した画像の必要な領域のみ表示されていますが、不要な領域もそのままの状態でいつでも復元できます。

それでは配置した画像を必要なエリアのみ表示させるマスク作成について解説して行きます。

 

 

図は表示したい領域に対して、ツールから四角形を選んで、表示したい領域に重ねるように白い横長の長方形を描いたものです。

下の画像が一旦隠れてしまいますが、次に使用する透明タブを選択します。

 

 

図の中央付近にあるように縦長のプルダウンメニューが出ています。

メニューバーはウィンドウが選ばれています。「ウィンドウ→透明」を選択すると私のワークワークスペース（パネルやツールなどの配置）では右側に各種のパネルがありますが、この一番下に透明タブが出ています。

描いた長方形の四角と背景画像をドラック&ドロップで同時に選択して、透明タブからマスク作成を選択します。

 

 

中央の大きな青いバッテンは背景画像が選択された状態で、その中の白い長方形も青い選択ラインが表示されていますので、背景画像と白い長方形の両方が選択されていることがわかります。

この状態で、右下の透明タブからマスク作成をクリックすると・・・

 

 

あら不思議？描いた長方形以外の領域が消えてしまいました。

白い領域は背景画像やイラストレーターの白いボックスではなくて、透明な領域となるアートボードです。

ですからこの状態で、最上部のメニューバーから「ファイル→書き出し→webように保存→」そこから書き出したいファイル形式PNGと選択すると、ロゴの画像部分のみが表示され、白い領域は透明な状態となります。

 

 

書き出しの際のファイル形式の選択方法をはこんな感じです。

 

 

右上にPNGを選択していることがお分かりでしょうか？

ここでgifやjpgを選択することも可能ですが、マスク作成で背景が透明になっていることを表示したいので、ここではpngで書き出してみます。

実際は上下左右に空白の透明領域が残っているため、このサイトに読み込んだ時にも不要な領域が透明画像として読み込まれています。

これがマスク作成です。

データー量を軽量化したい場合は、pngの透明箇所を切り抜くことで無駄なデーターを減らし、画像を軽量化できます。

軽量化にこだわる理由は、記事の読み込みスピードが変わってくるからです。

例えば４Kの画像をこのサイトにアップロードして読み込みの時間を測るとかなり遅くなります。

4kの解像度は4000px×2000px前後と言われておりますので、ここで使用している画像は1200px×600px程度なので3分の一以下のデーター量です。

その分サイトを閲覧する人に不快なストレスを与えにくいと言えます。

読み込み速度が遅いほど、そのページから離脱しやすいので、画像は軽いほど良いと言えるでしょう。

余談でしたが、本題に戻りましょう。

 

 

マスク作成した選択領域の青いバッテンを見るとわかりますが、不要な箇所は消えたのに、背景画像の大きさは変わっていません。

 

つまり消えたのではなくて見えなくなっているだけなのです。

マスク作成のボタンが消えて、「解除」ボタンが透明タブに表示されるようになりました。

解除を選択すると最初の不要な領域が復元され、配置として読み込んだばかりの画像に戻ります。

※ここで注意点ですが、配置した画像の大きさや解像度は画像のデーター量となりますので、メモリやキャッシュと関係しています。

あまり解像度の高い背景画像を置いてしまうと作業効率が下がってしまい、作業のスピードが遅くなることがあります。

その場合は、例えばA4チラシなら、予めフォトショップで解像度を下げたり、不要な箇所をトリミングして切り抜いて置くことでデーター量を減らし、軽くなった画像をイラストレーターで背景画像として配置した方がお勧めだと言うことも覚えておきましょう。

まとめ

いかがでしたか？

イラストレーターでpsdファイルを配置する方法について述べてみました。

画像ファイルは様々なファイル形式があり、ファイル名の末尾に付く・・・.jpg・・・.png・・・.psd・・・.aiなど制作したアプリケーションによって違うファイル形式もありますが、共通のjpgやpngといったファイル形式もあります。

フォトショップで読み込めるファイル形式、イラストレーターで読み込めるファイル形式、etc

例えば、イラストレーターで制作したファイルは・・・.ai　になりますが、フォトショップでも読み込めます。

しかし本来のベクトルデーターではなくなり、画像として（ビットマップ）として読み込んでしまうことになります。

フォトショップ上で加工したりしても、元とのiaファイルではなくなります。

このようにファイル名の末尾を常に確認し、コントロールし、最適な環境、つまりどんなアプリでそのファイルを開くのか？確認しながら作業を進める必要があります。

また書き出す際にも同様のことが言えると思います。