Blobmakerを使って、簡単に良さげなデザインのアイコンや画像を作ってみる
下書きフォルダで眠っていた記事を掘り起こして、公開します。 少し前に書いたものとなります。
Blobmakerとは？
Product huntで紹介されていた Blobmaker というのを使ってみたかったのでこの記事を書いている
名前の通り blob(しみのようなもの) を作るデザインツールで、こういうblobデザイン(?)というのはここ数年のwebデザイン界隈で流行っているよう。
確かに言われてみると、よく見かける。
ちなみに参考サイトとかも紹介しつつ、書いてくれている下記の記事がわかりやすかった。
早速Blobmakerを使ってみる
実に直感的に使えるので、使い方などは書かない。
自分のほしい形状を作成してダウンロードボタンを押すだけ。
試しにアイコンを作ってみたいので、商用利用可、かつ無料で使えるFLAT ICON DESIGNの素材を使って試してみる。
追記：Blobmarkerの使い方を解説されている方の記事を見つけました。
試しにHTMLでSVGを重ねてみた
HTMLだけで２枚のSVG画像を重ねたものを作成してみた。
ただし無理やり作ってみた感じが半端ない。。。
ココらへんもっとうまくやりたいところ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Blob sample</title> </head> <body> <div> <div style="width: 500px;height: 500px;background-image:url([blob画像パス]);display: flex;justify-content: space-around;align-items: center;background-position: left;"> <img width="200" height="200" src="[icon画像パス]" alt="icon"> </div> </div> </body> </html>
