元画像を加工せずに、見せ方を変えてます。

LINEやGoogle、Facebookなど、自分のアイコンを設定する際、アップロードした画像は長方形なのに、アイコンとして表示された画像は丸型なのを不思議に思ったことはありませんか?

この丸型のアイコン、アップした画像が丸く切り抜かれているのではなく、データは長方形として残したまま、角の部分だけを見えないように細工をしています!

この細工…実は数年前まではできない技術でした。以前までは長方形の写真を丸く表示する為に、Photoshopやillustratorで加工しなくてはできないことだったので、できる人に依頼して加工をしてもらうか、角を丸くするようなデザインで作らないという感じ。また元データを残しておかないと、丸型にしてしまった画像を元に戻すこともできません。ずっと同じ業者にサイト管理をしてもらっている場合はよいのですが、その都度違う業者に依頼をすると元データがないため、再加工ができないという状態でした。

現在は…というと。

画像を直接加工するのではなく、一部分だけ見せない方法、CSS3の記述で画像を調整しています。

何も手を加えていない画像。
そしてCSS3を使った画像。

上の二つの画像、マウスを右クリックして画像を保存していただくとわかるのですが、保存した画像はどちらも長方形のままになっています。CSS3では画像の元データはそのままで、いろんな装飾ができるようになりました。

画像で角丸を作るよりも手間もかからず、綺麗な曲線が作れて、元データも残せる!!!かなり便利なのでCSS3は積極的に使ってサイト制作をしたいですね♪