PC1台で自由に人生をデザインするリクのブログ

画像を丸く切り取る&トリミングする3つの加工方法|プロフィールは丸く柔らかく。

 

ふと。画像を丸く切り取ったりトリミングしたくなるときってありますよね。

例えば各種SNSのプロフィールアイコン画像を設定したいときや、こういったメディア運営をしていく上でのプロフィール画像。WEBで何かしらの発信活動を行なっていく上で、プロフィール画像っていうのはめちゃくちゃ大事な部分です。「第二の顔」です。

 

今回は、そんなケースに僕自身が遭遇した際の備忘として、そして同様に画像を丸くしたい人に対してとても便利な方法を紹介していきます。全部で3つの方法があるので、ぜひお好きなものを選んでいただき画像をどしどし丸くしてってくださいね。

 

プロフィールは丸く柔らかくいこう

 

さて、まず個人的な話をすると、このオフィシャルメディアに掲載している僕のプロフィールアイコンは「丸」です。サイドバーにあるのでぜひ実際に見てみてください。

実は以前は丸ではなく四角いプロフィール画像を使用していたのですが、どうも四角だと固いイメージがあるというか、当たり前ですが角ばった印象を感じずにはいられないんですね。

 

でも、それだと「なんだか堅そうな人だな」みたいに硬い印象をユーザーに対して与えてしまいかねないので(無意識下ですが)、ふとした機会に丸いアイコンにするようにしました。

 

それからと言っては、メディアに対するユーザーの反応も比較的よくなった印象がありますし、何より僕自身もいい意味で丸くなった気がします。関係ないかもですが「なんか丸くなったね」って実際に言われることも増えました。

まあそれだけWEBにおける「顔」になるプロフィールアイコンのイメージや印象というのは大事なものなので、ぜひこの機にお堅い印象を卒業してみてはいかがでしょうか。

 

画像を丸く切り取る&トリミングする3つの加工方法

 

それではさっそく、画像を丸く切り取ったりトリミングしていく方法について解説していきます。今回紹介するのは以下の3つ。

  • MacBookの「プレビュー」機能を使う
  • CSSで指定する
  • 万能ツール「画像丸抜きくん」を使う

基本的にどの方法を選んでいただいてもOKですが、一応僕は2つ目のCSSで指定する方法を採用しています。この方法は実際は画像を切り取っているのではなく「丸く加工」しているのですが(対してニュアンスは変わらない)、微妙に影をつけたりすることもできるので便利といえば便利。

 

ぜひ3つの方法に一通り目を通していただき、その中からお好みで選んだ方法で画像を丸抜きしていきましょう。

 

MacBookの「プレビュー」機能を使う

 

MacBookユーザー限定の方法ですが、「プレビュー」機能を使うことによって画像を丸く切り取ることができます。

プレビュー機能って案外活用できている人がそこまで多くない印象ですが、画像を加工したりするにはうってつけのツールなので、ぜひ今回の方法についても覚えておくようにしましょう。

 

まず、丸く切り取りたい画像を選択しプレビューで開いたら、次のようにちょっと上の方に「カバン」みたいなアイコンがありますね(勝手にツールボックスだと思ってる)。そちらをクリックしましょう。

 

すると、このように画像を加工するためのメニューバーが表示されるので、一番左にある「点線四角」をクリック。表示された項目の中から「楕円で選択」をクリックしましょう。

 

続いて、楕円で範囲を選択することができるようになるので、切り抜きたい範囲に点線を広げていきましょう。ここで注意すべきは楕円で選択しているので、カンペキな正円になるかどうかはあなたの裁量次第ということになります。微妙に調節していきましょう。

無事に範囲が選択できたら、右上にある「切り取り」ボタンをクリックすればあとはOKです。

 

このように、画像が綺麗に切り抜かれましたね。少年の健気な表情がより映えるようになりました。

 

カンタンではありますが、これで画像の丸抜きは完了です。実際の画像を見てみると…

 

悲しいかな、当メディアではメインコンテンツ内の画像には四角い影がつくようになっているので、なんだか丸いのか四角いのか微妙な感じになってしまいました。

しかしですね、画像自体はしっかりと丸くトリミングされているのでご安心ください。実際に表示を確認したいという方は、以下画像URLをコピーして、ブラウザのURL部分に貼り付けて確認してみてください。

⇒http://rikudesign.com/wp-content/uploads/2017/11/ben-white-124388-1.png

 

まず1つ目として、以上がMacBookのプレビュー機能を使った加工方法でした。

 

CSSで指定する

 

Windowsユーザーもしくはなんだかプレビューの使い方とか色々わからないよーという方は、続いてCSSで画像を加工する方法について見ていきましょう。

CSS、などというと小難しい印象を受ける人もいるかもしれませんが、実際の設定はめちゃくちゃカンタンです。しかも他の動きや加工も指定することもできるので、むしろ僕としてはこの方法をオススメしたいところです。ぜひ参考までに。

 

まず、画像をWordPressにアップロードしたら(今回はWordPressサイトのプロフィール画像のつもりで解説しています)、URLが発行されますね。今回はこちらのURLを軸に、コードで加工していきます。

 

(※CSSを使った方法は「正方形」の画像で設定していくことをオススメします、長方形の画像だと歪んだ丸画像になってしまうのでご注意ください。)

 

コピーした画像のURLを、以下のコードの「画像のURL」に置き換えましょう。コードは「maruimg」というクラス名で指定していることになっています(クラス名は何でもOKです)。

 

そして画像のURLに置き換えたコードを、画像を貼り付けたい場所にペーストします。無事にペーストできたら、続いて指定したクラスに対してCSSで動きを加えていきましょう。

テーマによって呼称は異なりますが、CSSを入力するための「style.css(当サイトの“賢威”ではdesign.css)」の一番下などわかりやすい箇所に、以下のコードを追記しましょう。

 

これは先ほど「maruimg」というクラスで指定した画像に対して、「width」「height」で横幅と高さを(数値はお好みで変えてOKです)指定し、「border-radius」を50%で設定することによって角を丸く削り取るように指定しています。

よくわからないという場合には、「50%」の数値を色々な数字に変えてみましょう。実際に丸くなったり楕円になったりするので多少理解が進むはずです。

 

それぞれ画像のURLに追記したコード、CSSに追記したコードを見やすくすると、次のようなイメージになります。実際にワンちゃんの画像も丸く切り抜かれていますね。

See the Pen qVKOpj by RIKU (@coderiku) on CodePen.

 

このようにして、本来は正方形の画像の角を削り取るようにCSSで指定したわけですが、この方法を応用することによってこんな画像加工も可能になります。ぜひ参考までに。

See the Pen wPXKOL by RIKU (@coderiku) on CodePen.

 

ワンちゃんばかりでなんだか幸せな気持ちになりました。CSSで指定することによって、ただ丸く切り抜くということにしても幅が広がって楽しくなります。本来の目的はただ画像を丸くするだけですが、もし遊び心が生まれたのであればぜひ色々と調節してみると面白いと思います。

 

万能ツール「画像丸抜きくん」を使う

 

もうCSSとかわけわからん、頭痛い。そんなあなたには最後にとっておきのツールを紹介しておきます。

その名も「画像丸抜きくん」。名前を聞いただけでこのツールが画像を丸抜きするためのものであり、もはやそれ以外の役割はないということに気づいたかもしれません。その通りです。

 

画像丸抜きくんは「画像 丸抜き」とかで検索するともうトップの方に表示されるので、もはや画像の丸抜きで悩んでいる人はなぜこの記事を読んでいるのだろう、とここにきて虚しさすらこみ上げてくる。

この超絶万能ツールを開発したのは東大卒の開発者さんだそうで、「そういえば画像丸抜きツールってないなあ」と思い立ちリリースに至ったんだとか。こういうツールを「えい!」と作っちゃえる人ってホントにすごいですよね、ナチュラルに使わせていただいていますが世の中には大発明だらけです。

 

そんな画像丸抜きくんで、画像を丸くトリミングしていきましょう。使い方はカンタンです、犬でもできます。

 

まず、画像丸抜きくんのサイトに移っていただき、真ん中ほどにある「画像を丸く切り抜きますか?」という見出しを見つけます。その下でメディアを選択できるようになっているので、「ファイルを選択」で丸抜きしたい画像を選択しましょう。

 

無事に選択することができたら、「アップロードして丸く切り抜く」というストレートな文言のボタンがあるので、そちらをクリック。

 

すると1、2秒後には次の画面に移り、無事に画像が丸抜きされたことが確認できます。いい感じに丸抜きされていれば、下にある「クリックして丸抜き画像をダウンロード」というボタンをクリックすれば完了です。

 

といったように、これまでの解説はなんだったんだろうと思わざるを得ないほどのカンタンさで、画像を綺麗に丸抜きすることができました。僕も最初はこういうツールを敬遠してしまう癖があるのであまり使っていませんでしたが、最近ではブックマークに登録しているほどの愛用っぷりです。

ぜひぜひ、色々と作業するのが面倒だという場合には、この画像丸抜きくんを活用していくようにしましょう。

 

最後に

 

以上、画像を丸く切り取る&トリミングする加工方法ということで、以下の3種類の方法について解説しました。いかがだったでしょうか?

  • MacBookの「プレビュー」機能を使う
  • CSSで指定する
  • 「画像丸抜きくん」を使う

 

いずれの方法でも画像を丸く切り取ったりトリミングしたりすることができるので、ぜひお好みで使い分けていってみてくださいね。

最近ではTwitterやインスタなどのSNSを始め、多くのWebサービスで丸いプロフィールアイコンが使われるようになってきたので、ぜひオフィシャルのメディアでも丸いプロフィール画像を使って、柔らかな印象をユーザーに対して届けていきましょう。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です