آموزش adobe xd شبیه سازی انیمیشن آب

آموزش adobe xd

درود به همراهان بیت بنگ! در این مقاله با آموزش Adobe xd طراحی انیمیشن آب در خدمت شما هستیم.

همچنین در این آموزش با ایجاد بازتاب نور نیز آشنا خواهید شد!

در این جا می توانید نمونه نهایی انیمیشن آب در Adobe xd را مشاهده کنید :

ایجاد یک پروژه جدید در  Adobe XD

مثل همیشه با ایجاد یک پروژه جدید در Adobe xd کار را شروع می کنیم!

در این آموزش من به سراغ Artboard web 1920 می روم.

پیشنهاد می کنم شما نیز آرت بورد با عرض بیشتر از موبایل در نظر بگیرید.

آموزش adobe xd

طراحی یک shape برای نمایش آب با استفاده از ابزار pen در  Adobe XD

برای این کار از منو سمت چپ ابزار Pen را انتخاب کنید.

می توانید خیلی سریع تر برای انتخاب ابزار  pen در Adobe XD کلید P را فشار دهید.

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

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

Border را حذف کرده و به آبجکت پس زمینه آبی بدهید.

در ویدئو زیر می توانید چگونگی این کار را مشاهده کنید :

حال یک کپی از چیزی که ایجاد کردید گرفته و در سمت راست به آبجکت بچسبانید.

دقیقا باید به یکدیگر چسبیده باشند و سپس هر دو را انتخاب کرده و با کلیک راست و انتخاب گزینه Group آن ها را در یک گروه قرار دهید.

برای ایجاد گروه در  Adobe XD راه ساده تری هم هست!

آبجکت ها را انتخاب کرده و کلید CTRL + G را فشار دهید.

در ویدئو زیر می توانید چگونگی انجام این مرحله را در XD مشاهده کنید.

نام گروه را به Water تغییر دهید.

ایجاد گوی شیشه ای در XD

حالا می خواهیم یک گوی شیشه ای ایجاد کنیم.

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

دقت کنید که منظور موج آب اول در سمت چپ است!

همچنین می توانید اندازه موج آب را کمی کوچک تر کنید.

برای درک بهتر به ویدئو زیر دقت کنید :

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

نام Mask Group را به Water Front تغییر دهید.

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

یک کپی از Water Front گرفته و نام آن را Water Back بگذارید.

رنگ پس زمینه موج آب در Water Back باید تیره تر باشد.

حالا گروه water از Water Back را انتخاب کرده، به سمت چپ بکشید تا انتهای آن به سمت راست دایره برسد و سپس گزینه Flip Horizental را انتخاب کنید.

در آخر اگر نمایش آن را غیر فعال کردید آن را فعال کنید.

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

یک کپی از artboard گرفته و در آن Water Front را تا آخر به سمت چپ و Water Back را تا آخر به سمت راست بکشید.

ایجاد INTERACTION برای انیمیشن آب در XD   

به محیط Prototype می رویم.

مانند ویدئو زیر Trigger را بر روی Time تنظیم کنید.

می خواهیم به صورت خودکار انیمیشن اجرا و تکرار شود.

همچنین نوع Action را باید Auto-animate انتخاب کنیم.

پس از آن حالت بازگشت را مانند مرحله قبل اما با Duration صفر تنظیم می کنیم.

افزودن گوی شیشه ای به طرح!

برای این کار با استفاده از ابزار رسم دایره، یک دایره متناسب با طرح رسم کنید.

سپس پس زمینه آن را با استفاده از افکت Gradient تغییر دهید.

آموزش adobe xd

امیدوارم از این آموزش adobe xd لذت برده باشید!

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

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