のより良いプロファイル シリーズジレットがサポートしています。ジレットとその製品について詳しくは、こちらをご覧ください。ジレット.com。
クレジット：
新しいデザインはまた、異なる寸法を持っています（元々は黄金比をもとに)、背景を少し異なる方法で扱います。その結果、慎重にカスタマイズされたツイッターの背景古い Twitter では素晴らしく見えましたが、新しいデザインではうまく機能しない可能性があります。多くの場合、最善の解決策は、新しいパラメータに適合する新しい配色または背景デザインを作成することです。
ユーザーが増えるにつれ、アクセスを取得する新しい Twitter に向けて、Twitter のカスタマイズの分野を再検討する良い機会だと考えました。幸いなことに、Twitter は現在、このプロセスを面倒な作業から軽減するための素晴らしいテーマ ツールをいくつか提供しています。また、スムーズにスタートできるように、新しい Twitter のサイズにマップされた Photoshop (PSD) ファイルをいくつか作成しました。
レイアウトを計画する
新しい Twitter は流動的なレイアウトを採用しています。つまり、ブラウザ ウィンドウや画面の解像度が一部の列の幅や、表示される背景画像の量に影響を与える可能性があります。
クレジット：
新しい Twitter のレイアウトを示すために作成したこの画像をご覧ください。このブログ投稿に合わせてサイズが変更されましたが、このスクリーンショットはもともと幅約 1440 ピクセルの解像度で撮影されました。
新しいサイトに合わせて Twitter の背景をデザインまたは変更する際には、いくつかの点に留意する必要があります。
新しいデザインでは、高さが 40 ピクセルで、Web ページの全長にまたがる常に上部のツールバーが表示されます。ほとんどのデザインでは、これはどの要素にも干渉しませんが、このバーは常に存在することに注意してください。また、ツールバーと 2 つの列の先頭の間には高さ 20 ピクセルのスペースがあることにも注意してください。
列の左右の間隔は流動的で、ブラウザ ウィンドウの解像度とサイズに応じて変化します。間隔も以前のデザインより大幅に減少しました。たとえば、1280x800 のブラウジング ウィンドウでは、古いデザインでは Twitter 列の両側に約 251 ピクセルがありました。新しいデザインでは、それがそれぞれ 112 ピクセルと 113 ピクセルに減少します。
右側の Twitter サイドバーが半透明になりました。不透明度は約 75% です。つまり、選択した色と背景画像の色やスタイルによっては、読みやすさに影響する可能性があります。
左側のタイムライン列の幅は常に 540 ピクセルですが、サイドバーは異なる場合があります。特定の解像度 (約 1130 ピクセル) を超えると、幅は 500 ピクセルに固定されますが、画面が小さい場合やブラウザ ウィンドウが小さい場合は、幅が 380 ピクセルまで小さくなることがあります。
現在の列のレイアウト方法により、背景画像はパターンまたはシームレスの場合にのみ並べて表示する必要があると考えられます。大きな画像の場合は、繰り返すよりも単色に移行する方がはるかに効果的です。
組み込みの Twitter テーマ ツールを使用する
優れた財団COLOURlovers のツールが新しい Twitter 用に更新されました。このツールにアクセスするには、サイトに直接アクセスするか、サイドバーから Themeleon を選択します。デザイン部門Twitter設定ページの
アプリで Twitter にログインし、色や背景をその場でカスタマイズできます。このツールの優れた点は、[保存] をクリックするまで変更が反映されないことです。色の組み合わせやさまざまなモチーフを試すのに最適な方法だと考えてください。
クレジット：
COLOURlovers は、背景と指定されたカラー パレットを使用した高品質の事前構築テーマを多数提供していますが、独自の背景画像をアップロードして独自の配色を設定することもできます。 COLOURlovers のパターンやタイル状の背景画像の非常に大規模なコレクションを参照することもできます。このツールのお気に入りの機能の 1 つは、事前に構築されたパターンの 1 つを使用する場合、そのパターンのカラー設定も変更する配色を適用できることです。
COLOURlovers には、選んで遊べるカラーパレットがたくさんあります。すでに COLOURlovers メンバーである場合は、自分のパレット、またはフォローしているパレット、または「お気に入り」としてマークしたパレットにアクセスできます。これは無料のコミュニティであり、テーマ クリエーターで新しいカラー パレットを実際に見つけるのは難しいことを考えると、独自のスキームをお気に入りにできるようにサインアップすることをお勧めします。
完璧なパレットを見つけてください
COLOURlovers はカラーファンにとって素晴らしいリソースですが、ウェブ上には完璧な色の組み合わせを見つけるための素晴らしいリソースが他にもたくさんあります。
私たちのお気に入りのいくつかについて書きました色を扱うための Web ツール, しかし、ここにさらにいくつかあります:
カラーハンター- このサイトでは、サイトにアップロードされた写真をベースにしたパレットをいくつか提供しています。パレットを検索して自分の写真をアップロードして、完璧なパレットを見つけることもできます。
ColorCombos.com- このサイトには、ユーザーが作成したカラー パレットの素晴らしいリストがあり、組み合わせをテストして、それらがどの程度うまく機能するかを確認することもできます。
フォトコパ- PHOTOCOPA は COLOURlovers のもう 1 つのツールで、画像内の色を抽出するのに役立ちます。このツールの優れている点は、写真をアップロードできるだけでなく、Flickr から写真にリンクしたり検索したりできることです。色を見つけてパレットを作成したら、それを COLOURlovers ライブラリに保存し、Themeleon ツールでアクセスできるようになります。
解像度をテストする
新しい Twitter レイアウトは流動的なため、ブラウジング ウィンドウのサイズによって見た目が変わる可能性があります。さまざまな画面サイズで背景や配色がどのように見えるかをテストすることをお勧めします。
クレジット：
幸いなことに、すべての主要なブラウザで利用できる無料の拡張機能があり、ブラウザ ウィンドウのサイズを簡単に変更できます。
Firefox 用 Firesizer- Firesizer は、Firefox ブラウザーの下部ステータス バーに表示されるシンプルなアドオンです。ブラウザ ウィンドウの現在のサイズが表示されるだけでなく、解像度を右クリックすると、事前定義されたブラウザ サイズを選択できます。選択を選択するとすぐにウィンドウのサイズが変更されます。拡張機能をカスタマイズして、独自の事前設定サイズを追加できます。
Safari 用に ResizeMe- ResizeMe を使用すると、ブラウザ ウィンドウのサイズをすばやく変更できます。これはツールバー ボタンとして機能し、ボタンをクリックすると、選択したサイズに自動的にサイズを変更したり、さまざまなサイズを選択するオプションを提供したりできます。
Chrome 用ウィンドウ サイズ変更ツール- この拡張機能は Chrome ツールバーに表示されます。ボタンをクリックすると、さまざまなブラウザ サイズまたはデバイス タイプのドロップダウン リストから選択できます。このリストはカスタマイズできます。素晴らしいインターフェイスがあり、とても使いやすいです。
Photoshop でテストしてみる
デザイナーの多くは、Photoshop やその他の画像編集プログラムで背景や配色を操作することを好みます。分かりました。古い Twitter レイアウト用に作成された PSD ファイルはたくさんありますが、新しい Twitter 用に適切な PSD を見つけるのに苦労しました。
クレジット：
そこで、私たちは力を尽くして、この PSD ファイルのコレクションを作成しました。解像度は 1024x768、1280x800、1440x900、1600x1200、1920x1080、1920x1200 です。別のバリエーションが必要な場合は、コメントでお知らせください。できる限りの対応をいたします。ガイドとレイヤーはすべて編集可能なため、これらのファイルを独自の用途に合わせてカスタマイズできます。
これらのファイルは次の場所からダウンロードできます。https://www.mediafire.com/?9h1wzayh1cnn1。
あなたのヒント
新しい Twitter を扱う際のデザインのヒントをコメント欄で教えてください。
ジレットがサポートするシリーズ
のベタープロファイルシリーズジレットがサポートしています。ジレットとその製品について詳しくは、こちらをご覧ください。ジレット.com。
Mashable のその他の開発および設計リソース:
Web ロゴ デザインの 11 のトレンド: 良いもの、悪いもの、使いすぎているもの