طراحی پترن در adobe xd با پلاگین Confetti

پلاگین adobe xd طراحی پترن
  • پیش گفتار این مقاله
  • ایمان کمالی در 1399/08/26

در این مقاله می پردازیم به معرفی پلاگین Confetti در Adobe XD ! با استفاده از این پلاگین می توانید پترن ( patern ) های فوق العاده زیبایی برای پس زمینه عناصر مختلف ایجاد کنید.

پلاگین adobe xd طراحی پترن
Array
(
    [0] => adobe xd
    [1] => Ui UX
    [2] => پلاگین های Adobe XD
)

در این مقاله می پردازیم به معرفی و آموزش پلاگین Confetti، این پلاگین مخصوص طراحی پترن در Adobe XD است.

ابتدا می پردازیم به تعریف پترن و سپس به سراغ معرفی پلاگین Confetti در XD می رویم!

در نهایت یک نمونه طراحی پترن در Adobe XD را با استفاده از این پلاگین به شما نشان خواهیم داد.

پترن ( pattern ) در طراحی رابط کاربری ( UI ) چیست؟!

پترن ها ( pattern) معمولا برای پس زمینه ( background ) عناصر مختلف و صفحات به کار می روند؛ این نوع پس زمینه شامل تصویر و یا تصاویری است که با نظم خاصی تکرار شده اند.

پیش از این با ایجاد Gradient در Adobe XD آشنا شدید، از Gradient ها نیز به عنوان پس زمینه رنگی استفاده می شد که یک یا چند رنگ به نظم خاصی در یک دیگر محو می شدند.

چند مثال از طراحی پترن ها در رابط کاربری ( UI )

در این جا چند نمونه پترن ( pattern ) برای مثال آماده کردیم :

طراحی پترن در adobe XD
پترن – 1

پترن بالا شامل چند تصویر شامل دایره، مثلث و .. است که با نظم خاصی تکرار شده است.

طراحی پترن در Adobe XD
پترن – 2

در پترن بالا نیز از تصاویر مختلف استفاده شده است.

طراحی پترن در Adobe XD
پترن – 3

مثال های بالا نمونه هایی از پترن بودند که شما نیز می توانید مانند آن را با استفاده از این پلاگین در XD طراحی کنید.

آموزش نصب پلاگین Confetti در Adobe XD

نصب Confetti در Adobe XD
نصب پلاگین در Adobe XD

در قدم اول پلاگین Confetti را در Adobe XD نصب می کنیم.

برای نصب پلاگین در ادوبی اکس دی می توانید به راحتی و خیلی سریع از پنل پلاگین ها عبارت ” Confetti ” را جستجو کنید.

در مقاله ای جداگانه این روند را آموزش دادیم، می توانید مقاله آموزش نصب پلاگین در Adobe XD را مطالعه کنید.

پس از نصب پلاگین می توانیم کار را برای ایجاد پترن شروع کنیم.

طراحی پترن در Adobe XD با استفاده از پلاگین Confetti

اما بریم سراغ اصل مطلب! یعنی طراحی پترن!

طبق مراحل زیر و مشابه تصاویر می توانید پترن ها را ایجاد کنید.

با یک مثال ساده کار با این افزونه را به راحتی فرا می گیریم :

قدم اول؛ ایجاد چند شکل ساده برای پترن

ابتدا باید بدانیم که پترن ما چه شکلی می شود!

این پترن شامل چند شکل ساده است که با Opacity ( تیرگی ) تصادفی ( Random ) ایجاد می شود.

بنابراین ابتدا در Artboard یک دایره، مثلث و مربع ایجاد می کنیم.

طراحی پترن در  Adobe XD
طراحی پترن در ادوبی اکس دی

قدم دوم؛ ایجاد پترن در پلاگین Confetti

پس از ایجاد اشکال آن را انتخاب می کنیم.

سپس از پنل پلاگین ها Confetti را انتخاب می کنیم. به صورت پیش فرض با فشردن دکمه RUN در پایین صفحه می توانید یک پترن ایجاد کنید.

اما برای ایجاد پترن بهتر تنظیماتی نیز وجود دارد که به آن ها می پردازیم :

تنظیم Columns ( ستون ) و Row ( ردیف ) در پلاگین Confetti

این گزینه برای تعداد ردیف ها و ستون هایی است که می خواهید پترن در آن تکرار شود.

هر چه میزان ردیف و ستون ها بیشتر باشد تکرار پترن نیز در نهایت بیشتر می شود.

گزینه Random Opacity و Random Rotation و Random Scale

با استفاده از این تنظیمات می توانید شفافیت و میزان چرخش اجزای پترن را مشخص کنید.

با این تنظیمات اجزا به صورت تصادفی کدری و میزان چرخش به خصوصی به خود می گیرند.

برای داشتن یک پترن زیبا بهتر است از این گزینه ها استفاده شود.

گزینه Random scale نیز برای اندازه های تصادفی است.

گزینه Randomize Colors

این گزینه رنگ بندی تصادفی بر اساس رنگ هایی که به پلاگین داده ایم را برای ما ایجاد می کند.

استفاده از این گزینه پترن را بسیار زیبا تر می کند، البته اگر می خواهید طرح سیاه و سفید باشد این گزینه باید غیر فعال بماند.

نمونه یک پترن ساده در Confetti

در این جا با اعمال تنظیمات یک پترن ساده را ایجاد کردیم.

پترن
پترن

امیدوارم از این مقاله لذت برده باشید.

شاد و پیروز باشید!