マガジンのカバー画像

ゲームUIデザインレシピ

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

#デザイン

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

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

はなさくの

【番外編】AfterEffectsチュートリアルを一ヶ月続けた結果

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、番外編になります。 というのも、AfterEffectsのチュートリアルを100日チャレンジするという目標を立てまして、1ヶ月経過したので、その報告をしたいと思います。 なぜAE100日チャレンジをはじめたのかデザイナーとして、ゲームのUIデザインやバナー、グッズ制作などをしてきたのですが、そのデザインを静止画でなく動く状態にしたら表現の幅が広がりそう！と思ったのがきっかけです。 デザイン×モーショングラフィ

はなさくの

【PS】泡の作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopの1レイヤースタイルで泡を作る方法についてご紹介します！ （有料版は、ページ最下部からPhotoshopデータをダウンロードすることができます） 01｜泡をランダムに散りばめるブラシの作り方まずは、Photoshopで泡ブラシを作ります。 標準で入っているソフト円ブラシを選択します（上記赤枠）。 次にブラシ設定の「散布」にチェックを入れて、上記赤枠部分の設定をします。 次にブラシ設定の「シェ

¥800
はなさくの

【PS】ワープテキストを使った変形文字の作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopでワープテキストを使った変形文字の作り方についてご紹介します！ （有料版は、ページ最下部からPhotoshopデータをダウンロードすることができます） 01｜ワープテキストを使った変形文字の作り方基本的な作成手順は、下記になります。 01｜好きな文字をテキストツールで入力する 02｜テキストを選択した状態で、Photoshopの上部メニューから、書式 > ワープテキスト を選択する 03｜ワ

¥800
はなさくの

【PS】かすれたスタンプの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopでかすれたスタンプを作る方法についてご紹介します！ 01｜かすれたスタンプの作り方今回は、スタンプの形状を作るところでなく、Photoshopで超簡単にかすれた表現をする方法についてご紹介します。 まず、お好みのスタンプ形状をillustratorまたはPhotoshopで事前に作成します。その後、Photoshop上で、スマートオブジェクト化してください。 カンバスサイズは、1000×1000

¥800
はなさくの

【PS】ゲームコインの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopでゲームコインを作る方法についてご紹介します！ 01｜ゲームコインの作り方今回はレイヤー構成がシンプル、かつ少ないレイヤースタイルで表現できるコインにしてみました（下記参照）。 パーツを分解すると、下記の4つのシェイプから出来ています。 星の部分のみピックアップして、レイヤースタイルの設定値を公開していきますね！まずは、グラデーションを設定します。

¥800
はなさくの

【PS】ファンタジー風ボタンの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopでファンタジー風ボタンを作る方法についてご紹介します！ 01｜ファンタジー風ボタンの作り方今回レイヤースタイルの重ねがけを多用しているので、それぞれの設定値はページ下のデータをダウンロードして確認してもらえればと思います。 その上で、ざっくりとした制作フローのみ記載しておきますね！ まずは、ボタンの形状を整え、青から水色のグラデーションをのせます。 上記に対してレイヤースタイルで下記を追加

¥800
はなさくの

【AE】ハート消費でゲームスタートするボタンアニメーションの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、AfterEffectsで、ハートを消費してゲームスタートするボタンアニメーションを作る方法についてご紹介します！ 01｜ハート消費でゲームスタートするボタンアニメーションの作り方基本的にシンプルなアニメーションの組み合わせで作成していますので、分解していきましょう！ 01-01｜ボタンの拡縮アニメーション まずは、ボタンの拡縮アニメーションです。 ボタンの縮小 > 拡大 > 縮小 >ちょっと拡大 >ちょっと

¥800
はなさくの

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

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

¥800
はなさくの

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

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

¥800
はなさくの

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

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

¥800
はなさくの

【PS】グラデーションマップを使ったカラフルなゲージの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopで、グラデーションマップを使って、カラフルなゲージを作る方法についてご紹介します！ 01｜ゲージの作り方まずは、ゲージのカラバリを作る前に、元となるゲージをPhotoshopで作成します。 今回レイヤー構造はかなりシンプルです。 上記を見て分かる通り、オレンジ色のバーの部分は、1つのレイヤーで作成しています。まずは、ベースとなるオレンジ色のグラデーションを設定し、上部の光部分と下部の影部分は

¥800
はなさくの

【AE】動くギフトボックスの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、AfterEffectsで、ギフトボックスのアニメーションを作る方法についてご紹介します！ 01｜【AE】動くギフトボックスの作り方今回アニメーションを3つ作成しましたので、1つずつ取り上げていきたいと思います。 こちらですが、配布しているAfterEffectsファイルを開いていただくと、下記赤枠の部分で、01～03まで、個別のファイル（コンポジション）に分けているので、1つずつ確認してみてくださいね。 0

¥800
はなさくの

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

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

¥800
はなさくの