آموزش adobe xd ایجاد دکمه gradient

درود به همراهان بیت بنگ! در این پست با آموزش adobe xd ایجاد دکمه gradient در خدمت شما مهربانان هستیم.

در پست های قبل در مورد افکت gradient در adobe xd سخن گفتیم، اگر می خواهید در این خصوص بیشتر بدانید ابتدا نوشته پیشین را بخوانید.

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

باید در نظر داشته باشید که نمی توانیم هر جایی از این افکت استفاده کنیم و این کاملا به طرح ما بستگی دارد!

می توانیم در پس زمینه artboard ها، دکمه ها و حتی نوشته ها از این افکت استفاده کنیم.

برای این آموزش ملزم به نصب هیچ پلاگین و افزونه ای در adobe xd نیستیم.

قدم اول؛ ایجاد یک پروژه جدید در adobe xd

برای ایجاد یک پروژه جدید adobe xd را باز کرده و به دلخواه یک artboard پیش فرض را انتخاب کنید.

من artboard اول یعنی iPhone X/XS/11 Pro را انتخاب کردم، شما می توانید هر کدام را که خواستید انتخاب کرده و کار را شروع کنید!

قدم دوم؛ ایجاد دکمه ها و تنظیم رنگ پس زمینه artboard در adobe xd

ابتدا برای تغییر رنگ پس زمینه artboard، آن را انتخاب کرده و از پنل سمت راست و از قسمت APPEARANCE درست مطابق تصویر زیر رنگ پس زمینه را تغییر دهید.

رنگی که من برای پس زمینه انتخاب کردم 292929# است.

شما می توانید رنگ پس زمینه دلخواه خود را انتخاب کنید!

برای ایجاد دکمه ها می توانید از ابزار چهارضلعی استفاده کنید.

گوشه های دکمه ها را می توانید کمی گرد کنید، برای انجام سریع این کار می توانید این ترفند را یاد بگیرید.

قدم سوم؛ ایجاد پس زمینه های gradient در adobe xd

در قدم آخر می خواهیم افکت های gradient را بر روی دکمه هایی که ایجاد کردیم پیاده سازی کنیم.

برای این کار ما از gradient نوع Linear استفاده می کنیم.

می دانیم که gradient در adobe xd بر دو نوع است :

• Linear Gradient
• Radial Gradient

در این آموزش از ما از نوع اول یعنی Linear Gradient استفاده می کنیم.

یکی از دکمه ها را انتخاب کرده و از پنل سمت راست ابزار تغییر رنگ پس زمینه را انتخاب کنید.

سپس مانند تصویر زیر بجای solid color گزینه Linear Gradient را انتخاب کنید :

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

• 7EF192
• 2DC897

مانند تصویر ابتدا و انتهای طیف رنگی را مشخص و سپس کمی به خط Gradient شیب می دهیم :

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

• EB658D
• F8798F

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

امیدوارم از آموزش adobe xd ایجاد دکمه gradient استفاده لازم را برده باشید.

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

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