قسمت۲: واردکردن تصویر در Adobe Xd

101 بازدید
واردکردن تصویر در نرم افزار Adobe Xd

در قسمت دوم آموزش طراحی رابط کاربری اپلیکیشن با استفاده از نرم افزار آدوبی XD از سایت مدیران اپ می خواهیم به انجام پروژه فست فود که در قسمت های قبل آموزش  طراحی UI اپلیکیشن شروع کرده ایم بپردازیم همانطور که متوجه شده اید این آموزش ها به هم مربوط بوده و اگر قسمت قبل آموزش طراحی رابط کاربری اپ را مطالعه نکرده اید پیشنهاد می کنیم از این لینک به مطالعه بپردازید.

در ابتدای این قسمت از آموزش طراحی UI اپلیکیشن می خواهیم به این بپردازیم که اگر در طرح مورد نظرمان نیاز به عکس خاصی داشتیم چگونه در نرم افزار آدوبی XD وارد نماییم.

آموزش طراحی رابط کاربری اپلیکیشن اندروید

همانطور که در عکس بالا مشاهده می کنید برای ایمپورت عکس در نرم افزار آدوبی xd ابتدا باید بر روی منو در سمت چپ و بالای نرم افزار کلیک نمایید و بر روی گزینه import کلیک نمایید بعد محل عکس مورد نظرتان را تعیین و انتخاب نمایید و در نرم افزار import می شود.

ادامه آموزش طراحی UI اپلیکیشن بسیار مهم است و پیشنهاد می کنیم که برای این که کاملا یاد بگیرید فیلم آموزشی که در ابتدای مطلب قرار می گیرد به طور کامل مشاهده نمایید در این قسمت می خواهیم به این بپردازیم به عنوان مثال که در عکس زیر مشاهده می کنید که یک عکس را داخل نرم افزار ایمپورت می کنید و قسمت هایی از عکس اضافی بوده و فقط در نرم افزارتان به قسمتی از آن عکس نیاز است.

آموزش طراحی UI اپلیکیشن

برای این کار نسبت به عکسی که می خواهید در نرم افزار باشد نسبت به آن در قسمت چپ شکل مورد نظر خود را انتخاب نمایید (دایره ، مربع ، مستطیل و…) و بعد در قسمتی که می خواهید در نرم افزار باشد رسم می کنید مانند تصویر بالا که یک دایره روی بشقاب روی میز کشیده است و می خواهد فقط دایره بماند و میز حذف شود. بعد از کشیدن بر روی تصویر راست کلیک نمایید و بر روی گزینه Mask With Shape یا کلید ترکیبی Shift + Ctrl + M کلیک نمایید، همانطور که مشاهده می کنید فقط تصویر بشقاب یا هر تصویری که انتخاب کرده اید می ماند و بقیه تصویر محو می شود و با دابل کلیک می توانید آن دایره را جا به جا کنید و یا کل تصویر را مشاهده نمایید.

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

در نرم افزار آدوبی xd همانند فتوشاپ اگر دیده باشید پروژه را به صورت لایه لایه تقسیم بندی می کند یعنی هر عکس ، هر آرت بورد ، هر متن و… را به صورت یک لایه قرار می دهد و می توانید این لایه ها را جا به جا نمایید که در تصویر زیر مشاهده می کنید.

آموزش طراحی ظاهر اپلیکیشن

برای دسترسی به قسمت لایه ها از قسمت چپ نرم افزار و پایین نرم افزار می توانید دسترسی داشته باشید که در تصویر بالا مشاهده می کنید و باعلامت مشخص شده است و همانطور که می بینید هر المان در پروژه به صورت یک لایه است که این لایه ها بسیار کار را راحت تر می کند و همچنین مدیریت پروژه به راحتی انجام می شود.

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

آموزش طراحی UI اپلیکیشن

برای این که چند المان را گروه بندی کنیم آن ها را به صورت select در آورده یا با هم انتخاب می کنیم و روی آن ها راست کلیک کرده و گزینه Group یا با کلید ترکیبی Ctrl + G استفاده می کنیم و گروه بندی می کنیم و نکته دیگر در لایه ها این است که هر لایه را می توانید تغییر اسم بدهید و اسم مورد نظر خودتان قرار بدهید.

در ادامه آموزش طراحی UI اپلیکیشن می خواهیم به مورد دیگری بپردازیم که شما می توانید با استفاده از این نرم افزار، خودتان با امکاناتی که دارد به طراحی آیکون ها بپردازید و در جلسات بعدی توضیح می دهیم که شما با استفاده از پلاگین ها تمام آیکون ها را دارید در نرم افزار به صورت آماده قرار می دهید ولی خودتان هم می توانید طراحی کنید که در تصویر زیر مشاهده نمایید که ما با استفاده از این نرم افزار آیکون های سرچ و مپ را طراحی کرده ایم.

آموزش طراحی UI اپ

برای طراحی سرچ از یک دایره و یک مستطیل استفاده شده است و برای مپ از دایره که سمت پایین آن را تغییر داده ایم برای خمیده کردن و دادن گوشه به تصاویر می توانید از ابزارهایی مثل پن یا قلم استفاده کنید و همچنین می توانید از دابل کلیک استفاده نمایید.

همچنین از ابزار قلم می تواند انواع اشکال ها به صورت های گوناگون بکشید و به طراحی اشکال مورد نظر خود بپردازید.

در ادامه آموزش طراحی UI اپلیکیشن می خواهیم به ریزه کاری های طراحی بپردازیم به عنوان مثال در تصویر زیر مشاهده می کنید برای باکس می خواهیم یک متن قرار دهیم زمانی که متن را نوشتیم وقتی به حالت انتخاب قرار دهیم می بینید که اندازه فاصله متن تا کادر ها قرار داده است که با استفاده از این اعداد می توانید محل قرار گیری دقیق متن را تعیین کنید این امکان فقط برای متن نبوده و برای هر المانی می توانید استفاده نمایید که در این آموزش طراحی UI اپلیکیشن متن را مثال زده ایم.

آموزش طرایح ظاهر اپلیکیشن اندروید

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

آموز طرایح رابط کاربری اپلیکیشن

یکی دیگه از راه های کپی در این برنامه این است که از گزینه Repeat Grid استفاده کنید که به عنوان مثال باکس بالا را می خواهید به تعداد زیاد در پایین یا سمت راست اضافه کنید که برای این کار زمانی که باکس و محتویات آن را به صورت select قرار دادین از سمت راست بر روی گزینه Repeat Grid کلیک می کنید همانند تصویر زیر:

آموزش طراحی UI اپلیکیشن

بعد از کلیک بر روی گزینه Repeat Grid مانند تصویر زیر دو اهرم به سمت راست و پایین تصویر اضافه می شود.

آموزش طراحی UI اپلیکیشن

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

در قسمت بعدی آموزش طراحی UI اپلیکیشن به آموزش پلاگین های برنامه آدوبی Xd می پردازیم.

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

تاجلسه بعدی خدانگهدار!

آیا این مطلب را می پسندید؟
https://modiran.app/?p=1787
برچسب ها:
اشتراک گذاری:
نیایش ملکی
نیایش ملکی
فارغ التحصیل مقطع کارشناسی ارشد رشته مدیریت صنعتی از دانشگاه شهید بهشتی فریلنسر و طراح تجربه و رابط کاربری وبسایت و اپلیکشن. مسلط به فریم وورکهای حل مسئله و سیستم داینامیک. تجربه ی فعالیت در زمینه های مختلف گرافیکی، طراحی و پروژه های داخلی و خارجی با حدود 2 سال تجربه حرفه ای
مطالب بیشتر

باکس دانلود

گزارش خرابی لینک ها
راهنما

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

نظرات

0 نظر در مورد قسمت۲: واردکردن تصویر در Adobe Xd

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

هیچ دیدگاهی نوشته نشده است.