メインコンテンツへスキップ
見出し画像

Web用?印刷用?新規作成で設定すべき解像度とカラーモード|これから始めるPhotoshop入門 #20|基本の使い方講座

    今まで元画像の加工方法を学んできましたが、

    バナーやサムネイルをつくりたい!

    そんな場合には、まずサイズを決めてから制作します。
    ということで第20回はファイルの新規作成をやさしく解説していきます。

    新規作成の設定

    Photoshopを起動して「新規ファイル」をクリックします。

    画像

    新規ドキュメントのダイアログボックスが開きます。

    今回はWeb用バナーを作成するので「Web」をクリックします。

    画像

    サイズは一覧から選ぶこともできますが、ここでは数値を指定していきます。

    プリセット名がファイル名になります。

    先に名前を付けても、あとで保存時に変更してもOKです。今回はそのまま進めます。

    画像

    幅と高さを指定します。
    Web用にしたので、単位は自動でピクセルになっています。

    ここでは幅「500」高さ「200」で入力します。

    画像

    初期設定では横長の向きになっているので、縦長にしたい場合は「縦」をクリックします。
    ※右側の「方向」では選ばれている向きが青くなっています。

    画像

    レイヤーパネルの操作をわかりやすくするため、今回は「アートボード」のチェックを外します。

    画像

    解像度は72、カラーモードはRGBのままにしておきます。

    画像

    カンバスカラーは初期設定の白とします。

    画像

    「作成」ボタンをクリックします。

    画像

    これで指定したサイズで新しいファイルを作成できました。

    画像

    ピクセルって何?

    デジタル画像を構成する最小の点(色のついた四角の点)のことを指します。

    今までの画像もズームをしていくとこのように、四角1つ1つに色がついている状態になっています。

    画像

    この1つの四角を1ピクセルといいます。

    解像度って何?

    この四角の数が1インチ(25.4㎜×25.4㎜)の中にどのくらい入っているのかで解像度が決まります。
    1インチあたりに入っている数が多ければ多いほど高画質になります。

    画像

    一般にWeb向けは「72pixel/inch(ピクセルパーインチ)」
    印刷は「300~350pixel/inch」と覚えておくと良いでしょう。

    以前は「Web用の画像は72ppi」とよく言われていましたが、これは昔のモニターが、1インチあたり72ピクセルで表示されていた時代の基準です。

    でもいまのスマホやパソコンの画面はもっと高精細で、たとえば最新のiPhoneでは1インチに400ピクセル以上が表示されます。

    そのため、Web用の画像を正確に作るには「ppiの数字」を気にするよりも、表示先の画面サイズに合わせた“ピクセル数そのもの”をしっかり設定することが大切です。

    今回はWebのタブを押したので解像度は72に初期設定でなっています。
    もし印刷のタブを押した場合は、解像度が300に変更されています。

    画像

    RGBとCMYKって何がちがうの?

    画面で見るものはRGB、紙に印刷するものはCMYKで作る、
    というのが基本ルールです。

    カラーモードの設定はWebの場合、RGBに設定します。

    R(Red=赤)
    G(Green=緑)
    B(Blue=青)

    の光を組み合わせて色を表現する方式です。

    人間の目がこの3色の組み合わせで色を認識しているため、モニターやスマホなど「光を発する表示機器」で主に使われています。

    そのため、Webで使用するものをつくる場合は、RGBで作業していきます。

    印刷物を作る場合は、CMYKに設定します。

    C(Cyan=シアン)
    M(Magenta=マゼンタ)
    Y(Yellow=イエロー)
    K(Key plate=ブラック)

    この4色のインクを混ぜ合わせて色を表現する方式です。
    主に 印刷物(雑誌、ポスター、チラシ、名刺など) に使われます。

    まとめ

    Web用

    単位:ピクセル
    解像度:72pixel/inch目安
    カラーモード:RGB

    印刷用

    単位:㎜や㎝
    解像度:300~350pixel/inch目安
    カラーモード:CMYK

    Web用か印刷用か使い道によって、解像度やカラーモードの設定を変える必要があります。しっかり覚えておきましょう。


    音声データは
    メンバーシップ限定でダウンロードできます

    スキルキットのメンバーシップでは、
    LINEでの質問サポート、動画・音声、限定記事などで、
    学びたいことをまるごとサポート。


     
     
    パソコンスクール講師が仕事や副業に役立つパソコンとAIの使い方を、初心者さんにもわかりやすく解説。パソコン基礎から試験対策、Webデザイン、動画編集、生成AIまで、幅広いスキルアップ記事を発信中。メンバーシップでは講師へのLINE相談&限定記事・練習問題を公開。

    あなたへのおすすめ