apeescape2.com
  • メイン
  • ヒントとツール
  • デザイナーライフ
  • バックエンド
  • ライフスタイル
ツールとチュートリアル

スケッチとルーパーを使ってすぐに心を曲げるイラストを作成する

デザインのユニークでクリエイティブなイラストを作成するのにどのくらいの時間を費やしていますか?おそらくあなたが望むよりはるかに長いです。

良好な継続のゲシュタルト原理

ルーパー 完全にオリジナルなイラストを作成しながら、イラストの時間を短縮できます。これは、オブジェクトを複数回複製、移動、回転することで独自の形状やパターンを作成できる新しいSketchプラグインであり、驚くようなイラストになります。

今日は、描画スキルがなくても、アプリのデザイン、バナー、背景の素晴らしいイラストを20秒以内に作成する方法を紹介します。



オリジナルをダウンロードしてください スケッチファイル チュートリアル中にフォローするために作成しました。

なぜルーパー?

オリジナルのイラストを作成するためにさまざまなプラグインやアプリを調査してきましたが、Looperは、自分で作成することだけを夢見ていた複雑なイラストを数秒で作成できるため、最も効果的であることがわかりました。通常またはランダムなパターン、背景、さらにはロゴタイプの形状など、さまざまなタイプのイラストを作成できます。

スケッチとルーパーで作ったイラスト

チュートリアル

一般的なルーパーフローとヒント

Looperを使用するときは、常に1つの単純な形状から始める必要があります。 「ループ」を実行するには、CMD + Lを使用するか、プラグインメニューから[PLUGIN]> [LOOPER]> [LOOP]をクリックします。 Looperは、単一のレイヤーまたはレイヤーのグループで使用できます。

複雑で大きなパターンを作成している場合、コンピューターが結果をレンダリングするのに長い時間がかかる可能性があることに注意してください。また、キーボードの上下の矢印を使用して値を設定すると、Looperの方がうまく機能することに気付きました。 Shiftキーを押しながら上矢印または下矢印を使用すると、値が1ではなく10ずつ増加します。

Sketch用のLooperプラグイン–フロー

抽象的な形

ルーパーとスケッチで作られた抽象的な形

Looperがどのように機能するかを理解する最良の方法は、完全に抽象的なものを作成することです。ベクトルツールから始めて、好きな形を描きます。次に、ループ(CMD + L)を実行し、設定を自由に試してみてください。

スケッチ形状の設定 スケッチ設定用のルーパー

これと同じ方法で、完全な背景を作成することもできます。レイヤーにグラデーションを追加すると、非常にクールな効果が得られます。

VisualStudioユニットテストチュートリアル

スケッチとルーパーで作られた最終的な抽象的な背景

スケッチ形状の設定 スケッチ設定用のルーパー

ApeeScapeデザインブログを購読して、eBookを受け取ります

シンプルなパターン

スケッチとルーパーで作られたパターン

Looperは、抽象的な形状を生成するだけでなく、単純な、創造的な、またはランダム化されたパターンを作成するのにも理想的です。上記の例では、1つの長方形を使用してパターン全体を形成しました。均等に分散されたパターンを作成するには、ルーパーの「グリッドの形成」セクションを使用します。回転と不透明度によってパターンをランダム化しました。これにより、10秒未満で素晴らしい効果が得られました。

Looper forSketch内でのパターン作成

スケッチ開始形状設定 スケッチパターン設定用のルーパー

装飾品

スケッチとルーパーで作られた3つの装飾品

Looperを使用して、数学的に完璧なオーナメントを作成することもできます。垂直線または水平線を描画し、その横にいくつかの要素を追加します。線と円を使った簡単な例を作成しました。以下を見て、コピー数を変更するだけで何種類のオーナメントを作成できたかを確認してください。シェイプのコピー数をできるだけ少なくして、1つずつ増やすことをお勧めします。このようにして、パターンが時間の経過とともにどのように変化するかを確認できます。

SketchとLooperによるオーナメントの作成

デフォルトの回転機能のみを使用し、2つのコピーから始めていることに注目してください。

開始形状をスケッチする スケッチ設定用のルーパー

3D効果

SketchとLooperで作成した3D画像

メモリリークを特定する方法

Sketchレイヤーをいじってみると、印象的な3D効果を作成できることに気づきました。 3Dのような画像を作成するための鍵は、開始形状にグラデーションと影を追加し、「移動」セクションでこの形状を複製することです。回転とスケーリングはここでも役立ちます:

スケッチ開始形状設定 スケッチ設定用のルーパー

パーティクルスフィア

SketchとLooperのパーティクルで作成された球

1つのドットを複製することで何を構築できますか?一つには、粒子から作られた球を作成することができます。ランダム化されたスケールと不透明度でたくさんのドットを生成した後、Sketchで楕円形でそれらをマスクするだけです。

開始形状をスケッチする スケッチ設定用のルーパー

波の効果

1本の直線で何ができるでしょうか。 1つの軸に沿って線を数ピクセル移動し、非常に穏やかに回転させることで、次の例のようにクールな波を作成できます。

スケッチとルーパーで作られた波

開始形状をスケッチする スケッチ設定用のルーパー

Tron 1982 –建設グリッド

SketchとLooperで再現されたTron3Dに触発された画像

最後になりましたが、Tronからイラストを再現しましょう。線と長方形の2つの単純な形状を複製することにより、遠近法グリッドを作成できます。

開始形状をスケッチする

あなたがしなければならないのは、これらの形でルーパーを2回使用することです。まず、スケールをパーセントでインクリメントして長方形を複製します。 [不透明度]セクションで、すべてのインスタンスの不透明度を上げることができます。 2番目のステップでは、デフォルト設定で[回転]を使用して行を複製します。

HTMLでブートストラップを使用する方法

スケッチとルーパーで再現されたトロン3Dイラスト

Etvoilà! 20秒以内に作られたトロンのような遠近グリッド!

スケッチ設定用のルーパー スケッチ設定用のルーパー

遠近グリッドを使用して、次の例のように他の3Dイラストを作成できます。

イラストの作成に使用されるパースペクティブ構築グリッド イラストの作成に使用されるパースペクティブ構築グリッド

その他の例–シドニー

この時点で、ルーパーが本当に複雑なイラストを作成するための無限の可能性を提供していることにおそらく気づいたでしょう。以下に、さらに3つのインスピレーションを与える例を作成しました。それぞれ、開始形状と、それらを再現したり、独自のイラストを作成するための基礎として使用したりできるように、それらを作成するために必要な設定があります。

スケッチとルーパーで描かれたシドニーオペラ

スケッチ開始形状設定 スケッチ設定用のルーパー

ほぼデススター

スケッチとルーパーで描かれたほぼ死の星

スケッチ開始形状設定 スケッチ設定用のルーパー

深海

スケッチとルーパーで描かれた深海の生き物

スケッチ開始形状設定 スケッチ設定用のルーパー

•••

ApeeScapeデザインブログの詳細:

  • eコマースUX–ベストプラクティスの概要(インフォグラフィック付き)
  • 製品設計における人間中心の設計の重要性
  • 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
  • モバイルインターフェースのヒューリスティック原則
  • 予測的デザイン:魔法のユーザーエクスペリエンスを作成する方法

VulkanAPIの概要

技術

VulkanAPIの概要
WordPressで排他的なカスタム分類法を作成する方法

WordPressで排他的なカスタム分類法を作成する方法

バックエンド

人気の投稿
評価比率:財務専門家が知る必要のある主要な指標
評価比率:財務専門家が知る必要のある主要な指標
フリーランスのデザイナーとしてのリモートワーク
フリーランスのデザイナーとしてのリモートワーク
シニアフロントエンドエンジニア、スタッフポータルキャッシュチーム
シニアフロントエンドエンジニア、スタッフポータルキャッシュチーム
長年にわたるボタンデザイン:ドリブルタイムライン
長年にわたるボタンデザイン:ドリブルタイムライン
NvidiaShield-Androidゲームコンソールの別の見方
NvidiaShield-Androidゲームコンソールの別の見方
 
生成的敵対的ネットワークを使用してランダムノイズからデータを作成する
生成的敵対的ネットワークを使用してランダムノイズからデータを作成する
一度書けばどこにでも展開:いつネイティブに移行するか?
一度書けばどこにでも展開:いつネイティブに移行するか?
最適化されたソフトウェア統合:ApacheCamelチュートリアル
最適化されたソフトウェア統合:ApacheCamelチュートリアル
ページ速度101:モバイルUIデザイナーの基盤
ページ速度101:モバイルUIデザイナーの基盤
ブルータリストのWebデザイン、ミニマリストのWebデザイン、そしてWebUXの未来
ブルータリストのWebデザイン、ミニマリストのWebデザイン、そしてWebUXの未来
人気の投稿
  • 諮問委員会の作り方
  • ロボットはどのプログラミング言語を使用しますか
  • sとccorpllcの違い
  • 各ユニットは、のフォーマットを作成します
  • これは良いアプリ設計の実践ですか?
  • ユニットテストc#チュートリアル
カテゴリー
技術 人とチーム プロジェクト管理 仕事の未来 アジャイルタレント 財務プロセス 投資家と資金調達 Webフロントエンド ヒントとツール 革新

© 2021 | 全著作権所有

apeescape2.com