序章

みなさん、こんにちは。今日は、モックアップ/テンプレートを作成して使用し、プロフィールアイコン/画像をさまざまなサイズで視覚化する方法を見ていきます。設計プロセス中にプロファイルを最適化するための原則またはガイドに従う。そして最後に、ソーシャルメディア、フォーラム、チャット、メッセンジャーアプリなど、さまざまなプラットフォームで画像を使用できるように画像をエクスポートする方法。それでは、始めましょう。

 

..。

 

 

注：このチュートリアルで使用されている画像は、チュートリアルの作成者によって設計、作成、または作成されたものです。 Clip Studio Paint、Clip Studio、CELSYSのロゴはそれぞれの所有者に帰属します。

 

 

1.プラットフォームとサイズの調査

最初のステップは、プロファイル画像をアップロードするさまざまなプラットフォームまたはプラットフォームを探索することです。これらは、ソーシャルメディア、チャット、メッセンジャーアプリ、または使用を計画しているものであれば何でもかまいません。

 

使用しているデバイスからスクリーンショットを撮ります。ショートカットまたは他の方法を使用して、さまざまなプラットフォームのレイアウトをキャプチャできます。

 

ウィンドウズ。

Windows + Shift + SまたはPrint-Screen（キー）を押します

 

マック。

Shift + Command+3またはShift+Command + 4（キャプチャ領域の場合）を押します

 

iPAD。

トップボタン+音量またはホームボタンを押します。アップルペンシルで左下隅から上にスワイプすることもできます。

 

サムスンタブレット。

電源+音量小ボタンまたはホームボタンを（同時に）押します。画面全体でパームスワイプを使用することもできます。またはSペンでエアコマンドメニュー。

 

Clip Studio Paintでスクリーンショットを開き、長方形選択ツールと情報パレットを使用して、プロファイルに使用されているサイズを確認します。情報パレットが表示されない場合は、[ウィンドウ]>[情報]に移動します。水平の場合はH、垂直の場合はVで表される幅と高さを確認できます。

 

プロファイルが使用されるすべてのサイズ、コメント、ログイン-ログアウト、ユーザー名などに注意してください。後でサイズ番号を確認して、プロフィール写真/アイコンを視覚化するためのモックアップ/テンプレートを作成できます。

 

サイズ番号のリストは次のとおりです。

 

サインイン/ログイン32x32px

ラージプロファイル220x220px

ユーザー名120x120ピクセル

コメント50x50ピクセル

アイコン24x24ピクセル

 

 

このチュートリアルでは、WindowsPCで撮影したスクリーンショットに基づいたカスタムサイズを使用します。これらは、Twitter、Instagram、YouTube、Facebookなどのさまざまなプラットフォームで使用される最も一般的なプロファイルサイズに近いか、その中間です。ただし、これらのサイズは絶対的なものではなく、使用しているデバイスの画面に合わせて変更される可能性があることに注意してください。

 

 

2.プロファイルの種類

ロゴやシンボル、個人名や会社名、風景からペットまでの写真、デジタルや伝統的なイラスト、ピクセルアートなど、さまざまな種類のプロフィール画像を見つけることができます。

 

このチュートリアルの後半では、3つの例を見て、設計プロセス中に行われた決定について説明します。 1つはピクセルアート用、もう1つは写真付き（b）ですが、フラット化またはスキャンしたイラストでも同じヒントを使用できます。そして1つは（c）名前のロゴ用です。

 

注：これらの例では、ツールの詳細に飛び込むのではなく、プロセスに焦点を当てたり、プロファイル画像を作成する方法を段階的に説明したりするのではなく、小さな円で見栄えを良くするために最適化する方法を説明します。 5つの原則またはガイドに従った正方形。

 

 

3.プロフィール写真/アイコンの5つのデザイン原則またはガイド

プロフィール写真やアイコンをデザインするときは、プロセス全体で5つの原則またはガイドを使用しようとしています。これらは、シンプルさ、コントラスト、認識可能性、スケーラビリティ、および作物の形状です。それらを簡単に確認しましょう。

 

>シンプルさ

 

過度の詳細は避けてください。詳細は大きいサイズでは見栄えがするかもしれませんが、小さいサイズでは見たり理解したりするのが難しい場合があります。

 

 

>コントラスト

 

プロフィール画像が見やすくなります。明るい値と暗い値、または補色/反対色を使用できます。プラットフォームの背景を活用することもできます。

 

 

>スケーラビリティ

 

プロファイル画像がさまざまなサイズに適応できるかどうかを確認します。画像のシンプルさとコントラストにより、このプロセスがはるかに簡単になります。

 

 

>認識可能

 

図形やシルエットを使用して、さまざまな縮尺で画像を認識できるようにすることができます。プロフィール写真/アイコンで色を使用したり、色をアソシアットしたりすることもできます。

 

 

>作物の形

 

プラットフォームレイアウトの形状（円、正方形）によってトリミングされることを認識して、コンポジションを作成し、画像を位置合わせします。意図しない作物は避けてください。作物の形をデザインに使用または組み込むこともできます。

 

 

次へ：次の章では、モックアップ/テンプレートを作成および使用して、プロファイルを設計する際にこれらの5つの原則を簡単に確認する方法を説明します。その後、私が従おうとしている設計プロセスを確認し、いくつかの例を確認します。

 

 

4.プロファイルモックアップ/テンプレート（ステップバイステップ+無料ダウンロード）

この章では、ClipStudioPaintでファイルオブジェクトを使用してモックアップを作成するための基本的な手順を説明します。

 

ただし、すぐに使用できるモックアップを、それらの使用方法と実行できることと実行できないことのPDFとともに、以下のリンクからダウンロードできます。要約すると、それらを使用することはできますが、ライセンス、配布、または独自のものとして販売しないでください。次に、続行するか、次の章にジャンプできます：複数のWindowsセットアップでのファイルオブジェクトの更新。

 

注：これらのモックアップ/テンプレートと呼んでも。これらは.clipファイルドキュメントであり、ClipStudioPaintで新しいドキュメントを作成するときに表示されるテンプレートではありません。

 

 

>無料のモックアップ/テンプレートをダウンロードするためのリンク：

 

1000x1000pxのキャンバスを使用してプロファイルのモックアップ/テンプレートをダウンロードします。

 

56x56ピクセルのキャンバスを使用して、ピクセルアートプロファイルのモックアップ/テンプレートをダウンロードします。

 

4.1 1：1プロファイルドキュメントの作成

新しいプロファイルを最初から作成する場合でも、それを適応させる場合でも。すべてのプラットフォームの標準である1対1のアスペクト比で作業します。

 

1.イラスト、写真、または名前のロゴを使用したプロファイルの場合。新しいドキュメントを作成し、プリセットから「スクエア（1000 x1000px）」を選択します。プロファイルドキュメントに名前を付けて、Clip StudioPaint.clipファイルとして保存します。これにより、ファイルオブジェクトとして使用できるようになります。ただし、必要に応じて、.psdファイルを使用してファイルオブジェクトを作成することもできます。

 

2.ピクセルアートプロファイルの場合、小さなキャンバスサイズを使用して正方形を表示できます。 56x56pxのミディアムサイズを作成します。ただし、16x16、24x24などの小さいサイズで大きなピクセルを試すこともできます。または、64x64px以上の大きなキャンバスを使用して、詳細を追加します。次に、ファイルをClip Studio Paintファイル（.clip）として保存し、後でファイルオブジェクトとして使用できるようにします。

 

4.2ファイルオブジェクトを使用したモックアップ/テンプレート

 

>ドキュメントを作成して保存する

 

ソーシャルメディア、チャット、メッセンジャーアプリ、またはその他のプラットフォームを使用する場合と同様の方法で、さまざまなサイズのプロフィール写真/アイコンを視覚化するために、720x1080ピクセルの新しいドキュメントを作成します。暗いテーマをシミュレートするには、紙の色を暗い灰色または黒に変更します。

 

次に、前に作成したプロフィール写真/アイコンファイルと同じ場所にドキュメントを保存します。

 

 

>プロファイルをファイルオブジェクトとしてインポート

 

次に、プロファイル画像/アイコンまたはピクセルアートの.clipファイルを作成したドキュメントにインポートしましょう。

 

（1）[ファイル]>[インポート]>[ファイルオブジェクトの作成]から…ファイルオブジェクトとして使用するファイルを選択し、[開く]をクリックします（2）。

 

作成したファイルオブジェクトに関するメッセージ（3）が表示されます。また、ファイルオブジェクトがレイヤーパレットに表示され、その横にリンクされたファイルのアイコンが表示されます（4）。

 

 

>グリッドを使用してサイズを変更する

 

使用するプラットフォームとサイトのスクリーンショットからプロファイルに使用されているサイズを確認するか、このチュートリアルで使用されているカスタムサイズのリストを確認してください。

 

 

サインイン/ログイン32x32px

ラージプロファイル220x220px

ユーザー名120x120ピクセル

コメント50x50ピクセル

アイコン24x24ピクセル

 

 

次に、[表示]> [グリッド/ルーラーバーの設定]に移動し、分割数を1に変更して、ギャップをプロファイルに使用されるサイズの1つ（100pxなど）と一致させます。そして、[表示]>[グリッド]からグリッドを表示します。

 

次に、オブジェクトツール（ショートカットO）を使用して、ファイルオブジェクトのサイズを変更し、コーナーからドラッグして（1）、グリッドの正方形の1つに揃えます（2）。

 

（3）情報パレットでサイズを再確認できます。レイヤーパレットでCtrlキーを押しながらサムネイル（4）をクリックするか、右クリック>レイヤーからの選択>選択の作成。

 

 

重要：

（1）ツールのプロパティパレットで[補間方法]を高精度（平均色）に変更します。この方法は、1000x1000pxのプロファイルとピクセルアートで機能します。オプションが表示されない場合は、レンチアイコンをクリックし、その横にある目（2）をクリックして、サブツールの詳細パレットからオプションを表示します。

 

 

 

>作物の形

 

 

下の空のレイヤーにあり、[グリッドにスナップ]がアクティブになっています（CTRL + 3）。楕円ツールを使用して1行1列の円を描きます。

 

 

ファイルオブジェクトを円の上に揃え（1）、レイヤーパレットでファイルオブジェクトを選択し、[下のレイヤーにクリップ]アイコン（2）をクリックします。これにより、さまざまなプラットフォームで使用される楕円形のクロップがエミュレートされます。

 

次に、グリッドのサイズを再度変更して、他のプロファイルサイズと一致させます。サインイン（1）、大きなプロファイル（2）、ユーザー名（3）、コメント（4）、アイコン（5）に使用されるすべてのサイズが完了するまで、それぞれでこのプロセスを繰り返します。

 

 

明るいテーマと暗いテーマを作成できます。また、楕円形と丸みを帯びた長方形の切り抜きを作成して、プロファイルがさまざまなサイトやプラットフォームでどのように見えるかをプレビューします。

 

 

5.複数のWindowsセットアップでのファイルオブジェクトの更新

>ウィンドウドキュメントを開いて再配置する

 

 

上記のモックアップをダウンロードした場合。プロファイル画像（またはプロファイルピクセルアート）ファイルとモックカップ/テンプレートの1つ（プロファイル-円またはプロファイル-正方形）を開くか、クリップスタジオペイントにドラッグします。

 

または、作成して同じ場所のフォルダに保存したファイルを開きます。

 

次に、（1）をクリックし、キャンバスの1つのタブをドラッグして左または右にドッキングし、赤いオーバーレイ（2）が表示されたら離します。

 

これで、両方のドキュメントを同時に表示できます。ナビゲータパレットで、1x1プロファイルキャンバスのFittoNavigatorを使用できます。この機能は、特にピクセルアートで非常に役立ちます。

 

>ファイルオブジェクトの保存と更新

 

 

次に、プロファイルファイルに何かを描画、ペイント、または書き込み、作業内容を保存します。モックアップファイルで自動的に更新されます。

 

モックアップ/テンプレートキャンバスを使用している場合。 [レイヤー]>[ファイルオブジェクト]>[すべてのファイルオブジェクトを更新]に移動することもできます。

 

この設定により、プロファイルの写真/アイコンを操作し、その過程で「プロファイルの5つの設計原則またはガイド」を確認できます。プロフィール画像を使用するプラットフォームと同様のレイアウトで、さまざまなサイズを同時に視覚化する複数のステップを保存できます。

 

 

6.デザインプロセス（プロフィールアイコン/写真）

この章では、プロファイルに「5つの原則またはガイド」を使用して、設計プロセス中に行われた決定を説明します。これらは、シンプルさ、コントラスト、スケーラビリティ、認識可能、作物の形です。

 

 

6.1プロセスのステップ

これから行う設計プロセスのステップは、フォーカス、識別、改善、ダブルチェック、および繰り返しです。

 

1. 1つの原則に焦点を合わせます（上記の5つから）。

2.プロファイル画像の問題または問題を特定します。

3.改善し、さまざまなアプローチとソリューションを試してください。確認し、必要に応じて改善を続けます。

4.モックアップを使用して画像のスケーラビリティを再確認し、エクスポートするか、または...

5.繰り返します。別の原則に焦点を合わせ、プロセスを繰り返します。

 

 

6.2プロファイルの例

次に、上記の手順に従って3つの異なる例を見ていきます。前の章で行ったように、ツールの詳細に飛び込むことなく、プロセスに焦点を当てます。各例で使用されているツールとテクニックの詳細を含むチュートリアルやヒントが必要な場合は、コメントでお知らせください。

 

a）ピクセルアートの例

まず、3Dモデルに基づいてアンチエイリアスを使用せずにシルエットを作成しました。そして、その形状が（1）頭として認識できるかどうかを確認します。次に、（2）Simplicityの6つの値のreduce greyパレットを使用して、アンチエイリアスなしでペイントします。

 

その後、グラデーションマップで色の円の反対色を使用して色を追加し、被写体の顔のコントラストを改善して取得しました。小さいプロファイルサイズでは、頭が大きすぎて少しバランスが崩れているように見えました。そこで、視覚を回避または減少させ、（4）スケーラビリティを向上させるために、背面にディザリンググラデーションを追加しました。

 

 

 

注：小さいキャンバスと少ない色または値を使用して、ピクセルアートのシンプルさを向上させることができます。しかし、細部を減らし、より多くの画像を様式化する。次に、必要に応じて画像を改善するためのさまざまなソリューションを再確認して調査し、エクスポートすることができます。

 

 

b）写真/イラストの例

一見すると、画像にはもっと多くのことが必要であることに気づきました。（1）プロファイルとして使用するにはコントラスト。そこで、選択して背景から被写体（タカ）を切り取りました。 1000x1000pxのプロファイルキャンバスに貼り付けて中央に配置し、（2）被写体（鳥）の頭がトリミングされないようにします。

 

次に、背景にグラデーションレイヤーを追加して、より多くの（3）コントラストを作成しました。 （4）コントラストを改善するために、調整レイヤー、明るさ/コントラスト、トーンカーブ、グラデーションマップを使用しました。被写体（タカ）と背景の間に反対色または補色を使用しようとしています。

 

その後、プラットフォーム全体で最も使用されている作物の形状を組み込むために、円（5）を追加することにしました。これは、さまざまな平面と奥行き感を作り出すのにも役立ちました。被写体（タカ）を円や背景から分離し、シルエットを維持しようとする（6）認識可能。間に微妙な影を追加しました。最後に、プロファイルの小さいサイズを再確認します（7）スケーラビリティ。

 

 

 

注：これらのヒントを適応させて、人物、ペット、オブジェクトなどの写真で使用できます。また、これらを平坦化またはスキャンしたイラストに適応させることもできます。必ず最初にコピーを作成し、元のファイルまたはソースファイルを直接操作しないようにしてください。

 

 

c）名前のロゴの例

この架空の個人ロゴ名。小さいサイズで読むには名前が少し長いように見えることがわかります（1）スケーラビリティ。したがって、この場合、（2）シンプルさには「a」だけを使用することにしました。

 

次に、コメントとアイコンのサイズの「a」が少し小さく見えることに気付きました。そこで、「a」を大きくして、小さいサイズへの適応を改善しました（3）スケーラビリティ。最後に、アイコンと完全な名前のロゴの両方のバージョンでロゴに関連付ける緑色を選択して、（4）認識できるようにします。

 

 

注：必ずしも1文字または1色の単色を使用する必要はありません。さまざまなアプローチやソリューションを試して、自分とプロファイルに最適なものを確認できます。画像が小さいサイズで認識できるかどうかを確認してください。たとえば、フォントが薄すぎるか薄すぎる場合は、同じファミリフォントの太字オプションを試すか、同じ色の境界線効果を追加できます。

 

 

..。

 

 

7.プラットフォームのプロファイルのエクスポート

プロフィール写真/アイコンをエクスポートする前に、画像のサイズを変更する必要がある場合と、プラットフォームでサポートされている形式について説明しましょう。

 

 

 

>画像のサイズを変更

 

1000x1000pxの画像サイズは、ソーシャルメディア、メッセンジャーアプリ、またはフォーラムに十分なはずです。ただし、すべてのプラットフォームで、プロファイル画像の最小サイズまたは最大サイズが推奨される場合があります。 400ピクセルだけが必要なときに、画像が2048ピクセルのように大きい場合。または、ピクセルアートの場合はそれよりも小さくなります。常に最初に自分で画像のサイズを変更するようにしてください。画像のサイズを変更するためにプラットフォームメソッドを中継しないでください。

 

重要な注意：どちらの場合も、常に最初にコピーを作成し、元のファイルやソースファイルではなくコピーのサイズを変更してください。

 

 

 

2048を超える大きな画像の場合は、[編集]>[画像の解像度の変更]に移動することをお勧めします。そして、補間法として高精度（平均色）を選択します。次に、正確なサイズをピクセル単位で入力して、[OK]を押します。

 

 

ピクセルアート画像の場合は、[編集]>[画像解像度の変更]に移動することをお勧めします。そして、ハードエッジ（最近傍）法を選択します。推奨サイズに近づくまで、スケール数を変更できます。または、正確なサイズを入力して、正方形がオリジナルとコピーで同じように見えるかどうかを確認します。

 

 

>フォーマット

 

プロファイル画像の最も一般的な形式は、PNG（Portable Network Graphics）およびJPEGまたはJPG（Joint Photographic Experts Group）です。

 

 

PNGファイルは、主にロゴ、ピクセルアート、アイコン、グラフィックイラスト、フラットまたはプレーンカラーおよびグラフィックで使用されます。または、透明度のある画像が必要な場合。 PNGファイルは品質が高くなる傾向がありますが、ファイルサイズが大きくなる可能性があります。

 

 

JPEGファイルは写真で広く使用されており、ファイルのサイズを大幅に圧縮できます。ただし、圧縮しすぎると、画像の品質が低下する可能性があります。この形式は、写真、イラスト、その他のグラフィックで使用できます。ただし、ピクセルアートのきれいなロゴやアイコンと一緒に使用することはお勧めしません。また、JPGファイルは透過性をサポートしていません。

 

 

できる限りPNGを使用するか、品質が80％を超えるJPEGを使用することをお勧めします。 Facebookなどの一部のプラットフォームでは、アップロードすると画像の品質がさらに圧縮される可能性があることに注意してください。

 

 

>エクスポート（単一レイヤー）

 

画像をエクスポートするには、[ファイル]> [エクスポート（単一レイヤー）]に移動し、必要な形式を選択します。

 

ここで、[式の色]に[RGB色（1）]を選択します。そして、（2）スケール比を100％に保ちます。残りをデフォルトのままにして、[OK]を押します。 （3）プレビューを確認し、もう一度[OK]をクリックします。

 

JPEGファイルの場合は、品質を80以上に保ち、ICCプロファイルを埋め込むようにしてください。次に、[OK]を押します。

 

プロファイルのサイズを変更する場合は、画像のサイズを変更する前に、必ずコピーを保存してください。また、元のドキュメントまたはソースドキュメントのサイズを変更しないでください。ファイルの名前に寸法を追加して、ドキュメントのサイズを簡単に認識できるようにすることもできます。

 

 

追加情報：FacebookやTelegramなどの一部のプラットフォームは、AndroidまたはiOSのモバイルデバイスからアップロードされたときに、アニメーションGIFファイルまたはMP4ムービーファイルをサポートする場合があります。このタイプのファイルの例が見当たらない場合でも、アニメーションプロファイルを設計するために見たヒント、プロセス、および原則をいつでも適応させることができます。

 

 

概要

要約すると、モックアップ/テンプレートを作成して使用し、プロファイル画像またはアイコンをさまざまなサイズで同時に視覚化する方法を説明しました。また、設計プロセス中にプロファイルを作成および最適化するのに役立つ原則またはガイドも確認しました。そして最後に、いつ、どのように画像のサイズを変更し、ソーシャルプラットフォーム、メッセンジャーアプリ、チャットフォーラムなどのプロファイルをエクスポートします。

 

ですから、あなたがあなた自身のワークフローで使用できる何か役に立つものを見つけたことを願っています。記事を読んでくれてありがとう。 「じゃあね」と言っているエドです。