UI/UXプロジェクト、web、スクリーン、その他のデジタルデザインで、シャープなラインとアートワークを作成する方法を説明します。
pixel-perfect-v2_1000x560

アンチエイリアス処理されたアイコンやぼやけたアートワークとの格闘はもう不要です。パスを描画すると、ピクセルグリッドに自動的に整列し、ワンクリックで既存のアートワークをピクセルグリッドに揃えることができます。方法は以下のとおりです。

ピクセルスナップの設定

まず、表示/ピクセルプレビューを選択します。600%またはそれ以上にズームインすると、ピクセルグリッドが表示されます。

注意:ピクセルプレビューを使用すれば、アートワークがラスタライズされた場合にどのように表示されるかを確認できます。特に、ラスタライズされた画像内のオブジェクトの配置、サイズ、エッジの外観を調整するのに便利です。

アートボード上で何も選択されていない状態から、プロパティパネルの「スナップオプション」セクションにある「ピクセルにスナップ」ボタンをオンにします。

pixel-perfect-step-1

常にピクセルが最適化されたアートワークを描画する

描画すると、パスとベクターシェイプの直線の辺がピクセルグリッドに自動的に揃います。最初からシャープで、ぶれのない線を引けるので、作業時間を大幅に短縮できます。

pixel_perfect_step-2

アートワークを移動しても、ピクセルに揃ったまま

パスやシェイプを移動してもピクセルグリッドへの整列は維持されるので、バランスが崩れる心配はありません。アンチエイリアス処理されたアートワークも動かすだけで修正できます。

ヒント:アンチエイリアス処理されたエッジが残っている場合は、ダイレクト選択ツールを選択し、そのエッジのアンカーポイントまたはパスセグメントを最も近接するピクセルグリッドまで動かします。

pixel-perfect-step3

安心して試せるアートワークのサイズ変更

アートワークのサイズを変更すると、アンカーポイント、パスセグメント、シェイプが自動的にピクセルグリッドに揃います。

pixel-perfect-step4

ワンクリックでどのアートワークもピクセルを最適化

アンチエイリアス処理したアイコンやエッジがぼやけたアートワークも、右クリックして「ピクセルグリッドに最適化」を選択するだけで修正できます。

注意:アートワークの直線部分はシャープになりますが、曲線と斜めの線は改善されません。

pixel-perfect-step-5

これで終了です。webアートとアイコンはすべて、どの画面でもくっきりと表示できます。

09/02/2020

Adobe Stock提供元:alekseyvaninbongkarn

このページは役に立ちましたか。