製品アイコンの作成は、一見したほど難しくありません。 初めての Android アプリのアイコンをゼロからデザインする方法について詳しくご覧ください。
アプリがどのようなマーケットプレイスやサービスを通じて配布されるかに関係なく、そのアプリのアイコンは、将来のユーザーが最初に目につくものです。 新しいユーザーを獲得しようとする場合、第一印象は最も重要です。つまり、アイコンはあらゆるアプリケーションの重要なコンポーネントです。 そして、アプリの意図に関係なく、美しいアプリケーション アイコンを作成することは、すべてのアプリの開発フェーズの重要な部分である必要があります。 テクニカル アプリケーションの開発者の多くはグラフィックスを専任のデザイナーに任せていますが、 デザインの基礎とその応用は、実験とコツがあれば誰でもできることです。 分析。 アプリのアイコンも例外ではありません。
このガイドでは、オープンソース ソフトウェアを使用してサンプル Android アプリのアダプティブ アイコンを作成する手順を説明します。 最終結果は必要な形式ではないかもしれませんが、ここで説明した設計のヒントの多くは複数のプラットフォームに当てはまります。
Android Oreo での「アダプティブ アイコン」のリリース後、アプリ アイコンは 3 つの基本的なレイヤーで構成されます。 不透明な背景レイヤー, 前景レイヤー と 透明性のサポート、そして マスク アイコンの形状を定義します。 これらすべてのレイヤーのサイズは 108 x 108 dp ですが、ユーザーに表示されるのは内側の 72 x 72 dp のみです。 上部のマスクによって切り取られたもう 1 つの領域は、アイコンを動的に見せるための UI 内の特殊効果に使用されます。 初心者向けに、 DP または ディスプレイに依存しないピクセル Android のすべてのインターフェイスの測定単位として表され、次のサイズと等しいように定義されます。 160 ドット/インチのディスプレイ上の 1 ピクセル.)
Google の Nick Butcher が 66 dp サークルについて語る アイコンの中央には、マスクが切り取ることができない「安全ゾーン」と呼ばれます。 ここには、実際のデザインに取り掛かるときに、アイコン デザインの主要な要素が配置されます。 シェイプ マスクがオンになっている間は、この 33 dp 半径を超えるものはアイコンに表示されない場合があります。
UI スケーリングの都合上、アイコンはベクター画像である方が良いため、アイコンを作成するにはベクター グラフィック エディターが必要になります。 インクスケープ はオープンソースであり、より高価なソフトウェアの優れた代替品であるため、このチュートリアルの目的ではこれを選択します。 プロジェクトファイルもデザインしました ここで入手可能 これには、セーフ ゾーンと Google 独自のデザイン キーラインがマークアウトされており、アイコンの形状をプレビューできる気の利いたレイヤー マスクが含まれています。
Inkscape でプロジェクト ファイルを開いた状態で、 塗りつぶしとストローク (Shift+Ctrl+F)、 PNG画像をエクスポート (Shift+Ctrl+E)、および レイヤー (Shift+Ctrl+L) パネルが開き、開始する準備が整いました。 [レイヤー] パネルはプロジェクトの核となる部分です。 前景 そして 背景 タイトルのコンポーネントを格納することを目的としたレイヤー、および ガイドライン そして マスク 参考までに、(横にある小さな目のアイコンをクリックして) オンとオフを切り替えることを目的としています。
アイコンはアプリのアイデンティティを表現します。 そのため、アプリの個性と、Android のようなプラットフォーム固有の設計ガイドラインの両方を組み込む必要があります。 マテリアルデザイン言語が提供するもの. デモンストレーションの目的で、マテリアル要素を使用する天気予報アプリに取り組んでいると仮定します。 古典的な太陽と雲のモチーフを使用して、アプリの目的をユーザーに知らせ、少しの工夫を加えることができます。 ドロップ シャドウとジオメトリを使用してこの基本デザインをスピンし、Android 環境にうまく溶け込みます。
背景
まずは、青い空と中央の黄色い太陽で構成される背景の設定から始めましょう。 旋回 マスク 目に見えないものを選択して見えるようにします 背景レイヤー、キャンバス全体を 長方形と正方形を作成する ツール（F4）を使用して、四角形の塗りつぶしの色を設定します。 塗りつぶしとストローク に従って、64B5F6FF (水色) にします。 マテリアルカラーパレット. 次に、 円、省略記号、円弧を作成する (F5) ツールを使用し、Shift キーと Ctrl キーを押しながら、キーラインの中心から 2 番目に大きい円まで円を描き、その色を FFEE58FF に設定します。これにより、暖かい小さな太陽が得られます。 あらゆる種類の設計において、基本的なジオメトリにこだわるのは常に良いことであり、特に Android の設計言語はシンプルさを奨励します。 マテリアル ガイドラインに準拠するために、太陽に微妙なドロップ シャドウも与えます。 フィルター→シャドウとグロー→ドロップシャドウ.
前景
に来ます 前景、 他の円の円周から円を描くことで太陽の周りの雲のグループを描き、すべてに EEEEEEFF の塗りつぶし色を与えます。 次に、複数のオブジェクトを右クリックして選択し、円を適切にグループ化します。 グループ、最終的に得られる 2 つの最終シェイプに対してドロップ シャドウ ジェネレーターを実行します。 旋回 ガイドライン 非表示と切り替え 前景 そして 背景 代わりに、天気アプリのアイコンの構成レイヤーを確認することもできます。 アプリのアイコンをホーム画面上でドラッグすると、静止した太陽に対して雲が滝のように流れます。
結果
マスク を表示して微調整できるようになりました ノードごとにパスを編集する (F2) さまざまな形状のマスクを試してシミュレートします。 また、2 つのレイヤーを別々にエクスポートすることもできます。 PNG画像をエクスポート 使用のためのパネル Android Studioで、そして一緒に Google Playアイコン.
製品アイコンを作成するときは、アプリケーションの目的を抽出し、最も抽象的な視覚的形式に抽出し、それを単純なジオメトリを使用して表現することを常に推奨します。 通常、デザインのコンポーネントはシンプルであればあるほど、より良く、より確実に動作します。これはグラフィック デザインにも当てはまります。 ほとんどの場合、前景にオブジェクトの形状、背景に単色またはパターン (または その逆) は問題なく動作しますが、この例のように、必要に応じてオブジェクトの別のレイヤーを使用することもできます。 必要; 重ねすぎたり、ドロップ シャドウを使用しすぎたりすると、アイコンのデザインが複雑になるだけです。
アイコンのデザインについて詳しくは、公式のマテリアル インターフェイスをご覧ください。 素材サイト、アイコン デザインで使用する無料のシステム アイコンをから入手します。 同じウェブサイト.