BLOG/サイト構築・デザイン

2021.10.09

楽天でのバナー作成(その1)

【記事の対象となる方】

  • これからPhotoshopを学ぼうとしている方
  • デザイン初心者

【今回の記事の内容】

  • Photoshopについて
  • ファイルの新規作成
  • ファイルの保存
  • Photoshopの各名称

バナーを作成する前にまずはソフトについて説明させていただきます。

<Photoshopについて>

Photoshop(フォトショップはAdobe(アドビ)から購入して使用する事ができる画像合成が得意なソフトです。
Photoshopでは「JPEG」や「PNG」など様々な画像データを開き、編集することが可能です。
そしてレイヤーを組み合わせることで画像を作成します。

このブログは主にMacにて制作方法を説明します。
(Windowsは画像無しになりますが、テキストにて説明をさせていただきます)

<Photoshopの拡張子ファイルについて>

Photoshopデータは「.psd」というPhotoshop独自の拡張子のファイルです。
「psd」の読み方については「ピーエスディー」と読む人が多いと思います。
そのままアルファベット読みになります。
この表示があるとフォトショップの編集機能を含んだまま保存可能なデータいう意味になります。

今はPhotoshopを持っていないけれど、
Photoshopの画像が見たい!とい方の為に参考になりそうな記事がありましたので、
ご紹介させていただきます。
PSDとは?Photoshopなしでファイルを開く3つの方法【おすすめツール5選】

<新規ファイルの作成方法>

さぁ、それではバナーを作るための「新規作成ファイル」を作成しましょう。
メニューバーのファイル→新規

 

 

 

 

「新規ドキュメントの設定」が表示されます
こちらを「ダイアログ」といいます。
ドキュメントの種類: 制作したい物の種類を選択
バナーの場合はweb用なので、「web最小」を選択
プリセットの詳細には適当なファイル名を記入してください。
ここでは「バナー作成」というファイル名にします。

「楽天でのバナー作成」という事で下記のサイズで入力しましょう。
幅:1200 高さ:500
単位はpixelになります。
モニターで使用する画像を制作する場合はpixelで制作をします。
解像度は72pixelです。
web用は主にこの数字になります。
カラーモードは「RGBカラー」です。
web用はこのカラーモードになります。
8bit。
カンバスカラーは白
「カラープロファイルはAdobeRGB」になります。
解像度:画質のきめ細やかさのこと
Tabキーを押すと次の項目に移動することが出来ます。

<カラープロファイルについて>

オフセット印刷用のデータを作成するようなプリプレスの作業は、
「AdobeRGB設定」
して作業します。
「WEB・インターネット用」というプリセットを選ぶと「作業用色空間はsRGBに設定」して作業します。

さらに詳しいカラープロファイルの説明については下記を参考にしてください。
PhotoshopはAdobeRGBと決まっているわけではない

そして、新規作成したファイルを「保存」しましょう。
「メニューバー」→「ファイル」→「別名で保存」


保存場所:次の任意の場所を選択
フォトショップのクラウド上に保存する場合は「クラウドドキュメントに保存」
作業中のコンピュータに保存する場合は「コンピュータに保存」

「別名で保存」のダイヤログが表示されます。
ファイル名や形式などの変更がない場合はそのまま「保存」ボタンを押してください。
フォトショップ形式オプションダイヤログが表示されるので、そのままOKを押してください。
予期せぬエラーが発生した場合でも対応できるようにこまめに保存するようにしましょう。

これから使用するPhotoshopの名称を使用して説明させていただきます。

Photoshopの名称について

<メニューバーについて>

メニューバーは一番上に並んでいるメニューボタンになります。(囲んでいる箇所)
「Photoshopの操作設定」や「画面の表示設定」、「ファイルの新規作成」、「細かな画像加工」などをメニューバーから行うことができます。
メニューバーは左から「Photoshop」「ファイル」「編集」「挿入」「フォーマット」「ツール」「データ」「ウィンドウ」「ヘルプ」と並んでいます。
各内容についてはバナー作成時の必要な時に説明させていただきます。

<ツールバーについて>

一番左の位置に表示されます。
「ツールバー」は、画像を加工したり、絵や線を描いたり、文字を入れたりするときに使う機能が並んだバーです。
「ツールパネル」と呼ばれる時もありますが、ここでは「ツールバー」でご説明させていただきます。

ツールバーのツールにカーソルを合わせるとツールの名前が表示されます。
初めのうちは名前を確認しながら選択すると覚えやすいので、確認するようにしましょう。
アイコンの右下に三角マークがあるものは、長押しすると複数のツールが表示されます。
その三角マークがあるものは最初に表示されるものだけではなく、複数使用できるツールもあります。
長押ししながら隠れていたツールを選択して離すと、隠れていたツールが使用できるようになります。

ツールを選択したら、オプションバーをそのつど見てください。
そのツールに対応した内容のものが表示されています。

ツールバーの列表示は変更できます。
ツールバーの一番上に2つの三角形があります。
クリックすると1列から2列に変更が出来るので作業環境によって変更しましょう。

<オプションバーについて>

選択するツールに合わせてオプションバーの表示内容が変わります。
そのため、ツールを使っていて「何か疑問に思ったときは、オプションバーを確認してみましょう。

<パネルについて>

編集に関する機能が盛り込まれたウィンドウ。
重なっている箇所を「タブ」といいます。
タブをクリックすることでパネルの重なりを変更して見るところを変更できます。
タブの上をダブルクリックすると、縮めたり広げたりすることが出来ます。
上部の三角形をクリックすることで「パネル表示」と「アイコン表示 (ドッグ)」に切り替えすることが出来ます。

<ドッグについて>

パネルがアイコン形式で格納されている領域のことをいいます。
アイコンをクリックすると該当するパネルが表示されます。
もう一度クリックすると閉じることが出来ます。
初心者の方はパネル表示での作業をお勧めします。

<ステータスバーについて>

一番下の数字が羅列しているステータスを指します。
ファイルのサイズがわかります。

<レイヤーについて>

レイヤーパネル:レイヤーを管理する
表示されてない場合はメニューバーのウィンドウからレイヤーにチェックが入っていることを確認してみてください。

レイヤーにある「目」の部分をクリックすると「目」の部分のレイヤーの表示非表示が出来ます。
ここを表示、非表示にすることで重なり具合を確認できます。

今回はソフトの使い方と各名称。
そして新規ファイルを作成し、保存するまでの作業を説明しました。
次回は「バナーサイズについての説明」と「画像の編集作業」に移っていきたいと思います。

終わりに:楽天などのECショップの運営代行、運用代行について

弊社はECの制作代行を実施しております。
弊社へのご依頼などは、以下フォームにご入力いただき、ご連絡いただけますと幸いです。

    入力内容を確認して「送信」ボタンをクリックしてください。

    お問い合わせありがとうございます。
    折り返し担当よりご連絡させていただきますので、今しばらくお待ち下さいますよう、お願い申し上げます。

    は必須項目です。

    氏名(漢字)
    氏名(かな)
    貴社名
    電話番号
    メール
    ウェブサイトURL
    お問い合わせ内容

    こちらからご確認ください