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

آموزش adobe xd
  • پیش گفتار این مقاله
  • ایمان کمالی در 1399/04/06

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

آموزش adobe xd

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

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

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

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

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

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

 

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

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

آموزش adobe xd - ایجاد پروژه

 

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

 

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

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

 

آموزش adobe xd بیت بنگ

 

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

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

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

 

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

 

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

 

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

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

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

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

  • Linear Gradient
  • Radial Gradient

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

 

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

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

 

 

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

 

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

  • 7EF192
  • 2DC897

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

 

آموزش adobe xd تصویری

 

 

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

  • EB658D
  • F8798F

 

آموزش XD رایگان

 

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

 

Adobe XD آموزش

 

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

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

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