ファンサイトのデザインをステップバイステップで

この投稿はずっと前から温められてきました。もともとは「ファンサイトの作成」シリーズの記事の続編として公開される予定でした（ひとつとふたつ）。では、この文章はなぜFable 3のブログにあるのでしょうか？答えは簡単です。具体的な例なしでは、デザインについて何かを説明するのは難しいからです。真空の中のデザインは存在しません。そこで、少し前にFableシリーズのファンサイトをリニューアルすることが決まり、これこそが「ノウハウを共有する」ための例になると考えました。

実際のところ、私は宇宙の神秘を解き明かすことや、この記事一つであなたのファンサイトのユニークなデザインを作る方法を教えるつもりではありません。デザインのテーマは巨大で多面的であり、一人のデザイナーが一つの作品の例だけで全てを解き明かすことはできません...それと、これはフォトショップの使い方講座ではありません。私なしでもたくさんありますよ、Googleで検索を利用してください。私は、あなたがすでにフォトショップの機能の基礎を理解しているだろうと仮定していますので、「ここをクリックして」「あそこに行って」といった手順の説明は期待しないでください。これはフォトショップのレッスンではなく、デザインの作成に関するマスタークラスです。私の作業方法を紹介し、よく忘れられるいくつかのトリックや秘密をお教えします。それでは、始めましょう :)

イーゼルとキャンバスの準備

この場合のイーゼルは、すでにお分かりの通り、Photoshop CS4であり、キャンバスは私たちの元の、まだ空の新しいファイルです。「フォトショップ」以外にも他のプログラムがあります。例えば、Gimpです。中にはCorel Drawで作業をする人もいます。しかし、デザインに関しては、フォトショップよりも良いプログラムはまだ発明されていません。これはウェブデザイナーの基本的なツールです。同じくCorel DrawやAdobe Illustratorはデザインの特定の要素を作成するために使用できますが、デザインをまとめるにはフォトショップが最も便利です。

イーゼルについてはこれでわかりましたので、キャンバスの準備の時間です。ここで、画面の解像度を思い出しておく必要があります。約5年前、1024x768の解像度がどこでも支配的で、1280x960が人々の意識を掴み始めたところでした。数年前、1680x1050および1600x1200は大きな解像度と見なされてました。しかし現在、デフォルトのFull HDモニターが日常の標準となり、最大解像度の基準は1920x1080であるべきです。ただし、1024x768はすぐには引退しないため、これが下限となります。実際には、特に重要なのは幅で、私たちのサイトは高く長くなるでしょう。ネット上の90%のサイトと同じく。

以前は「伸縮可能な」サイトが流行っていました。すなわち、デザインの個別要素は繰り返しの要素から構成されており、したがって、サイトはユーザーの解像度に応じて幅が伸びました。しかし、Full HDの登場により、この方法によってユーザーの解像度にサイトを合わせることは美的ではなくなりました。人間の目は、伸ばした手の長さで情報を見るのが良いと認識しています。A4用紙に等しい幅であるとよく見えます。それ以上は焦点が合いません。したがって、最近ではコンテンツ部分を狭く作り、残りのスペースを左と右の背景装飾で埋めることが一般的です。こうして、羊は満ち、狼も安全です :) したがって、私たちのコンテンツ部分は1000ピクセルとなります (ブラウザの右側には、実際には、1024からこれらの24ピクセルを「消費する」スクロールバーがあります) . したがって、私たちの背景の「フィールド」部分は(1920-1000)/2=460ピクセル左と右に設定されます。この領域からはみ出さないようにするために、ガイドを使用しています。ガイドラインを必要な場所に設置するために、私はスライスされた定規の設定をオンにします。私はまた、キャンバスの中心をすぐに示すことができました。また、私は高さの約を見積もり、サイトのヘッダーのためのスペースを取っています。将来的には動く予定ですが、「目印」をつけています。では、事前準備は完了です。次の準備作業に移ります :)

事前準備が完了しました

インスピレーションを引き出す

この段階は、同時に最も簡単で最も難しいものです。デザインを構築するための素材を収集する必要があります。プロのアーティストであれば、すべての必要なアートやインタフェース要素を自分で描くか、自分のチームに依頼することができます... 一方で、その場合、「アルテミー・タターニチ」 なんでこの文章にいるのですか？ :) これは初心者向けの記事です。私たちには、インターフェースのためのテーマに沿ったアートや要素、またはそれらの要素を作成するための素材が必要です。おそらく、最初の試みに必要なものをすべて集められないでしょう。それゆえ、アートやインスピレーションを見つけることに再度戻る必要があります。私は通常、公式サイトから始め、大きなファンサイトに移動します。そうした後に、GoogleとYandexの画像検索に切り替えます。両方の検索エンジンで結果が大きく異なるため、両方を使います。片方が失敗しても、もう片方は大量の素材を見つけ出します。たくさんのアートがあり、ゲームのインタフェースの大きなスクリーンショットがあるのはいいことですが、開発者がたくさんの壁紙を発表した場合です... しかし、最もよくあるのは、何かが不足していることです。

私の検索の結果、Fableに関する多くのアートや他のゲームのアートが見つかりました。しかし、第三部の美しいアートはほんのわずかです。ただし、すべてを集めてください：壁紙、コンセプト、スクリーンショット... 何が役に立つかはわかりませんから。集めた素材の完全なコレクションをお見せすることはありませんが、スプ Spoilerにもともとデザインの基盤になった要素が見つかります。

このフレームは最終的には多数のインターフェース要素に分解されました


第三部に関して最初に見つかった正常なアート

これは二番目のアートです。必要なスタイルでは他に見つかりませんでした

このアートはすぐに背景に使用されました。完璧ではありませんが、他に見つかりませんでした。

第二部のアートは作業の最後の段階で役に立ちました

ロゴなしではどうなるのでしょうか？

作業を始める

今こそ作業に取りかかることができます。小さなコツとして、私は作業結果を新しい名前で定期的に保存し、バージョンの履歴を保っています。デフォルトでは最初の結果はバージョン0_1、次は0_2、0_3などになります。バージョン1_0は、あなたが望んでいたことをすべてしたと考え、作品をレビューアや友人、クライアントに見せ始めるときに到達します。デザインには修正が必要になると思われます。その場合、バージョン1_1、1_2などが続きます。これは、自分の進捗を追跡するのに便利で、必要に応じて以前のバージョンのアイデアに戻ったり、現在のバージョンで削除したり変更したりした要素を取り出すことができます。

そしてもう一つのアドバイスとして、フォトショップではすべての要素が個別のレイヤーに保存されます。すぐに意味のある名前を付けることを厭わず、特定の要素のレイヤーはctrl+bを使ってグループ化しましょう。100層以上のレイヤーがファイルに蓄積されると、署名やグループ化なしでは混乱してしまいます。

さて、無駄話は置いておいて、最初の結果を見てみましょう。これは最初ではなく、ほぼゼロの状態です：

この段階で、コンテンツのための領域が大体描かれ、アートがそれらがあるべきだった場所におおよそ配置されています。あちこちには、設計に収まるべき既に見える部分と見えない部分があります。さて、次へ進みましょう。この段階で、二つの重要な技術的作業が実施されました。非常に丁寧に背景からキャラクターを切り取り、フレームは小さな部分に分解されました。

切り取りには、私はエリミネーターよりもレイヤーマスクをよく使用します。黒色で隠したい部分を塗りつぶし、白色で見える部分を残します。グレーの中間色は半透明の領域を示します。これにより、余分な部分を消去しても簡単に元に戻すことができます。最大の解像度で切り取られたキャラクターは別に保存しておき、失わないようにしました。

フレームは小さなピースに切り分けられてテクスチャに変わります。隅は反転され、三回左上の隅が形成されます。こうして対称性を得ました。

もともとデザインは暗いもので、最初の二つの主要なアートに近いものでした。柔らかいブラシとさまざまな合成モードを使用することによって、背景の非常に明るい画像をかなり暗いキャンバスに変えることができました。コンテンツ部分は、金色のフレームで縁取られた複数に折りたたまれた羊皮紙のように描かれようとしていました。クラウンは、重要な要素の一つとしてデザインに留まります。私は徐々にメニューのフォントを探し始めました。

美しいキリル文字のフォントは、若干の緊張があります。なぜなら、通常は存在しないからです。英語の文字はありますが、ロシア語はありません。ロシア語版はかなりの料金が請求されるか、民間の職人によって作成されていて不完全で、役に立たない場合もあります :) 画像のフォントはbonzaiです。必要な方はお問い合わせください。続けましょう。

いくつかの苦労の後、意味のあるものが少しずつ描かれ始めました。最初のバージョンの主なメニューが作成されました（後で変更されますが、基盤は何度も役に立つでしょう）。注意深い方々は、左側と右側のこのメニューの部分が私たちのクラウンとフレームの渦を合わせたものであることに気づくかもしれません。異なるインターフェース要素を組み合わせることを恐れないでください。彼らはしばしば予期しなかったが心地よい結果を生む場合があります。また、主なコンテンツ部分のコンセプトも変わりました。私は王室のマントのようなものを描こうとしましたが、結果は気に入りませんでした。したがって、意志的な決定として、コンセプトを変更することにしました。

これは新しいイテレーションではなく、基本的に「明るいオプションとしてどのように見えるかを試す」ものです。明らかにより良いのですが、さらに考える必要があります。左上の要素は、フォントfleurの「文字」です。インターフェースの要素を作成するのに便利です。多くの渦や花が一つのフラスコに詰まっています。

これが新しい何かです。私はサイトのヘッダー内のキャラクターの位置を実験しましたが、主なポイントはこれではありません。水平メニューを放棄して縦のメニューを作成しようとしました。いい感じですね。中央のメニューはフッターに移動しました。

水平メニューと垂直メニューを比較する中間段階で、クリックで展開可能なサイドブロックを作成することを考えていました。

この場合、保存した旧バージョンが役に立ちます。デザインがまったく異なる方向に進みました。コンテンツの全幅を持つスクロールバーと中央のフレーム、サイドブロックのための縮小されたフレームがどうしても良くなく見えました。このバリアントを放棄し、一歩後退して別の方向に進みました。

そして、真実の瞬間です！一歩後退し、要素で遊ぶと、最終版に近いレイアウトが得られました。すべての主要要素は集まり、正しい場所にあります：メインメニュー、サイドブロック、コンテンツ、ヘッダー、フッター。注意深く見ると、前の失敗したイテレーションの一部が実際に役立ったことがわかります。テキストのマークアップは、Dragon Ageに関するサイトから取られ、テキストの配置を確認するためのものでした。メインにはPalatino Linotypeが使用されました。美しい標準フォントで、非常に重要です。この場合、あなたのサイトは問題なくすべてのWindowsユーザーによって表示されます。ウェブサイトにキャッシュのために自分のフォントを読み込む方法もありますが、それは余分なトラフィックと異なるブラウザでのフォント表示に関する問題です。お勧めしません。インターネット上にはWindows標準フォントの素晴らしい表があります。私はそれを使っており、皆さんにもお勧めします。ヘッダーには、装飾的なフォントを使用することができます。それに、このステージでウェブサイトの名前にぴったりの美しいフォントが見つかりました。それはAlgerius Capsと呼ばれるフォントです。違いを感じてください！

とても興味深い段階で、近くの完成のデザインでさえ向上できることを示しています。まず第一に、私は下のメニューを手放し、最終的にフッターに変えました。覚えていますか？水平メニューはまだ必要になると思ったのですが、役に立ちました。マークアップはすでに不必要な要素を整理しました。デザインを混乱させることなく。重要なのは、デザインに結局のところ居場所が見つかったことです。刀を鞘に戻す。私たちはアートの一つを取って、剣とクラウンの手を切り取ります。手袋の上のロゴを隠す作業は繊細でした。この場合、1000％以上の拡大は余分に必要でした。さらに、私はバックグラウンドの色の補正にも着手し始めました。あまりに黄色と緑がかったです。これを抑えました。通常、私は必要な色で埋められた追加のレイヤーを使用し、ソフトライトの混合タイプを使用しますが、必要に応じて他の混合タイプも試すことができます。この場合、ガンマは青のレイヤーで補正されました。

私はデザインを磨き続けました。背景のアートの位置を修正し、再度色のトーンを調整しました。以前のクリーンアップからの残りのゴミをほぼすべて取り除きました。唯一の枝を逃しました。しかし、空の背景にサイト名がぼやけて見えました。そこでスタイルを修正し、背景に対してコントラストをつけましたが、サイトの基本色を使用しました。

フィニッシュライン

パララララ！これがバージョン1_0です。実際には最終版ではありませんが、私はこの段階で友達にレイアウトを見せ、批評を聞くことにしました。ここには、何のゴミもありません。また、背景は再度色付けされました。しかし、さらに重要なのは、検索バーとソーシャルメディアのボタンを持つメニューが追加されたことです。初めはRSSだけが機能しますが、すぐにTwitter、YouTubeチャンネル、Facebookページがオープンします。

最初の重要なコメント - 私たちのヒーローはウェブサイトのヘッダーに孤独を感じます。彼には仲間が必要です。残念ながら、第三部には美しい女性のアートが見つからなかったですが、第二部のアートが彼を支えました。それは実際にぴったりです。このサイトは第三部だけに関するものではありません。私たちは女性の代わりにヒーローからピストルを取り除かざるを得ませんでした。明らかに無駄です。

しかし、これは終わりではなく、さらに一連のコメントが押し寄せました。サイトが非常に目立つ金色になり、中央のコンテンツブロックの金のフレームが非常に多くのスペースを消費しました。さて、オフセットを抑え、レイヤー効果を使ってフレームを小さくしました。デザインを重くし、レイアウトを複雑にするチェーンも削除されました。真実の瞬間がやってきました。最終バージョン:

www.Fable-game.ru

まとめ

実際には、埋め込みデザインもあり、配置の調整がありました。それらは背景とキャラクターの関係に関してのものでした。スタイルの修正やバグの探求、問題解決もありました。しかし、それはすべて技術的な問題です。最も困難な時点は過ぎました。このステージに達したら、自分を称賛し、新しい作品をポートフォリオに自信を持って加えることができます。あとは、ウェブサイトの内容を充実させることや最適な構造を考えることですが、これはまったく異なるストーリーです :)

私の「画像と画像に関する物語」があなたに好かれることを願っています。そして、何より、自分自身の美しくユニークな驚くべきデザインを作成するのに役立つことを願っています。コメントでのご質問やご提案、コメントをお待ちしています。

*デザインとテキストの作者は私、Ksandr\_Warfire

記事はGAMER.ruのために特別に準備されました