ブログに吹き出しを入れたい!(アバター編)

最近、プログラムネタからは遠ざかっています・・・

今日はブログネタで

前々からブログに吹き出しを入れたいと思っていました。  プログラムの入門書にはよく吹き出しが出てくるんですけど、吹き出しがあると読みやすいんですよね。ブログも一緒。なんか、マンガっぽくなってテンポが良くなります。

今回は、吹き出し用のアバターの画像を準備したので、その過程を書きます。次の段階のCSS編をご覧になりたい方は下のリンクをどうぞ。

ブログに吹き出しを入れたい!(CSS編)

ジャンプできる目次

各表情のアバターを作る

Peanutize Me
プロフィール画像を見たらわかりますが、私はスヌーピーのアバター作成サービスを利用しています。

人のアバターと犬のアバターを無料で作れます。

けんちゃん 困る


けんちゃん 笑う
ここで、以前作ったアバターを元に目や口の表情を変えて数種類顔を作りました。でも、このままだと吹き出しようとしては使いにくいので、トリミングをして顔だけを切り取ります。

GIMPを使ってトリミングをする

GIMP2 ファイル取り込み直後
私は、画像編集ソフトはGIMPを使っています。無料で多機能です! しかも、有名なソフトなので本も多数市販しています。ネットでも情報がたくさんあるので、何かあってもすぐに調べられます。

GIMP2 トリミング拡大
トリミングは、画面左のツールからトリミングを選んで画像に四角をドラッグするだけです。サイズを指定したければ、「サイズ」のところに数字を入力すればOKです。私は、正方形にしたかったので、縦・横 600pxに指定しました。(追記:のちに100px×100pxの方が使いやすいことがわかったので、サイズを変更しました。使いやすいサイズを確認してから一気に作業した方が効率的だと思います。)

GIMP2 トリミング中
こんな感じです。

GIMP2 切り取り後
エンターを押して実行するとこうなります。できたら、エクスポートして保存します。(普通の保存だと、JPGやBMPにならずにGIMP専用のファイル形式になるので必ず「エクスポート」しましょう。)このトリミング枠はそのまま生きてますので、この枠を利用して他の画像もどんどんトリミングしていきます。

画像を取り込む → トリミング → エクスポート

のくり返しです。

トリミング 完成こんな感じになりました。

画像が準備できたので、次はHTMLとCSSで実装していきたいと思います

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

ジャンプできる目次