こんなデザイン憧れたことありませんか？
実際やってみるにあたり、画像の処理に手こずった私の備忘記録としてブログにします。
どなたかの役に立つことがあれば嬉しいです。
ではでははじめていきましょう！
ありきたりなデザインから抜け出したかった
デザインをはじめて、最初のうちは
ブロック配置しただけ的な、のっぺらいWebページを作ることが多くて、
画像も切りっぱなしのかくかく、真四角みたいなものばかり。
せめて角をとっておしゃれにしよう！そう思っても4つ角を丸めるくらいで
何だかダサい。
何だかって言うか…明らかにダサい。
はい、そこでです！今回はそのダサさを抜け出すべく、
気泡のような、雲のような形で切り抜いた画像に挑戦してみよう！と考えたのです。
できなくもないけどセンスが必要なやり方
しかし、どうしたものか…
まず思いつくところから…
ペンツールで形を作って切り抜くなんてことをやってみた。(XDでやろうとしました)
だけどシェイプ自体にセンスがないし、そもそもガタガタ。
こりゃだめだ、全く使えん！仕方ない、ググるか…そう思った矢先‥
私の面倒をみてくれているメンターと話す機会があって、
「そうそう、こういうのやりたいんですけどなんかいい方法って無いでしょうか…」っていう相談をしました。
流石ですね、確かジェネレーターがあった気が…と教えてくれたのがこちらです↓↓↓
ジェネレーターブロブメイカー
※ちなみにジェネレーターという言葉がいまいちわからんという私みたいな人のために用語を説明すると。。
早い話が勝手に作ってくれるヤツってことですね！
使い方はいたって簡単
右側のメーターを触って角の数を決めたり大きさを変えたりした後、
画像下のチェンジブロブ(change blob)というボタンをクリックすればボヨンボヨンと
形を変えたものを作ってくれます。
モノが枠外に飛び出して全体が見れないときはチェンジブロブ(change blob)の下にある
センターブロブ(center blob)をクリックすれば姿を表してくれます。
更にその下にあるチェンジブロブズポジションズ(カタカナ長くてうぜーな)を押せば
色んな場所に動き回って見え方？見せ方？を提案してくれます。
そして、右側のイラストはもう見たらわかるかと思いますが、
色を変えたり、グラデーションをかけたりもできるし、格子柄を入れてみたり
画像をここではめ込んだりできます。(URLではめ込みになるのでちょいとめんどい)
ちなみに、私は現在XDを使っているので、ここではシェイプのみをダウンロードしてXDに落とした後、
画像をドラッグ・アンド・ドロップで一発切り抜きにしました。
ダウンロードのしかた
はい、ダウンロードの仕方ですが、ブロブを作るボタンたちが並んでいる左右に２つ画像が並んでいます。
一つはSVGでダウンロードするタイプ、もう一つは…なんかようわからん。から放置。
でもいいの、知らんくてもできるから！
てことでSVGで落としてください。
ダウンロード後は各々のツールを使ってそのシェイプで切り抜くだけです。
はい、簡単でしたね。
ではでは、うっとおしい記事を読み飛ばして使い方だけ知りたいという方のために
適当なまとめに参りたいと思います。
まとめ
１．”Blobs”を開く
２．適当に右のバーを動かしていい感じの形を作る
３．SVGでダウンロードして各々のツールで切り抜く！
たったこれだけ！
記事にするほどでもなかったヨネーと今更思ったけど、読んでくださった方々、
最後までお付き合いありがとうございました♡
