私は通常、昔のinterwebsで使 あなたがブログのヘッダーを作る方法に興味があるなら、あなたは私たちが創造の核心に降りる前に、各タイプの長所と短所を知る必要があります。

ナビゲーションヘッダ

ナビゲーションヘッダはフォトベースではありません。 たとえば、私のウェブサイトの一番上に、私は私のロゴに加えて、重要なページやサインアップフォームへのリンクを持っています。 見てみろ

あなたがミニマリズムのファンであり、人々が本当に画像に気を取られることなく、あなたの文章に焦点を当てたい場合は、これらのようなナビゲーショ

それはまた、あなたが新しいしている場合、あなたのブランドを考え出していない、または単にオンラインで起動して実行する必要がある場合に行く

レイアウトは石に設定されていません—ナビゲーションヘッダーはあらゆる種類の方法でレイアウトできます。 おそらく、ロゴがテキストリンクの中央にある場所や、リンクのないロゴ（またはその逆）が表示されている場所を見たことがあります。

このヘッダーは、フルフォトヘッダーやウェルカムマットなど、追加のブログヘッダー（私のサイトには実際にはその下に別のヘッダーもあります）と調和して

フォトヘッダ

フォトヘッダスタイルは非常に目を引くと本当にあなたを描画します。 あなたのブログに写真のヘッダーが必要な場合は、その主題がどうなるかを考えてください。 それは人の写真になりますか？ あなた、またはあなたとあなたの家族、またはあなたの理想的な顧客のいくつかの表現のように？ それとも、風景、パターン、漫画/アイコン、あるいはビデオのいくつかの並べ替えを備えた写真になりますか？

AlexTooby.com.アレックスは彼女のコースのために署名するために強い呼出しに行為の歓迎されたマットの考えのビットと彼女自身の写真を使用する。

写真は、新規参入者と帰国訪問者の両方のために動作します。 どうして？ 彼女はこのヘッダーの強さを強化するのに役立ついくつかの微妙な視覚的要素（これらの詳細は後で）を使用しているからです。 彼女はInstagramのインターフェイスがそれを嘲笑して、彼女の携帯電話を保持している、と彼女はあなたが読んでほしいテキストに向かって探しています。 あなたの目は自然にクリックするための明るいピンクのボタンにダウンして、その後、言葉に、その後、彼女の顔に描かれています。 彼女が画面の左側を見ていた場合、これはあまり効果的ではありません。

プロチップ: 誰かがコピーやボタンに向かって”で”直面していることは、あなたも、使用することができます忍者のデザインのトリックです。

フォトヘッダーは気分を設定し、読者が行動を起こすのに役立ちます。 写真のヘッダーは大きいので、ページ上の他の気晴らしをブロックし、読者に何をしてほしいのかを正確に集中させるのに役立ちます（Alexの「Start Free Course」ボタ

ウェルカムマットヘッダー

インターネット上で見られる典型的な”ウェルカムマット”はフルスクリーンの引き継ぎであり、これを行うのに役立つツールがあ

または、ページ全体を引き継ぎたくない場合は、ウェルカムマットや特別な景品のサインアップフォームのように機能する部分を設定することもで それがどのように見えるかわからない？ 私のウェブサイトから下の画像をチェックしてください。 私は私がすべての訪問者に最初に見てほしい従って私が未来の電子メールおよび昇進のための右の聴衆が付いている私の電子メールのリストを造 私のブログエントリはこの下に表示されるので、訪問者は私の最新の投稿を見るために下にスクロールすることができます。

三つの異なるスタイルを見てきたので、それはあなたのウェブサイトのためのブログヘッダーの作成について話

ブランドに見えるブログヘッダーの作り方

私は”ブランド”という言葉が公式で威圧的に聞こえることを知っていますが、恐れることはありません！ あなただけのカップルの重要なものに焦点を当てる場合、それは実際にはかなり簡単です。 すなわち、色（多くの場合、あなたのロゴに見られる）とフォント。

プロチップ: あなたはいつでも簡単にアクセスするために（あなたのロゴと一緒に）この情報を追跡できるように、フォルダに自分のためのブランドガイドを組

派手な印刷されたガイドを作成しなくても、付箋にこの情報を書き留めてモニターに保管することができます。 それはあなたに長期的には時間の負荷を節約します！ さて、いくつかの設計要素を分解してみましょう。

あなたの色を選択してください

あなたはあなたのブランドのために使用することを選択したいくつかの色を持っているかもしれませんが、開始す あなたのロゴ色はあなたのウェブサイト、決め付けることおよびblogヘッダーを渡って使用するべき大きい。 一貫性が重要です—あなたはホットピンクを備えている場合は、多分あなたの写真はそれらにピンクの一つの要素や全体的なピンクのキャストを持っている、または多分あなたは黒と白を使用して、他の方法で色を引きます。

YouBabyMeMummy.com 彼女の娘と彼女自身の白黒写真の上にオーバーレイとして彼女のロゴの上に豪華な、フルカラーのバージョンを挿入することによって美しくこれを行いま この写真のヘッダーは本当に大胆で魅力的な方法で彼女の物語にあなたを引っ張ります。 あなたは見事な、フルスクリーン画像のより多くの例を見たい場合は、彼女のサイトの周りをクリックし

そして、あなたはまだあなたのブランドで使用する色を把握しようとしている場合は、色心理学

フォントを選択

スタイリッシュなフォントやブランドのフォントをヘッダーに組み込むことは、あなたのメッセージを得るための本当に関連性があ Luciからのこの非常にユニークで目を引くイメージのようにByLucinda.co.uk…..

この海景は自然な要素の多くを組み込み、彼女の優雅で、けれども生意気な雰囲気を展示する彼女のブランドと右に合う。 この女性のための新しいローマの時間はありません！ 彼女はまた、明るい緑色の長方形のストリップで右側に彼女のソーシャルメディアのリンクを示す巧妙な方法を持っています。 これは、大きな大胆な写真とトップナビゲーションを接続し、意図的な方法でページを下にあなたの目を引くのに役立ちます。

Font SquirrelやDafontのような場所からオンラインで本当に楽しい、フリーフォントを見つけることができます。 これらのフリーフォントの多くは、CanvaやPicMonkeyのようなプログラムに組み込まれています。 しかし、彼らは無料であるため、他の誰か（競合他社でさえ）があなたが望むものを使用する可能性が高い可能性があります。

ウェブサイトの本文や見出しに（つまり、画像ではなく）手の込んだフォントを使用したい場合は、Googleフォントについて学ぶのに時間がかかるはずです。 そして、webデザインに使用するフォントのガイダンスについては、これらの三つの戒めをチェッ

ビジュアル要素を組み込む

ブランドのブログヘッダーを作成するときは、どのビジュアル要素を含めるかを考える必要があります。 私たちは、ロゴ、写真、大きなクリアボタンを使用して例を検討しました。

ジェンからToastMeetsJam.com ちょうどそれを行います。 彼女はちょうどあなたが退屈なスプレッドシートに持っているだろうようにテーブルにドロップしませんでした—彼女は彼女のフォームフィールドと円形の”行”ボタンと一緒に芸術的な境界線と素晴らしいフォントを使用しました。

彼女はシームレスにデザインに彼女の電子メールサインアップを組み込む方法を参照してください？ だけでなく、彼女はアニメーションとフレンドリーに見える自分自身の写真であなたを従事しているが、彼女はまた、テキストやフォームに焦点を当てた そのフォームに記入し、前方に移動する重要なタスクから離れてあなたを誘惑する気が散るパターンや画像はありません。 それはあなたが彼女の無料、五日間のコースを取得するために何をする必要があるかをより明確にすることができませんでした。

デザインの準備をしなさい

素晴らしいブログヘッダーの例をいくつか見てきましたが、次に何をしますか？ あなた自身のブログのヘッダーに行く取得するには、いくつかのデザインツールと画像サイズ情報を収集する必要があります。

デザインツール

あなた自身のカスタムブログヘッダーを作るための不可欠なデザインツールは、使用するのが難しいか、高価である必要はありません。 いくつか試してみて、あなたが快適だものを参照してください、その後、それのために行く！ 彼らは最初に厄介な感じている場合は心配しないでください—あなたはより多くのあなたがそれらを使用して良くなるでしょう。 ここでは、最も簡単なものから最も困難なものまで順番に探索を開始することができますいくつかあります。

これはおそらく、市場で最も簡単なものであり、それは無料です！ もっと深く潜りたい場合は、Canva for Workと呼ばれる有料版がありますが、無料版は本当に楽しく簡単に学ぶことができます。 これは、webベースのデザインツールなので、あなただけのウェブサイトにログインし、右のブラウザでそれを使用しています。

あなたが写真を編集し、フィルタで遊んで本当にしている場合は、PicMonkeyは試してみる価値があります。 内蔵された多くの楽しい効果があります。 Canvaと同様に、PicMonkeyはwebベースで、無料版に加えて追加機能を備えた有料版があります。

あなたは、デザインソフトウェアを言及し、Photoshopを起動しないことはできません！ それはプログラムの大国であり、ブログのヘッダーを作るだけでなく、それ以上のことをすることができますが、それは間違いなくそのために素晴ら それはあなたがダウンロードしたアプリケーションだし、あなたは（無料トライアルも利用可能です）毎月のサブスクリプションでお支払いいただきます。

プロのデザイナーとして、私は私のキャリア全体のためにPhotoshopを使用してきたし、私はそれを愛しています。 私の読者のほとんどは、Photoshopが最初は威圧的だと思っていますが、いくつかの基本を学ぶと完全に実行可能です。 私はCanvaを発見して以来、私はしばしば私のグラフィックを作るためにPhotoshopとCanvaの組み合わせを使用して、しかし、言わなければなりません。 Canvaはとても楽しいです！

Proヒント：Adobeから写真プランを選択すると、Photoshop+Lightroomをかなり低い月額コストで入手できます。 あまりにもみすぼらしいではありません。

あなたの携帯電話にグラフィックを作るのが好きなら、これはあなたのためです。 このモバイルアプリケーションは無料ではありませんが、わずか数ドルで、iOSとAndroidのバージョンがあります。 さらに、無料のcreative commons stock photoサイトに接続されているため、ブログのヘッダーで画像の選択を失うことはありません。 それはから選択する色、テクスチャやフォントのすべての種類を持っています。 あなたがする必要があるのは、”クラウド”にあなたの最終的なグラフィックを保存するか、あなたのサイトにアップロードすることができますので、

画像サイズ

ブログヘッダーを作成するときは、サイトプラットフォームに関連して画像サイズを考慮する必要があります。 WordPressテーマのサイズは、次のユーザーのSquarespaceページまたはGoDaddy GoCentral Webサイトビルダーとは異なる場合があります。 ここでは、

ピクセル寸法を念頭に置いておく必要があります。 サイズは、通常、いくつかの数の幅といくつかの数の高さとピクセル寸法でリストされています。 たとえば、1000×400（または1000px×400px）は、画像の幅が1000ピクセル、高さが400ピクセルであることを意味します。

インターネットのために、あなたの決断は容易である—それは常に72である! 300、600以上のような高解像度は、印刷用です。 モニターの画面解像度は常にわずか72です。 したがって、上からの例の寸法を使用すると、最終的な画像は幅1000px、高さ400px、72dpi（またはppi）になります。

ファイルタイプ。 PNGファイルは、保存回数に関係なく品質を失うことはありませんが、MB（メガバイト）のサイズが大きくなります。 JPG（jpeg）ファイルはさまざまなレベルの品質で保存できるため、ファイルサイズ（MB）を小さく保つことができますが、保存するたびに少し品質が失われま A.二回保存されたjpgファイルはよさそうに見えますが、あなたはそれを五、10回保存した後、それはピクセル化され、粒状に見えるように開始されます。

最適化とは、より小さなファイルサイズでよりコンパクトに保存することを意味しますが、品質を失わないように慎重に保存することを意味します。 あなたはTinyPNGと呼ばれる無料のウェブサイトを使用して簡単にこれを行うことができます。 かわいいパンダは、それらが素晴らしい探し続けるが、あなたにメガバイトを保存する方法であなたの画像を圧縮見て！

Canvaでブログヘッダーを作成する方法

1. アカウントにサインアップします。

2. カスタム寸法を使用します。

3. 無料の写真を選択します。

4. カスタムテキストを追加します。

5. あなたの設計を個人化して下さい。

6. ロゴを追加します。

7. あなたのブログのヘッダーをダウンロードします。

今楽しい部分のために！ Canvaを使用してカスタムブログヘッダーを最初から作成する方法を見てみましょう。 私は無料で利用可能なリソースを使用しているので、あなたは完全に私と一緒にあなた自身の権利でこれを行うことができます。 ただ、無料のアカウントにサインアップし、あなたが行く準備が整いました。

ここで作成するブログヘッダーです：

1. アカウントにサインアップします。

Canvaでアカウントにサインアップすると、右上の[カスタム寸法を使用]をクリックしたいデザインの作成ページが表示されます。

カスタム寸法を使用します。

表示されるフィールドに希望の幅と高さを入力し、ピクセルに”px”を選択します。 その後、デザインをクリック！ ボタン。

新鮮なプロジェクトが空白の画面で表示され、左側にレイアウトタブが選択されます。 プロジェクト名は指定されていないため、共有ボタンの横にある上部に「1000px x400px—Untitled Design」という名前が付けられています。

無料の写真を選択します。

要素をクリックし、提供されたものから無料の写真を選択します。 すべての無料のものは、下の隅に”無料”と言います。 また、あなた自身の写真をアップロードすることができますが、私たちのチュートリアルのために、我々はこれらの無料の写真のいずれかで動作します。

写真をクリックすると、プロジェクトのデザインエリアに即座に表示されます。 それでは、先に行くと、我々はそれにしている間、このプロジェクトの名前を変更してみましょう。 共有ボタンの横にある一時的な名前をクリックし、新しい名前を入力します。 私はこれを私のふりの旅行ブログのための”旅行日記”と呼んでいます。

画像がデザイン領域に配置された後、角の円をドラッグすることで大きくすることができます。 先に行くと、文書に合わせてこの画像のサイズを変更します。

カスタムテキストを追加します。

素晴らしい！ 今、私たちはいくつかのテキストが必要です。 左側の列の[テキスト]タブをクリックすると、選択できるオプションがいくつか表示されます。 そのウィンドウの下のセクションまたは上部の個々のテキスト行で、事前に設計されたテキスト配置をクリックすることができます。 先に行くし、見出しを追加をクリックします。 このテキストは画像に表示され、デフォルトでは黒になります。

今すぐいくつかの楽しみのために！ 別のフォントを選択してみましょう。 フォントの選択肢を参照し、あなたの空想を打つ何かを選ぶ。 私はブラシスタイルのものを選びました。 その画像の上に黒で見るのは難しいので、白に変更しましょう。 色の選択肢を表示するには、上部のカラフルなボックスをクリックし、白い四角を選択します。 サイズも104に調整しました。

次に、先に進み、その見出しを画像上の所定の位置にドラッグして、より中央に配置します。

あなたのデザインをパーソナライズします。

この忙しい背景のテキストを読んで集中するのは少し難しいので、ぼかし効果を追加しましょう。 背景写真をクリックして選択し、フィルタを選択し、詳細オプションをクリックします。

フィルタウィンドウが展開され、他にできることがいくつか表示されます。 あなたは、彩度、色の着色で遊ぶビネットを追加し、より多くのことができます。

ぼかしセクションの黒い点をクリックし、右にドラッグします。 私はぼかしスケールで+22を選択しました。

ロゴを追加します。

今すぐあなたのデザインを見るためにそのウィンドウの外をクリックしてください。 良い探して！ 今度はロゴを追加してブランド化しましょう。 ロゴをアップロードするには、左側のアップロードタブをクリックしてから、緑色の大きな画像をアップロードボタンをクリックします。

透明を選択します。あなたのロゴのpngバージョンなので、それは単色に平らにされません（あなたのロゴスタイルが白い長方形の中にない限り、またはそのようなもの）。

ロードされると、緑色のボタンの下の領域に表示されます。 それはあなたが将来のプロジェクトで使用するためにそこにとどまります。 便利！ 私はすでに私の偽のロゴをアップロードしていたので、私はそれを見つけるために下にスクロー

ロゴをクリックすると、デザインに表示されます。

今、あなたはそれをサイズ変更し、それを移動し、さらには空想を取得し、あなたがしたい場合は、透明性で遊

ブログヘッダーをダウンロードします。

今、あなたのデザインは準備ができているので、残っているのはそれをダウンロードすることです。 画面の上部にあるダウンロードボタンをクリックし、ファイルの種類を選択します。 私は通常、推奨されるPNGタイプで行きます。

デザインがコンピュータにダウンロードされたら、それを開いて賞賛し、ブログにロードすることができます。

そして、それはそれにあるすべてです！ うまくいけば、あなたはブログのヘッダーと恒星の画像の重要性を作る方法についての良いグリップを持っています。 今、あなたはあなたのブログに1つを追加することについて行くことができます。 幸せなブランディング！