ホーム

アプリアイコンをデザインする

アプリアイコンをデザインしよう

アプリアイコンをデザインする

自分が考えたアプリのアイコンをKeynoteを使ってデザインしましょう。

この学習モジュールの所要時間:

30分

アプリアイコンを作成する。

Keynoteのプロジェクトプレゼンテーションに用意されているテンプレートを使って、自分のアプリのアイコンを作りましょう。

Keynoteのツールを使ってみる。

これから紹介するKeynoteのツールを使って、アプリのアイコンを作ってみましょう。

いろいろな要素を追加する。

テキスト、線、図形などを追加します。

手順1

テキスト、線、図形を追加するには、図形ボタンをタップして、追加したい要素を選択します。

ヒント

Keynoteのプロジェクトプレゼンテーションに用意されているアイコンのテンプレートに引かれたグリッド線を目安にします。

手順2

図形を回転させるには、図形を2本の指で押さえてから、回転させたい方向に回します。

ヒント

様々な図形を組み合わせてオリジナルのデザインを作りましょう。

手順3

図形の色を変更します。図形を1つタップして選択します。または1つの図形をタップして押さえたまま別の指でほかの図形をタップして複数の図形を選択します。フォーマットボタンをタップして、「スタイル」タブで「塗りつぶし」をタップします。

手順4

背景のテンプレートが見えるように透明度を調整します。編集したい図形やテキストなどを選択します。フォーマットボタンをタップします。不透明度スライダをドラッグし、好みの透明度に設定します。

背景に色をつける。

背景の角丸四角形の色を編集しましょう。

手順1

背景の角丸四角形の色を変更できるように、グリッドを背面に移動します。グリッドを選択します。フォーマットボタンをタップし、「配置」タブをタップします。「後ろ/前に移動」オプションのスライダをドラッグして、四角形が前面に表示されるまでグリッドを後ろに移動します。

手順2

角丸四角形の色を変更します。角丸四角形を選択します。フォーマットボタンをタップし、「スタイル」タブで「塗りつぶし」を選択します。

手順3

デザインに合うように色を編集します。

ヒント

グリッドを使って作業を続ける場合は、グリッドが前面に表示されるように、角丸四角形を背面に移動します。

図形を結合する。

図形を結合し、新しくできた図形を使って、アイコンの背景色に複雑なグラデーションを加えましょう。

手順1

アイコンの背景色となる複雑なグラデーションを作っていきます。まずは角丸四角形に色を設定します。

手順2

図形の下半分を別の長方形で覆い隠します。

ヒント

ルーラを使うと、中心線がどこかわかりやすくなります。

手順3

両方の図形を選択します。

手順4

フォーマットボタンをタップし、「配置」タブをタップします。下にスクロールして、「図形を結合」オプションを見つけ、交差アイコンをタップします。

手順5

作成した新しい図形を複製します。図形をタップして、「コピー」を選択します。スライドの背景の任意の場所をタップしてから、「ペースト」をタップします。

手順6

向きを反転させます。片方の図形をタップします。フォーマットボタンをタップし、「配置」タブで「上下反転」をタップします。

手順7

角丸四角形になるように、半分の図形2つをぴったりと合わせます。

手順8

グラデーションの色を変更します。2つの図形の「開始カラー」と「終了カラー」を配色バランスが良くなるように設定します。

図形を分割する。

分割機能を使うと図形を個々のパーツに分解できるので、それぞれのパーツを個別に選択して操作できるようになります。この機能を利用して、図形のそれぞれのパーツに色をつけたり、断片を取り除いたりします。

手順1

図形ライブラリの図形の中には、複数のパーツで構成されているものがあります。

手順2

図形を分割してみましょう。「図形」メニューの「幾何学的」タブで20面体を選択し、四隅のいずれかをドラッグして拡大します。

手順3

図形を分割します。図形をタップしてから、フォーマットボタンをタップし、「配置」タブで「分割」を選択します。

手順4

分割された図形の個々のパーツを選択して、削除したり、複製したり、色をつけたりします。

レイヤーを使って色を重ねる。

分割できないオブジェクトの場合は、レイヤーを使うことで、より複雑なデザインにすることができます。

手順1

ドーナツなど、くり抜かれた部分がある図形を追加します。

手順2

デザインに合うように色を編集します。

手順3

1つまたは複数のくりぬかれた部分の上に別の図形を重ね、それぞれの図形に色をつけます。

手順4

元の図形を前面に移動します。図形をタップします。フォーマットボタンをタップし、「配置」タブをタップします。スライダをドラッグして、元の図形を前面に移動します。

手順5

レイヤーをさらに追加していき、画像のそれぞれの部分の色を完成させます。