Canvaを使った吹き出しアイコンの作り方をメモしておきます。
いままでブログ用、ファビコン、SNS用のアイコンを作りたいけど、作り方がわからなかった、という方は参考にしてみてくださいね。
- ITに疎い人・ブロガー
- ブログやSNS用にオリジナルのアイコン作りたい
- Canva、Canva Proの便利な使い方を知りたい
- WordPress＆Cocoon愛してるブロガー
吹き出しアイコンに入れるデータを用意する
まずは、吹き出しアイコンに入れたいイラストや写真などのデジタルデータを用意します。
らいさわブログで使用しているほとんどのらいさわとむすめちゃんのアイコンは自作です。
下手ですが、絵を描くのは好きなので、パソコンで描きました。
↑このイラストを
↓こういう吹き出しアイコンにしてます。
お腹すいた
個人的な意見ですが、アイコンは、オリジナルなもの（イラストなど）を使った方がいいと思います。
よくあるブロガーネームや、多数の方が使っているイラスト（アイコン）を使っている方は、
かぶります。
どうせなら読者の方々や、ブログ仲間、ツイッターのフォロワーさんに、自分のことを確実に覚えてもらった方がいいと思いませんか？
絵なんて書けない、自分で絵を描くなんて面倒、と思う方は、
▼ ココナラのクリエイターに依頼すると簡単ですよ〜
アイコン用画像データを背景透過のpngイメージにする
この記事を書いているときに作っていた吹き出しアイコンは、Sai.さんのイラストを元に作りました。
使いたいイラストを選びpngでダウンロードしました。
画像形式pngは背景が透明になっているので、アイコン作成に使いやすいです。
Canvaでイラスト画像を加工する
上記の用にダウンロードしたpng画像のイラストを、Canvaを利用し、少しサイズ調整、加工しました。
Adobe Photoshopが使えなくてもOK 簡単なCanvaとは
最近、画像加工などは、もっぱらCanvaを使っています。
\ Canva Pro を無料でお試し /
Canvaでは、グラフィックデザインのスキルがなくとも、簡単におしゃれな画像、フライヤーなどが作れるオンラインのグラフィックデザインツールです。
パソコン上で使えるのはもちろん、アプリでも使えます。
ウェブサイト用の画像をはじめ、SNS投稿、年賀状、カード、フライヤー、プレゼン資料、ロゴなど、とにかくどのようなメディアも、スキルがなくとも簡単にかっこいいのが作れます。
Canva Proは有料ですが、無料版でも全然悪くないです！
Canvaを使うと、デザインを考える時間をはじめ、写真、イラストなど「探す手間と時間」が一気に減ります。
誕生日会のオリジナル招待状なんかも作ったよ〜
イラスト画像を簡単に加工できるCanvaの使い方
Canvaにログインしたら、
（Canvaアカウントをお持ちでない方は、まずは無料でアカウントを作ってお試し利用してみましょう！） >>> Canva Pro無料お試しはこちら
サイズを200px（ピクセル）x 200pxに設定し、新規デザイン（Create a design）を作ります。
この時私が作っていたのはこの「らいさわブログ」（Wordpress＆Cocoonテーマで作成）用の「吹き出しアイコン」。写真でもなく、イラストなので200 x 200pxで十分でしたが、作りたいアイコンによっては、ピクセルサイズを増やすと画質が綺麗に見えますよ（データも重くなるのでその辺は自身で調整しましょう）。
200ピクセルx 200 ピクセルサイズの正方形キャンバスができているので、
先ほどダウンロードしたイラストをCanvaにアップロード。
正方形の中に吹き出しアイコンの円が入っていると想像し、キャンバスの真ん中にイラストを置きます。
こんな感じで、保存してCanvaでの作業はおしまい・・・ん？
「？」があった・・・。
Sai.さんのセンスあるイラストをいじりたくはなかったのですが、
吹き出しアイコンに入れにくいため、泣く泣くいじることに。
Canva Proの背景リムーバーが便利なのよ！
Canva Pro（有料版）には、背景リムーバー（Background Remover）があります。
これ非常に便利なんです。
キャンバス上のイラスト画像をクリックして選択。
「編集（Edit Image）」をクリック。
「背景削除（Background Remover）」を選びます。
「Erase（消去）」で「？」を消そうとしたら、
おっとっと！ 消すところ間違えちゃいました。
「復元（Restore)」ブラシで消し過ぎたところを戻します。
最終的に、このような感じにできあがりました！
\ Canva Pro を無料でお試し /
自作の吹き出しアイコンをWordPress＆Cocoonに追加する場合
今これを読んでくださっている方が、わたしと同じくWordpress＆Cocoon利用者である場合に向けて、吹き出しアイコンを作る方法も載せておきます。
WordPressのダッシュボード下 ＞ 「Cocoon設定」の真下に「吹き出し」があります。
「新規追加」にて吹き出しを設定します。
今回はこのような感じに設定しました。
↓保存して確認すると、こんな感じになってます。
ね、いいでしょ？
わたし、悩んでる実や奈
Cocoonの吹き出しアイコンつくり完成
ブログをはじめ、SNSなどにもオリジナルのアイコンがあると、読者・フォロワーのみなさんが
「あなた」という存在を直感的に理解してくれやすくなるのでとってもおすすめですよ♪
\ WordPress&Cocoonを使うならエックスサーバーが絶対おすすめ /
⁎ 本記事に載せてある記事の内容・情報は、今後は状況により予告なく変更になる可能性があります。最新情報・詳細は必ず各自でご確認ください。All information on this web site is subject to change without notice. Reasonable efforts are taken to ensure the accuracy and integrity of all information provided here, but the author/administrator of this website is not responsible for misprints, out-of-date information, or errors.
コメント