WordPress

円形プロフィール画像のアイコン(アバター)が小さすぎたり欠けたりしていませんか?

投稿日:2018年7月12日 更新日:

円形で表示されるプロフィール画像に設定したアイコン(アバター)が小さすぎたり欠けたりしていませんか?

たとえばAFFINGER5のサムネイル画像を円形にしウィジェットで「STINGERサイト管理者紹介」を設定した場合、グローバルアバターGravatarも円形で表示されます。このとき挿入した画像が中央に正しく配置されていないと欠けてしまいます。

 

gravatar_icon01

 

ちょうど上左のような状態です。この記事ではそれを右のような適正な状態に直します。

必要なのはpng(ピング)画像が作成でき、レイヤー機能を備えたソフト(IT-SORAYORIはAdobe Photoshopを使用)。ちょっとした工夫を施すことで、適正な画像を作成することができるんです。

この記事のポイントはGravatar以外にも使用できるほぼ万能な背景透過の切り抜きアイコン(アバター)を作成することです

Gravatarのプロフィール画像は80x80pxです。ここでは大きめの540x540pxで作成します。というのもWordPressのダッシュボード「外観」>「カスタマイズ」の「サイト基本情報」で設定するサイトアイコン(ブラウザのタブなどに表示)が「512×512px以上の正方形」と定められているからです。サイトアイコンは背景透過によってアイコン(アバター)が際立ちスッキリ見えるようになります。ここで作成するアイコン(アバター)がそのまま使用できます。

 

step
1
正円の透過画像Aを用意する

まず背景が「透過」で540x540pxサイズの正円の画像を作成します。モードはRGBカラー。正円の色はGravatarでは背景色として使うことも可能です。任意の色の正円を配置してください。

profileicon01

 

Adobe Photoshop CS2で正円の透過画像を作成する方法

  1. 使用したい円のサイズ(今回は540x540px)の新規画像を作成
    カラーモード「RGB」カンバスカラー「透明」
  2. 中央に小さい正円の選択範囲を作成
  3. 「パス」ウィンドウで選択範囲から「作業用パス」を作成
  4. メニュー「編集」から「パスを自由変形」を選択
  5. メニューに位置指定のボックスが表示されるので起点(■)を左上角に置き、X:0px、Y:0pxと入力。

profileicon03

  1. またその右にW(横)とH(縦)のサイズ変形のボックスが表示されます。デフォルトでは「%」となっているので、ボックスを右クリックし「pixel」に変更。任意のサイズ(今回は540x540px)に拡大。「適用」をクリックし確定します

gravatar_icon04

  1. 拡大したパスから「パス」ウィンドウで「選択範囲を作成」
  2. メニュー「編集」から「塗りつぶし」を選択し、任意のカラー(今回は白)に。これで画像範囲いっぱいの白い正円ができます
  3. 「パス」ウィンドウに戻り「作業用パス」を削除します
  4. 保存はpng形式で

 

step
2
正円より大きいアイコン(アバター)の透過画像Bを用意

つぎに背景が「透過」の切り抜きアイコン(アバター)画像を用意します。後に正円と合成する際にアイコン(アバター)を縮小するため、正円よりやや大きく作ります。

profileicon02

 

Adobe Photoshop CS2でjpg画像からアイコン(アバター)の透過画像を作成する方法

  1. 使用したいアイコン(アバター)のjpg画像を開き、カラーモード「RGB」を確認
  2. カラー「なし」の新規レイヤーを作成
  3. アイコン(アバター)の必要な部分を選択し、コピー。アイコン(アバター)は前項で作成した正円(今回は540x540px)よりサイズが大きいこと
  4. 1.で作成した新規レイヤーにペースト
  5. 「レイヤー」ウィンドウ最下段にある「背景」を削除
  6. これでアイコン(アバター)の透過画像の完成です。
  7. 保存はpng形式で

 

step
3
正円の透過画像Aにアイコン(アバター)の透過画像Bを挿入

先ほど作成した正円(ここでは白)の透過画像Aに切り抜きアイコン(アバター)の透過画像Bをレイヤーとして挿入します。

 

profileicon04

そして切り抜きアイコン(アバター)の透過画像Bのサイズを正円のなかに収まるように調整します。

上はAdobe Photoshop CS2.0を使用した場合の画像です。切り抜きアイコン(アバター)の透過画像Bのレイヤーでメニュー「編集」から「自由変形」を選択し、調整。「適用」をクリックし確定します

 

そして以下のような画像にします。

透明のベースに正円とアイコン(アイコン)のレイヤーが重なっています

gravatar_icon05

レイヤーは以下の順番です

Gravatarのみの使用であれば、これで完成です。png形式で保存してください。

 

ただし今回の目的はサイトアイコンにも使用できるほぼ万能な背景透過の切り抜きアイコン(アバター)を作成することです。そのため最後につぎの作業を行います。かんたんなことです。

中央にある正円のレイヤーを削除します。

gravatar_icon07

 

これをpng形式で保存して完成です。アイコン(アバター)が中央に正しく配置され、正円で切り抜かれても画像が欠けることはありません。さらにアイコン(アバター)のアウトラインまで背景が透過されています。

よろしかったらぜひ一度お試しください。

 

お役立ち記事

pdfedit 1
ipodアイキャッチ 2
Twitterスパムアイキャッチ 3
spotify_sf_size01 4
171106twittertsuchi2 5
photo_gallery10 6
spotify_1807 7
pokego161214_2 8
cdrive_partition 9
無線LAN04-2 10
mercari 11
Evernote新機能01 12
twitter_list 13
hub02 14
no image 15

-WordPress
-,

Copyright© IT-SORAYORI , 2018 All Rights Reserved.