オリジナルボタン画像を作成する

オリジナルボタン画像を作成する

下のようなメール画像を貼り付けて、
オリジナルボタン画像を作る方法をご紹介します。

 

 

ボタンの大きさは120ピクセル×120ピクセルにします。

 

ホームページ作成

 

まず、メール画像の大きさをボタン画像より
一回り小さめの100ピクセル×100ピクセルに
大きさを変えて保存します。

 

ホームページ作成

 

次に、「ファイル」-「新規作成」で
画像サイズ120ピクセル×120ピクセル、
キャンバスの色を銀色にします。

 

 

キャンパスの色が明るすぎると、
赤い「e」の文字が消えてしまうので赤より明るい色を選択します。

 

ホームページ作成

 

立体枠をつける」のアイコン(赤枠)を
クリックして枠の大きさを設定します。

 

 

メール画像が100ピクセル×100ピクセルで
ボタン画像が120ピクセル×120ピクセルなので、
外側は10以下にします。

 

ホームページ作成

 

ボタン画像の中央にメール画像を貼り付けるため
貼り付ける位置を選択します。

 

画像にマウスカーソルを当てると、
下の赤枠の部分にカーソルの座標が表示されますので、
(10,10)でクリックして(110,110)まで
ドラックしたところで離します。

 

ホームページ作成

 

「編集」-「合成」をクリックして、
下の赤枠の部分に貼り付ける画像の
ファイル名を入力します。

 

 

右の「…」のボタンをクリックすると、
ファイルを選択することができます。

 

 

下の青枠の中は、
暗い画素を優先」を選択します。

 

ホームページ作成

 

すると、背景色より明るい白の画素は優先されず、
背景色になりますが、
画像の赤と黒の部分は残ります。

 

黒い線で囲まれた部分が残ることで、
後から白で塗りつぶすことができます。

 

ホームページ作成

 

「編集」-「塗りつぶし」をクリックして、
メールの白のエリアをクリックすると
背景色が白く塗りつぶされていきます。

 

ホームページ作成

 

メールの白のエリアを
すべてクリックすると
このように出来上がります。

 

ホームページ作成

 

ポイントとしては、
メールの画像が赤、黒、白の3色でできていて、
ボタンの色が白よりも暗く、
赤、黒よりも明るい色を選択することで、
赤の文字と黒の外形を残すことができるということです。

スポンサーリンク


page top