FD4B: 画像とヒーローを作成

次に、ケーススタディページの残りの要素である画像とヒーローセクションを作成します。

画像を作成

ケーススタディ全体でビジュアル的に作品を紹介するためのイメージブロックを作成します。

1. ツールバーから長方形ツールを選択するか、Rキーを押して、ケースステディ探索フレーム内に長方形を描きます。
2. レイヤーの幅を1000に設定します。これにより、テキストレイヤーの幅と一致するので、互いに一貫性を保ちます。
3. 高さを562に設定します。
4. 右サイドバーの塗りセクションでカラーピッカーを開く
5. 上部の画像を選択します。Figmaは、画像のプレースホルダーであることを示すために、塗りをグレーと白のチェッカーボードパターンに変更します。これらのプレースホルダーは後のレッスンで更新します。
6. レイヤーの名前を画像に変更します。

ヒーローを作成

ヒーローを作成する前に、ケースステディ探索フレーム内のすべての要素を選択して、フレーム内で少なくとも400ピクセル下に移動させます。

テキストレイヤーを追加する

作業スペースができたので、ヒーロー要素を作成します。

1. テキストツールを使用して、ケーススタディ探索フレームの上部にテキストレイヤーを作成します。
2. この要素を目立たせるために、フォントサイズを76、フォントウェイトをBold、行の高さを自動に設定します。行の高さを自動に設定すると、Figmaはフォントによって設定されたデフォルトの行の高さを使用します。これは、使用しているフォントによって行の高さが異なることを意味します。
3. テキストの配置を中央寄せに設定します。
4. 配置のセクションで、水平センターに揃えるをクリックして、レイヤーをフレーム内で中央に揃えます。

テキストレイヤーをフレームに追加

このヒーローに背景を追加して、さらに目立たせると良いでしょう。これを実現するために、テキストレイヤーを画像フィルのフレームに追加します。

前のレッスンでは、既存のレイヤーの周りにフレームを描く方法を学びました。今回は、新しいフレームを追加する別の方法を使用します。

1. テキストレイヤーを選択します。
2. 選択を右クリックし、選択範囲のフレーム化を選択するか、キーボードショートカットを使用します。

   • Mac: ⌘ Command ⌥ Option G

     Windows: Control Alt G

3. 塗りセクションを使用して、塗りをプレースホルダー画像に変更します。

4. 次に、新しいフレームのバウンディングボックスの左側と右側をクリックしてドラッグしてフレームを大きくします。修飾キーを押しながら、反対側を一度にサイズ変更できます。

   • Mac: Option
   • Windows: Alt

5. 親フレームの両端にスナップするまでサイズを調整します。スナップされたことは赤い「X」で表示されます。これを行うには、ファイルの設定でオブジェクトにスナップがオンになっている必要があります。

6. 次に、フレームの高さを440に設定します。

7. フレームの名前を目を引くテキストに変更します。

テキストレイヤーの制約を設定します。

このフレームのサイズを変更すると、タイトルテキストが上部に固定されますが、中央に固定したいです。それを変更するために制約を使います。

1. Impactful textフレーム内のテキストレイヤーを選択します。
2. レイヤーの制約を中央および中央に変更します。
3. テキストをフレーム内で中央に配置するには、水平センターに揃えると垂直センターに揃えるをクリックします。

これで、フレームのサイズを変更すると、テキストレイヤーが中央に留まります。