WordPressのアイコン画像をGoogleスライドの図形描画だけでつくってみたら超簡単だった

スポンサーリンク

WordPressのアイコンを自分で作ろう

まずはどういうアイコンにするか決める

はてなブログからWordPressに移行してみて、
アイコン(プロフィール画像)がないのがちょっとさびしい気がしてきました。
以前は適当に撮った写真を加工して使ってましたが、
ブログの顔という感じではなかったので。。

ドメインもflyon-pointにしたし、なんとなくflyonっていう響きが好き。
まぁ、JGC修行するまで知りませんでしたが。。

あまり悩んでもしかたないということで、ライオンに決めました(安易)。

Google画像検索でいい感じのイラストを探す

とりあえず、Googleで「ライオン イラスト」で画像検索

フリー素材を含め、たくさんのイラストが出てきます。
そのままコピペして使うといろいろと問題になりかねないので、
あくまでもいくつか見ながら、参考にさせていただくことにします。

Googleスライドで図形描画

絵心がないので手書きは断念

サンプルを参考にして描くには、手書きしたものをスキャンしたり写真撮ったり、というのが一番カンタンでしょう。
こういうときにiPadにApple Pencilですいすい描けたらいいんでしょうが、
あいにく持ってないし、そもそも絵はあまり得意ではありません。。

そこで書くのはPCで、ということになりました。

Googleスライドの図形描画ツールを使ってアイコンを描く方法

何を使うかですが、それほど複雑な絵ではないし、
「取り急ぎオートシェイプでもなんとかなる。でも手元のPCにはOfficeが入ってない。。」
ということで、Googleアカウントがあれば誰でも無料で利用可能Googleスライドを使うことにしました

Google スライド: プレゼンテーション スライドショー作成ツール | Google Workspace
Google スライドで魅力的なプレゼンテーションを作成しましょう。あらゆるユースケースに対応できるスライド テンプレートを備え、個性的な視覚効果を AI で生成することもできます。

[挿入]メニューから図形パーツを選ぶ

空白ページから製作開始。まずはタイトルを記入するテキストボックスはいらないので削除します。

参考にするイラストを見ながら、似ている図形を探します。
今回使ったのは楕円や角丸四角形などがほとんどですが、
たてがみは吹き出しの星10というやつです。

挿入メニューから、図形にマウスをあわせて図形を選び、
ドラッグしてサイズを決めます。

とは言っても、サイズは後で変えられるので、適当でOKです。

図形の挿入のしかた

塗りつぶし・枠線の色を変え、重なり合いを調整(試行錯誤)

塗りつぶし色と枠線の色を選んで、必要に応じて図形を回転させたりします
耳のような半円は、楕円を複数用意して、パーツとパーツの重なり合いで、余計な線を隠すように動かしていきます。
いい感じになったパーツは、複数選択してグループ化しておくと、
最後の配置が楽です。
あとは中央に並べたりして、見栄えを整えていきます。

たてがみと顔を分けると、ライオンというよりたぬきに見えますね。。

たてがみと顔を重ねる前

完成したら[ファイル]メニューからPNG画像でダウンロード

できあがり。思ってたよりいい感じになりました。たぶん参考にしたイラストの出来がよかったんですね。

だいたい30分ぐらいかかりました。

できあがり

描き終えたらスライドを保存した上でトリミングするので、まずは画像ファイルとしてダウンロードします。
[ファイル]メニューからダウンロード>PNG画像を選択します。

PNG画像ファイルダウンロードのしかた

PNGファイルを正方形に整えて完成!

OSに付属しているペイント等の画像編集ソフトで正方形にカットします。240ピクセルですかね。
これでできあがり。
WordPressのアイコンにも、Twitterのアイコンにもいい感じです。

まとめ

専門のツールではないので、簡単なものしか描けないかと思いますが、
意外といい感じのアイコンができて個人的には満足してます。
参考になればうれしいです。

タイトルとURLをコピーしました