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

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

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

1

0

AUTHOR

sasakki デザイナー

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

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

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

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ

しまだ デザイナー

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

Miu マーケター

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

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

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

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

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

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

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

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP