2018年8月17日
デザイン
きれいすぎる！無料で使えるメッシュグラデーション素材がすごい
はじめに
今日は無料で使えるメッシュグラデーション素材をご紹介します。
無料のグラデーション素材はWeb GradientsやEGGRADIENTSなど増えていますね！
Web Gradients、EGGRADIENTSの詳しい情報はこちらでご覧ください。
配色に迷った時に使えるカラーツール
今日は、普通のグラデーションよりもさらに新鮮なメッシュグラデーション素材を無料でダウンロードできる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のプラグインを使っていきます。
必要なもの
- メッシュグラデーション素材
– meshgradients よりダウンロードしてください - Mockup素材
– minimalist mockup template sketch を使用します
– お好きなものでもOKです - Magic Mirror 3 (Sketchのプラグイン)
– Magic Mirror for 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をご紹介しました。
最近出てきている普通のグラデーション素材も綺麗ですが、さらにデザインに新鮮さを出すために、メッシュグラデーションは非常に便利です。
ぜひみなさんも使ってみてください。
デザインのお仕事に関するご相談
Bageleeの運営会社、palanではデザインに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか？
1
0
AUTHOR
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。
関連記事
アプリでもっと便利に！気になる記事をチェック！
記事のお気に入り登録やランキングが表示される昨日に対応！毎日の情報収集や調べ物にもっと身近なメディアになりました。
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
