چطور یه طرح نئومرفیسم رو با XD طراحی کنیم

خوب من توی پست قبلی در مورد نئومرفیسم براتون نوشتم و گفتم توی پست های بعدی بیشتر درموردش براتون مینویسم و الان رسیدیم به پست های بعدی ;) توی این پست می خوام بهتون بگم چطور میشه توی Adobe XD یه طرح نئومرفیسم رو پیاده کنیم چیزی شبیه تصویر زیر

اصلا میدونید چرا می خوام اینو توی Adobe XD بهتون آموزش بدم؟ چون به صورت پیش فرض تنظیمات XD این امکان رو به ما نمیدن که دو سایه داشته باشیم یا سایه های داخلی ایجاد کنیم و باید از چند ترفند استفاده کنیم.

خوب بریم سر وقت آموزش

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

(کد رنگ سایه سفید در تصویر اشتباه نوشتم کدش #FFFFFF هستش با عرض معذرت)

اول یه Artboard با ابعاد 1080 عرض و ارتفاع 660 ایجاد میکنیم و رنگ زمینه رو باتوجه به تصویر بالا انتخاب میکنیم، بعد یه مستطیل با ابعاد 140*360 با همون رنگ زمینه میکشیم و سایه ای با مشخصات x = 5 y = 5 و مقدار blur = 11 با کد رنگ #A3B1C6 براش اعمال میکنیم.

تا اینجا چیزی شبیه به تصویر زیر داریم

مجدد یک کپی از مستطیل میگیریم و اینبار تنظیمات سایه ها رو به x = -5 y = -5 blur = 11 و کد رنگ #FFFFFF تغییر میدیم مانند تصویر زیر

خوب حالا دوتا مستطیل رو روی هم قرار میدیم و تمام، حالا با همین روش میتونید هر شکلی رو ایجاد کنید

ایجاد طرح برای اینپوت ها یا غیره

برای طرح هایی که قراره سایه های داخلی داشته باشند باید از یک تکنیک یا کد مخفی دیگه استفاده کنیم، یه مستطیل میکشیم و مقدار رنگش رو حذف میکنیم (چک باکس رنگ رو بر میداریم) و یه بردر با همون رنگ زمینه و سایز 6px از نوع بردر بیرونی ایجاد می کنیم و سایر تنظیمات هم مثل مستطیل قبلی یعنی باید دوتا ایجاد کنیم به یکی سایه های منفی و یکی مثبت با رنگ تیره و روشن اعمال کنیم

برای ایجاد طرح دکمه های مثل تصویر زیر هم کارمون راحته

دقیقا مثل طرح های قبلی دوعدد دایره میکشیم و همون سایه ها رو بهش اعمال میکنیم فقط رنگ دایره ها رو باید از نوع liner gradient قرار بدیم با زاویه 45 درجه، شبیه تصویر زیر

رنگ دوطرف هم دقیقا همون رنگ سایه هامون قرار میدیم، البته منظورم کد رنگ هایی که در بالا بهتون گفتم نیست یعنی ابزار pick color رو انتخاب میکنیم و موس رو میبریم روی سایه و رنگ رو انتخاب میکنیم، شبیه تصویر زیر

برای ایجاد طرح دکمه لایک هم باید جای رنگ های تیره و روشن gradient رو جابجا میکنیم

تمام و لذت ببرید.

ببخشید اگه خوب نتونستم بنویسم هنوز زیاد تجربه نوشتن ندارم و سعی میکنم تا یواش یواش خودمو بهتر کنم، مرسی که تا اخر خوندید، اگه جایی براتون مبهم بود در نظرات بنویسید تا راهنماییتون کنم