クライアント用のレイアウトを準備しています。 パートII:アイロンをかける場合、どのように?

クライアント用のレイアウトを準備しています。 パートII:アイロンをかける場合、どのように?



パートI:鉄かどうか?

パートII:アイロンをかける場合、どのように?



したがって、 最初の部分では、スクリーンアンチエイリアシングの長所と短所を調べました。 それでは、実際の例に移り、顧客向けのデモンストレーション用にレイアウトを準備する際の複雑さについて話しましょう。





しかし、実際に作業する前に、もう一度画面上のテキストを滑らかにする必要があるという事実に読者の注意を引きたいと思います。 詳細は後で説明しますが、今ではロシアの主要スタジオのサイトをさまようだけです。 これらのサイトのアドレスをご存知でしょう。 そうでない場合は、 企業ランキングでそれらを見つけることができます。

ほとんどの場合、平滑化されたテキストのレイアウトが表示されます。 何らかの理由で、スタジオにはアンチエイリアスが含まれていますか? だから、おそらくフォローしようとする?



ところで、一部の場所では、スムージングなしでもレイアウトを見つけることができますが、この場合、ほとんどの場合、元のサイズの50〜70%まで縮小されます。 バイキュービック補間法によって減少するアンチエイリアスなしのテキストを含むレイアウトは、アンチエイリアスが有効になっている同じレイアウトよりもずっと悪く見えるため、それらは簡単に区別できます。 最初のサンプル(スムージングなし)と2番目のサンプル(アンチエイリアシングを含む)を比較します(70%に削減)。



画像



画像



また、有名なスタジオの経験に納得していない場合でも、HTMLテキストはスムージングなしで残すべきだと確信している場合でも、以下の例のいくつかに慣れる価値があります。



そこで、フォントスムージングが必要であると判断しました。 しかし、グラフィックデザイナーとして、レイアウトの複雑さにあまり詳しくないか、HTMLコードを使用してテキストブロックを作成する時間と欲求がないため、ブラウザのスクリーンショットからレイアウトに転送されます。



つまり、グラフィックエディタですぐにレイアウトを行う必要があります。 さまざまな機能(GIMP、PhotoImpact、PhotoPaint、Fireworksなど)を備えた優れたエディターが数多くあるという事実にもかかわらず、Webデザイナーの間で最も人気のあるエディターであるAdobe Photoshopに基づいた例を検討します。



このプログラムにはClearTypeアンチエイリアシングはありません。この理由については、ClearType制限セクションで詳しく説明しています。 したがって、私たちは彼らが与えるものを消費します。



このプログラムで作業する人は、テキストのスムージングには次の5つのタイプがあることを知っています: なし (完全に存在しない)、 シャープ (シャープ)、 クリスプ (ハード)、 ストロング (強い)、 スムーズ (ソフト):



画像



テキストに適用される場合、これは次のとおりです。



画像



いくつかの結論がすぐに示唆されます。

  1. ストロングモードは、特に太字のテキストを過度に飽和させるため、ほとんど役に立ちません。 ただし、場合によっては使用できます。
  2. なしモードも回避します。 文字「and」と「m」がプレーンでボールドなスタイルでどのようにラスタライズされるかを見てください。 すべてのタイプのアンチエイリアシングでは、これらの文字はストロークの太さが大幅に異なります。これは現実的なタイポグラフィの場合と同じです。 すべてのピンにスムージングがない場合、「and」の文字は通常の太字の面とほぼ同じであることがわかり(対角線のみが少し太くなります)、「m」ではすべてが問題になります。 このオプションが適切な場合は、引き続きアンチエイリアスをオフにします。 ただし、フォントから画面上で適切な動作を期待する場合(太字スタイルはストロークでより飽和しているなど)-自分に最適なスムージングのタイプを選択してください。
  3. シャープモードでは、文字は他の3つのアンチエイリアスオプションとは少し異なる方法でラスタライズされます。 これは、文字「w」と「p」の拡大断片で顕著です。 シャープの場合、条件付きストロークの合計の太さが2ピクセルであるため、「w」の下のストロークは単一ピクセルのままですが、たとえば、 クリスプではすべてのストロークが同じ太さになる傾向があります。 シャープモードでは、曲線部分の丸さが少なくなります。これは、文字「p」の例ではっきりとわかります。 また、 シャープモードでは、大きなピン(14pt以上)で入力したテキストは見栄えがよくありません。 しかし、11ptというテキストは多少許容範囲内で読み取られ、9ポイントの細かい活字が最良の方法に見えます。 また、11ptの斜体は、他の例よりも読みやすいと主観的に思われます。 一般的に、テキストは他のモードよりも明るくてジューシーに見えます( Strongをカウントしない)。
  4. Crispモードでは、大きな見出しが最適に見え、本文が見やすくなります。 ちなみに、このモードでは、水平および垂直ストローク(「g」、「p」、「t」など)のみで構成されるほとんどの文字はまったく平滑化されません。 確かに、小さいテキストと斜体はSharpの場合よりも悪く見えます。
  5. スムーズモードはCrispに似ていますが、文字はエッジの周りで「ふわふわ」になります。 ところで、Photoshopの初期のバージョンでは、 NoneSmoothの 2種類のスムージングしかありませんでした 。 また、おそらく、デザイナーがスムーステキストを嫌う理由の1つは、 スムースモードの文字が最もぼやけて見えることが多いため、まさにこれにあります。 バージョン5.5でのみ、さらに2種類のアンチエイリアシングが追加されました(そして、 Sharpはさらに後で登場しました)。 ただし、場合によっては、 スムーズモードが便利なことがあります。


例に戻り、Intelサイトページをご覧ください 。 これが参照イメージになります。



画像



このページのスクリーンショットをPhotoshopに置き、すべてのテキストブロックをできるだけ正確に再現しようとしました。 適切な器用さで、これは難しくありません。 ところで、私はエクササイズと同様の方法を試すことを強くお勧めします。 まず、視覚装置を非常によく訓練し、どのサイトでもヘッドセット、サイズ、およびフォントの主要な値を正確に決定する方法を学習します。 次に、好きなサイトのスクリーンショットを使用して、テキストブロックを作成する独自の方法を開発し、有用なフォントの組み合わせを蓄積します。



そこで、タイプツールと文字パレットを使用して、2種類のテキストレイヤーをいくつか作成しました:見出しの線形(レイアウトでタイプツールをクリックするだけ)と段落のブロック(クリックしてボタンを離さずに、将来のテキストに必要なサイズの長方形領域を選択する) )



最後に、ソース画像レイヤーのテキストを消去しました。 手動で作成されたテキストレイヤーを無効にすると、次のようになります。



画像



ここで、さまざまなスムージングモードがオンになったときに何が起こるかを見てみましょう。



シャープモード:



画像



いいね! ほぼすべてのテキストがよく読まれており、文字が明確に見え、「流fluさ」は目立ちません。 ただし、サイドコラムの見出しは飽和しすぎており、どういうわけか丸くありません。



鮮明なモード:



画像



メインテキストはもう少しぼやけていますが、見出しは太字で表示されているため、見た目はずっと良くなっています。



強力モード:



画像



確かに何かがありますが、ストロークが過度に飽和していると、元のスクリーンショットと比較してリアリズムのレベルが低下し、印象的です。 大胆な顔が見え始め、どういうわけか汚い。 ただし、このモードでは、最も近いピンが元のピンに最も近いように見えます(油っぽくないスタイルで18ポイント以上)。



スムーズモード:



画像



この場合、テキストは最も彩度が低いことが判明したため、色あせたように見え、納得がいかないように見えます。 さらに、多くの場所で過剰な汚染が明らかになりました。 誰かにとっては、この特定のオプションが最も受け入れられるように思えますが。



したがって、最適なものはなく、元のオプションに近いものは間違いありません。 しかし、異なる方法の組み合わせを作成できないのはなぜですか?



ここに私が得たものがあります:



画像



メインテキストはシャープモードです。 太字の字幕は鮮明なモードです。 そして、大きな見出しの「テクノロジーリーダーシップ」は強力なモードです。



もちろん、ブラウザのようにビューを正確に再現することはほとんど不可能です。 しかし、同様の手法を使用して、ほぼ同じバージョンを入手しました。 元の組み合わせとこの組み合わせを比較します。 よく見ると、軽微な矛盾がいくつかあります。 しかし、肉眼で見ると、両方のレイアウトは同じように見えます。



しかし、 Noneスムージングモードはどうでしょうか? オンにしましょう:



画像



やめて 2つのテキストブロックはどうなりましたか? 奇妙なことに、レイアウト内の他の場所をクロールします。 残念ながら、これはアンチエイリアスなしでラスタライズされたときのVerdanaフォントの迷惑な機能です。 他のフォントにはこのような問題はないか、それほど重要ではありません。 常にこのことを覚えて、アンチエイリアスを使用したモニターでアンチエイリアスを使用せずにVerdanaで作成したテキストブロックの高さが小さくなる可能性があり、その逆もあることを考慮してください。



レイアウト内のすべてのテキストオブジェクトのスムージングタイプ、フォントタイプ、およびその他の属性は、わずか3つの手順で簡単に変更できます。

  1. レイヤーパレットで表示されているテキストレイヤーを選択します。
  2. メニュー項目[選択 ]> [Silimalレイヤーの選択 ]に従います。 これで、例外なくすべてのテキストレイヤーが選択されました。
  3. 文字パレットで、必要なオプションを選択します。 たとえば、スムージングをシャープからなしに変更します。




便利じゃないですか? 実際、クライアントにレイアウトを表示する前に、さまざまなオプションを試す必要があります。 たとえば、VerdanaをArialに置き換え、サイズを増やします(すべてのブロックに適用されますが、特定のブロックの変更を評価できます)。 この方法で実験することにより、フォント、サイズ、ラスタライズのタイプのリストをそれぞれの場合に作成できます。 数十分で、さまざまなブロックの最適な表示を決定します。 適切な方法のどれが一致する対応物と最も一貫性があるかを実験的に確立するだけです。 独自の好みと直感に依存し、より調和して選択されたフォント表示属性によってレイアウトを大幅に強化できます。



この例では、Verdanaの代わりに他のオプションを試してみることにしたとします。 そして、ここに私が得たものがあります:



画像



  1. 大きな見出し(「技術におけるリーダーシップ」)には、フォントArialとスムージングモードSmoothが割り当てられました(この特定のケースでは最適であることが判明しました)。 私は副字幕でも同じことをしました。
  2. メインテキストは変更されません-Verdana 11pt、 Sharp
  3. リンクのリストには、Arial Italic 11pt、 Sharpが使用されました。
  4. 右下のテキストには、Corbel 11pt、 Sharpヘッドセットが選択されています。




これにより、レイアウトの見栄えが良くも悪くもなったとは言えません。 ある程度、レイアウトの感覚が変わりました。 フォントの選択で微妙なニュアンスを調整することができる非常に簡単な方法を示しました。



実際には、複合体のすべてのメジャーを使用した後にのみ改善が見られます(インデントの調整、先頭の選択など)が、これについては後ほど説明します。



したがって、スムーズなテキストを取得する方法、サイトで実際のアンチエイリアシングに可能な限り近い表示モードを見つける方法、および特定のケースに適したヘッドセットをすばやく見つける方法を見つけました。 これで、最適な組み合わせを自分で簡単に判断できます。 そして、記事の次の部分はこれに役立ちます。最も一般的に使用されるピンの可能なバリエーションを詳細に調べ、設計者が適切なオプションをすばやく見つけるのに役立つ種類の要約表を作成します。



切り替えないでください! ;-)



NB. , . , , , - , IT-. , — , , — — , . , , . , . , . , — , . . , , HTML, — , — . , , , , . , «» , , Futuris. — , , , . , , ( ), -- HTML , Photoshop. , -?






All Articles