PSオンラインチュートリアル：ハスの形のミニマルアイコン

ハスのアイコンは、ベクターシェイプを組み合わせるのが一番速い作り方です。グラデーションオーバーレイで色を乗せ、内側の光彩で透明感を出し、最後に回転複製で花びらを並べます。シェイプの変形とレイヤースタイルの数値はすべて記載しているので、UIアイコンの制作にもそのまま使えます。

1. カンバスを新規作成して円を描く
   • オンラインPS（zaixianps.cc）を開き、Ctrl+Nでカンバスを新規作成します。サイズは800×800 px、背景は透明に設定するのがおすすめです。
   • 左側のツールバーでシェイプツール → 楕円（Uキー）を選び、カンバスの中央をクリック＆ドラッグして完全な円を描きます。
   • オプションバーで塗りつぶしの色が#2c3e50（濃いブルー／濃いグレー）、線がなしになっていることを確認します。
2. 円を膨張変形して花芯を作る
   • 円のレイヤーを選び、Ctrl+Tで自由変形に入ります。
   • 変形ツールバーの左上にある変形（小さなグリッドのアイコン）をクリックすると、変形のコントロールポイントが表示されます。
   • 上部のシェイプの変形ドロップダウンから膨張（Bulge）を選びます。
   • 中央のコントロールポイントを内側へドラッグし、円の中心を少し凹ませます（膨張の強さはおよそ30 %）。終わったらEnterで確定します。
3. レイヤースタイルを追加 – グラデーションオーバーレイ
   • 円のレイヤーをダブルクリックしてレイヤースタイルダイアログを開きます。
   • グラデーションオーバーレイにチェックを入れ、グラデーションスウォッチをクリックして編集します。
   • 左側の色を#2c3e50（濃色）、不透明度100 %にします。
   • 右側の色を#95a5a6（淡いグレー）、不透明度0 %にします。
   • 角度は90°のまま、比率は100%、スタイルは線形にします。
   • OKをクリックすると、円に濃色から淡色へのグラデーションがかかります。
4. 花びらを1枚作る
   • 新しい空のレイヤーを作り、シェイプツールで同じ大きさの円を2つ描きます（半径は全体の幅の約20 %が目安です）。
   • 確認しやすいよう、まず2つの円の塗りの不透明度を下げ（例：30%）、重なりの範囲を確認します。
   • 2つの円のレイヤーを選び、Ctrl+Eで1つのレイヤーに結合します。
   • パス選択ツール（A）に切り替え、パスパネルで選択されていることを確認します。
   • 上部ツールバーのパスファインダーで交差（Intersect）を選び、2つの円の重なり部分をクリックすると、新しいシェイプ（花びらの輪郭）が生成されます。
   • この時点でパスは1つのシェイプコンポーネントとして結合されています。
5. 花びらに塗りとグラデーションオーバーレイを追加する
   • 花びらのシェイプのレイヤーを選び、レイヤースタイルを開きます。
   • 塗りつぶしの色を#000000に設定するか、不透明度を0にして、実際には単色が見えないようにします。
   • グラデーションオーバーレイにチェックを入れ、次のグラデーションを作ります。
   • 左側の色は#ffffff（白）、不透明度100%。
   • 右側の色も#ffffff、不透明度0%。
   • 角度を90°にすると、白が花びらの根元から先端へ向かって徐々に消えていきます。
   • さらに別のレイヤースタイル内側の光彩（Inner Glow）を追加します。
   • 背景より少し淡いブルーグレー、たとえば#d0e0e5を選びます。
   • 描画モードは既定のScreenのまま、サイズは20px程度にします。
6. 複製と回転で花びらを一周させる
   • 現在のツールが移動／自由変形ツール（V）のままであることを確認します（パス選択ツールになっていないこと）。
   • Alt+Shift+Tを押して複製しながら変形（Free Transform Duplicate）を実行します。
   • 変形ボックスが表示されたら、Altを押しながら変形の中心点を花びらの**先端**へドラッグし、その点を軸に回転するようにします。
   • オプションバーの角度入力欄に**30°**（または任意の間隔）を入力し、確定すると新しい花びらが生成されます。
   • 続けてCtrl+Alt+Shift+T（直前の自由変形を繰り返す）を押すたびに、前の花びらを同じ角度で複製・回転できます。
   • 花びらが一周するまで繰り返します（およそ12〜14枚）。余分な花びらのレイヤーは選んで削除すればかまいません。
   コツ：複製にパス選択ツールを使わないでください。新しい花びらが同じパスコンポーネントに追加されてしまい、後から個別に編集しにくくなります。移動／自由変形ツールのまま操作すれば、花びらが1枚ずつ独立したレイヤーになります。
7. 対称性の確認と細部の調整
   • 表示 → 新規ガイド（Ctrl+R）を開き、カンバスの中央から水平・垂直のガイドをドラッグして、左右の対称性を確認します。
   • 花びらの位置がずれている場合は、そのレイヤーを選んでCtrl+Tで回転角度や位置を微調整します。
   • すべての花びらのレイヤーを選択し（Shift+クリック）、オプションバーで**不透明度95%**にすると、全体がやわらかく見えます。
8. 全体のサイズと最終書き出し
   • すべてのレイヤー（花芯と花びら）を選び、Ctrl+Tでアイコン全体を適切なサイズに拡大・縮小します。
   • 終わったらファイル → 書き出し → PNG（透明）を選び、ローカルに保存します。

参考資料

• オンラインPS
• Adobe 公式ドキュメント
• PS チュートリアルサイト