最近、プログラムネタからは遠ざかっています・・・
今日はブログネタで
前々からブログに吹き出しを入れたいと思っていました。
プログラムの入門書にはよく吹き出しが出てくるんですけど、吹き出しがあると読みやすいんですよね。ブログも一緒。なんか、マンガっぽくなってテンポが良くなります。
今回は、吹き出し用のアバターの画像を準備したので、その過程を書きます。次の段階のCSS編をご覧になりたい方は下のリンクをどうぞ。
各表情のアバターを作る
プロフィール画像を見たらわかりますが、私はスヌーピーのアバター作成サービスを利用しています。
人のアバターと犬のアバターを無料で作れます。
ここで、以前作ったアバターを元に目や口の表情を変えて数種類顔を作りました。でも、このままだと吹き出しようとしては使いにくいので、トリミングをして顔だけを切り取ります。
GIMPを使ってトリミングをする
私は、画像編集ソフトはGIMPを使っています。無料で多機能です！ しかも、有名なソフトなので本も多数市販しています。ネットでも情報がたくさんあるので、何かあってもすぐに調べられます。
トリミングは、画面左のツールからトリミングを選んで画像に四角をドラッグするだけです。サイズを指定したければ、「サイズ」のところに数字を入力すればOKです。私は、正方形にしたかったので、縦・横 600pxに指定しました。（追記：のちに100px×100pxの方が使いやすいことがわかったので、サイズを変更しました。使いやすいサイズを確認してから一気に作業した方が効率的だと思います。）
こんな感じです。
エンターを押して実行するとこうなります。できたら、エクスポートして保存します。（普通の保存だと、JPGやBMPにならずにGIMP専用のファイル形式になるので必ず「エクスポート」しましょう。）このトリミング枠はそのまま生きてますので、この枠を利用して他の画像もどんどんトリミングしていきます。
画像を取り込む → トリミング → エクスポート
のくり返しです。
こんな感じになりました。
画像が準備できたので、次はHTMLとＣＳＳで実装していきたいと思います
次回 「ブログに吹き出しを入れたい！（CSS編）」
コメント