آموزش adobe xd – ساخت افکت RGB

آموزش ادوبی اکس دی
  • پیش گفتار این مقاله
  • ایمان کمالی در 1399/03/27

درود به همراهان بیت بنگ! در این آموزش adobe xd ساخت افکت RGB را برای یک دکمه به شکل زیر قدم به قدم با هم کار خواهیم کرد.   ایجاد یک دکمه در adobe xd همان طور که می بینید یک یا چند button (دکمه) داریم که با عمل hover (قرار گرفتن موس بر روی

آموزش ادوبی اکس دی

درود به همراهان بیت بنگ!

در این آموزش adobe xd ساخت افکت RGB را برای یک دکمه به شکل زیر قدم به قدم با هم کار خواهیم کرد.

 

ایجاد یک دکمه در adobe xd

همان طور که می بینید یک یا چند button (دکمه) داریم که با عمل hover (قرار گرفتن موس بر روی عنصر) افکت RGB را نمایش می دهند.

برای این کار اولین قدم باز کردن adobe xd و ایجاد یک پروژه جدید است :

 

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

 

برای این کار من artboard را برای iphone x/xs/11 pro تنظیم می کنم.

حالا می توانیم کار را شروع کنیم.

 

آموزش adobe xd - artboard

 

قدم اول ایجاد یک مستطیل ساده است تا با استفاده از آن دکمه را ایجاد کنیم.

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

برای این کار می توانید روی نقطه آبی رنگ گوشه مستطیل کلیک کرده و آن را به داخل بکشید.

راه بعدی تنظیم از طریق پنل property inspector است.

این پنل که در سمت راست قرار دارد ویژگی های یک عنصر را نمایش می دهد.

در این پنل بخشی برای ویرایش ظاهر عنصر وجود دارد به نام APPEARANCE که طبق تصویر میزان radius گوشه های عنصر را می توان در آن تنظیم نمود.

 

آموزش adobe xd- ساخت دکمه

 

مرحله بعدی تغییر رنگ دکمه است که باز هم از قسمت APPEARANCE پنل سمت راست قابل تنظیم است.

من رنگ پس زمینه آن را به 090676# تغییر دادم همچنین کادر یا border آن را حذف کردم.

برای حذف border درست در زیر قسمت تغییر رنگ پس زمینه می توانید تیک Border را بردارید.

 

آموزش adobe xd - تغییر بک گراند

 

 

حالا می خواهیم این دکمه در محور افقی در وسط قرار گیرد.

برای این کار در پنل سمت راست یعنی پنل property inspector طبق تصویر گزینه Align Center Horizentally را انتخاب می کنیم.

 

آموزش adobe xd - مرکز قرار دادن عناصر

 

ایجاد مستطیل های RGB

 

حالا زمان است تا مستطیل های رنگی را زیر دکمه قرار دهیم تا با hover کردن نمایان شوند.

برای این کار درست مثل زمانی که دکمه را ایجاد کردید سه مستطیل ایجاد کنید و لایه این سه را زیر لایه دکمه قرار دهید.

ابتدا بیایید مستطیل ها را ایجاد کنیم و نام آن ها را red,green و blue بگذاریم :

آموزش adobe xd

 

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

برای تغییر نام هر لایه هم به این شکل عمل می کنیم :

adobe-xd-rename-layer

 

حالا این سه مستطیل را زیر دکمه قرار دهید، نام لایه دکمه Rectangle 1 است!

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

 

ایجاد افکت

ایجاد کامپوننت

با قرار گرفتن موس بر روی دکمه در حالت عادی، شکل آن به این صورت در خواهد آمد!

حالا باید از مجموعه دکمه و مستطیل ها یک کامپوننت بسازیم تا بتوانیم آن را مدیریت کنیم.

همه لایه ها را انتخاب کرده و روی آن راست کلیک کنید :

ایجاد component در adobe xd

 

گزینه Make Component را انتخاب کنید.

حالا یک کامپوننت ساختیم و می توانیم برای افکت hover از آن استفاده کنیم.

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

با انتخاب کامپوننتی که ساختیم سمت راست می توانیم ویژگی های این عنصر را در  property inspector مشاهده کنیم.

برای ایجاد hover می بایست یک state از نوع hover ایجاد کنیم.

adobe xd property

 

درست روبروی گزینه Default State یک + است که می توانیم با آن وضعیت جدیدی ایجاد کنیم.

طبق تصویر زیر یک وضعیت جدید ایجاد کنید و نام آن را normal بگذارید :

آموزش adobe xd ایجاد وضعیت جدید

 

این حالت معمولی دکمه است بدون نمایش افکت!

یک مرتبه دیگر یک وضعیت ایجاد کنید این بار از نوع Hover state (درست مثل مرحله قبل طبق تصویر بالا و این بار با انتخاب گزینه زیرین)

حالا وضعیت اول را که خودتان ساختید انتخاب کنید و پس از اینکه مطمئن شدید طبق تصویر وضعیت انتخاب شده مستطیل های رنگی را مخفی کنید :

 

هر سه مستطیل را مخفی کنید، تنها کافی است بر روی علامت چشم کلیک کنید.

 

آموزش adobe xd مخفی کردن

 

نگران وضعیت Hover نباشید، در وضعیت بعد مستطیل ها به خوبی نمایش داده می شود، می توانید وضعیت را روی hover قرار دهید تا متوجه این موضوع بشوید.

 

گام آخر!

حالا وقت آن است تا کار را تکمیل کنیم.

طبق تصویر زیر به محیط Prototype می رویم.

در این محیط می توانیم عملیات Hover را مشخص و فعال کنیم.

با ورود به این محیط و در artboard بر روی دایره آبی رنگ کلیک کنید تا بگوییم با چه اتفاقی چه عکس العملی رخ دهد!

adobe xd آموزش

 

در آخر طبق تصویر زیر Trigger را بر روی hover قرار دهید تا مشخص شود با hover کردن چه اتفاقی بیفتد.

سپس Destination را بر روی وضعیت Hover قرار دهید.

آموزش adobe xd interaction

 

حالا می توانید با اجرای پیش نمایش نتیجه را ببینید.

آموزش adobe xd پیش نمایش

 

سوالی دارید؟

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

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