マガジンのカバー画像

ゲームUIデザインレシピ

ゲームUIデザインに関連する、素材の作り方・動きのつけ方・考え方が学べます。PhotoshopやAfterEffectsで作成したデータがダウンロードできます。
マガジン購読を開始した月以降の記事から、毎月2-4本の有料記事を500円でオトクに入手できます。詳…
¥500 / 月
運営しているクリエイター
はなさくの

#UI

ゲームUIデザインレシピとは？

ゲームUIデザインに関する情報とデータをお届けする、月額500円のマガジンになります。 ゲームUIデザインのお役立ち情報 ゲームUI素材の作り方 ゲームUI素材配布 ゲームUIアニメーション素材配布 ゲームUIの作り方が知りたい、グラフィック部分でももっと上手くなりたい、作り方を知りたいという方にオススメです。 01｜どんな記事が読めるの？定期的にTwitter（@HanaSakuno）でゲームUIのお役立ち情報やデザイン・アニメーションなどを公開しています。

はなさくの

【PS】ゴールドボタンの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopで、ゴールドボタンの作り方についてご紹介します！ 01｜ゴールドボタンの作り方①～③までグラデーションで色をつけて、ざっくりしたイメージを固めます。 まずは、ハートの作成から。ハートの内側に、濃いめの影を落としたいので、Photoshopのレイヤースタイルで、シャドウ（内側）で設定します。 次に、ハートの外側に発光している光を追加したいので、レイヤースタイルで、光彩（外側）を追加します。

¥800
はなさくの

【PS】木目ボタンの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopで、木目ボタンの作り方についてご紹介します！ 01｜木目テクスチャの作り方まず下準備として、木目のテクスチャをPhotoshopで作成します。ヘッダーメニューから、フィルター>描画>ファイバーの順で選択してください。 （設定値については、上図を参照） ここで作成するテクスチャは、使用時には描画モードを変更して重ねるため、白黒で作成して問題ありません。 02｜木目ボタンの作り方まずは、単色で各パ

¥800
はなさくの

【PS】ダイアログデザイン（ファンタジーRPG風）の作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopで、ファンタジーRPG風のダイアログデザインの作り方についてご紹介します！ 01｜ダイアログデザインの作り方今回のデザインですが、フレーム・ダイヤモンド・装飾の3パーツから出来ています。 1つ目のフレームですが、こちらは、長方形のシェイプを作成し、レイヤースタイルで境界線をつけたものを、サイズを変えていくつか重ねることで額縁的な表現にしています。 ここで使用するアウトラインは1pxで指定して

¥800
はなさくの

【PS】Photoshopで3D文字を作る方法

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopで、3D風文字を作る方法についてご紹介します！ 01｜3D風文字の作り方Photoshopにあった3D機能が廃止されるので、こちらではなく別の方法で再現していきたいと思います。 今回、詳細な作り方については、YouTubeに動画をアップしましたので、こちらを見ていただけると嬉しいです。 3Dらしい立体感を表現するために、フィルター＞ぼかし＞ぼかし（移動）を使い、その後に、レイヤースタイルの境

¥800
はなさくの

【PS】クッキークリームサンドボタンの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopで、クッキークリームサンドボタンを作る方法についてご紹介します！ 01｜クッキークリームサンドボタンの作り方01-01｜まずは、基本の形作りから 今回、チョコレートやクリームの部分は、Photoshopのブラシを使って描いています。クッキーの部分は、長方形シェイプで作成し、その後に、角丸の値を設定して、丸くしています。また、フォントは、Adobeフォントの「Futura」を使用していま

¥800
はなさくの

【PS/AE】NEWアニメーションの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、PhotoshopとAfterEffectsで、NEWアニメーションを作る方法についてご紹介します！ 今回、NEWのPhotoshopデータもレイヤースタイルを残したままで配布しますが、解説は必要ないと思うので、省きますね。 01｜【AE】NEWアニメーションの作り方今回アニメーションを6つ作成しましたので、一つずつ取り上げていきたいと思います。 こちらですが、配布しているAfterEffectsファイルを開

¥800
はなさくの

【PS】クッキー文字の作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopで、クッキー文字を作る方法についてご紹介します！ 01｜クッキー文字の作り方基本的な流れは、下記のようにレイヤースタイルを使いつつ、クッキーやチョコレートの質感をあげていく作業になります。 【01】最初は、クッキーの下地となる色で、グラデーションをかけます。 【02】次に境界線、シャドウ（内側）、光彩（内側）、ドロップシャドウを使い、クッキーの下地に影などを追加し、立体感を出していきます。 【

¥800
はなさくの

【PS/AE】ショップアイコンの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、PhotoshopとAfterEffectsで、ショップアイコンを作る方法についてご紹介します！ 01｜【PS】アイコンデザインの作り方アイコンデザインについてですが、まずは、Illustrator（Ai）でパスデータを作成しています。下記のような白黒ベースで作ってみました。 形が複雑になった場合は、Illustrator（Ai）でベースを作成し、その後にPhotoshopへコピーして配置しています。 最近P

¥800
はなさくの

【PS】バレンタイン・チョコ文字の作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopで、バレンタイン・チョコ文字を作る方法についてご紹介します！ 01｜バレンタイン・チョコ文字の作り方基本的な流れは、下記のようにレイヤースタイルを使いつつ、装飾を足していくイメージになります。 上記をすべて重ねると、サンプルのようなチョコ文字が完成します。ただし、単純に上記のようにレイヤーを5つに分けているわけではなく、可能な限り少ないレイヤー数にした状態で、個別にレイヤースタイルの設定を

¥800
はなさくの

【PS】レベルアップ文字の作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、レベルアップ文字の作り方についてご紹介します！ 01｜レベルアップ文字の作り方こういった境界線をハッキリとさせて、各要素に角度を付けたり、バランスを崩しながら作るものを、勝手に「クラッシュデザイン」と名付けています（笑）。 ゲームのUIデザインでもこのテイストを使用しているものを、たまに見かけます。 比較的主張が強く、クセがあるので、記憶には残りやすいデザインかなと個人的には思っています。 その分、1画面の

¥800
はなさくの

【PS】透明なボタンの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、透明なボタンの作り方についてご紹介します！ 01｜透明なボタンの作り方こちらですが、残念ながら、1レイヤーでは作っていません。いくつかレイヤーを重ねて、光と影を少しずつ入れながら質感を表現しています。 ただし、レイヤー数はそれほど多くはないかと思います。 レイヤーは結合することなく、かつ、すべてのレイヤースタイルも残した状態にしていますので、実際にデータを確認してみてくださいね！ 02｜データダウンロード02

¥800
はなさくの

【PS】ネオン看板の作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、ネオン看板の作り方についてご紹介します！ 01｜ネオン看板の作り方1つのレイヤースタイルですべて設定していますが、外側の効果から並べると、下記の順番で重ねています。 外側の発光 外側のシャドウ（濃い） ピンクの境界線（薄い） ピンクの境界線（普通） ピンクの境界線（濃い） 詳細は、下記の画像のようになります。 また、その他に、もう少し味付けとして、ベベルとエンボスや光彩（内側）をつけているので、それ

¥800
はなさくの

【PS】六角形ダイヤの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、六角形ダイヤの作り方についてご紹介します！ 01｜六角形ダイヤの作り方上記ですが、基本的に、フォトショップのレイヤースタイルの「べベルとエンボス」を使用して作成しています。 青いダイヤ部分の設定値は、下記になります。 といっても、他の部分はどうなってるの？グラデーションの設定は？など気になると思いますので、実際にデータをダウンロードして確認してみてくださいね！ 02｜データダウンロード02-01｜許諾事項

¥800
はなさくの