【Simplicity2】 ロゴとヘッダーの作成

ヘッダー背景画像の作成

 

ヘッダー背景画像は、PCとモバイルでは、画面表示される比率やサイズが異なるので、一つの画像を共用することが難しいです。PC用とモバイル用の二枚を作成します。

まず、元となる写真やイメージをKeynoteへ取り込みます。

 

次に、Keynoteの「イメージ」→「マスク編集」を選びます。

 

 

まず、PC用の加工をします。1,024ピクセル X 150ピクセルの大きさで、トリミングします。

 

 

 

次に、同じページの下段に、モバイル用の加工をします。1,024ピクセル X 500ピクセルの大きさで、トリミングします。
※すみません。下の写真は1,042pt x 500ptになっていますが、この程度の誤差であれば影響ありません。

PC用の表示と、モバイル用の表示のバランスを整えます。

Keynoteでの加工は、これだけで、このページをイメージとして書き出します。

 

このイメージは、PC用、モバイル用が一体になっていますので、これを元に、アップルのアプリでは「プレビュー」を使って、範囲選択→コピー→クリップボードから新規作成、にて、WordPress用に、PC用、モバイル用二枚のイメージを作成します。