さぽろーぐ さぽろーぐ

番外編:素人なりのイラストデータの作り方

さよなら、さぽろーぐ
シェア
さぽろーぐを2017年の11月から開始して、約一年経ちました。

前回まではサポートサイトの作り方の四部作でしたが、その下書きが書き終わった時、「書ききった」と感じました。ちょうど一年ひと区切りということで、シリーズ投稿は前回のものを最後とすることにしました。

今回は番外編の裏話、「やってみたくなる?どのようにさぽろーぐのブログイラストは作られたのか?」を書きたいと思います。

作品例


こんなイラストデータを作るまでを紹介します。

「季節柄、年賀状データの作り方にしようかな?」とも思いましたが、年末ギリギリすぎるので、もっと簡単お手軽な「さぽろーぐ風イラストデータの作り方」を例にしました。

用意するもの

  • パソコン
    (写真データを受けとって画像編集ソフトを立ち上げるためのもの)
  • Gimp
    (無料の画像編集ソフト。Windows、Mac、Linuxにもインストール可)
  • 携帯やスマートフォン
    (写真を撮ってメールなどで送るツール)
  • 筆ペン

  • (会社のコピー用紙でよい)

なぜGimp?

もちろんPhotoshopのような多機能で高度な画像レタッチソフトウェアがあればそちらを利用して画像を作っていただいていいのです。

Gimpはフリーソフトです。Windowsの「ペイント」で行えるような画像操作はもちろん、Photoshopのようなレイヤー操作もできるので、ウェブに掲載するちょっとした画像を編集するのに十分な機能を備えています。

わたしは家庭では貰い物のMac、会社はWindowsを使っていますが、Gimpはどちらにも気軽にインストールできるのも大きな強みです。

何を隠そう、赤影家ではここ10年以上年賀状データはすべてGimpで作り、富士フィルムネットプリントに印刷を頼んでいます。無料だけどソフトウェアのアップデートもされていて、安心して使い続けることができるソフトウェアと言ってよいでしょう。

さぽろーぐイラストデータができるまで

1)下書きは筆ペン、紙はコピー用紙

まず絵を描きます。

絵を描く時、ポイントがあるとすれば、縁取り線がパカッと開いてない方が楽ということでしょうか。ここで挙げる手順では、ごく簡単な方法で色をベタ塗りするので、同じ色で塗りつぶす範囲は黒線で閉じておきます。

筆ペンは個人的にお勧めです。背景とのコントラストがはっきり出て、画像処理が楽にできます。

2)絵の写真を撮ってパソコンで受信する

携帯やスマートフォンなどで描いた絵の写真を撮ります。
紙の影が暗くなりすぎないように、なるべく真正面から撮って、パソコンに送ります。

紙は裏紙を利用。どちらかというと悪い例の写真です。影も入ってますし要らないエリアも多い写真ですが、この程度ならなんとかなります。

3)Gimpで画像開き、「色」>「しきい値」で白黒の2色の画像にする

パソコンで受信したファイルをGimpで開きます。

ファイルを開いたら、「色」→「しきい値」で、「白黒のみ」の画像に変換します。しきい値は指定した明度を境に「黒」「白」に置き換える機能です。

つまみ位置を操作しないままのデータ

影の多い写真データですと下記のような白黒画像にもなってしまうのですが、「▲」のつまみの部分を左に動かせば、変わってきます。

つまみ位置を操作したデータ


筆ペンの線がしっかり見える画像になりました。

「筆ペンの落書きを撮った色味のある写真」が「くっきりした白黒デジタル落書き画像」に生まれ変わる瞬間です。

このデータは無駄なエリアや要らない部分が多いので要るところだけ「自由選択」ツールで切り抜いて処理をしてから、続きの編集をしています。

4)「色」>「色を透明に」で白を透明にする

「色」>「色を透明に」を選ぶと、特定の色を透明にすることができます。

何も指定しないと、「白」が選択されるので、白いところが抜けおち、にじみもぼかしもない黒い線だけの線画レイヤーは線、つまり背景が透けて見えるレイヤーができあがります。

また、黒い線だけになった状態で、
「レイヤー」>「レイヤーの自動切り抜き」
をしておくと、線が書かれた部分の最大枠のレイヤーサイズに切り抜くことができます。

この段階で「要らない線」や「間違い線」が残っていたら、切り取って整理してしまいます。

次のステップではフレームを決めていきます。

5)縦横比の調整、フレーム決め

このブログの場合、イラストは横幅620縦329ピクセルという独自サイズでした。(本当は縦330だったのかもしれませんが、縦329だと思って入稿していました)

上記のサイズは、スマートフォンの写真データの縦横比率(わたしの場合は「3840:2160」の写真でした)とは異なるので調整しました。

「画像」>「キャンバスサイズの変更」で「3840:2160」を「3840:2038」に変更し、画像の比率を「620:329」とほぼ同等にします。その後、線画の配置をどうするかを決めます。

最終的には横幅620縦329ピクセルに縮小するのですが、細かいところを書き足したくなることもあるので、ぎりぎりまで大きなサイズのままで編集しています。

6)レイヤーを追加しながら線の中を色塗りしていく

いろいろなやり方がありますが、画像処理の素人がお昼休みの合間にやっていることなので、スピード重視のベタ塗りを行っていました。

塗りたい色やパーツごとに透明レイヤーを別々に作り色塗りします。

ファジー選択(左):クリックしたピクセルの近似値領域を判断し選択領域を作成する
塗りつぶし(右):対象範囲を色やパターンで塗りつぶす

6-1)まず線画レイヤーを選択し、「同じ色に塗りつぶしたい」と思った透明部分のエリアを「ファジー選択ツール」で選ぶ

「ファジー選択ツール」を使うと、クリックしたピクセルと近い色を選択することができます。線画レイヤーは「黒」もしくは「透明」しかないので、選択は容易です。


線画レイヤーでファジー選択ツールで塗る範囲を選択したところ。選択エリアをクリックごとに追加していきたいときはシフトキーを押しながらマウスで左クリックしていきます。

6-2)選択領域が定まったままの状態で色塗り用透明レイヤーを追加し、作業レイヤーを選択しなおす

線画レイヤーに色を着けてしまうと、あとで修正したときに間違って消してしまうこともあるので、着色は新規の透明レイヤーを使います。

6-3)「塗りつぶし」ツールで選択範囲を着色

塗りつぶしツールで選択範囲をベタ塗りします。

7)背景レイヤーを作る

背景と最終的な仕上げは、実験場で最後の楽しみです。

今回は火の鳥でも描こうかと途中で思いついたのでエアブラシツールをマウスでぐるぐるしながら背景に絵を描いています。

白のレイヤーを一番下に追加します。

その上に着色用の背景レイヤーとして透明なレイヤーを追加して背景を塗っていきます。「塗りつぶし」ツールだけではなく、「グラデーション」ツールを使うこともよくありました。今回も背景を2色のグラデーションで塗りました。

出来上がったのが一番上に掲載した作品例です。

「グラデーション」ツールは、色を2つ指定し、グラデーションのパターンをいくつか選択して塗りつぶすことができます。ほかにもいろいろなツールがありますので、遊ぶつもりで発見しながら作ります。

別のパターンでの背景でアレンジを加えるとだいぶ印象が変わります。


線画レイヤーから音符を切り取り、線画レイヤーと色塗りレイヤーを統合。同じレイヤーをコピーし2つ用意する。片方のレイヤーを縮小+回転。もう片方のレイヤーは拡大+回転、さらにレイヤーの透明度を調整。背景はグラデーションツール(形状:螺旋(時計回り))で塗っています。

8)ファイルの保存とエクスポート

できあがった絵を一度Gimpのファイル形式、「xcf」で保存します。まずは大きいオリジナルサイズのものはしっかり保存しておいたほうがいいでしょう。

次にウェブ用のPNG形式にファイルをエクスポートします。

最終的にキャンバスサイズを縮小したウェブ用画像が必要ならば、
「画像」>「画像の拡大縮小」で、画像サイズを縮小してから、ファイルを「エクスポートします。

できあがったPNGファイルをアップロードし、違和感がないか、不要な点や線など残っていないか、確認します。

画像処理なんて必要ない?!

このような手順でさぽろーぐのイラストを作っていました。
サポートスタッフの方、広告担当者さん、営業さん、本当は門外漢なのに画像の修正をしなければならないような場面もあるとは思います。

職場、あるいは家庭、友達との間で、「誰も頼れる人がいない」、なんとか画像を差し替えてほしいといわれた時などないでしょうか?わたしは何度かありました!

スマートフォンの画像編集アプリなどでもすごいことがたくさんできる世の中ですが、「このサイズでなければならない」「この形式で納品しなければならない」などといった場面では、パソコン上で使い慣れている画像ソフトがひとつでもあると助かることもあります。

最終回に寄せて

「さぽろーぐ」の裏話のひとつとして、素人ながらも画像処理の実例をお話しました。

今回は番外編でお客様やお問い合わせ例がまったく登場しない回となりました。

当サービスのサポートスタッフはとても幅広い業務を担当しています。たとえば、このブログも通常の「サポート対応」とも一般的な「技術情報開示」ともまったく違うものです。

どこの会社も同じかと思いますが、決して人手が余っているわけではありませんので、個人の得意分野を活かしながら、それぞれの守備範囲を広げてやりくりしています。

このブログは元上司、四元さんのアイデアが起点となりはじまりました。

さぽろーぐについて」でも書いていますが、私たちのサポートスタッフの持つオリジナルの文化を伝えられないだろうかとサポートの生の姿をつづるメディアとして生まれました。

日々のサポート対応では失敗や不満いろいろありますが、わたしと青影さんの中に「伝えるべき現実」と「行き場のないエネルギー」……(笑)を誰かが見出してくれなかったらこのブログは生まれませんでした。

このような「商売っ気のないメディア」を仕事として与えていただき、仕事を振り返る機会を持つことができました。自分は恵まれていると思っています。

この機会を与えてくださった元上司の四元さん、このブログを一緒に作ってくれた青影さん、そしてメディアへのかかわり方や文章のご指導いただいた白影様、心よりお礼申し上げます。

また、このブログはサポートだけではなく、お客様の日常の奮闘の中のほんの一部を切り出したものでもあります。

読んでくださった皆様をはじめ、わたしたちにさまざまなきっかけをくださったお客様、本当にありがとうございました。

(2018年12月 赤影)

青影青影
「さぽろーぐ」が終わってしまいます。

「さぽろーぐ」に対する赤影さんの力の注ぎ具合は半端ではありませんでした。

外からは分からない、見えない(分からなくていいのかも知れません)内部で行われていることや、サポートスタッフがどんな姿勢でお客様の対応をしているかを少しでも感じとってもらえたなら、それでよかったのだと思います。

最初はどんな形になるのか予想すらできませんでしたが、赤影さんの個性豊かな作品になったと思います。

ひとりのスタッフが自分の思っていることを発信する場は社内でもなかなかありません。

ふと立ち止まって、振り返って書いたことは赤影さんの今後の原動力になったようです。

ここまで読んで下さったみなさま本当にありがとうございました。

(2018年12月 青影)
シェア
赤影
赤影
生まれも育ちもこちらの事業部というサポートスタッフです。平素より筆ペンとGimpを愛用しています。
おすすめの記事