読者です 読者をやめる 読者になる 読者になる

mz-log

文字と絵と諸々

【KMCお絵かきAdventCalendar】Illustrator で星輝子

f:id:k-maztani:20161211010838j:plain

はじめに

この記事は、KMC お絵かき Advent Calender 2016 の20日目の記事です。

www.adventar.org

昨日の記事は、murata さんの担当でした。(予定)

自己紹介

Advent Calender の記事ということで、自己紹介をしておきます。

京大マイコンクラブ (KMC) 1回生の、kmc-id: maztani と申します。KMC 内ではフォントを作ったり*1絵を描いたりしています。

ベクタでなんか描いた

Advent Calender に登録したときに、「ベクタでなんか描く」と宣言していましたので、ベクタでなんか描きました。使用ツールは Adobe IllustratorGIMP です。

「ベクタって何だ」と思われる方のために、簡単に説明。ベクタとは、ベクタ形式 (vector graphics) のことで、画像を点や線・面などの「図形」の集まりで描く画像形式を指します。

一般的なお絵かきソフト(SAI, CLIP STUDIO など)では、細かく分割した格子の1マスごとに色の点を配置し、画像を表現します。これをラスタ形式と呼びます。ラスタ形式は一般的にグラデーションなどが効いた色彩豊かな画像に向いているとされています。 一方、ベクタ形式では「図形」一つ一つを座標平面上に設定していきます。したがって、アニメ塗りやロゴなどの色がきっぱり分かれた画像に向いた形式です。ベクタ形式のイラストを描くソフトとして最も有名なのが Adobe Illustrator です。

そして、ベクタ形式の「図形」は、ベジエ曲線と呼ばれる曲線で描かれます。ベジエ曲線はコンピュータ上で曲線を描く際によく用いられる方式です。複数の制御点と制御点周りの線の状態を設定し、その制御点を通るような曲線を描きます。最悪ペンタブがなくても、マウスだけで描けるのが利点といえるかもしれません。実際に、今回のイラストは殆どマウスだけで作成しています*2

私のベジエ曲線の扱いが拙いことによる偏見かもしれませんが、ベクタで絵を描くのってラスタで絵を描くのよりも格段に時間かかるような気がして*3なりません。1ヶ月以上前に描き始めてコツコツと描き進めていたのですが、完成が締め切り間近になってしまい焦りました。特にグラデーションごりごりの絵をベクタで書いてしまったのが間違いでした。

なお、GIMP は最後の細かな修正に使用しました。

星輝子を描いた

f:id:k-maztani:20161211170418j:plain

描きました。

アイドルマスター シンデレラガールズより星輝子です。ゴートゥーヘールッ!!

背景の炎はラスタ画像をお借りしましたので、残念ながらベジエ曲線で描かれていません。

どうして星輝子を描いたかというと、先月はじめぐらいからアイドルマスター シンデレラガールズ スターライトステージデレステ)を始めたのですが、一発目のプラチナガシャで SSR 星輝子(恒常)を引いてしまったからです。

描いた感想

銀髪と口(特に 舌)を描くのが非常に楽しかった。是非とも、画像を拡大して舌をご覧になってください。一方で、服を描くのが面倒で露出度が上がってしまいました。まあ、公式でも星輝子の服は「ちゃんと隠せてるのか」と疑ってしまうものが多いようですので、あまり気にしていません。

1ヶ月以上かけてじっくり絵を描いたので、身体のパーツをの構造を意識できたと思います。今回の絵を描くことでかなり成長できたと感じます。 鎖骨の部分はなかなか苦労したのですが、色々資料にあたることで、納得のいく凹凸感になりました。

今回の絵は、身体の塗りをリアル寄りにした一方、目の周りはかなりデフォルメしました。顔や目あたりのデフォルメ具合と身体のリアルさのさじ加減は、人の好みに依る部分が多いと思っています。身体めっちゃリアル かつ 顔デフォルメ、のようなイラストは、私の好みの絵柄の1つです。

また、透明度を高めにしたグラデーションを重ねすぎると、色の階調が変化がする部分が線のように見えてしまい少々美しくなかったため、Illustrator から JPEG ファイルを出力した後、GIMP でグラデーション部分をにじませて色の変化がより滑らかになるように修正しました。この修正により、腕や頬などのツルッと感が増したので、拡大しても美しさが保たれるようになりました。

元画像は pixiv から御覧ください。

燃える星輝子 by 抹谷 on pixiv

最後にアウトラインを貼っておきます。パス数は575でした。

f:id:k-maztani:20161211014647p:plain

クリッピングマスクを多用したので、アウトラインはとても汚いですね。陰影を出すためにクリッピングマスクでグラデーションをひたすら重ねた結果です。

次回予告

明日の記事は haichi さんの「ゆるキャン最高だろうよ」です。△。

KMCM 1

京大マイコンクラブ (KMC) ではベジ絵*4に興味がある部員を募集しています*5。KMC 内でイラスト制作する部員は数多く居ますが、ベジ絵を描く部員が圧倒的に少ないのが悩みの種です。

KMC はコンピュータを使って何かを創るサークルです。活動はプログラミング・ゲーム開発・DTM・お絵かきなど多岐にわたります。 興味のある方は下記Webページを御覧ください。

www.kmc.gr.jp

KMCM 2

KMC では、お絵かき Advent Calender とは別に、オールジャンルの KMC Advent Calender 2016 も同時に開催しています。ぜひ御覧ください。

www.adventar.org

*1:学園祭でフォントを出展しました。(過去記事参照

*2:ペンタブを使ったのは、後ろ側に垂れる髪の毛の パサッ としてる部分だけ。

*3:ラスタで絵を描いた経験が少なすぎて比較できない。

*4:ベジエ曲線で描いた絵。ベクタ形式画像のこと。

*5:イラスト制作だけでなく、ロゴ制作・フォント制作に興味のある部員も是非。

NF2016

2016年 京都大学11月祭(NF)終了です。 今年の開催期間は11/19 - 11/22の4日間でした。

私はKMCのブースで「KMC Type」の展示をしました。 KMC Type とは私がちまちま作っている OpenType フォントです。*1 共北31講義室にゲームと音楽用のPCが立ち並ぶ中、教室の後ろにひっそりと佇む KMC Type のポスターが明らかに浮いていたのですが、お客さんの中にはポスターの前で足を止めてくれた人も居たようで嬉しい限りです。 KMC全体としての展示も盛況でした。私は呼び込みで(ただでさえ貧弱な)喉を酷使しました。

こんな話、NFが始まる前に書けばよかったのですが、KMC Typeに関する情報です。

NFCD2016に KMC Type が収録されています。 ライセンスはOFLなので、個人利用・商用利用ともに可能です。 購入された方には様々なシーンで活用していただければと思います。使ってもらえると私がとても喜びます。

最後に NF で展示した KMC Type のポスターを貼っておきます。

f:id:k-maztani:20161123221949p:plain

*1:当ブログで書体制作記録を載せています。#2の記事はまだです。

書体制作 #01

初めまして、抹谷(マツタニ)と申します。ブログを開設しました。

フォント制作始めました

先日、京大マイコンクラブ(KMC)でフォント制作プロジェクトを立ち上げました。
メンバーはフォント制作に関して初心者ばかりですが、プロジェクトを通してフォント制作のイロハを学んでいこう、というプロジェクトです。
複数のメンバーで一つのフォントを作り上げるのではなく、各メンバーが思い思いのフォントを個人で制作しています。

作っているフォント

さて、私はどのようなフォントを作っているかというと、KMCそのものをイメージした欧文フォントを製作中です。

f:id:k-maztani:20160908235455p:plain

このロゴが制作の出発点です。cの斜め45度にカットされた先端処理や、Mの尖った部分の形などを意識した、ジオメトリックサンセリフになる予定です。KMC制定書体の座を狙っています。

というわけで、手探りながらもフォント制作を進めていく過程を、このブログで記録しようと思った次第です。*1
また別のフォント制作に取りかかったときに、備忘録として活用してやろうという魂胆というわけです。 フォントファイルが無事に生成できるかどうか、正直不安要素の方が大きいのですが、KMCの集合知を借りればなんとかなる気がしています……

今までフォント制作など経験が無いため、どのような手順で作業を進めていけば良いか全くの手探りですが、

  1. Illustratorで文字をデザイン
  2. プレーンSVGに出力
  3. Fontforge*2に取り込む
  4. TTFファイルに出力

という大まかなスケジュールに沿って制作を進めていこうと思っています。

実は、すでに小文字・数字・一部の記号についてはIllustratorであらかたデザインし終わっています。

f:id:k-maztani:20160908235509p:plain

f:id:k-maztani:20160908235503p:plain

大文字もほぼ完成していたのですが、小文字のデザインに合わせる形で作り直しています。 数字も荒削りって感じなのでこれから修正します。

書体の特徴

ジオメトリックサンセリフの中で有名なフォントといえば、

  • Futura
  • Century Gothic
  • Avant Garde Gothic

などが挙げられますが、今作っている書体はむしろ Avenir や Google Product Sans などに近い雰囲気になりそうです。

コンセプトは読みやすいジオメトリック、といったところでしょうか。少し安直な気もしますが……

文章などを組んでも、それなりに可読性を確保したいので、小文字はなるべく癖の無いようにしました。Xハイトは高めで、明るい印象にしています。あと、ディセンダラインが結構低めなところも特徴かもしれません。
円弧の先端は、愚直なまでに斜め45度カットを貫きました。視覚調整はちゃんとしてます。小文字gのくるっとした部分は可愛い感じになってお気に入りです。

既存書体との違いをどうやって出していくか、非常に苦慮するところです……*3
小文字に関しては、何度か修正を繰り返すうちに統一感・ユニークさが出てきたかな、と思っています。

これから

まずは大文字を完成させてしまいたい……
早いうちに、Fontforgeに取り込んで、フォントファイルに出力するところまで試してみたいと思います。

ペアカーニングの設定やら、イタリック・太字の制作などタスクが山積みですね。ぼちぼちやっていきます。 なんとかNF*4に間に合えばいいなぁ。

*1:フォント制作以外の話題も書きたい。

*2:フォント制作が可能なフリーソフト

*3:特に Product Sans と似てる感じがする。

*4:京都大学11月祭の略。学園祭。