title-2b
Design

一日でゲームデザインをする

こんにちは!新人森田です。

皆様『イケメンばかりにチョコは渡さない』は楽しんでいただけていますか?
今回はゲーム制作の裏話をデザイナーサイドから書いてみたいと思います。
デザイナーサイドとかニヤニヤしちゃう響きです。

ゲームの素材を作る

まずはどんなゲームを作るか、企画会議です。

バレンタイン前々日に山形師匠の発案によりゲーム制作が決まり、色々とアイデアを混ぜ込んでゲームの仕組みを考えました。
…てことは制作期限1日ですか!
使用ツールはPhotoshopでどこまでいけるかやってみます!

世界観づくり

ゲームの企画が固まったら、どんなビジュアルにするかイメージを膨らませます。
登場人物はイケメンと女の子。場所は多分日本。時代はなう。

0214-4

手書きで色々とスケッチしてみました。お色気オネーサマはボツです。

0214-3

スケッチを元にPhotoshopで清書ってほどでもないラフを書きました。

でも今回のゲームはドット絵を使いたいので、本番はこれからです。

ドット絵を作る 1

ドット絵と言われても、にわか知識しかないしちゃんと作るのはこれが初めてです。
期限内に出来上がるのかも怪しいところ。

でもとにかくやらなきゃ始まらない、ということでここからは面白法人カヤックさんのデザイナーブログを参考にしました。

0214-5

まずさきほどのラフを縮小して荒くします。

その上にレイヤーを作って1ピクセルの鉛筆ツールで清書します。
普通に絵を描く感覚でなぞってから、いらないドットを消すという感じで作業しました。
0214-6

ブログ通りにやっただけでもうそれっぽくなってきました。

輪郭線のレイヤーの下に色塗り用のレイヤーを作って色を塗っていきます。
以前どこかで「ドット絵はビビットな色の方がいい」的な情報を見かけたような気がするので、一度色を置いてから彩度を上げました。あと、子供向け戦隊モノみたいに一定の色相を使った方がキャラのイメージが湧くかなと思って、ある程度系統を決めて塗ってみました。

0214-7

青系コーデにピンクのシャツで女子力アッピルです。
ビビットな塗り分けの為、陰は焼き込みカラー、ハイライトはオーバーレイに設定してあります。

見よう見まねでしたが、なんとか出来ちゃいました。
人間やろうと思えば出来るんですね。

ドット絵を作る 2

この子が歩いてくれなければゲームになりません。
先ほどのドット絵とにわか知識を元に動きをつけてみます。

0214-8

こうして大きくすると粗さが目立ちますすみません。

歩くのは足の動きが一番大事ですが、頭の高さや肩の高さ(=チョコの高さ)、髪の揺れを表現すると歩いてる感が出るかなとやってみました。微妙に頬のテカリなども変えてあります。
この辺は昔からのゲーマー気質が功を奏しました。
この調子で他のキャラも1〜2ピクセルずつパーツをずらして動きを作りました。

けど、ゲーム内では動きが速すぎてあんまり分からないというかなしみ。

背景を描く

キャラが出来たら背景を作ります。
背景は師匠の一言で「吊り橋」と決まっていたので吊り橋を描きます。
背景に取りかかった段階でもうあまり時間がなく、というかキャラはまだしも背景なんて全然描いたことがなくて、それでもなんとか間に合わせられないものかと頭をフル回転させました。

背景を描く上で大事なのは、「それっぽさ」を出すことかなと思いました。
そんなにしっかり書き込まなくてもそれっぽさがあれば人が勝手に脳内補完してくれる。はず。

0214-10

まずペン先を平たくした適当な太さのラインを引きます。

0214-9

あとは矢印の通りにざっくざっく描いていったら出来上がり。
木の質感はペン先を平筆にして木目っぽくしています。
ほとんどひたすら縦線を描くだけという突貫工事でごり押しました。

0214-11

一番しっかりしてる背景の雲はフリーのブラシ素材です。
「リアルな雲 ブラシ」あたりのワードで検索すると色んなブラシが出てくると思います。
使うか分からないけど一応DLしておいたのが役に立ちました。

各パーツを作る

その他に作ったものは以下の通りです。

  • タイトル兼スタートボタン
  • 得点の背景パーツ
  • 制限時間の背景パーツ
  • 結果表示の背景パーツ

このあたりはほとんど一発描き…
プログラミングと同時進行で足りないパーツを教えてもらって作る、という連携プレイでなんとか1日で仕上がりました。

ドット絵公開

最後に、作ったドット絵を大公開しちゃいます。
地味に表情とかこだわってたりします。
意外と悲しい顔と嬉しい顔って使い回せることも判明。

girl-blueboy

girl-pink

それぞれ「通常・チョコ渡せた・チョコ渡せなかった」バージョンです。

今回も本当に良い勉強になりました。
これで簡単なゲーム作りはばっちこい!と思いたいです!

『イケメンばかりにチョコは渡さない』

http://www.halenohi.jp/

標準
PAK86_meganewo1039500
Design

PhotoshopスライスツールとWeb用に保存の設定を色々いじってみる

こんにちは山形です。いつもは開発系の記事だけですがたまにはプログラマー目線でデザインツールの使い方でも書いてみたいと思います。

さてWeb制作には欠かせないPhotoshopですがデザイナーが作成したデータを貰ってプログラマーがWeb用画像を書きだすなんてこともたまにあるかと思います。

なんとなく保存はできたものの「あれ、そんなファイル名なの…」とか「いやいやどこに保存してんだよ」「そのファイルいらねえし!」みたいな事が起きた場合の対処方法をまとめました。

Photoshopスライスツールとは

そもそもまずはソレ何?旨いの?という話はこちらからどうぞ。
シンプルな使い方としては「スライスツールで範囲を選択」>「Web用に保存メニューから形式を選んで保存」です。

Web用に保存のショートカット

shift + option + command + S です。(windowsはコマンドの代わりにcontrol)

通常の保存が command + S なのでそこに shift + options が加わった形ですね。

今回の素材

PAKUTASOさんから選びました。

PAK86_meganewo1039500

クオリティの高い画像が無料で使えるのでブログには最適ですね。

画像名を変える(ファイル名に _3 とかいらない)

まずはここ。いざ保存したファイル名に “_”(アンダースコア)と番号がふられてて削除するのめんどくさい!と思いますよね。

そんな時はスライスした範囲を右クリックして出てくるコンテキストメニューから”スライスオプションを編集…”を選択し、”スライスの種類”を”イメージ”に選択した状態で名前の欄を変えましょう。

スクリーンショット 2014-02-06 11.42.08

 

スクリーンショット 2014-02-06 11.43.57

 

こうしておくとWeb用に保存の時のファイル名と違くても先に設定した名前が優先されます。_3とかもつきません。

そもそも1つしか保存してないのに _3 ってなんだ?と僕は思ったのですが、スライスで囲った範囲の上に1と書いてある範囲があり左に2がありますので、画像の左上から自動で分割して番号をふるんですね。

スクリーンショット 2014-02-06 11.39.43

フォルダ名を変える(いつでも images とは限らない。もしくはいらない)

デフォルトだとスライス画像が一枚でもimagesフォルダに入れて保存されますよね。
これはこれで便利な時もあるんだけど(imagesフォルダをまだ作成していない時とか?)名前変えたいとかフォルダにいれないでほしい時もあります。

そんな時はWeb用に保存のパネルから一番右上にあるメニューを開いて出力設定の編集を開きましょう。

スクリーンショット 2014-02-06 11.47.26

 

現れたウィンドウから”ファイルの保存”を選択します。

スクリーンショット 2014-02-06 11.50.18

 

一番下の範囲に”画像をフォルダーに保存”という項目があるので、フィールドに任意の名前を入力するかチェックを外すとフォルダーが作成されないようになります。

スクリーンショット 2014-02-06 11.51.21

 

スライスを分割

スライス領域を右クリックして”スライスを分割”を選択するとできます。

スクリーンショット 2014-02-06 12.39.46

 

縦横を等間隔に分割設定できます。

スクリーンショット 2014-02-06 12.41.34

あまり使いどころ無い感じしますが、例えばグリッドレイアウトされている場合とか一つずつ範囲選択するよりは早いかもしれないですね。その場合、各要素の隙間があると適応できないですが…

テーブルレイアウト時代の名残なのかも。

保存と同時に縮小(Retina用素材から、非Retina用にしたい場合とか)

最近はどんどんスマートフォンのアクセスが増えてきてますよね。半分以上スマフォユーザーのサイトも珍しくないんじゃないでしょうか。
高精細なディスプレイ用に大きめにデザインしてもらうのはいいんですが、一旦保存したファイルを開いて小さくしてまた保存…とかめんどくさいですよね。

そんな時に役立つのがWeb用に保存パネルの右下にある”画像サイズ”オプションです。

スクリーンショット 2014-02-06 11.55.32

 

ここでサイズを指定すれば縮小版とかを作ってくれます。
ただ気をつけてください!このサイズは全体の画像サイズです。なのでスライスに設定したつもりでいると出来上がる画像のサイズが違うので戸惑います(ました)。あと同時に2つのサイズを保存してくれるわけではありません!

また画質の選択肢が以下のように別れておりそれぞれに特性があります。

ニアレストネイバー法

一番単純な拡大・縮小が行われます。ドットをそのまま扱う感じなので縮小するとカーブが大分ギザギザします。逆に小さいカンバスでドット絵を書いて大きくする場合にはこれを使うのが最適です。写真の縮小には向いてないと思います。

スクリーンショット 2014-02-06 12.19.39

バイリニア法

ピクセルの色濃度を元に平均値を求めて空いたピクセルを補うという方法みたいです。機械的に平均値を計算するだけなので元画像に含まれていない色が含まれる可能性があり若干画質が劣るようです。

スクリーンショット 2014-02-06 12.20.16

バイキュービック法(デフォルト)

これがデフォルトの設定です。バイリニア法が平均値の計算だけだったのに対して、元画像に含まれる周辺の色も考慮に入れて計算するようです。なのでバイリニア法に比べるとより自然な仕上がりになるかもしれません。

スクリーンショット 2014-02-06 12.20.47

バイキュービック法(滑らか)

バイキュービック法の計算を調整したものですね。素人には何が変わったのかわかりませんが、暗い色の境界のエッジが目立ってしまう場合に使うと良いようです。

スクリーンショット 2014-02-06 12.21.32

バイキュービック法(シャープ)

これもバイキュービック法の計算を調整したもので、暗い色の領域のエッジをもっと目立たせたい場合に使うと良いようです。

スクリーンショット 2014-02-06 12.21.59

こちらを参考にしました:PhotoShopで最適な画像保存をする為に。ニアレストネイバー法やバイキュービック法でのリサイズやJPEG圧縮などを検証したよ。

htmlも生成する(tableとかダサいのでcssでクラス指定で)

あんまり使うことは無いと思いますが、Web業界が長い人には胸アツのtableレイアウトか、Web標準なcssのhtmlコードを出力してくれます。

これはまずフォルダ名を変更した時と同じWeb用に保存のパネルから一番右上にあるメニューを開いて出力設定の編集を選択します。

スクリーンショット 2014-02-06 11.47.26

 

スクリーンショット 2014-02-06 12.25.32

 

現れた出力設定からまずはHTML設定を選択します。
ここではhtmlの書き方の設定ができます。そのまま使うことはあまりないと思うので適当でいいと思いますが僕はインデントが半角スペース2文字にしてほしいので以下のようにしました。

スクリーンショット 2014-02-06 12.27.22

 

次にスライス設定に切り替えます。

スクリーンショット 2014-02-06 12.23.00

 

tableレイアウトとかもう滅んでいいと思うけど、htmlメールにはまだ必要なんですかね。htmlメール作ったこと無いのでよくわかりませんが。とりあえずcssを選択しました。

スクリーンショット 2014-02-06 12.30.36

 

好みですがid属性を降ることも出来るようです。何度も言いますがここで出力したhtmlをそのまま使うことなんてほぼ無いと思うので適当でいいと思います。

で、保存すると (psdファイル名).html と images フォルダが作成されます。

htmlを開いてみるとこんな表示なっていたのでPhotoshop上でスライスした見た目がそのまま表現されるってことですね。

スクリーンショット 2014-02-06 12.35.10

まとめ

どうでしたでしょうか。以外にも細かいオプションがあって普段スルーしていた自分には結構驚きでした。
特にファイル名なんかはいちいち保存してから修正していると意外と時間かかるんですよね。例え1ファイルに5秒しか短縮できないとしても、日々の積み重ねで100個直せば8分半かかると考えればなかなか侮れません。

標準
jpeg
Design

Photoshop スライスツールと画像形式を知るべし

Image by Earl

明けましておめでとうございます!
初詣で大吉を引いて幸先良さげな新人森田です。
本年も株式会社ハレノヒをよろしくお願いいたします。

それでは今日も元気に修行したいと思います。
2014年一発目はどのようなお題でしょうか?

[山形師匠のお言葉]
Photoshopでデザインカンプ(ページ全体のデザイン)や、画像パーツ等を作成したらブラウザで表示できるようにするためにスライスツールを使います。
ツールの使い方と書き出し画像形式の種類と特徴を学んでください。

[森田]
スライs…あ、はい!早速実践的な内容ですね!PhotoshopCS2を使い続けていた森田にとって最新版を勉強する良い機会でもあります。さくさくっとスライスしちゃいます!

Photoshopのスライスツールとは

と言いつつ、正直に申し上げますと実は私、過去1回くらいしかスライスツールに触ったことがありません。なのでまずアイコンを探すところから始めたいと思います。

140106-5
発見。メニューバーのここに隠れてました。
いかにもスライスしてくれそうな鋭い切先ですね。

そして今回スライスする元の画像がこちら。

140106-10

自社サイトに載せるブログ記事のリストです。
自分なりにハレノヒのイメージを絞り出して作ってみました。(入社して初の制作に緊張しまくりこれだけで既にヘトヘトという失態)

必要とされる画像は、右側の雲の画像とアイキャッチ画像を入れなかった場合のデフォルトアイコンです。(下図参照)

140106-10b

まず雲の画像に狙いを定めます。

140106-12

画像のぎりぎりのところにガイドラインを引き、スナップを頼りに範囲選択。アイコンも同様に選択します。

140106-8b

このようにスライス範囲が確定されました。
範囲表示が邪魔という時は表示タブからオンオフ出来ます。

ここまでくればスライスマスターまであと一息!
ファイルタブから[web用に保存]を選択し、最適な画像形式で保存します。

130106-2

画面左のスライスツールマークで切り出した画像を選択し、右側のファイル形式を選びます。今回は色数が少ないのでGIF形式で保存したいと思います。

はい!出来ました!
blog_slicetool_03  blog_slicetool_07

なーんだ思ってたより簡単じゃーん!

[山形師匠]
森田さん、これ片方だけ画像形式jpgになってるよ。

[森田]
はっはいぃ!すぐ直します!!

どうやら複数保存する場合はそれぞれ選択して保存形式を選ばないといけないようです(私は1つGIFにして満足してました)。
作業終了まで気を抜いてはいけません。
最後に保存形式についてまとめてみます。

Web用に保存
[jpg]

最も一般的な、写真などによく使用される画像形式です。
圧縮の際に多少の劣化を伴いますが、比較的きれいに保存できます。赤が弱点です。

[gif]

カラーパレットの256色で頑張る保存形式です。小さいアイコンや簡単な動画におすすめ。頑張りすぎるとドット絵みたいになります。

[png]

windowsでスクリーンショットを撮ってペーストしてみるとすごい奇麗だったりする時の保存形式です。個人的すぎました。GIF形式より透明色の扱いが得意で、劣化せずきれいに保存が出来ます。でもファイルサイズにご用心。

まとめ

一枚の画像をスライスツールで切り出して保存することで作業効率が大幅アップ!webデザイナーとしては初歩中の初歩的ツールでした。こういうのを覚えると沢山使ってみたくなりますね。森田はこれから一体何枚の画像をスライスしていくのか、途方もないことを考えつつ今回の修行はここまでです。押忍!

標準