チュートリアル記事

中級

3 分

ピクセルに最適化されたデザイン

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

チュートリアルを Illustrator で表示
アプリを操作しながら学ぶ

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

1

ピクセルスナップの設定

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

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

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

2

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

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

3

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

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

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

4

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

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

5

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

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

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

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


Adobe Stock提供元

alekseyvanin

2023年5月24日

Illustrator でこれらのチュートリアルをお試しください

ベクターを使用してイラストやグラフィックを作成