1枚の写真から旅のポスターパレットを作成する
1枚のバケーション写真をまとまった旅のポスターパレットに変えましょう。支配的な色を抽出し、視覚的な役割を割り当て、明確で印刷可能なデザインを構築する方法を学びます。
写真からデザインへの演習
思い出に残るバケーション写真には、風景以上のものが含まれています。また、目的地の雰囲気に関連した色のコレクションも保持しています。適切なワークフローを使用すれば、それらの色は画像内に隠れたままではなく、独特の旅のポスターの基礎となることができます。
個人の思い出から反復可能なビジュアルシステムへ
バケーション写真は、多くの場合、感情的に強力ですが、視覚的には複雑です。1枚の画像には、日光、影、反射、植生、建物、衣服、カメラ処理によって作られた何千もの色が含まれる可能性があります。すべての色をポスターに使用しようとすると、雰囲気ではなくノイズが発生します。
パレット抽出の目的は、すべてのピクセルを再現することではなく、写真を代表的な色の小さなコレクションに縮小し、その特性を保持することです。これらの色は、背景、タイポグラフィ、イラスト、アクセントの詳細に割り当てることができます。
無料のMr.Gena画像からパレットツールを使用すると、PNG、JPG、またはWebPファイルをアップロードし、抽出する色の数を選択して、結果をCSSとしてコピーできます。処理はブラウザーで直接実行されるため、個人の旅の写真をすばやく確認するのに便利です。
この演習は、ランダムな色を完全なデザイン方向に変えることについてのガイドで説明したクリエイティブプロセスを継続しています。違いは、開始色が、ランダムな結果ではなく、意味のある写真から得られるという点です。
このチュートリアルを完了するまでに、縮小されたパレット、ポスターコンセプト、タイポグラフィプラン、色の役割のセット、およびデジタル共有または印刷用にデザインを準備するための最終チェックリストが完成します。
1. 目的地のストーリーを定義する
ポスターが伝えたい思い出から始めましょう。目的地それ自体はストーリーではありません。パリはアーキテクチャ、カフェ、ファッション、夜間の通り、またはセーヌ川の静かな朝を表すことができます。イスタンブールは、フェリー、歴史的な通り、食べ物、スカイライン、または2つの大陸間の動きを通じて提示されるかもしれません。
意図した印象を説明する文を1つ書きます。例えば、「地中海沿岸での8月の夜を思い出させる、暖かく、ノスタルジックなポスターを作成する」などです。この文は、どの色、形、詳細が強調する価値があるかを決めるのに役立ちます。
目的地、季節、および概算日付を記録します。旅の期間をポスターの小さな詳細として含めたい場合は、日付計算機を使用して、旅の開始と終了の間の正確な日数を計算できます。
このステップを完了するには、3つの説明的な単語を選択します。「暖かく、くつろいだ、日焼けした色褪せた」は、単に「夏のバケーション」と書くよりも、より有用なデザインフィルターを作成します。その後のすべての決定は、これらの単語をサポートする必要があります。
2. 使用可能な色情報を持つ写真を選択する
最も美しい写真が、常にパレットソースとして最適とは限りません。ドラマチックな画像には、1つの支配的なダークエリアと非常に限定的なバリエーションが含まれる場合があります。別の写真には、多くの競争するオブジェクトが含まれ、抽出されたパレットが切断されたように見える可能性があります。
旅の複数の写真を確認し、明確な焦点、目に見える照明方向、認識可能な色のグループが限定された画像を探します。風景、建築の詳細、市場のシーン、ビーチ、輸送の写真は、多くの場合、興味深い結果を生み出します。
| 写真の特性 | 役に立つ理由 | 潜在的なリスク |
|---|---|---|
| 明確な焦点 | 明らかなポスターサブジェクトを提供 | クロッピング後、被写体が小さすぎる場合があります |
| 明確な照明 | 雰囲気と色の関係を作成 | 強いフィルターは不自然な色を生成する可能性があります |
| 視覚的混乱が限定的 | 支配的な色を特定しやすくします | 結果が視覚的に単純になりすぎる可能性があります |
| 見える前景と背景 | 深さと層状構成をサポート | 多くのレイヤーが階層を弱める可能性があります |
| 認識可能なローカル詳細 | ポスターを目的地に接続 | 一般的な詳細では場所が識別されない可能性があります |
作成したか、使用する権限がある写真を使用してください。パレットは学習用に抽出することができますが、完全なポスターを公開することは、元の画像、認識可能な人物、私有財産、または保護されたアートワークに関連した権利を含む場合があります。
3. 色を抽出する前に画像を準備する
パレット抽出は、アップロードするファイルを反映します。写真が暗すぎたり、強くフィルター処理されたり、端の近くに無関係なオブジェクトに支配されたりすると、抽出された色はそれらの問題を反映します。
複製を作成して、元のままにしておきます。不要な領域をクロップし、露出、白いバランス、コントラストに抑制された調整を加えます。目的は、誇張されたソーシャルメディアフィルターを作成することではなく、重要な色の関係をより簡単に識別することです。
2つのクロップを準備することを検討してください。最初は全体のシーンを表示でき、2番目は最も意味のある領域に密接に焦点を当てることができます。両方のバージョンからパレットを抽出して、結果を比較します。小さいクロップは、多くの場合、大きな空や暗い前景に圧倒されたより具体的な色を明らかにします。
4. 支配的な色パレットを抽出する
準備した画像を画像からのパレットにアップロードするか、直接画像URLを貼り付けます。5色で始めます。これは通常、圧倒的なコレクションを作成せずに、主な視覚的な関係を明らかにするのに十分です。
生成されたスウォッチを写真の横に確認します。各色が表示される場所を尋ねます。1つは空を表すかもしれません、別は建築、別は深い影、もう1つは小さいが思い出に残るオブジェクトを表すかもしれません。
異なる色数を持つ別のバージョンを生成します。3色の結果は画像の最も単純なアイデンティティを公開できますが、7〜8色は有用なアクセントを明らかにする可能性があります。最大のパレットが最も正確または価値があると想定しないでください。
特定のポイントを手動で確認したい場合は、Adobeの公式Photoshop スポイトガイドは、色を画像からサンプリングしてスウォッチパネルに追加する方法を説明しています。
無料のデスクトップソフトウェアを使用しているデザイナーは、公式のGIMP カラーピッカーのドキュメントを参照できます。GIMPは、サンプル平均オプションも提供しており、1つの異常なピクセルから代表的でない値を選択することを回避するのに役立ちます。
5. 支配的な色から有用な色を分離する
抽出ツールは代表的な色を特定しますが、ポスターの通信目標を知りません。写真で最も一般的な色は、灰色の道路、淡い空、または暗い影である場合があります。それは支配的にしますが、必ずしもメインのアイデンティティ色として適切ではありません。
3つの質問を使用して各スウォッチを評価します。写真のどのくらいを表していますか?目的地にどのくらい強く接続されていますか?ポスターではどのような仕事ができますか?
小さな赤い傘は写真のわずか1%を占める可能性がありますが、完璧なポスターのアクセントになります。一方、大きなコンクリート壁は支配的な灰色を生成する可能性がありますが、単に中立的な背景として機能します。
歴史的なインスピレーションについては、議会図書館の旅のポスターガイドを確認してください。そのコレクションは、旅のポスターが、目に見えるすべての詳細を文書化するのではなく、目的地をすばやく伝えるために、色、ランドマーク、活動、輸送をどのように使用するかを示しています。
| 抽出された色のタイプ | 可能なポスターの役割 | 決定テスト |
|---|---|---|
| 明るい空または壁の色 | 背景 | テキストはそれの上で読みやすいままですか? |
| 明確な影または構造 | 見出しまたはシルエット | 十分な視覚的なコントラストを提供しますか? |
| 風景のミッドトーン | 主要なイラスト領域 | 目的地を表していますか? |
| 明るいローカル詳細 | アクセント | 支配せずに注目を集めていますか? |
| ミュートされたサポート色 | セカンダリシェイプまたはキャプション | ノイズを追加するのではなく、階層をサポートしていますか? |
6. 結果をまとまったポスターパレットに縮小する
抽出された結果から3〜5色を選択します。有用な旅のポスターパレットには、1つの淡い背景、1つの暗い前景、1つの目的地色、1つの明るいアクセントが含まれる場合があります。5番目の色は、深さまたは二次情報をサポートできます。
ほぼ同じ色を削除します。2つの淡いベージュの値は、抽出結果では異なるように見えるかもしれませんが、最終的なデザインで同じ仕事を実行します。両方を保つことは、有用な範囲を追加することなく追加の決定を作成します。
単に写真から来たため、抽出されたすべてのスウォッチをポスターに強制しないでください。抽出は証拠を提供し、義務ではありません。最終的なパレットは、画像の雰囲気を保存しながら、視聴者がすぐに理解するのに十分なシンプルなままである必要があります。
選択した色を、最も明るいから最も暗い順に横一列に配置します。次に、重要度で整理します。これら2つのビューは異なる情報を明らかにします。トーン範囲と視覚的優先度です。
7. すべての色に明確な役割を割り当てる
外観ではなく、目的に基づいて色に名前を付けます。「地中海青」は魅力的に聞こえるかもしれませんが、「ポスター背景」は色をどのように使用する必要があるかを伝えます。役割ベースの名前は、後の改正も簡単にします。
基本的なポスターシステムには、背景、見出し、イラスト主要、イラスト二次、アクセントが含まれる可能性があります。詳細な構成をコミットする前に、背景に対してすべての前景色をテストします。
1つの色を完全なインターフェイスパレットに変えることについての以前のガイドでは、役割ベースの色システムについてさらに詳しく説明しています。ポスターはインターフェイスではありませんが、同じ原則が適用されます。保持されたすべての色は、予測可能な責任を持つ必要があります。
:root {
--poster-background: #f2d4a7;
--poster-headline: #19384a;
--poster-landscape: #4f8074;
--poster-shadow: #31505a;
--poster-accent: #d95d45;
}
上記の例の値は例示的です。写真から抽出した実際のコードを使用し、最終的なポスターコンテキストでそれらをテストします。
8. 写真をグラフィック図形に変換する
旅のポスターは、写真をリアルに再現する必要はありません。目的地を認識可能にする大きな形状を特定してください。海岸線の曲線、山のシルエット、歴史的な建物の屋根線、フェリーの輪郭、または通りの繰り返されたアーチ。
画像を前景、中景、背景に減らします。1〜2パレット色を各レベルに割り当てます。目的地と意図された気分が理解できたままであれば、小さな写真の詳細は消えることができます。
コントラストを使用して注目を集めます。淡い空に対する暗いシルエットは、すぐに明確さを作成します。明るいアクセントは、太陽、傘、車、窓、または小さな建築的機能を識別できます。
すべてのオブジェクトをトレースしないでください。詳細なトレースは、多くの場合、古典的なポスター設計に関連する直接性を失う複雑なイラストを作成します。簡素化は、ファイルサイズを単に削減するのではなく、視覚的なアイデアを明らかにする必要があります。
9. 強いポスター階層を構築する
視聴者が最初、2番目、3番目に気付くべきかを決めます。多くの旅のポスターでは、目的地の名前は一次テキストで、イラストは雰囲気を運び、より小さな行は日付、地域、または招待を提供します。
より多くの色を追加する前にスケールを使用します。大きな見出し、明確な焦点シェイプ、寛大な空のスペースは、複数のアウトライン、影、装飾的なラベルよりも強い階層を作成できます。
見出しを、写真がすでに視覚的なスペースを提供している場所に配置します。落ち着いた空は大きなタイポグラフィに対応する場合がありますが、詳細な都市シーンは固体テキストパネルが必要になる場合があります。テキストをイメージの中央部分に配置するだけで、その領域が中央に配置されているわけではありません。
| 階層レベル | ポスター要素 | 設計方法 |
|---|---|---|
| 主要 | 目的地または主要なビジュアル | 最大スケールと最強のコントラスト |
| 二次 | シーンのサポートまたはキャッチフレーズ | 中程度のスケールと制御された配置 |
| 三次 | 日付、地域、または旅行詳細 | 読みやすいスペーシングで小さいタイプ |
| アクセント | 1つの思い出に残るビジュアル詳細 | 最も明るい色の限定的な使用 |
10. 短く効果的なポスターコピーを書く
ポスターはすばやく通信する必要があります。目的地の名前と1つのサポート行で始めます。サポート行は、地域、季節、旅行テーマ、または個人的な思い出を識別することができます。
異なるバージョンを比較するには単語カウンターを使用してください。サポート行を説明するのに複数の文が必要な場合は、おそらくデザイン内ではなく、ポスターに付随するキャプションに属する可能性があります。
言い回しを具体的にしてください。「アドベンチャーを発見する」は、ほぼすべての目的地を説明できます。「ボスポラス海峡を横切るイブニングフェリー」は、視聴者に場所、活動、時刻を与えます。
最終的なエクスポートの前に、文法チェッカーで目的地の名前、句読点、サポートコピーを確認してください。すべての提案を手動で確認し、特にポスターにローカル地名または意図的に短縮されたフレーズが含まれている場合。
11. 実際の状況でポスターをテストする
デザインをスマートフォンサイズのソーシャルポスト、デスクトップ画像、印刷ページとしてテストしてください。大きなデザインキャンバスで明確に見える詳細は、ポスターがフィード内で表示されたり、通常のホームプリンターで印刷されたりすると消えることがあります。
距離から見出しをチェックし、テキストのコントラストを検査し、アクセント色がまだ注目を集めていることを確認してください。大規模な専門のコピーを注文する前に、低コストのドラフトを印刷してください。画面の明るさでは、色が紙の上に現れるより鮮やかに見える場合があります。
ポスターに旅行ギャラリーまたは旅行ストーリーにつながるQRコードが含まれている場合は、QRコードリーダーを使用して、エクスポートされた画像からコードをテストしてください。テクスチャ、スケール、グレア、低いコントラストが走査に影響を与える可能性があるため、印刷後にテストを繰り返します。
旅行に参加しなかった人にポスターを見せてください。元の写真を説明する前に、どの目的地または雰囲気を認識しているかを尋ねます。彼らの最初の印象は、デザインがあなたの個人的な思い出の外側で通信するかどうかを明らかにします。
12. 完成したデザインをエクスポートし、文書化する
デジタルおよび印刷用の別のバージョンをエクスポートします。ソーシャルメディア画像、ウェブサイトサムネイル、印刷可能なポスターは、自動的に同じ寸法または圧縮設定を使用する必要はありません。
すべてのエクスポートされたバージョンを開き、エッジ、テキスト、画像品質、色を検査します。重要な詳細がクロップされず、ポスターが意図したサイズで読みやすいままであることを確認してください。
印刷準備PDF が共有するには大きくなりすぎる場合は、PDF圧縮ツールを使用して、より小さいコピーを作成してください。強い圧縮は専門的な印刷に適切でない可能性があるため、元の高品質エクスポートを別に保存します。
元の写真、抽出されたパレット、選択されたHEX値、タイポグラフィの選択、ポスターの寸法、エクスポート日を含む短いデザインレコードを保存してください。このドキュメンテーションにより、ビジュアルシステムを再構築することなく、関連するはがき、ソーシャルポスト、または2番目のポスターを簡単に作成できます。
最終旅ポスターパレットチェックリスト
- ポスターは1つの明確な目的地ストーリーを伝えます。
- ソース写真は所有されているか、適切にライセンスされています。
- 写真には、認識可能な焦点と有用な色範囲があります。
- 複製画像は、元のを損傷することなく準備されました。
- 異なる色数を持つパレットが比較されました。
- 支配的な色は戦略的に有用な色から分離されました。
- 最終的なパレットには、必要な3〜5色のみが含まれています。
- 選択されたすべての色には、定義されたポスターの役割があります。
- 写真は認識可能なグラフィック図形に単純化されました。
- 目的地、イラスト、サポートコピーには明確な階層があります。
- ポスターはサムネイル、画面、印刷サイズでテストされました。
- 最終ファイルと色値がドキュメント化されました。
最高のパレットはおそらくすでにカメラロール内にあります
意味のある視覚的方向を見つけるために、何百ものテンレート関連のパレットを検索する必要はありません。旅からの写真には、すでに場所、季節、光、個人的な経験に関連した色が含まれています。それらの色を抽出すると、ポスターに本物の開始点が与えられます。
抽出結果は完成したデザインではありません。どの色が注目に値するかを選択し、不要な類似性を削除し、役割を割り当て、タイポグラフィとグラフィックシェイプでパレットをテストする必要があります。その編集プロセスは、写真データをデザインに変えるものです。
画像からパレットを開き、1つのバケーション写真を選択し、5つの抽出された色で始めます。すべての残りのスウォッチが目的地の通信を支援するまで、結果を縮小します。最終的なポスターには、旅からのすべての詳細が含まれてはいけません。それは最初に見られる価値のある思い出の部分を保存する必要があります。