私は個人的に Gringo の Web サイトをよく観察していますが、優れた Web サイトのデザインは細部の処理に非常に配慮していることがわかります。今日私が共有するヒントは非常にシンプルですが、Web サイト全体の詳細を大幅に向上させることができます。したがって、これらのヒントは、Web サイトのデザインレベルを向上させるのにも役立つと思います。
そして、これらのテクニックはすべて、「ピクセル化」という 1 つの単語を中心に展開していることに気づくでしょう。これは、単に 1 ピクセルと 2 ピクセルの小さな線を意味します。さて、行きましょう。
1. ピクセル分割線 最初に紹介するのは分割線です。下の図のナビゲーション バーを見てください。
写真の赤丸の線とボタン間の区切り線に注目してください。この線は凹んでいて、良い区切り線を形成しています。次に、この写真を拡大して原理を見てみましょう。
これらの分割線は、隣接する 2 つの 1px の直線で構成されており、一方の色は背景色より暗く、もう一方の色は明るいことがわかります。次にメソッドを見てみましょう。
鉛筆ツールを選択し（間違ってブラシを選択しないでください）、サイズを1pxに設定します
背景色より暗い色（写真の紺色など）を選択し、Shiftキーを押しながら直線を描きます。
明るい色を選択し、別の直線を描きます。わかりました
PS. 線画の途中でキャンバス（Z）を拡大して観察することができます。
単色のディバイダーよりも効果がはるかに優れていますよね?この除算手法の使用例をさらにいくつか見てみましょう。
2. ピクセルエッジ
まず、「ピクセル エッジ」のない元の画像を見てみましょう。
次に追加されるものは次のとおりです。
