以下の内容はhttps://platoronical.hatenablog.com/entry/2020/03/03/212443より取得しました。


今勉強しておくとちょっとお得なデザイナーアドオンスキル10選

なんだかんだと毎日出歩いております。
こんばんわ、僕です。

今日はいつもと趣向を変えて『今勉強しておくとちょっとお得なデザイナーアドオンスキル10選』みたいな感じで紹介しようかなと思います!
独断と偏見なので、できたからと言って給与や待遇がアップできるわけではないですが、まぁ、割と面白いんじゃないかな?と。

お品書き
・フォトバッシュ(もどき
・パーティクル
・UI(分解→️再構築
トランジション
・文字詰め
・グラデーション考察
・テクノ模様ラフ
・イメージボード作成
・ファイル変換
・アニメーションエフェクト模写

フォトバッシュ(もどき)とは何かというと、まぁ下のような画像を作る技術。

f:id:platoronical:20200303204341p:plain

クライアントや発注時にあると便利なものとして僕は使っています。
主には、写真を加工して云々なのだけれども、僕の場合は時短ツールとして使っています。
そもそも絵がかけないし。
著作権などの問題があるので、基本的に自分が撮った写真でやるといいと思います。
思い出の一枚があら不思議という感じで。(思い出?

www.clipstudio.net

takaharasatoshi.com

 

パーティクルはここで書いているのは、AfterEffectsのような映像制作ツール、もしくはUnityのようなゲームエンジンに向けたもの。
2Dエフェクトを作るときに、知っておくと便利。
使うのは主に、発生地点、発生量(時間・間隔)、残存時間、移動、色変化(色彩・透明度)、などパラメーターは山ほどあるんだけど、以下のリンクを触ってもらえばわかるのだけれども、その瞬間にいくつのものがどれだけ作られたか、次にそれがどうなっていくのか。最後にそれがどうなるのか。
パーティクルシステムは山のようにあるんだけど、基本的にはその組み合わせでしかないので、ShurikenとかAfterEffectsのParticleWoldとかで、パーティクル、ウッ、ってなってる人も、一つずつ設定するだけなので、あまり気負いせず、たーのしーという範囲で触るといいと思います。

ics-creative.github.io

styly.cc

vook.vc

 

UI(分解→再構築)について、画面について考えたときに、レイアウト?無理無理ってなると思うんだけど、そんな難しいものではない。
ピクセル単位での仕掛けや仕組みは、UXというものに関与してくるので、画面についてのみ考えよう。
まずいつも立ち上げてるアプリでもゲームでも良いので立ち上げてみる。
スクショをして、以下のように、要素をバラバラにしてみる。
矩形で全部囲ってみてその要素に名前をつけよう。

f:id:platoronical:20200303210125j:plain

ツールは何を使ってもいいんだけど、時間があったらIllustratorなどで、ボタンなどのパーツを時前で用意してみるのもいい。
XDなんかを使ってもいいけど、その何かが持つ機能について自身で考えられることは宝になるはず。

liginc.co.jp

webdesign-trends.net

トランジションは、動画などの編集したときの画面の切り替わり方を考える。
例えば、ディゾルブというものを考えたときに、これを自分で作ったときにどういう物が必要なんだっけ?みたいな。
大抵はPremiereなどだと、ドラッグアンドドロップだけど。
知っておけばいいんじゃないでしょうか?という感じ。

pangaea.top

fujimotoyousuke.com

文字詰めは、デザイナーの時間を一番ぐらいに奪っているかもしれないところ。
練習サイトがあるので、参考にしていただきたい。

type.method.ac

フォントって打ちっぱなしだとあまりかっこよくない。
こういう考え方があるんだなーホーンと知ってるだけで、時間のある時の成果物のクオリティがアップすると思います。多分。
ひらがなカタカナ漢字がごちゃまぜになったときのタイポグラフィとして、ひらがなを若干小さくして、漢字を少し大きくするということもテク肉としてはある。
というか書いてて思ったけど、文字詰めというよりタイポグラフィといったほうがいいなと思ったけど、範囲が広くなっちゃうのでまぁ、文字詰めぐらいでいいんじゃないでしょうか。

ferret-plus.com

sole-color-blog.com

グラデーション考察は、そのままグラデーションなんだけど、結構グラデーションって難しくて、安易にやるとうまくいかない。
これはパターンなんかもそうだと思うんだけど、なんかうまくはまらないな?というときは少なくないだろうか?
みんながよく見てるサイト、きれいだなこれというグラデーションを、スポイトしてみると意外な色が混じっていたりする。
僕はあまり黒を入れたくない人間なのだけれども、そういう人間が作るものはあまりかっこ良くない。
あと、シンプルなグラデーションだと思っていたものが結構複雑なグラデーションだったりするので、ツールでババっと敷いてしまうことが多い現場でも、好きな作家さんのグラデーションを参考にしてほしい。

www.clipstudio.net

www.megasoft.co.jp

テクノ模様ラフは、下のような模様を書くときのテクニック。

f:id:platoronical:20200303211952p:plain

f:id:platoronical:20200303211958p:plain

たくさん書いて見るのがいいかな?と個人的には思います。
アイコン作るときのアイデアになったり、モーショングラフィックスの素材作成なんかでも役に立つと思う。
AfterEffectsのプラグイン出ないとできないこともあるけど、それを使うと、もうこのプラグインじゃないかーモロバレー。と思ってる人にはおすすめだと思います。
完全に手癖なので、どれが正解というのはなくて、自分が欲しい物が作れるようになるためにいくつか書いてみるといいと思う。
模様そのものを書くチュートリアルが見当たらないので、AEでの実践のものを紹介。

yahhoooi.net

vook.vc

イメージボードボード作成は、イラスト制作などの発注側の業務をしたり、世界観の共有などで利用する。
基本的には社外向けの作業というよりもプロジェクト内部での共有資料になると思う。
画像検索などで引っ掛けてもあまりマッシヴなものは見つからないのだけど、世界観共有するためのものなので、利用できるものははしたほうがいい。
Pinterestなんかで、プロジェクト単位でまとめたりするのいいけど、僕はちょっと高解像度なPDFなんかを作成することが多い。
【参考】

f:id:platoronical:20200303212240p:plain


www.marineroad.com

ファイル変換は、テクニックとしては現代では必須と言っていいと思う。
動画ファイルや静止画ファイルが読み込めないとき、プレビューをどう出すかということを考える。
これについてはあまり教材はないのだけれども、例えば、先方にphotoshopがないときは、googleDriveを利用したりすると、統合状態のプレビューが見れたりする。
動画ファイルも、この間知ったのだけれども、Premiereなんかだと、wmvが読めなくなっているので、mediaEncorderなんかを使ってH264のmp4なんかにしてあげると音声ファイルごと読み込めたりする。
完パケデータにはあまり参考にできないけど、どういうコーデックがあって、どのぐらいのビットレートを使っているかなどをザラっと眺めるといいと思う。
配信のときなんかも必ずこれは通るので毛嫌いせずにいりいろ試してほしい。

digitalidentity.co.jp

videolab.jp

nvr.bz

 

アニメーションエフェクト模写が最後。
これはパーティクルで表現できないアニメ表現でのエフェクトを求められたときに、どのぐらいのコマ数で、何が行われているのか、を分解するもの。
やり方としては、好きなスマホのゲームを画面収録ツールなんかでアドンで、攻撃時の特別演出なんかを静止画で書き出し、イラレなどで、トレース、AfterEffectsや好きなツールで再構築、再生、問手順で確認する。
すごい地味なんだけど、コマ送りするだけではなくて、自分の手で模写をしてみると、なるほど?こうなってるのかー、みたいに思うので結構おすすめ。


ここは本当は動画のカーブデザインなんかを書こうと思ったんだけど、せっかくの学習なので最後に差し込んでみた。

ここは深堀りして知りたいというのがあったら、あまり僕はどれの専門家でもないのだけれども、答えられる範囲で答えたいと思う。
参考にさせていただいた方がたありがとうございました。




以上の内容はhttps://platoronical.hatenablog.com/entry/2020/03/03/212443より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14