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

022-2 調べた領域サイズに合わせたトップ画像作成

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

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

022-2 調べたサイズの画像を作成する

ここでは、コンテンツエリアの幅(661px)と、サンプルトップ画像の高さ(320px)に合った画像を作成する。

 

ここでは編集前の画像として、pic_g284.jpg、pic_g071.jpg、pic_g223.jpg、a0002_011979_m.jpg などを使う例を紹介します。

作成前の画像

pic_g284.jpg
pic_g284.jpg
pic_g071.jpg
pic_g071.jpg
pic_g223.jpg
pic_g223.jpg
a0002_011979_m.jpg
a0002_011979_m.jpg

サイズを661x320 px にした画像

TopImages01.jpg
TopImages01.jpg
TopImages02.jpg
TopImages02.jpg
TopImages03.jpg
TopImages03.jpg
TopImages04.jpg
TopImages04.jpg

写真を決められたサイズで切り取りする方法について

ここでは画像を決められたサイズにする方法を紹介していますが、「P20--2 定められたサイズにて写真を切り取る」では別の方法を紹介しています。使いやすい方法で行ないましょう。

❶ pixlr サイトにアクセスし、「新しい画像を作成」を始める

jdg022_22:Pixlr Editor で「新しい画像を作成」
jdg022_22:Pixlr Editor で「新しい画像を作成」

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

https://pixlr.com/editor/

 

pixlr エディターの起動について

詳細はP10-3を参照する

 

2)サイトが開いたら、「新しい画像を作成」をクリックする。

❷ 新しい画像の値を入力し、キャンバスを作成する

jdg022_23:新しい画像の値を入力
jdg022_23:新しい画像の値を入力

1)任意の名前を入力。

 

2)「幅」に調べた幅の値を入力する。ここでは、661 と入力する。

 

3)「高さ」には任意のサイズを入力する。ここでは、320 と入力する。

 

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

 

5)新しいキャンバスが作成される。

❸ 新しいキャンバスでの表示倍率を縮小しておく

jdg022_24:表示倍率を縮小する
jdg022_24:表示倍率を縮小する

1)100 以下の数値を入力して表示倍率を縮小しておく。

❹ トップ画像として挿入したい画像ファイルを開く

jdg022_25:メニューの「ファイル」→「画像を開く」
jdg022_25:メニューの「ファイル」→「画像を開く」

1)メニューの「ファイル」→「画像を開く」を選択する。

jdg022_26:トップ画像にするファイルを開く
jdg022_26:トップ画像にするファイルを開く

2)画像ファイルが保存されているフォルダーを指定する。

 

3)トップ画像として挿入したい画像ファイルを選択する。

 

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

jdg022_27:別ウィンドウで画像が開く
jdg022_27:別ウィンドウで画像が開く

  5)キャンバスとは別ウィンドウで画像が開く

❺ 開いた画像をキャンバスに貼り付ける

jdg022_28:画像をコピーする
jdg022_28:画像をコピーする

1)Ctrl + A キーを押して画像全体を選択する。

 

2)Ctrl + C キーを押して画像をコピーする。

jdg022_29:キャンバスに画像を貼り付ける
jdg022_29:キャンバスに画像を貼り付ける

3)新規作成したキャンバスをクリックする。

 

4)Ctrl + V キーを押して画像を貼り付ける。

❻ キャンバスの上で、画像を表示したい範囲・サイズを調整する

jdg022_30:自由変形を選択する
jdg022_30:自由変形を選択する

1)メニューの「編集」→「自由変形」を選択する。

jdg022_31:画像サイズと表示する範囲を設定する
jdg022_31:画像サイズと表示する範囲を設定する

2)Shift キーを押しながら画像の角をドラッグしてサイズを調整する。

 

3)画像の中央付近をドラッグして、この画像を表示したい範囲へ移動する。

メモ:画像の真ん中にある白いひし形マークはアンカーで、サイズ変更や回転時にはこのアンカーが中心となって変形する。

 

4)画像をクリックする。

jdg022_32:画像の編集を確定する
jdg022_32:画像の編集を確定する

5)「はい」をクリックして画像の編集を確定する

 

❼ 画像を保存する

jdg022_33:画像を保存する
jdg022_33:画像を保存する

1)メニューの「ファイル」→「保存」を選択する。

 

jdg022_34:画像保存のダイアログ
jdg022_34:画像保存のダイアログ

2)画像のファイル名を半角英数字で入力する。

 

3)画像のフォーマットを選択する。

下記ガイドを参照

 

4)画像のクオリティを選択する。

メモ:数値が大きいほどきれいですがファイル容量は大きくなります。

 

5)「OK」をクリックする。

再編集可能な状態で保存する

再編集可能な状態で画像を保存するには、手順3)のフォーマットで「PXD」を選択します。

一方、画像としてJimdoページに貼り付けるには、「GIF」、「JPG」、「PNG」のフォーマットで保存します。

jdg022_35:画像の保存先を指定し、保存する
jdg022_35:画像の保存先を指定し、保存する

6)保存先のフォルダを選択する。

 

7)「保存」をクリックしてパソコンに保存する。

❽ 複数のトップ画像を準備します

これにより、Jimdo のトップ画像エリアに合ったトップ画像が作成された。

スライドショーにてトップ画像を表示するには、同じサイズで必要な枚数のトップ画像を作ります。

作成前の画像

pic_g284.jpg
pic_g284.jpg
pic_g071.jpg
pic_g071.jpg
pic_g223.jpg
pic_g223.jpg
a0002_011979_m.jpg
a0002_011979_m.jpg

サイズを661x320 px にした画像

TopImages01.jpg
TopImages01.jpg
TopImages02.jpg
TopImages02.jpg
TopImages03.jpg
TopImages03.jpg
TopImages04.jpg
TopImages04.jpg

022-2 調べた領域サイズに合わせたトップ画像作成

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

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