2018年8月17日

デザイン

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

目次

  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をご紹介しました。

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

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

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP