2016.02.19(Fri)

どんな作業でも使う「新規作成」を知ろう!Photoshop講座(基礎編)第三弾

どんな作業でも使う「新規作成」を知ろう!Photoshop講座(基礎編)第三弾

この記事を執筆した人

あうる
あうる(@Arcloid_gear
WEBデザイナー
WEB制作を始めて2年が経過しました。まだまだ実力が足りないと実感しつつ、日々の業務に勤しんでおります。

前回は画面の操作画面の説明を行いました。
実際に使用したい気持ちはありますが、ちょっと待ってください!
その前に、どんな作業でも必ず行う工程である「新規作成」「読み込み」「PSDデータ保存」「上書き保存」「画像書き出し」を学んでいきましょう。
この工程が基本中の基本となりますし、これができていないととんでもない悲劇にぶつかる事が多々あります。

例えば、3時間かけて作業をしていたものが、「保存」をし忘れたばっかりに1からやり直しになったり・・・
頑張って作った画像が「新規作成」の時点で設定が間違っていて修正しなければならなかったり・・・
取引先に送ったデータが「書き出し」の設定を間違えて、向こうで確認できなかったり・・・

 

僕もWEB制作を始めた頃はそんなことばかりでした。
慣れてしまえば、ちょちょっとできる事ですが、慣れるにはしっかり基礎を理解していなければなりません。
難しい単語があっても、読み飛ばさずに「検索」して納得してから進む。
これがソフト・アプリケーションを使用する際の一番の近道なんです。
むしろ、それを通らなければ、絶対に使いこなすことなんてできないのです。
まずは「新規作成」から解説していきます。

 

1.新規作成

新規作成とは、何もデータが入っていない真っ白(透明)な画像を作るということです。絵を描くときの新しいキャンバスだと思ってください。
これには必ず初期設定が必要となります。
絵を描くときもサイズや紙の質感だったりを選択しますので、それと同様に考えて貰えれば大丈夫です。

では実際に新規作成してみましょう。
メニューバーのファイルをクリックし、出てきたボックス内の「新規」をクリックします。
※バーの名前と場所がわからない方は前記事の「まずは画面に写ってるものを把握しよう!Photoshop講座(基礎編)第二弾」をご覧ください。

このように別ウィンドウが出てきたらおっけいです。
これが新規作成の設定ウィンドウです。
上から順番に見ていきましょう。
 

1.ファイル名

その画像の名前を設定できます。
ここで設定しておけば、あとで保存する時にわざわざ付け直す必要がなくなるため、
楽になります。

 

2.プリセット


プリセットは予めフォトショップで登録されている設定を適用できます。
クリックするとドロップダウンメニューがでてきますので、お好みのものを選択できます。

これが元から登録されている設定です。
大抵の場合、Photoshopで作業する目的は二通りに分類することができます。
・印刷物(プリンターなどで印刷する目的)
・画像データ(ホームページ等、画面上で表示させる目的)

後ほど、この2つの目的によってどのような設定の違いが出るのかを説明します。
このように、プリセットも2つの目的で大別されており、
印刷物は赤枠①で、画像データは赤枠②になります。
用途にあったものを選択しましょう。

Photoshop初期設定はあまり使わないようにしましょう。

カスタムは独自に設定を行うものです。設定を行った後に赤枠③をクリックすれば、
独自の設定をこのプリセットに保存できるので、よく使う設定が存在したら、
保存しておきましょう。

 

3.幅・高さ


幅と高さを設定する項目です。

単位について

まずは単位の設定です。
右側のテキストボックスをクリックすると、
・pixel(ピクセル)
・inch(インチ)
・cm(センチメートル)
・mm(ミリメートル)
・point(ポイント)
・pica(パイカ)
・コラム
という項目がありますが、すべて把握する必要はありません。

印刷物の場合は、cm(センチメートル)・mm(ミリメートル)
画像データの場合は、pixel(ピクセル)
を選んでおけば間違いないです。

実際のサイズについて

単位が決定したら、次に実際サイズですが、
目的のサイズにするのがベストです。
しかし、まだ特に決まっていないという場合は、大きめに作っておくほうがいいでしょう。
なぜなら、画像データというものはサイズを小さくする際には画像の劣化が起こりにくいですが、逆にサイズを大きくする場合は画像の劣化がかなり激しいです。

実際に比較してみましょう。
まず、縦250pixel×横250pixelの円を縦150pixel×横150pixelにしてみます。

次に、縦50pixel×横50pixelの円を縦150pixel×横150pixelにしてみます。

すでに大きな差が出ていますが、同じ縦150pixel×横150pixelの円を並べてみます。

どうでしょう?
変化率は両方とも100pixelですが、ここまで変化してしまします。
これがデータ描画の難しいところです。
とりあえず、この法則を覚えておき、大きめの物を作っておくほうがいいということです。

なぜこうなるのか、は次の解像度の解説で行います。

 

4.解像度


解像度とは、デジタルイラストを行っている人には馴染みのある言葉かもしれませんが、アナログの方にとっては「聞いたことがある」程度の物でしょう。
しかし、デジタルイラストを描く際には避けては通れないものですし、制作するデザインや絵が印刷物だったとしても、パソコンで作業する以上は、
モニターを見ながら制作するので、避けては通れません。
しっかり覚えましょう。

解像度の単位について

解像度は「dpi」という単位で数えられます。
よく見かけるのは72dpiだったり360dpiですね。

そもそもモニターというものは無数の小さな正方形が縦横均一に並び、
一つ一つのマスがそれぞれの色情報を読み込んで、その色を表示することにより、
一つの画面表示が出来上がっています。

例えば、一昔前のゲームのキャラクターは「ドット絵」で描かれています。
このドット絵はモニターの性能が低い時代だからこそできた表現方法であり、
1マスがとても大きいんです。

以下のイラストを見比べて見てください。

1マスの大きさが小さい方が鮮明にキャラクターを捉えることができますよね。

解像度とは1inchというサイズの中に、入るマスの数の事を言います。
72dpiは1inchの中に72個のマス。
360dpiは1inchの中に360個のマス。

上の画像のように、解像度が高い(マスが小さい)ほどクオリティの高い描画が可能になります。

解像度の決め方について

先ほど、72dpiと360dpiが良く見られるという説明をしましたが、
これについても、「印刷用」なのか「モニター用」なのかで分かれます。

印刷用は360dpiがベストです。
モニターはそもそも72dpiがモニターで表示できる限度の解像度となっています。

なれないうちは、この2つの数値を覚えておいて、用途によって変更しましょう。
ただし、イラストを描く場合は必ず360dpiにしておきましょう。
結局これに関しても、サイズと同様に「大は小を兼ねる」という言葉がそのまま適用されます。
パソコンというものは、大きいデータを小さくするのは得意ですが、小さいものを大きくするのはとても苦手だと思っていて、間違いはありません。

4.カラーモード


カラーモードは最低限、RGBカラーとCMYKカラー、グレースケールカラーは覚えておきましょう。
そもそもカラーモードと言われてもなんのこっちゃと思うかもしれませんが、
パソコン内で色を作る時には必ず基準となる色が必要となります。
その基準色から色マップ(基準色から作られるすべての色をマップ化したもの)を生成し、どの色がどの座標に位置しているのかで、色を判定しています。
その基準色がRGBとCMYKでは違うので、作られる色も座標も変わってくるわけです。

RGBカラー


RGBカラーとはモニターの表示に適したカラーモードです。
R(Red:レッド)G(Green:グリーン)B(Blueブルー)の3つが基準色となっています。

CMYKカラー


CMYKカラーとは印刷に適したカラーモードです。
よくプリンターなどのインク補充の時に見たことがあるのではないでしょうか。
C(Cyan:シアン)M(Magenta:マゼンタ)Y(Yellow:イエロー)K(Key Plate【Black】:キー・プレート【ブラック】)の4つが基準色となっています。

グレースケールカラー

白と黒の2色で表現された色。

色のビット数について

カラーモード選択ボックスの横にビット数を選択できますが、
これは数値が大きいほどに使える色の数が増えると考えれば大丈夫です。
ただ、ビット数を大きくすると、パソコンにかかる負荷を大きくなるので、
フリーズしないように注意しましょう。

6.カンバスカラー


カンバスカラーは背景色を決定するものです。
もし、透過処理を行う部分が必要な場合は「透明」。
特にない場合は、「白」でいいでしょう。
後からいくらでも変更可能なので、ここで悩むくらいならとりあえず
作っちゃうのがいいと思います。

7.その他


残りの2項目はほとんどの場合固定です。

カラープロファイル:Japan Color 2001 Coated
ピクセル縦横比:正方形ピクセル

8.完了


では、1~6までの内容を確認して、
自分の目的の設定にできたら「OK」を押しましょう。

今回は以上です。
次回は「読み込み」「PSDデータ保存」「上書き保存」を解説します。
 

この記事を執筆した人

あうる
あうる@Arcloid_gear)WEBデザイナー
WEB制作を始めて2年が経過しました。まだまだ実力が足りないと実感しつつ、日々の業務に勤しんでおります。

コメントへの返信

入力エリアすべてが必須項目です。※メールアドレスが公開されることはありません。


更新情報


Twitter



合同会社ジョイネットは、東京都渋谷区でホームページ制作を行う専門会社です。

ホームページ制作、システム開発、ウェブマーケティング、リスティング、SEO対策などのインターネットに関わるお仕事をしております。

合同会社ジョイネット

〒151-0051 東京都渋谷区千駄ヶ谷1-22-3 三瑛ビル4F