SAMPLE IMAGE この画像は差し替えてご利用ください

022-3 トップ画像に文字を追加する

トップ画像はヘッダー画像とも言われます。ホームページの顔になる画像です。

トップ画像を変更するには:

❶ Pixlr エディターで編集する画像をアップする

jdg022_36:Pixlr Editor で「コンピューターから画像を開く」
jdg022_36:Pixlr Editor で「コンピューターから画像を開く」

1)Pixlr エディターのサイトにアクセスする:

https://pixlr.com/editor/

 

2)サイトが開いたら、「コンピューターから画像を開く」をクリックする。

jdg022_37:編集する画像を開く
jdg022_37:編集する画像を開く

3)「開く」ダイアログが表示されるので、編集する画像が保存されているフォルダーを選択し、

 

4)画像ファイルを選択し、

 

5)「開く」をクリックする。

jdg022_38:編集する画像でキャンバスが開いた
jdg022_38:編集する画像でキャンバスが開いた

6)編集する画像がキャンバスに表示される。

 

❷ 文字を入力し詳細設定をする

jdg022_39:タイプツールを起動し、入力する箇所をクリックする
jdg022_39:タイプツールを起動し、入力する箇所をクリックする

1)画面左のツールバーから「タイプツール」をクリックする

 

2)画像の上の、文字の大まかな位置でクリックする

(文字位置は調整できる)

 

jdg022_40:テキストを入力し基本的スタイルを設定する
jdg022_40:テキストを入力し基本的スタイルを設定する

3)「詳細設定」画面が出るので、テキストを入力する(この場合縦書きに似せている)

 

4)フォント(HGP創英プレゼンスEB)を指定する

 

5)フォントサイズ(40)を指定する

 

6)スタイル(レギュラーもしくは太字)を指定する

 

7)文字の色(#8b0000 darkred)を指定する

 

8)整列(中央揃え)を指定する

 

9)「OK」をクリックする

 

jdg022_41:他のテキストを入力する
jdg022_41:他のテキストを入力する

10)完成した文字列に対応したレイヤーが、入力文字名の付いたレイヤーとなる

 

11、12)他の文字列も追加する

 

 

文字列を変更する場合

文字列を入れ直したい場合は ①レイヤー窓で、やり直したい文字列レイヤーを選択して青色表示させる、②ツールバーより「タイプツール」を選択、 ③画像内の文字列をクリックすると修正できます。

❸ 文字列にスタイルを適用する

jdg022_42:スタイルを適用する文字列のレイヤーを選択する
jdg022_42:スタイルを適用する文字列のレイヤーを選択する

1)スタイルを適用する文字列のレイヤーをクリックして選択し、青色表示にする 

 

jdg022_43:文字列のレイヤーを右クリックし「レイヤースタイル」を選択
jdg022_43:文字列のレイヤーを右クリックし「レイヤースタイル」を選択

2)レイヤーを右クリックし、

 

3)表示されるメニューから「レイヤースタイル」 を選ぶ

 

jdg022_44:「アウターグロー」スタイルを設定
jdg022_44:「アウターグロー」スタイルを設定

4)左側のスタイルリストの中から「アウターグロー」の文字列部分をクリックし、左側のチェックを入れる

 

5)「アウターグロー」の値を設定する。例:

  • 不透明度(100)
  • 硬さ(4)
  • サイズ(10)
  • 色(白色)

 

6)「OK」をクリックしてスタイルを確定する

jdg022_45:スタイルを設定したレイヤーの「レイヤースタイルをコピー」
jdg022_45:スタイルを設定したレイヤーの「レイヤースタイルをコピー」

7)スタイルが設定されたレイヤーには星形のスタイルマークが表示されるので、このレイヤーを右クリックする

 

8)表示されるメニューから「レイヤースタイルをコピー」を選ぶ

jdg022_46:レイヤーに「レイヤースタイルを貼り付け」
jdg022_46:レイヤーに「レイヤースタイルを貼り付け」

9)スタイルを設定する文字列レイヤー をクリックして選び、青色表示にする

 

10)青色レイヤーを右クリックする

 

11)表示されるメニューから「レイヤースタイルを貼り付け」を選ぶ

jdg022_47:レイヤーにスタイルが設定された
jdg022_47:レイヤーにスタイルが設定された

12)レイヤーにはスタイルが設定されているマークがつく

 

13)他の文字列レイヤーにも同じスタイルを設定する

複数レイヤースタイル

今回は一つのレイヤースタイル(アウターグロー)をレイヤーに設定したが、例えば(アウターグロー)と(ドロップシャドー)の複数のレイヤースタイルを設定することもできる。

レイヤースタイルをやり直す

レイヤースタイルをやり直す場合は、 ①やり直したい文字列をレイヤー窓から選択して青色表示させる、②青色部分で右クリック、③レイヤースタイルをクリックで修正できます。

❹ 文字列を挿入した画像を保存する

文字列の編集ができる形式(PXD形式)で保存するのと、画像表示で使用できる形式(JPG)の二つの形式で保存する。

他のトップ画像についても同様に文字列を追加した画像を準備する。

TopImages01T.jpg
TopImages01T.jpg

テキスト:

HGP創英プレゼンスEB、40px、#ffffff、レギュラー、中央揃え

 

レイヤースタイル:

アウターグロー(100、4、10、#8a0000)

TopImages02T.jpg
TopImages02T.jpg

テキスト:

HGP創英プレゼンスEB、40px、#ffffff、レギュラー、中央揃え

 

レイヤースタイル:

ドロップシャドー(74、10、0、-135、#000000) +

アウターグロー(100、5、12、#8a0000)

TopImages03T.jpg
TopImages03T.jpg

テキスト:

HGP創英プレゼンスEB、40px、#ffd500 金、レギュラー、中央揃え

 

レイヤースタイル:

アウターグロー(100、5、10、#006100)

TopImages04T.jpg
TopImages04T.jpg

テキスト:

HGP創英プレゼンスEB、40px、#006100、レギュラー、中央揃え

 

レイヤースタイル:

アウターグロー(100、4、10、#ffffff)

TopImages05T.jpg
TopImages05T.jpg

テキスト:

HGP創英プレゼンスEB、60px、#eb9515、太字 

レイヤースタイル:

べベル(内側、2、2、-135、白、100、黒、100)