1. ホーム
  2. デザイン
  3. きれいすぎる!無料で使えるメッシュグラデーション素材がすごい

きれいすぎる!無料で使えるメッシュグラデーション素材がすごい

目次

  1. はじめに
  2. Free Mesh Gradient Collectionとは
  3. メッシュグラデーションを使ってモックアップを作ってみよう
  4. まとめ

はじめに

今日は無料で使えるメッシュグラデーション素材をご紹介します。

無料のグラデーション素材はWeb GradientsEGGRADIENTSなど増えていますね!

Web GradientsEGGRADIENTSの詳しい情報はこちらでご覧ください。
配色に迷った時に使えるカラーツール

今日は、普通のグラデーションよりもさらに新鮮なメッシュグラデーション素材を無料でダウンロードできるFree Mesh Gradient Collectionをご紹介します。

Free Mesh Gradient Collection

Free Mesh Gradient Collectionとは

Free Mesh Gradient CollectionはUI/UXのツールやモックアップ、無料素材などを配布しているLstore Graphics作った、100個のメッシュグラデーション素材です。

このように色あざやかなレインボーカラーのものから

少しトーンダウンしたパステルカラー調のもの、

淡いナチュラルカラーのメッシュグラデーションなど様々なパターンが用意されています。

すごいことにこちらのメッシュグラデーション素材はすべて無料でダウンロードすることができます。
ファイルはEPS, JPG, PNG形式だけでなく、Sketchライブラリ、Ai形式でもダウンロードすることができるので簡単に改変したり、現状のデザインに組み込んだりすることができます!

メッシュグラデーションを使ってモックアップを作ってみよう

せっかくなのでこちらのメッシュグラデーションを使ってモックアップを作ってみましょう!

今回作っていくものはこちらです!

今回はメッシュグラデーションの他にSketch Magic MirrorというSketchのプラグインを使っていきます。

必要なもの

STEP1. 必要素材の準備

メッシュグラデーションを用意する

メッシュグラデーションはダウンロードできたら、 Library.sketch というファイルを開いておいてください。
Symbolsというページにすべてのメッシュグラデーションが入っていることを確認した上で、使いたいメッシュグラデーションを選んでおきましょう。

デモでは 31. Portage を使用しています。

モックアップの用意

モックアップ素材をダウンロードし、お好きなモックアップ素材を決めます。

メッシュグラデーションがあるSketchファイルに、モックアップを移動しておきます。
ついでに、隣にモックアップの大きさほどのアートボードを用意しておきます(サイズは厳密に図らずともだいたいでOKです)

プラグインの用意

Magic Sketch (Mirror)よりプラグインをダウンロードしてください。

ファイルを解凍し、MagicMirror3.sketchplugin をダブルクリックしてインストールしておきます。

右のツールバーに、Magic Mirror 3という項目があるか確認します。
ない場合は、Sketchをリスタートしてください。

STEP2. Magic Mirrorでアートボードが使えるように設定する

モックアップの隣に用意してあるアートボードに使用したいメッシュグラデーションのシンボルを配置します。

また、モックアップに出したい模様がアートボードで表示されるように位置を調整します。

それができたら、そのままツールバーの Magic Mirror 3 という項目を見てみます。

こちらの「Include in Artboards」にチェックを入れます。

これでこちらのアートボードをSketch Magic Mirrorで使えるようになりました。

STEP3. Magic Mirrorでモックアップにメッシュグラデーションをあてる

ここまでできたら、メッシュグラデーションをあてたい箇所のシェイプを掴みます。

そしたら、またツールバーの Magic Mirror 3 という項目を見てみます。

現在選択しているシェイプの名前の隣に「No Artboard」となっているプルダウンを開き、先ほど登録したアートボードを選びます。

するとアートボードの色がモックアップに反映されます。

これで完成ですが、私の場合色が少し濃いので、元のアートボードのグラデーションを50%に薄くしています。

元のアートボードに変更を加えた場合は、メッシュグラデーションをあてている箇所のシェイプを掴み、ツールバーの Magic Mirror 3 の左端にある更新ボタンを押します。

これで完成です!

まとめ

以上、今日は無料で使えるメッシュグラデーション素材、Free Mesh Gradient Collectionをご紹介しました。

最近出てきている普通のグラデーション素材も綺麗ですが、さらにデザインに新鮮さを出すために、メッシュグラデーションは非常に便利です。

ぜひみなさんも使ってみてください。

この記事は
参考になりましたか?

PAGE TOP