آشنایی با ابزارهای ادوبی ایکس دی
در دو قسمت اول سری آموزش های رایگان #در_خانه_بمانیم چند تکنیک در زمینه موشن گرافیک و کار با نرم افزار افتر افکت یاد گرفتیم. در این قسمت می خواهیم به سراغ مهارت دیگری برویم و شما را با یکی از ابزارهای فوق العاده شرکت ادوبی آشنا کنیم. نرم افزار XD. برنامه ای که برای طراحان یو آی/ یو ایکس بسیار کاربردی است. در قسمت اول این آموزش، به معرفی ابزارهای ادوبی ایکس دی می پردازیم (هم در ویدیوی بالا و هم در ادامه). با ما همراه باشید.
در این صفحه میخوانید:
درباره ادوبی ایکس دی
نرم افزار ادوبی ایکس دی که در سال ۲۰۱۶ معرفی شد، یکی از ابزارهای جدید در حوزه طراحی رابط کاربری است. تا مدتهای زیادی طراحان برای پروتوتایپ زدن وب سایت ها و اپلیکیشن ها از نرم افزارهای طراحی مانند فتوشاپ استفاده می کردند. بعد از گسترده شدن علم UI/UX و نیازی که بازار طراحی به یک نرم افزار تخصصی این رشته پیدا کرد، شرکت ادوبی تصمیم گرفت نرم افزاری مختص طراحی رابط کاربری ایجاد کند.
ادوبی ایکس دی نرم افزاری ساده و در عین حال مناسب و کارآمد است. ابزارهایی که در این برنامه قرار داده شده برای کاربران قدیمی ادوبی آشنا هستند. بیشتر تنظیمات مشابه با نرم افزارهایی همچون فتوشاپ یا ایلاستریتور طراحی شده. اما در این برنامه کاربردی متفاوت دارند. در واقع یادگیری نرم افزار ایکس دی چالش برانگیز نیست. بلکه اجرا کردن پروژه ها و داشتن علم UI/UX در این اجرا اهمیت دارد.
درباره ویدیوی آموزشی
در این قسمت از آموزش ها که بالای صفحه آن را مشاهده می کنید، با محیط نرم افزار ایکس دی آشنا می شوید و مروری بر ابزارها و گزینه های آن خواهید داشت. به زودی یک پکیج کاربردی و پروژه محور برای طراحی صفحات اپلیکیشن و سایت با ادوبی ایکس دی در خانه فتوشاپ منتشر خواهیم کرد. از اینجا می توانید این برنامه را دانلود و روی سیستم خود نصب کنید.
درباره ابزارهای ادوبی ایکس دی
ابزارهای ادوبی ایکس دی به نسبت سایر برنامههای ادوبی مختصر و البته مفید هستند. در ادامه نگاهی میاندازیم به ابزارهایی که به کمکشان میتوانیم شکلها و طرحها را در این برنامه مدیریت کنیم.
در جعبه ابزار Adobe XD که سمت چپ برنامه است، میتوانید موس را روی هر یک از ابزارها ببرید و کمی صبر کنید تا کاربرد آن ابزار به همراه کلید میانبرش نمایش داده شود. برای انتخاب هر ابزاری هم کافی است رویش کلیک کنیم.
به طور کلی ابزارهای این برنامه شامل مواردی هستند که در تصویر زیر میبینید:
این ابزارها عبارتند از (حرف داخل پرانتز جلوی آنها کلید میانبرشان است):
- Select Tool (V)
- Rectangle Tool (R)
- Ellipse Tool (E)
- Polygon Tool (Y)
- Line Tool (L)
- Pen Tool (P)
- Text Tool (T)
- Art Board (A)
- Zoom (Z)
این ابزارها برای طراحی عناصری مثل دکمه، کارت، پاورقی و… استفاده میشوند.
بخش Tool Options
سمت راست فضای این برنامه یک سری گزینه دیگر داریم گه Tool Options هستند. یعنی میتوان جزئیات و ویژگیهای عناصر را در این بخش عوض کرد. در این بخش میتوان کارهایی مثل پر کردن یک عنصر با رنگ، حاشیه دادن به شکل، بلور کردن، گرد کردن حاشیه و… را انجام داد.
این گزینهها بسته به این که چه ابزاری را انتخاب کرده باشید عوض میشوند (مثل چیزی که در مورد نوار Options در فتوشاپ اتفاق میافتد). برای مثال اگر ابزار Text را انتخاب کرده باشید، گزینههایی برای تعیین اندازه فونت، رنگ، خانواده فونت، وزن فونت و… را در بخش Tool Options خواهید دید.
اما علاوه بر ویژگیهای ابزارها، در این بخش گزینههایی را نیز برای تراز کردن شکلها نسبت به یکدیگر و نحوه ترکیب شدن شکلها میبینیم.
البته اگر از بالا و سمت چپ برنامه وارد تب «Prototype» شوید، گزینهها عوض میشوند و مناسب نمونهسازی اولیه خواهند شد.
کار با ابزارهای ادوبی ایکس دی
و اما بیایید مروری داشته باشیم بر ابزارهای کاربردی این برنامه.
۱- ابزار Select
وقتی میخواهید یک شکل را انتخاب کنید یا مثلاً گزینههای بخش Tool Options را برای یک شکل خاص فعال کنید، میتوانید با این ابزار روی شکل کلیک کنید. از طرفی میتوانیم شکلها را با این ابزار درَگ کنیم تا جابهجا شوند.
آیکون ابزار انتخاب این است:
برای انتخاب راحتترش هم میتوانید کلید حرف V کیبورد را بزنید.
۲- ابزار Rectangle
همانطور که از نام این ابزار پیداست، برای کشیدن مربع و مستطیل استفاده میشود. پس برای کشیدن کارتها، دکمهها و… باید به سراغ این ابزار برویم. از طرفی میتوانیم در بخش Tool Options رنگ شکل را عوض کنیم، به آن حاشیه و سایه بدهیم و… .
آیکون این ابزار نیز به شکل زیر است:
کلید میانبر انتخابش هم کلید R کیبورد است.
۳- ابزار Ellipse
این ابزار هم دایرهها و بیضیها را برای ما خلق میکند. برای مثال میتوانید تصویر فرضی پروفایل کاربران را با این ابزار بسازید. اگر میخواهید شکتان حتماً دایره باشد و نه بیضی، بعد از این که روی صفحه کلیک کرده و موس را نگه داشتید، کلید Shift کیبورد را نگه دارید تا زمانی که کشیدنتان تمام شود.
از منوی سمت راست برنامه میتوانیم ارتفاع و عرض شکل را به صورت دستی تعیین کنیم. از همین بخش نیز میتوانیم رنگ شکل و استایلهایش را مشخص کنیم.
آیکون این ابزار به شکل زیر است:
با فشردن کلید E کیبورد هم میتوانید این ابزار را فوراً فعال کنید.
۴- ابزار Polygon
اگر میخواهید اشکال چند ضلعی را طراحی کنید، باید از این ابزار کمک بگیرید؛ از مثلث گرفته تا شکلی با ضلعهای بیشتر. اما اگر میخواهید مثلث بکشید، همزمان با کشیدن شکل کلید Shift کیبورد را نگه دارید.
آیکون این ابزار مثل تصویر زیر است:
کلید میانبر انتخاب این ابزار هم حرف L کیبورد است.
۵- ابزار Line
بله، این ابزار برای کشیدن خط و خطوط است. این عضو از ابزارهای ادوبی ایکس دی مهمترین تقسیمکننده در رابط کاربری محسوب میشود. وقتی هم که خط را میکشید، میتوانید از قسمت Tool Options رنگ، ضخامت و … را تعیین کنید.
برای کشیدن خط صاف، میتوانید کلید Shift را موقع کشیدن نگه دارید. با این کار خط نسبت به خط عمودی صفحه یا نسبت به خط افقی صفحه کاملاً صاف خواهد بود. همچنین وقتی میخواهید به آن زاویه دهید، فقط در زاویه ۴۵ درجهای نصبت به خط قبلی خود حرکت میکند.
آیکون این ابزار را در تصویر زیر میبینید:
کلید حرف L کیبورد هم این ابزار را برایتان فعال میکند.
۶- ابزار Pen
هر جا که میخواهید طرحی را آزادانه بکشید (چه یک طرح ساده و چه طرحی کاملاً پیچیده) میتوانید روی ابزار Pen حساب باز کنید. اول که کار با این ابزار را شروع میکنید شاید به نظرتان سخت بیاید؛ اما کافی است کمی با آن تمرین کنید تا دیگر عاشق طراحی با آن شوید.
کشیدن شکل با ابزار Pen محدودیتی از لحاظ شکلی ندارد. میتوانید هر چیزی را که تصور میکنید، رسم کنید. با این ابزار شکلها را با نقاط اتصال (Anchor Points) و خطوط (که به آن مسیر میگوییم) رسم میکنیم.
آیکون این ابزار جذاب و قدرتمند به شکل زیر است:
کلید میانبر آن هم حرف P کیبورد است.
۷- ابزار Text
این ابزار برای اضافه کردن متن به طرحمان کاربرد دارد. به کمک تنظیمات بخش Tool Options نیز میتوانید رنگ متن، فونت، اندازه و… را تغییر دهید. آیکون این ابزار نیز مانند تصویر زیر است:
کلید میانبرش هم حرف T کیبورد است.
۸- ابزار Artboard
هر صفحهای که با ابزارهای ادوبی ایکس دی در آن کار میکنیم، یک آرت بورد است. پس ابزار Artboard هم برای اضافه کردن آرت بورد جدید به قبلیها و مدیریت آنها است.
وقتی با این ابزار روی یک آرت بورد کلیک میکنید، اندازه همان آرت بورد را در Tool Options سمت راست میبینید. در همین بخش میتوانیم اندازههای پیشفرضی که نمایش داده میشوند را برای آرت بورد انتخاب کنیم. این اندازهها بر اساس استانداردهای صفحات وب دسکتاپ، موبایل و… در نظر گرفته شدهاند.
با انتخاب هر سایز یک آرت بورد جدید ساخته میشود. مثلاً در تصویر زیر میبینید که ۴ آرت بورد داریم.
آیکون ابزار آرت بورد را در تصویر زیر میبینید:
میانبر انتخاب این ابزار کلید نیز کلید A کیبورد است.
۹- ابزار Zoom
این ابزار برای بزرگنمایی آرت بورد استفاده میشود. بعد از انتخابش کافی است روی صفحه کلیک کنید تا زوم شود. وقتی بزرگنمایی فعال است، نشانگر موس یک ذرهبین است که داخلش یک مثبت دارد.
اما اگر بخواهیم نمایش آرت بورد را دوباره کوچک کنیم چه؟ کافی است کلید Alt کیبورد را نگه دارید. در این صورت وسط نشانگر موس آیکون منفی داریم و با کلیک روی صفحه، نمایش آرت بورد کوچک میشود.
آیکون این ابزار به شکل تصویر زیر است:
کلید میانبر انتخاب این ابزار نیز حرف Z کیبورد است.
نکته: کلیدهای میانبری هم برای بزرگنمایی و کوچکنمایی آرت بورد داریم که دیگر لازم نباشد هر بار این ابزار را انتخاب کنیم. با کلیدهای Ctrl و + آرت بورد بزرگتر نمایش داده میشود. با کلیدهای Ctrl و – هم آرت بورد کوچکتر نمایش داده میشود.
در آخر
کار با ابزارهای ادوبی ایکس دی بسیار راحت است و با کمی تمرین به آنها مسلط خواهید شد. اما اگر میخواهید در این برنامه حرفهای باشید، باید کار با تبهای مختلف این برنامه و چرخه کاری درست در آن را نیز بدانید. ما دورهای برای آموزش صفر تا صد Adobe XD تدارک دیدهایم که به کمکش میتوانید در چندین ساعت به این برنامه مسلط شوید. با کلیک روی تصویر زیر وارد صفحه ثبت نام دوره میشوید و جزئیات دوره را مشاهده میفرمایید.
درباره سپیده خسروآبادی
از بچگی به هنر و گرافیک علاقه داشتم. تو دانشگاه رشته تکنولوژی نرم افزار رو انتخاب کردم و کم کم به سمت گرافیک کامپیوتری کشیده شدم. حالا سالهاست که نرم افزارهای محبوب این حوزه رو تدریس میکنم و درباره گرافیک مینویسم. با کلیک روی دکمه زیر میتونید نوشته های من رو دنبال کنید.
نوشته های بیشتر از سپیده خسروآبادیمطالب زیر را حتما مطالعه کنید
چگونه در فتوشاپ افکت Halftone Dot Pattern ایجاد کنیم؟
چرا فریلنسرهای خلاق نباید هیچوقت رایگان کار کنند؟
ساخت افکت متن آبنباتی با فتوشاپ
اعمال افکت روح روی متن در فتوشاپ
سایت ساخت عکس با هوش مصنوعی + ویدیو آموزشی
آموزش ساخت افکت سایه طولانی متن در فتوشاپ
4 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
با عرض سلام و خسته نباشید میخواستم بدونم آموزش جامع کار با نرم افزار ادوبی ایکس دی در چه زمانی قابل دسترس هست برای خرید پکیج آموزشی اش
با سلام.
در حال تهیه سرفصلهای آموزشی این پکیج هستیم انشالله بزودی استارت خواهد خورد.
با احترام.
سلام ممنون از پکیجای خوبتون من قبلا چن تا از پکیجاتون رو خریدم آموزشاتون خوبه،اگر میشه یه آموزش خوب و کامل ادوبی ایکس دی رو بذارید خیلی ممنون میشم
با سلام .
بله در این زمینه داریم سرفصلهای آموزشی کاربردی پروژه محوری رو آماده میکنیم که بزودی این پکیج هم استارت بخوره .
با احترام.