真ん中に配置したらバランスが悪い!画像の見た目のウェイトから中心を見つける方法 -Visual Center
Post on:2016年9月21日
正円とか正方形を中心に配置するのは簡単ですが、見た目の中心が中央にないものを中心に配置するためには、見た目のウェイトから中心を見つける必要があります。
画像の見た目の中心を見つけることができるオンラインツールを紹介します。
アイコンをサークルに配置するなど、バランスがちょっと悪いなという時にチェックしてみるといいですね。

Visual Center
Visual Center -GitHub
Visual Centerは画像にあるすべてのピクセルを対象に、見た目のウェイトを測定し、そのピクセルと背景色との差の平方根を算出します。その結果から、すべての方向にウェイトのバランスがとれた位置を見つけ出します。
さっそく、すこし不安定なバランスの画像で試してみました。

クローバーの写真
画像はドラッグ&ドロップでアップロードでき、結果もすぐにでます。

左: デフォルトの画像、右: 見た目の中心にあわせた画像
クローバーの画像の見た目の中心は65%-27%で、元画像で左に15%、下に23%、移動するとその位置になると結果が表示されました。
オプションでは、ガイドの有無、形状(円と矩形)が選択でき、元画像の位置も表示されます。

矩形における見た目の中心
sponsors