イラストをCanvaで加工してCocoonブログの吹き出しアイコンを作る

当ブログは記事内に広告を含んでおります。

イラストをCanvaで加工してCocoonブログの吹き出しアイコンを作るNY方丈記
AD

Canvaを使った吹き出しアイコンの作り方をメモしておきます。

いままでブログ用、ファビコン、SNS用のアイコンを作りたいけど、作り方がわからなかった、という方は参考にしてみてくださいね。

このような方への記事です

吹き出しアイコンに入れるデータを用意する

まずは、吹き出しアイコンに入れたいイラストや写真などのデジタルデータを用意します。

らいさわブログで使用しているほとんどのらいさわとむすめちゃんのアイコンは自作です。

下手ですが、絵を描くのは好きなので、パソコンで描きました。

むすめちゃん
むすめちゃんのアイコン
むすめちゃん

↑このイラストを

↓こういう吹き出しアイコンにしてます。

むすめちゃん
むすめちゃん

お腹すいた

個人的な意見ですが、アイコンは、オリジナルなもの(イラストなど)を使った方がいいと思います。

よくあるブロガーネームや、多数の方が使っているイラスト(アイコン)を使っている方は、

かぶります。

どうせなら読者の方々や、ブログ仲間、ツイッターのフォロワーさんに、自分のことを確実に覚えてもらった方がいいと思いませんか?

絵なんて書けない、自分で絵を描くなんて面倒、と思う方は、

▼ ココナラのクリエイターに依頼すると簡単ですよ〜


アイコン用画像データを背景透過のpngイメージにする

この記事を書いているときに作っていた吹き出しアイコンは、Sai.さんのイラストを元に作りました。

使いたいイラストを選びpngでダウンロードしました。

イラストACでダウンロードしたところ

画像形式pngは背景が透明になっているので、アイコン作成に使いやすいです。

Canvaでイラスト画像を加工する

上記の用にダウンロードしたpng画像のイラストを、Canvaを利用し、少しサイズ調整、加工しました。

Adobe Photoshopが使えなくてもOK 簡単なCanvaとは

最近、画像加工などは、もっぱらCanvaを使っています。

 \ Canva Pro を無料でお試し /

Canvaでは、グラフィックデザインのスキルがなくとも、簡単におしゃれな画像、フライヤーなどが作れるオンラインのグラフィックデザインツールです。

パソコン上で使えるのはもちろん、アプリでも使えます。

ウェブサイト用の画像をはじめ、SNS投稿、年賀状、カード、フライヤー、プレゼン資料、ロゴなど、とにかくどのようなメディアも、スキルがなくとも簡単にかっこいいのが作れます。

Canva Proは有料ですが、無料版でも全然悪くないです!

Canvaを使うと、デザインを考える時間をはじめ、写真、イラストなど「探す手間と時間」が一気に減ります。

らいさわ
らいさわ

誕生日会のオリジナル招待状なんかも作ったよ〜

イラスト画像を簡単に加工できるCanvaの使い方

Canva Proのトップページ ホームページ

Canvaにログインしたら、

(Canvaアカウントをお持ちでない方は、まずは無料でアカウントを作ってお試し利用してみましょう!) >>> Canva Pro無料お試しはこちら

サイズを200px(ピクセル)x 200pxに設定し、新規デザイン(Create a design)を作ります。

Heads-up!

この時私が作っていたのはこの「らいさわブログ」(Wordpress&Cocoonテーマで作成)用の「吹き出しアイコン」。写真でもなく、イラストなので200 x 200pxで十分でしたが、作りたいアイコンによっては、ピクセルサイズを増やすと画質が綺麗に見えますよ(データも重くなるのでその辺は自身で調整しましょう)。

らいさわは英語版を使っているので、表示は全て英語ですが、基本的にはボタンの位置などは同じはずです

200ピクセルx 200 ピクセルサイズの正方形キャンバスができているので、

先ほどダウンロードしたイラストをCanvaにアップロード。

正方形の中に吹き出しアイコンの円が入っていると想像し、キャンバスの真ん中にイラストを置きます。

こんな感じで、保存してCanvaでの作業はおしまい・・・ん?

「?」があった・・・。

Sai.さんのセンスあるイラストをいじりたくはなかったのですが、

吹き出しアイコンに入れにくいため、泣く泣くいじることに。

Canva Proの背景リムーバーが便利なのよ!

Canva Pro(有料版)には、背景リムーバー(Background Remover)があります。

これ非常に便利なんです。

キャンバス上のイラスト画像をクリックして選択。

編集(Edit Image)」をクリック。

背景削除(Background Remover)」を選びます。

「Erase(消去)」で「?」を消そうとしたら、

おっとっと! 消すところ間違えちゃいました

「復元(Restore)」ブラシで消し過ぎたところを戻します。

最終的に、このような感じにできあがりました!

自作アイコン 200px正方形 

 \ Canva Pro を無料でお試し /

自作の吹き出しアイコンをWordPress&Cocoonに追加する場合

今これを読んでくださっている方が、わたしと同じく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.

コメント