Figmaデザインでのピクセルアートの作成
このプロジェクトでは、Figmaデザインを使用していくつかのピクセルアートを作成していきます。
ピクセルアートは、ピクセルをビルディングブロックとして使用して作成されたデジタルアートの楽しいフォームです。ピクセルアートは描画経験がない場合でも、ほとんどのユーザーがアクセスできる初心者に優しいメディアです。
ピクセルアートは、楽しいイラスト、クロスステッチパターン、レトロ調のアニメーションなどを作成するために使用できます。このプロジェクトは、正確なデザインを作成するための重要なツールである、レイアウトグリッドとピクセルグリッドの使い方に慣れ親しむための打って付けの方法です。
このプロジェクトでは、ピクセルハートのイラスト作成を順を追って説明します。このデザインを作成するには、次の手順を実行します。
手順に従うと、最終的なイラストは次のようになります。
フレームの追加
フレームの作成から始めましょう。
フレームとは
フレームは、Figmaの主要なビルディングブロックです。フレームは、シェイプ、テキスト、画像などのデザイン要素を保持するコンテナです。それらを使用して、キャンバス上のデザイン要素の整理と構成を行うことができます。
フレームはサイズが自在で、任意の数のデザイン要素を含めることができます。フレームを他のフレーム内にネストさせ、複数の階層レベルの複雑なデザインを作成することもできます。
- ツールバーで フレームツールをクリックするか、Fを押します。
- キャンバスをクリックします。Figmaではデフォルトで100 W x 100 Hフレームを追加します。フレームを追加すると、左サイドバーのレイヤーパネルに追加されることが分かります。
- 右サイドバーのデザインパネルから幅を120に、高さを110に変更します。
これがピクセルハートを作成する場所になります。ハートがピクセルに適合するように、フレームのレイアウトグリッドを有効にします。
レイアウトグリッドとピクセルグリッドの設定
レイアウトグリッドは、フレーム内にオブジェクトを配置するために役立ちます。 また、さまざまなプラットフォームとデバイス間でデザインのロジックと一貫性を保持するために役立つ、視覚的な構造を提供します。
レイアウトグリッドを有効にするには、作成したフレームを選択し、右サイドバーで[レイアウトグリッド]の横にある[プラス]をクリックしてグリッドを有効にします。フレーム上に赤いグリッドが表示されます。[レイアウトグリッドの設定]をクリックして、レイアウトグリッドの設定を開き、グリッドサイズが10ポイントであることを確認します。必要に応じて、ここでグリッドの色と不透明度を変更することもできます。
ズームインすると、グリッド内の各スペースが完全に10ピクセルx 10ピクセルであることがわかります。ここでは、10x10の正方形をビルディングブロックとして使用するためです。
レイアウトグリッドは、すべてがインラインであることを視覚的に確認するために役立ちますが、1レベル深めてピクセルグリッドを使用して実際に色々と常に整理しておくことができます。
ピクセルグリッドとレイアウトグリッドの違いは何でしょうか。 ピクセルグリッドは、変更できないデジタル画像内の静的グリッドです。ピクセルグリッドの各正方形は、1倍の解像度でエクスポートされたときの単一のピクセルを表しています。レイアウトグリッドは、ピクセルグリッドに依存していません。つまり、特定の解像度や寸法に依存していません。レイアウトグリッドは、8ポイントグリッドや10ポイントグリッドなど、デザインのニーズに合わせて変更できます。
ピクセルグリッドのオンとオフを切り替えるには、次のショートカットを使用します。
- Mac: ⌘ Command ‘
- Windows: Control ‘
違いがわかりますか。
ここでは、必要な場所への要素の配置をより容易にするため、[ピクセルグリッドにスナップ]設定を有効にしているか確認しましょう。メインメニューをクリックして、[基本設定]にカーソルを合わせ、[ピクセルグリッドにスナップ]の横にチェックがあることを確認します。
カラーパレットの作成
ハートを作成するために10 x 10の正方形を使用します。正方形をキャンバスに追加するには、ツールバーで長方形ツールを選択するか、Rを押してキャンバスをクリックします。
Figmaではデフォルトで100 W x 100 Hの正方形を追加します。Shiftを押しながらハンドルを選択してカーソルをドラッグするか、またはデザインパネルの[幅]と[高さ]フィールドに希望する寸法を入力して、正方形のサイズを変更できます。いずれかの方法を使用して正方形のサイズを10 W x 10 Hに変更します。
最初のビルディングブロックができました。ハートは4色にするので、カラーパレットをすぐに使える状態にするためにこのブロックを複製しましょう。正方形を選択して、複製のショートカットを使用します。
- Mac: ⌘ Command D
- Windows: Control D
Figmaではデフォルトで複製された正方形を元の正方形のすぐ上に配置します。それを横にドラッグしてさらに2回複製します。フレームの上に4つの正方形を並べます。
ハートをデフォルトの灰色よりカラフルにします。一度に1つずつ正方形を選択して右サイドバーの[塗り]の設定を使用して、次のように塗りを変更します。
- 正方形1 (アウトラインの色): #C771D3
- 正方形2 (塗り色): #F5C0EF
- 正方形3 (シャドウの色): #E99BF4
- 正方形4 (ハイライトの色): #FAE4F8
整理するために、その用途に合わせてカラーパレットの正方形に名前を付けましょう。 左サイドバーでレイヤー名をダブルクリックするか、次のショートカットを使用して各正方形に新しい名前を入力します。
- Mac: ⌘Command R
- Windows: Ctrl R
カラーパレットが完了したので、いつでもハートをアウトライン化できます。
ハートのアウトライン化
カラーパレットでアウトラインの色の正方形を選択し、複製ショートカットを使用してコピーします。新しい正方形をフレームにドラッグします。[ピクセルグリッドにスナップ]が有効になっているため、基礎となるピクセルグリッドに正方形がスナップされ、レイアウトグリッドにもぴったりと合っていることがわかります。このブロックを下部の行の6番目の列に配置します。その後さらに5つのブロックを左上方向の対角線に沿って並べます。毎回新しい正方形を作成する代わりに既存の正方形を選択し、以前と同じショートカットを使用して複製します。
正方形をクリックして1行上の1列左にドラッグします。レイアウトグリッドと揃っていることを確認します。引き続き選択した2番目の正方形に、再度複製ショートカットを使用します。1つの複製されたシェイプを配置した後、Figmaでは同じパターンでシェイプの配置が続くと想定して、新しい正方形を1行上の1列左に自動的に配置します。フレームの端に達するまでさらに4回正方形を複製します。端まで行ったら次のGIFを確認します。
フレームの端に達したら、次のパターンで正方形の複製と配置を続けます。
- 3つの正方形を上に
- 1つの正方形を右上に
- 1つの正方形を右上に
- 2つの正方形を右に
- 1つの正方形を右下に
完了すると、ファイルは次のようになります。
アウトライン化を終了するまで正方形の複製を続けますが、少々時間を節約して代わりにこの半分を複製しましょう。
複製する前に、ここまでのフレーム内での作業をグループ化しましょう。[グループ]によってレイヤーを互いに組み合わせて、単一のオブジェクトのように扱うことができます。
クリックしてカーソルをドラッグし、フレーム内のすべての正方形を選択してショートカットを使用します。
- Mac: ⌘ Command G
- Windows: Control G
左サイドバーのレイヤーパネルに「グループ1」という名前の1つのレイヤーのみが表示されていることがわかります。グループをクリックして、再度複製ショートカットを使用して、2番目のグループを追加します。「グループ2」が選択された状態で、グループを右クリックして、[左右反転]を選択します。2番目のアウトラインの半分を適切な場所にドラッグし、赤いガイドを使用して最初の半分と合わせます。その後、両方のグループを選択してもう一度グループショートカットを使用して、2つの半分を互いにグループ化します。
端まで行ったら次のGIFを確認します。
新しい「グループ3」レイヤーをダブルクリックし、名前を「アウトライン」に変更します。このレイヤーは完成したのでロックしましょう。レイヤーをロックすると、オブジェクトが誤って移動または変更されるのを防ぐことができます。このレイヤーをロックするには、アウトラインレイヤーを選択して、左サイドバーのロックアイコンをクリックします。レイヤーをロック解除するには、ロックを再度クリックします。
アウトラインはきれいに仕上がりました。次はそれを塗りつぶします。
ハートの塗りつぶし
複製シュートカットを使用して、カラーパレットの塗り色の正方形を複製します。新しい正方形をフレームにドラッグします。
後は、ハートの内部を塗りつぶすために十分な回数分、正方形を複製するだけです。
ヒント: ハートを素早く塗りつぶすために、一度に複数のブロックを選択して複製できます。
ここで終了することもできますが、シャドウとハイライトを追加してハートを少しおしゃれにしてみましょう。
シャドウを追加するには、ハートの内側の塗りの左側に沿ってブロックを選択します。Shiftを押しながらクリックすると、同時に複数のブロックを選択できます。下の画像に示すようにブロックを選択し、それらの塗りをカラーコード#E99BF4に変更します。これは、[塗り]フィールドにカラーコードを入力するか、Iを押してスポイトを有効にし、カラーパレットでシャドウの色をサンプリングすることで実行できます。
最後に、シャドウを追加するために使用したのと同じ方法で、右側の数ブロックのカラーコードを#FAE4F8に変更してハイライトさせます。
色を一括で素早く変更したい場合は、[選択範囲の色]機能を使用して、選択範囲内のオブジェクトに適用される色を変更できます。フレームを選択して、右サイドバーの[選択範囲の色]設定に移動します。ここでは、5つの色がリストされています。#FFFFFFはフレームの塗り色であるため無視します。すべてのオブジェクトの塗りを適用するされる調整するため、他の色のコードを変更します。シャドウを青、黄、または紫にしてハートを変化させてみてください。
次のステップ
おめでとうございます! Figmaデザインでピクセルアートを作成しました。別の課題をお探しの場合は、今日習得したツールを使用して下のピクセルキャットを作成してみてください。さらに満足するものがデザインできたら、ぜひ拝見させてください。Twitterの@Figmaで当社をメンションするか、Figmaコミュニティに公開してください。