トップページ初めに読んでね新サイト用DWI※公開終了しましたDWI製作講座関連リンク掲示板はこちらからどうぞ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【LECTURE】-初級編1-配置に困ってる!安定したバナーってどんなの?

いよいよ初級編が始まります。説明しても、わかりにくい部分があると思いますが、
こんな文章力が微妙な自分でも、ステマニをより楽しく作りたい方のためになるなら幸いです。

早速ですが、タイトル通り、この「オブジェクト」の配置について考察してみましょう。

オブジェクト…いわゆる、画像に貼り付ける物体はいろいろあります。例えば、
人、文字、線、丸、etc...
いろんなものを適当に画像に入れてしまえば、それで絵が出来上がるわけです。
しかし、単にテキトーに入れるだけで、他人から見れば、まぁそれは当然質が低そう…みたいに見られちゃいますよね。
ならば、せめて基礎の部分だけでもなんとかしておく必要がありますね。

では、ステマニ用で扱う画像で、主に必要になってくるのはどれなの?
もちろん、譜面は1つ1つ作っていくわけですから、それぞれに「バナー」が必要になってきますよね。
場合によっては、5.0以降に使うものとして、「ジャケット」も必要になってくるかもしれません。
というわけで、今回は、その「バナー」と「ジャケット」のオブジェクトの配置の仕方を考えていきましょう。

今回の例では、
TITLE:「曲名」、「TITLE NAME」、「TITLE NAME LIST」のどれか
ARTIST:「アーティスト」
CHARACTER:「高坂桐乃」、「黒猫」
SIZE:512(横) x 160(縦)
を使用したとしましょう。




①「バナー」の場合
Stepmaniaのバージョンが3.9でも5.0でも、どこでも使われるこの「バナー」。
どのようなバナーを作っていこうかな?と考えますよね。当たり前だけど…

では、一つ問いたいのですが、あなたは「文字」と「キャラクター」をいつもどのように配置していますか?

lecture1_pattern_A1.jpg 
図A.一番オーソドックスな作り方

まぁ大抵の人は上のAのバナーみたいに、片方を「文字」のスペース、もう一方を「キャラ」のスペースとして使う人がほとんどだと思います。

ただ、配置パターンはそれだけだと思っていませんか?

画像を作るのは、あなた自身。つまり、どのような配置にしようが構わないのです。自由なのです。
というわけで、このパターンを逸脱してみましょう。
例えば、こんな配置もいかがでしょうか?

lecture1_pattern_B1.jpg  
図B.上半分を「キャラ」、下半分を「文字」スペースとして使う

このような、Bのバナーのように、下半分より少なめを「文字」、上半分を「キャラ」にすることだってできます。

他にも、

lecture1_pattern_C1.jpg 
図C.真ん中を「文字」、左右に「キャラ」を配置する

このCのようなバナーでは、真ん中を「文字」、左右それぞれに「キャラ」を置くこともできます。
Cのパターンは、Bのパターンよりも扱いやすいと思いますよ。
私のバナーは、過去の作品を見る限り、Bのほうをよく使っているみたいです。馴染みがあるのでしょうかね…

以上のように、配置の仕方は大体この3パターンですが、それ以外にもパターンはたくさんあります。

lecture1_pattern_D1.jpg
図D.「文字」を上下端っこに、「キャラ」を真ん中に配置した場合

 lecture1_pattern_D1dash.jpg
図D'.図Dとは逆で、「文字」を真ん中に、「キャラ」を上下に配置した場合

以上、紹介したような使われるパターンの特徴として、
A一番オーソドックス。「文字」も「キャラ」も配置しやすい。単調気味ではあるが、センスや技術次第でそれも抑えられる。
また、「文字」の部分はスペースが大きいので、配置する自由度が高いのもメリット。
B個人的に扱いづらい。この場合、「文字」も左右対称で形が整っていないと、綺麗に見えないことが多い。
このパターンは、「キャラ」が横並びに全員集合するような配置なら、使用する一つのパターンとして考えるのも手。
デメリットは、「曲名(2文字)」のような、短い文字列では少々無理があること。
Cキャラ」は2人以上で、それぞれ左右に置く必要がある。
Aパターンほどではないが、左右の「キャラ」の大きさを変えれば、真ん中のスペースを変更できる点がある。
完成すると、「文字」と「キャラ」は左右対称でバランスが良くなるなので、意外と技術がなくても、それなりに綺麗に見えたりする。
D文字」のジャンルに2つ以上入れる必要がある。この場合、文字が枠の代わりになって、バナーとして見えるが、
その代わり、「文字」を大きくすると「キャラ」にかぶってしまい、扱いが難しいかもしれない。
デメリットは、B同様、短い文字列が使えないこと。
D'キャラ」が2人以上必要。「キャラ」の配置は対角線上がベストか。「文字」の背景に区切りをいれる必要もあるかもしれない。。
こちらも「文字」を大きくすることが、Dよりも出来ないと思われる。しかし、こっちのほうが何故かカッコよく見える。
また、こちらも同様、短い文字列が使えない。

もし、「キャラ」に相当するオブジェクトが無い場合、
lecture1_pattern_E1.jpg 
図E.「文字」のみ。

このEのようなパターンで、「文字」のみで勝負する場合があります。
Eのパターンになった場合は、次回で紹介するような「見えやすさ」、「文字のインパクト」で補う必要が出てくると思います。
簡単に言うと、強弱をつけて、
lecture1_pattern_E1dash.jpg
図E'.Eの文字をさらに大きくしてみた

このようにE'のパターンように、文字は大きく、そして縮小されても見えやすいような作り方をする必要があります。
このあたりの詳細は、次回で紹介します。


さて、「文字」と「キャラ」の配置パターンも決まったところで、今度はさらに「文字」のみに焦点を絞ってみましょう。
無論、ほとんどの国では「上から読む」「左から読む」のが当たり前ですので、

lecture1_pattern_A2.jpg 
図a.一番オーソドックスな例

aのようなパターンで、上から「曲名」、「アーティスト名」or「歌手名」みたいな感じで作りますよね。
ここにおまけ程度で「ジャンル」、「作品名」が入ったりしますが、そこはお好みで。

lecture1_pattern_B2.jpg 
図b.「文字」に「右揃え」を適用した場合

bのパターンのように、文章でいう「右揃え」ですね。このバナーでは、「文字」が全体的に右に配置されているので、
右端に寄せて、右揃えにするような配置するパターンです。
もちろん、その逆である「左揃え」を使う場合も同じです。
さらに、bのパターンでは、たとえbのように「文字」が全体的に右だったとしても、左揃えを使うことも可能です。
このパターンは、とにかく端っこを揃えれば、形を整えることと同じであり、よりイメージ的に印象を良くさせると思います。

じゃあ他にもパターンはないの?
あります!だから言ったじゃないですか。自由に作れると言ったはずですよ?
例えばこんな感じで、cのパターンのように、

lecture1_pattern_C2_1.jpg
 lecture1_pattern_C2_2.jpg
図c.空いたスペースに、別の「文字」を入れた場合

曲名がちょっと長いので、2行にしたら左下のスペース空いちゃった…っていう時に、ここに入れるのもアリです。
これの使い方としては、「曲名」の範囲を長方形で表した時、
その範囲の端っこに合わせるように別の「文字」を入れることで、同じく形を整えるイメージがあります。
ここでは、「TITLE NAME LIST」が使ったスペースを長方形で表した場合、
最初の「T」が左端と上端、最後の「T」が右端と下端になります。
cで使った例では、下端に揃えるように「アーティスト」を入れています。

あと、Bの配置パターンで作った場合は、

lecture1_pattern_D2.jpg
図d.図Bの「文字」配置を逆にする。

このようなdのパターンで、曲名の上に歌手名を入れるという例外も問題ないと思います。
文字が比較的小さい場合、順番を考えなくても伝われば…この部分も多分、次回で紹介すると思います。

lecture1_pattern_D2.jpg 
図e.図Eのように、配置する部分を分ける

このeパターンのように、「文字」を上と下に置く組み合わせも有かな?

というわけで、この部分を感想含めまとめると…
aオーソドックスで、一番無難な組み合わせ。曲名が無駄に長い場合はcを使うか、Bの配置に改めるべき。
無理にフォントを縮めると、フォント自体の味が無くなるので避けるべき。(別の回で紹介します)
bオーソドックスその2。その代わり、配置によってはバランスが崩れる可能性がある…?
デメリットは、揃えることで空きスペースが増えること。
この空きスペースを埋めるようなデザインも考える必要がある。
c管理人がたまに使ってるパターンだけど、正直変な配置とは思わない。むしろどんどん使ってもいいと思う。
d例外パターン。「曲名」の下に「歌手名」などが入らない時に使ってみるといいかも。
e図Eパターンのような「曲名」「歌手名」をそれぞれ上と下に割り当てる感じ。
これを使うデメリットは、「文字」同士が近くにないので、それぞれの関連性が薄くなること。
扱いやすいのだが、何故か良い印象…ではない。何故だ…?

まぁ、ここまで説明してなんなんですが、
みなさんが無意識に使ってる「A,a」パターンが一番無難だと思います(キリッ

でも、そこは頑張って、いろんなパターンを使っていけば、新しい発見ができるのではないでしょうか。


②「ジャケット」の場合
Stepmaniaのバージョン5.0(旧sm-ssc)以降に、新機能として搭載された「ジャケット」。
これは、よくCDのラベルで使われてるようなものと同じと思えば問題ないです。
個人的には、これも似たようなものだと思います。
新たに導入されたものなので、ジャケットを多用しているサイトはそこまで無いと思います。
まぁおまけ程度なんでしょうね…多分。
ただ、そのような新機能を十分に発揮させないわけにはいかないし、
なんにせよ公式は5.0を勧めていますので、見逃さないわけにもいかないかもしれません。

ジャケットの配置パターンとして、オーソドックスなものとしては
lecture1_pattern_F1.jpg
図F. 「キャラ」を全体に、「文字」を下に配置する

lecture1_pattern_G1.jpg 
図G.「キャラ」を全体に、「文字」を右下に配置する

FとGのようなパターンだと思います。
Fは、「キャラ」を全体に、「文字」を下に。Gは同じく「キャラ」を全体に、「文字」を左下か右下に。
まだまだ色々あると思いますが、そこは皆さんの研究次第。
いずれ他のパターンも見つけてくることができると思います。私も研究しなきゃな…
あとは、これは使えるかな、とおもったパターンとして、

lecture1_pattern_H1.jpg 
図H.「キャラ」を全体に、「文字」は対角線上、または点対象の端っこに配置する

このHのように、対角線上の端に「文字」を置くパターンも使えると思います。

とりあえず「ジャケット」に関しては、実際にCDのラベルを拝見すると、どのように使われているのかが発見できると思います。




ふぅ…一通り考察してみました。とりあえず、大事な点を申し上げると、


文字」はできるだけ離さない。そうすると、互いの関連性を薄めることになる。
例えば、ここでいうと、この「曲名」が「アーティスト」の曲ではないというイメージを与える可能性もあるということである。
離す場合は、ジャケットのように、画像全体が広く、対角線上でバランスが釣り合うように配置すると良い。


キャラ」の配置は、Aパターンだけではないこと。
キャラ」と「文字」の配置でバランスよく組み合わせると、雑な編集技術や、汚い文字でも、ある程度は補えれる。

多分これくらいだと思います。他にも言いたいことはたくさんあるのですが、
それは次回のようなタイトルなど、そちらで重点的に話したいところです。

あと、もっと技術をつけたいということなら、
まずは、実際に見て気に入った広告、ポスター、ゲームのデザインなどを、
出来る限りで真似してみることも、スキル上達の手段として使えるのではないでしょうか。

以上、長文でしたが、初級編1を終わります。


【今回使用した素材】
フォント…モリサワ タカバンド B (「僕は友達が少ない」タイトルフォント)
画像…
1.Kirino Oriemo Render by EclairDesigns (deviantART.com)
2.Kuroneko 'Summer' Render by AzusaCaky (deviantART.com)
スポンサーサイト
コメント
No title
AG-Systemさんの作るバナーは文字と画像以外にも工夫が見られるのが凄いと思いました。
Zero Fill LoveやSparkling Daydreamとか。
それと、わざわざ新しい俺妹の画像で説明を始められたということは、新譜面(reunionと予想)期待しちゃって良いんですよね?(笑)
2013/12/16(月) 22:07 | URL | みすく #VsIDOmk6[ 編集]
>>みすくさん
コメントありがとうございます。
Zero Fill Loveは、確か全部LogoShaderで作った覚えがあります。
メーターのような装飾とか、序盤の歌詞を入れてみたりとか…
Sparkling DaydreamはPhotoshopで作りましたね。
あれは基本的にタイトルのデザインをまんま真似した感じで…

えっ?俺妹の画像が何ですって?はっはっはwwまさかそんなことww…
(いずれ作るんじゃないかな(ぇ)
2013/12/22(日) 12:58 | URL | AG-System@管理人 #3n.KBz.U[ 編集]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
2013/12/26(木) 23:44 | | #[ 編集]
コメントの投稿
管理者にだけ表示を許可する
カウンター
▼トータルアクセス

▼ユニークアクセス


こっそり参加しました
StepMania・攻略ブログ
プロフィール

AG-System

Author:AG-System
どうも、AG-Systemと申しまっす!
ここでは主に海外音ゲー曲、アニソン、ゲーソン、エロゲー等々の曲を使ってDWI、またの名をSimfileを公開しています。もう大学4年生だけど院への進学考えてる、NEETな男の子です(テヘペロ

なにか御用があれば
掲示板かメールまでお願いします
ag-system2006■hotmail.co.jp (■⇒@)
メッセ登録もOK!

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
リンク

--Stepmaniaリンク--
Eternal∞Tune
Esmelas Hearts
逃げずに伏せる!
月華の協奏曲
ふ~たら
演奏の丘
PARANOiA PRiSM
ステマニ日和
elfen-knight
あー、ひまだ。
-CR-SOS DWI置き場
eternal temperament ~永久なる音律~
Heimdall
夢、幻想
Starry Line
minority
レッツ・プレイ・ステマニ
アニメDWI置き場
EJENT MACGLIF
雑食ゲーマー~ステマニ本店~
偽りの瑞光
StepManiaは大好き~
Restuniton.Solo DWI置き場
break cafe
ステマニサーチ
某国立高専附属ステマニ力学研究室
Astrogarden
ここは譜面製作室

おーぷんすてっぷ!
羽風HAKAZE ~ Feather Wind
黄昏時に差し込む光
STEPDWI
--製作関連--
LogoShader
フェンリル
--その他--
Starry MusixX

『グリザイアの楽園』2013.5.24発売予定 はつドラ合同バナーキャンペーン開催中 『大図書館の羊飼い』は好評発売中です。 「タユタマ -kiss on my deity-」 2008年6月27日発売!
★パッケージ★
jap_package-bn.png
Japanese AnimeSong Package
絶賛公開中!
72曲と16人の参加者!!
☆新作DWI☆
06/29
-Fain-
05/08
-Fain-
Twitter
お気軽にフォローどうぞ
TweetsWind
新規リンクサイト
tasogaredoki-link.png サイト名:黄昏時に差し込む光
管理人名:dagger様 stepdwi-link.png サイト名:STEPDWI
管理人名:名無し様
RSSリンク
応援サイト(作品)
『グリザイアの楽園』2013.5.24発売予定 『大図書館の羊飼い』は好評発売中です。 『グリザイアの迷宮』2012.1.27発売予定! Hello,good-bye 応援中! PrismRhythm -プリズムリズム-応援中! タユタマ-It's happy days-応援中! 「タユタマ -kiss on my deity-」 2008年6月27日発売! 「キサラギGOLD★STAR」応援CHU!! 戯画『 BALDR SKY diveX』応援バナー企画参加中! サガプラネッツ最新作「ナツユメナギサ」 AXL新作第6弾「かしましコミュニケーション」2010年2月26日発売予定! AXL新作第5弾「Like a Butler」2009年2月27日発売予定! 「PrincessFrontier」応援中! 「恋する乙女と守護の楯」応援バナー 11eyes_S_7.png 「Chu×Chuアイドる2」情報は特設ページで公開中! Dies irae~Acta est Fabula~応援中! 【素晴らしき日々~不連続存在~】応援中!
応援サイト(ブランド)
200x40_03.jpg 200x40_03.jpg フロントウイング応援中! 200x40_03.jpg dp2010haru.jpg 200x40_03.jpg 200x40_03.jpg 200x40_03.jpg 200x40_03.jpg bana.jpg 200x40_03.jpg 200x40_03.jpg keroqbanner_03.gif ぱれっと応援中!

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。