Drip 'n' Snip

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け

Sketchのプラグイン「Looper」でオリジナルの幾何学模様がかんたんに作れる!


こんにちは!最近はノンカフェインコーヒーばかり飲んでる僕です!

みなさん夏と言えば何を思い浮かべますか?

夏といえば夏祭り、夏祭りといえば浴衣、浴衣といえば和柄。

和柄!?

何かしらのデザインをしていると、オリジナルの模様やマークが欲しくなるのですが、Sketchのプラグインを探していたら「Looper 2.0 sketch plugin」という面白いプラグインを見つけたのでご紹介します。

※Looperを使用するにはMac専用のデザインアプリ「Sketch」が必要です。1ヶ月無料で使うことができるので、興味があるかたはお試しください!

Looper 2.0 sketch plugin

Sketchpacks for macOSまたは、Looper 2.0 sketch pluginのサイトからダウンロードできます。

どんなことができるかというと、キリンの模様を作ったり

怖ッ!

きりんさんのアウトラインで、

こんな感じの模様を作ったり

なにこれ!かっこいい!

オリジナルの模様が簡単に作れるので、試してみましょう!

使ってみる

ループさせたい素材を作る

最初にSketchで図形を作成します。ただの四角でも、線でも、文字でもOKです。

今回はグラデーションのアウトラインを作ってみました。

できた図形を選択して、メニューの「Plugin」→「Looper」→「Loop」を選ぶか、⌘Lを押します。

次の画面が出たら準備完了。

遊んでみる

6つのメニューがあるので、ざっくり解説します。

Duplication count

いくつコピーを作成するか指定します。デフォルトだと50になっています。
他のオプションを選択してから調整するといい感じになります。

Scale

コピーの大きさが変化します。

Pixelを選ぶと、100px→110px→120pxと増えます。

Percentageを選ぶと、100px→110px→121px→133.1pxと割合で大きくなります。

Randomlyでは誤差範囲内でランダムな大きさになります。

Move

コピーの中心点が移動します。

Horizontaly(水平)、Verticaly(垂直)、Diagonally(斜め)、Ramdomly(ランダム)から選び、移動する量をピクセル単位で入力します。

Form a grid

Moveとは違い、縦横に図形を繰り返し、パターンを作成します。

ColsとRowsで繰り返す数を指定し、marginで図形同士の距離を指定します。

Rotate

図形のコピーを回転させます。

Auto rotate〜では、Duplication countの数で1周するように調整してくれます。

Manually rotateでは指定した角度や、加速度を入力して回転させることができます。

上はManualy rotateのLinearで。下はManualy rotateのSinunodal(正弦波)で作成したものです。
Sinunodalは一定以上回転すると戻ってくるため、重複が発生しやすくなります。

Update opacity

コピーした図形の透過度を設定します。徐々に透過するか、ランダムに透過するかを選べます。

組み合わせてみる

Grid + Rotate

ランダム回転とグリッドを組み合わせました。

Mask + Rotate + Opacity

図形を一部マスクした後に、回転、透過度を下げていく設定にしました。

まとめ

SketchはIllustratorと比べるとパスの扱いが少しニガテですので、このようなプラグインがあるとSketchで完結できる作業が増えるのでとっても便利です!

僕も今後活用していこうと思います。

それでは、また!

NEXT
音楽に環境音を重ねられる「NatureSpace」でノイズライフ

  関連記事

eycatch
SublimetextからPhpStormに乗り換えた7つの理由

こんにちは。 弊社では基本的にwebサイト・wordpressサイトの作成や構築 ...

artboard
何かと話題の会計ソフトfreee。便利な点や何故今MFと揉めているのか?

こんにちは。2年位個人事業主として働いていた事もある僕です。 さらにその前には4 ...

sharemouse
2台のパソコンを1つのパソコンのように扱えたらな〜?Macとwindowsを1組のマウスとキーボードで使えたらな〜〜!

こんにちは! Macが急速に普及して、「自分のはMacだけど、家のPCはWind ...

google drive
Google Driveでスマホの写真容量を無限に増やす!

こんにちは、基本的にスマホは通信機器というよりはほぼカメラの僕です。 ZENFO ...

artboard
jQuery Lightboxでページの読み込みを早くしよう!

Wrodpressを使った画像系SEO対策記事2連続ですが、ご容赦くださいませ。 ...

-アプリ/サービス, ノウハウ
-