آموزش ابزار Boolean در Adobe XD | ترکیب و برش اشکال

خیلی وقت‌ها در مسیر طراحی رابط کاربری به فرم‌هایی نیاز پیدا می‌کنید که در لیست اشکال هندسی پایه نرم‌افزار وجود ندارند. مثلا برای طراحی یک نوار ناوبری (Navigation Bar) پایین اپلیکیشن که وسط آن خمیدگی نرمی دارد، نمی‌توانید به یک مستطیل ساده اکتفا کنید.

برای ساخت این فرم‌های سفارشی باید دست به کار شوید و با ترکیب لایه‌های پایه، طرح مدنظرتان را خلق کنید. بهترین راه برای رسیدن به این هدف، استفاده از ابزارهای Boolean در ادوبی ایکس دی است که در نرم‌افزار ایلاستریتور با نام Pathfinder شناخته می‌شوند.

ویدیوی آموزش Boolean در Adobe XD

این ویدیو آموزش ابزار Boolean در Adobe XD است؛ ترکیب شکل‌ها، کم‌کردن بخش‌ها و ساخت آیکان با اشکال پایه. اگر فیلترشکن خاموش است، نسخه آپارات را همین‌جا ببینید؛ نسخه YouTube هم از دکمه زیر در دسترس است.

پخش ویدیو در آپارات

تماشای کیفیت اصلی در یوتیوب

ابزار بولین (Boolean) چیست و چطور کار می‌کند؟

این ابزار شامل چهار عملگر اصلی برای ترکیب، کسر، اشتراک و حذف اشتراک لایه‌های هندسی است. وقتی دو یا چند شکل را به صورت همزمان انتخاب می‌کنید، در پنل اینسپکتور (Inspector Panel) سمت راست صفحه، چهار گزینه برای مدیریت آن‌ها ظاهر می‌شود.

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

قابلیت Add (ترکیب لایه‌ها)

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

اگر پنل لایه‌ها را باز کنید، می‌بینید که نرم‌افزار به صورت خودکار آن‌ها را در یک گروه مشخص تنظیم کرده است. مزیت بزرگ این روش این است که با دو بار کلیک روی شکل نهایی، همچنان می‌توانید اجزای اولیه را انتخاب کنید، تغییر سایز دهید یا جابه‌جا کنید.

قابلیت Subtract (کم کردن لایه‌ها)

ابزار Subtract لایه رویی را از لایه زیری کم می‌کند. در واقع قسمت‌هایی از لایه زیرین که با لایه بالایی هم‌پوشانی دارند، بریده و پنهان می‌شوند.

اگر می‌خواهید یک آیکون ماه (Moon) طراحی کنید، کافی است دو دایره را با کمی فاصله روی هم قرار دهید. سپس هر دو را انتخاب کرده و روی Subtract کلیک کنید تا دایره رویی، بخش اضافه دایره زیرین را برش دهد و فرم هلال ماه شکل بگیرد.

قابلیت Intersect (نگه داشتن بخش مشترک)

عملگر Intersect فقط آن قسمتی از اشکال را نگه می‌دارد که بین همه لایه‌های انتخابی مشترک است و بقیه بخش‌ها را به طور کامل حذف می‌کند.

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

قابلیت Exclude (حذف بخش مشترک)

ابزار Exclude دقیقا برعکس عملگر قبلی کار می‌کند؛ یعنی بخش‌های مشترک و هم‌پوشانی شده را خالی کرده و نواحی بیرونی را نگه می‌دارد. با این کار یک فضای منفی یا سوراخ در وسط اشکال شما ایجاد می‌شود.

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

طراحی آیکون‌ها نیازمند درک درست از اجزای تشکیل‌دهنده آن‌هاست. به جای اینکه ابزار Pen را بردارید و نقطه به نقطه مسیر بکشید، به فرم کلی آیکون نگاه کنید.

آیکون خانه (Home) در ذهن اکثر کاربران از یک مربع یا مستطیل به عنوان بدنه و یک مثلث به عنوان سقف تشکیل شده است. برای ساخت آن کافی است یک مستطیل رسم کنید، یک مثلث دقیقا بالای آن قرار دهید و با ابزار Add آن‌ها را به یک شکل واحد تبدیل کنید.

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

طراحی سریع آیکون پروفایل

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

یک دایره رسم کنید و سپس دایره بزرگ‌تری را زیر آن قرار دهید. با استفاده از قابلیت Add این دو را ترکیب کنید. برای اینکه پایین آیکون شما صاف باشد، می‌توانید یک مستطیل روی بخش پایینی آدمک بکشید و با عملگر Subtract آن قسمت را برش دهید. در نهایت می‌توانید این آدمک را داخل یک دایره دیگر قرار دهید تا فرم استانداردی برای منوی بالای سایت‌ها به دست بیاورید.

آشنایی با ابزار، تنها بخشی از مسیر یادگیری است. برای یادگیری تخصصی طراحی رابط کاربر (UI)، سرفصل‌ها و پروژه‌های دوره UI Design Plus را ببینید. این دوره علاوه بر آموزش ابزار، اصول طراحی، تمرین‌های عملی و پروژه‌های طراحی رابط کاربر را پوشش می‌دهد.

نکته درباره Boolean در XD

با چهار ابزار ترکیب اشکال در Adobe XD می‌توانید آیکان‌ها و شکل‌های پیچیده را بدون طراحی تک‌تک خطوط بسازید. اگر فایل را در نرم‌افزار دیگری باز کردید، شکل نهایی و لایه‌ها را بررسی کنید؛ تبدیل فایل بین ابزارها همیشه کاملا یکسان نیست.