》今日のパワポ：[素材]鬼・おに・オニ

パワポで「鬼」のアイコンデザイン作ってみた

　アプリで使うための「鬼」アイコンをチャチャっとパワポで起こしてみました。
　アイコンとして使うためシンプルにデフォルメ前提で。
　こんな感じです（256x256px、背景透過済み）。

　少し可愛くしすぎましたかね。
　権利は放棄しませんが、自由に使っていただいて構いませんです。はい。
　ゲームでもアプリでも資料でもチラシでもおもちゃでも。

＜作り方＞

　パワポで以下のような素材を色付けてこしらえて、手前／奥の順序だけ気を付ければ簡単に作れます。

　大きく印刷して切り出すと福笑い（鬼笑い？）も出来そうですね。
　あとはお面にするとかも出来そう。目の穴と耳にかける輪ゴム付けて。
　幼稚園や保育園で節分イベントにでも使っていただけたら幸いです。

　鬼がかってるほどの怖いリアルな鬼も作ってみようかと思いましたが、さすがに用途がないですね＾＾；

－　PDS　PIS　研究室　室長　－

》今日のパワポ：[素材]スマホ本体をデザイン

スマートフォンの絵をパワポでチャチャっと作成

　パワポで資料に使う素材にしたり、アプリやホームページの挿絵などにスマホを登場させる機会が多くなってきたと感じます。
　画像探しても、ちょっとイメージと違ったり、背景透過されていなかったりとマッチしにくかったので、転用利くように、元をパワポで作って、"はめ込み画像”を変えるだけでそれらしく使いまわせるよう"素材の素材”を起こしてみましたので作り方をご紹介します。

　出来上がりですが、シンプルにこんなサンプルなものにしてみました。

＜作り方＞

　パワポで以下の様な画像を準備します。
　この時、下の例の青い背景は実際のはめ込み画像で良いのですが、「影」を"内側の上部と左部”にすると、完成時に奥行き感が出ます。
　（背景のコルクボードは別に要りません。透過具合を確認するために置いてます。）

　ボディ用の長方形（好きな色を）、グラデーションを放射で左上から光っているようにし、立体化（ただしフチが出っ張って内側が凹んでいるもの）。

　上部のインカメラとセンサー、スピーカー用に小さい黒いものを準備。

　画面内の画像を角長方形で準備。中身の絵は好きなものを。それなりなグラデーションでもＯＫ。この画像の内側左上に影を付ける。

　上から重ねる透過のガラスを準備。これもグラデーション放射で光っている（光を反射している）様にデザインし、膨らんでいる様な立体化。角は本体と同じ円弧サイズにしておく。
　※グラデーションの各色（白）毎に透過率を変えていくと徐々に透過するので結果的に白い部分が反射して見えづらい部分になる。

　これらをすべて重ねます。グリッドもうまく使ってちょうどいい位置関係になる様に。

　このままだと単に正面を向いたスマホにしかならないため、３Ｄ回転させるのですが、その前に全て「グループ化」させてから"３Ｄ回転”させます。
　あとは好きな角度、向きになるように値を調整して、例えば最初の画僧のようになるように傾けます。

　中の挿絵を入れ替えて、操作の順番を並べて表示させたり、故障や修理の様、奥行き感のある陳列、カラーバリエーションをさせたりと色々資料等のレイアウトの幅が広がります。いろいろ試してみてください。

－　PDS　PIS　研究室　室長　－

》今日のパワポ：[素材]紅葉の葉

パワポで紅葉の葉を簡単にデザインしてみた

　秋になってきました、といっても妙に暑い今日この頃ですが。。。

　Androidアプリの素材として、デフォルメ化された紅葉の葉を作る必要があり、パワポでそれらしく作ってみました。
　結果の画像はこんな感じです。

　ポイントは、７葉にしてみたことと、それぞれ独立したグラデーションにしてうっすら線が残るようにした（グルーピングしてからグラデーション入れると一塊になりのっぺりしてしまう）、あとは影を真後ろに入れてみたといった感じでしょうか。

＜作り方＞

　文字で書くのは難しいので、まずはパワポの絵を張っておきます。

　上の段と下の段はコピーした同じオブジェクトです。選択状態を念のため表したかったので、下の段だけを選択状態にして重なりがわかるようにしたつもりです。

　上の画像の左から、
　　①ハートと凸のオブジェクトを準備（色は⑤まで放置でよい）
　　②ハートを縦長にしてコピーし一つを反転（または回転）
　　③ハート同士を丁度隙間や凸凹が無いよう重ねグルーピング化
　　④全部で７つにコピーし、角度を付けておき、葉の元の凸も並べる
　　⑤中央下側に全て集めて移動していき、線は無しで、塗りつぶしは色のグラデーションを自由に付ける
　　⑥一つにグルーピング化して、うっすら影を付ける
　で完成です。

　サイズ感と角度の調整、位置関係は若干難しく、調整しながらそれらしくなるように合わせこんでください。
　色は、完成後に複製し、一度グルーピングを外してから、黄色や若草色、周りが赤で根元は黄緑など色々なパターンを作ることも出来ます。

＜用途＞

　元々今回はAndroidアプリで使いたかったため、こんな感じになります。

　パワポの素材として、挿絵にしたり、薄い色で大量に重ねて背景にしたりしてもいいかもしれません。ただし、今回のもみじの場合、３D化オブジェクトは・・・あまりお勧めしません。半端にリアリティが出てしまい、気持ち悪い感じになってしまいますので。

－　PDS　PIS　研究室　室長　－

今日のパワポ：PowerPointで花火を作る

パワポで打ち上げ花火

（上がったところをベース画像としてデザインしてみました。）

　いつものごとく、出来上がりイメージです。

　あくまでも今後の元となるデザインとして作ったものなので、他の色やアニメーションを想定して、ここまでのシンプルなものにする必要がありました。
　背景は花火が映える様にパワポで適当に黒から紺のグラデーションさせてみただけの物です。

＜図形の書式設定＞

　一つの粒のオブジェクト属性（図形の書式設定）は以下の通り。

• 塗りつぶし：グラデーション：パス、白（透過０％）→白（透過１００％）
• 線の色：なし
• 影：なし
• 反射：なし
• 光彩とぼかし：光彩の色適当、サイズ８ｐｔ、透過性５０％、ぼかし無し
• サイズ：高さ幅０．４ｃｍ

＜円形配置＞

　配置は少し厄介です。

　中心に一つ上記図形を完成させます。

　　（　・　）

　コピーを外側へ一方向だけグリッド使って、徐々に近づくように置いてみます。

　（最外形円周に近づくほど距離を詰めて近づけておく）

　　（─・　）

　その一列をグループ化し半径イメージ完成。

　　（━・　）

　半径イメージを反対側へコピーを置き１８０°回転。

　　（━・━）

　またその一列をグループ化して直径イメージ完成。

　　（━━━）

　真ん中に重複が出来ますが後で消す前提で無視。

　上の直径一直線をコピーし位置を合わせ、９０°回転しクロスにする。そしてグループ化。（もはやここまでくると罫線での表現は限界・・・。）

　　　　＿

　　　　┃

　　（━╋━）

　　　　┃
　　　　￣

　あとは、コピーして中心合わせて、適当な角度に回転を繰り返します。
　そして、すべてのグループ化を解除し重なったところを間引いたり隙間に移動したりして微調整します。この時、外に行くほど隙間が詰まっていくようにすると本物っぽくなります。
　出来上がりは上に示した通り。

＜主な用途＞

　画像化することで、パワポ自体に転用・花火挿絵デザインに使うことも出来ますし、アプリやホームページ、アイコンなどにも使えますね。
　上記ツブツブをすべてコピーし画像編集ソフトに張り付け、透過を活かしたままpng形式でエクスポートすれば完成です。その際、中心の粒が丁度画像の中心に来るよう位置合わせと画像サイズ調整だけはきちんと行っておく必要があります。

＜サンプル花火画像＞

　出来上がりのpngはこんな感じになりました。
　（1280x1280サイズの透過ありpng形式）

　背景が白いとただのツブツブにしか見えないですね・・・。黒などの背景上だと、それなりに光った玉のように見えてはくれます。クリックして拡大表示すると背景が濃い色になるので、是非、押してみてください。

　某アプリで使おうと思っていますが、アニメーションと組み合わせるとそれなりに花火っぽく再生させることが出来ました。ちょっと弾幕？細胞？っぽいイメージもありますが・・・。

－　PDS　PIS　研究室　室長　－

今日のパワポ：PowerPointでネオン調の図形を起こしてみる

　パワポでネオン調デザイン

いきなりですが、結果、こんな感じのデザインを。

＜作り方＞

　癖がありますが慣れれば融通利かせてある程度のことはできると思います。

　「線」や「図形の輪郭線」だけをごにょごにょしていきます。
　※文字は文字内の色をぼかせなかったのでなかなかそれらしくはいきません。

　例）

1. 線の幅６ｐｔ白色透過無しを作ります（上の画像の一番上）。
2. 次に「光彩」を施します。例えば青を５ｐｔ５０％透過させます（上の画像の２上から二番目）。
3. 最期に「ぼかし」を施します。２ｐｔくらいですかね。元が６ｐｔなので（上の画像の上から三番目）。

　同様に、何か図形を作った場合はまず塗りつぶしを無しにして、上と同じ線の処理をします。その後、コピーして好きな図形に変更するなり色を変えるなりするだけで、色々なネオン調の線を持った図形を作れ、簡単に使えます。

＜ポイント＞

　ポイントは、「ぼかし」です。「光彩」はすぐ目につき使いやすいので色々なオブジェクトで使われていると思いますが、どうしてもそれだけだとのぺっとした線や面が出来てしまいます。
　それに対し、ある程度元の線幅を太めに、明るい白系の色にしておき、“ぼかしで細める”ような処理を施すと、中心に発光物質があるかのような、まぶしい感じの色合いになります。

　中心をもっと薄く透過させると弱い光、透過を無くしていくと強い光の様に見せて変化を付けることも出来ます。もちろん線のグラデーションで透過を徐々に変えていけば、時間がたった“主砲”と今最もエネルギーのある“主砲”の位置の差を雰囲気として出すことも出来ます。ただ、奥行き感は出ません。。。ので、ドロップ図形や三角などを使うとそれらしく見せることはできるかもしれません。
　（某ライトセ〇バーみたいな絵も作ることできるかもしれないですね。）

パワポでエネルギーのありそう（？）な絵

　なかなか背景が黒い資料を作ることはまれかもしれませんが、アプリのアイコンやボタン、アイテム、効果エフェクトを考えるとチャチャっと作れれば便利でしょうか。
　もちろん、このオブジェクトをそのままコピペで画像編集系アプリ（例：GIMP）に持っていくことで透過含め画像ファイルを作ることが出来ます。


　ちなみに、上記画像の背景に使っている月の画像は、リアルにカメラで撮ったものを若干暗く加工しただけのものです。
　クレーターまでハッキリくっきり写っているのはすごいですよね。光学倍率性能が格段にあ上がってきたのをまさに実感です。。。

－　PDS　PIS　研究室　室長　－

今日のパワポ：PowerPointでパネルのデザインをいくつか起こしてみた。

正方形のパネルをパワポでデザイン　→　画像ファイル化

　たまたま「正方形のパネルをいくつかデザイン」する必要があり、こんな感じ物をガサガサと起こしてみたときの画像です。
　PowerPointとGIMSを使い、賞味数十分で完成です。

画像ファイル例：

　装甲パネル風（複数オブジェクト）

　カーボン調（複数オブジェクト）

　金属板

　 四角錐、正八面体（透過）

　 スクエアカット（透過）

　シューティングの的（透過）

　※ここでは個人的な都合上「四角」にごだわった画像だけをUPしています。
　円やドロップ、ひし形、台形、三角、星、ハート、等、他でも同様でアイディア次第で色々なことが出来ることに変わりありません。

手順：

　PowerPointで適当な画像を作ります。組み合わせたり、透過させたり、合体させてグラデーションを施したり、３D化したり、納得のいくまで加工します。また、透過に関しては、背景にどういった色調の物が来てもいいように、あえてテクスチャをいくつか背景にして透け具合を確認します。

　おすすめの加工項目は、

• グラデーション（角度やグラデーションの段階数、透過率の調整）
• 透過（単独透過もそうですが、重ねていく場合やグラデーション途中も重要）
• 光彩（ネオン調にしたい場合は、中央は白強めにして光彩を発色の良い色にするとぼんやり光っているように見える）
• ３D（いろいろ試して納得のいく立体感を探すしかない）
• 複数のオブジェクトを組み合わせてグループ化し、まとめてグラデーション等
• オブジェクトと文字を別のオブジェクトにしてグループ化。場合によってはワードアートを使う。

　辺りを駆使すると色々なことが出来ます。

　大きさも線や影は倍率変更時に対応しないのでなるべく使わず、また、GIMPに張り付けたときに妥当なピクセルサイズになるよう準備します。
　PowerPoint上ではこんな感じに作ります（一部、上の画像とは異なります）。

　アプリやソフトのアイコンやボタン、資料の挿絵、ちょっとした効果的な画像や背景を作るのであれば、
　　PowerPoint
　　↓
　　適当な画像ファイル化ソフト（透過用）
　でちゃちゃっと作るのが一番手っ取り早いと感じます。

参考：

　角のまるい四角の数字パネル（サイバー風）を作る機会がありました。
　こういった画像も容易に作ることが出来ます。

　サイバーな数字パネル（透過）

　銀のカギ穴

　金のカギ穴

　ほんとにパワポ？と信じてもらえないかもしれませんので。。。
　PowerPointでの編集画面も載せておきます。

　たいしたことはしてないんですよね。右下のバラしたオブジェクトを見てもらえればわかると思いますが、アイディアと想像力で何とかする！それだけです。はい。

－　PDS　PIS　研究室　室長　－

今日のパワポ：PowerPointの“線”だけで「指差しアイコン」の作成

　パワポで資料を作る際に、「ここ押してくださいね」や「ここタップ」「ここポイントだよ！」等、指で対象を指したい場面が多々あります。
　社内資料等であればMS-Officeのクリップアートで引っ張って使うだけでもいいのですが、今回は資料作成ではなく外部向けアプリケーションのチュートリアル画像としてほしかったので、完全オリジナルをパワポでチャチャッと作って画像化して利用する場面がありました。
　その際に、パワポで簡単に線だけで作るならこんな感じですかね？というサンプル画像を撮っておいたので上げてみたいと思います。（pptファイルそのものを上げると問題あるかと思いましたので、真似てみる方は頑張って作ってみてください。）

　使った線図形や大きさ、各オブジェクトの位置関係がなるべく解る様、選択状態の画像とし、書式のダイアログも出しておきました。
　グレーの線の物はグリッドに乗ったベースとなる仮完成形です。
　黒の線の物は、各パーツをそれぞれ切り離しておいてみたものです。
　グループ化し小さくした物も添えておきました。線を細くしてみた場合、色や影をつけてボタンの上に置いてみた場合などの絵も試しに起こしてみました。
　ざっくり正味３０分程度でしたでしょうか。
　アイコンっぽくシンプルにしてみましたが、こんな感じです。しょぼいですかね。。。

　もし、こんなもの作れるかしら？というものあれば、いつかトライしてみようかと思います。

－　PDS　PIS　研究室　室長　－