تصاویر یکی از مهم‌ترین المنت‌ها در ادوب ایکس دی برای طراحی رابط کاربری هستن. مدیریت درست این تصاویر، از وارد کردن تا ماسک کردن عکس، سرعت کار شما رو در طراحی محصول به شدت بالا می‌بره. در این آموزش از سایت learnuix.com می‌خوام تمام تکنیک‌های ضروری برای کار با عکس‌ها و خلق افکت‌های جذاب رو براتون موشکافی کنم.
ویدیوی آموزش Image و Mask در Adobe XD
این ویدیو کار با تصویر در Adobe XD را آموزش می‌دهد؛ واردکردن تصویر، ماسک‌کردن و تنظیم افکت محوشدگی. اگر فیلترشکن خاموش است، نسخه آپارات را همین‌جا ببینید؛ نسخه YouTube هم از دکمه زیر در دسترس است.
سریع‌ترین روش‌های وارد کردن عکس در ایکس دی
بهترین و سریع‌ترین راه برای وارد کردن عکس، درگ اند دراپ (کشیدن و رها کردن) مستقیم تصاویر از پوشه به داخل محیط برنامه است. شما می‌تونید از منوی همبرگری بالا گزینه ایمپورت رو انتخاب کنید یا از شورت‌کات Ctrl+Shift+I استفاده کنید. اما در یک جریان کاری حرفه‌ای طراحی محصول، معمولا از همون روش درگ کردن استفاده میشه چون زمان کمتری می‌گیره.
تنظیم ابعاد و گرد کردن گوشه‌های تصاویر
با گرفتن کلیدهای Alt+Shift به صورت همزمان، می‌تونید تصویر رو از مرکز و با حفظ تناسب به راحتی کوچک یا بزرگ کنید. برای گرد کردن گوشه‌ها کافیه دایره‌های کوچک اطراف لبه‌های عکس رو بگیرید و به سمت داخل بکشید. همچنین در پنل ترنسفورم با باز کردن قفل تناسب، می‌تونید فقط یک سمت از تصویر رو بدون در نظر گرفتن نسبت ابعاد تغییر اندازه بدید.
ایجاد افکت‌های جذاب با Background Blur و Object Blur
گزینه Background Blur در پنل اینسپکتور به شما اجازه میده تا یک شکل (مثل مستطیل) روی عکس قرار بدید و فضای زیر اون رو تار کنید. این افکت برای طراحی منوهای شیشه‌ای (Glassmorphism) بسیار کاربردیه. شما می‌تونید مقدار تاری (Amount)، روشنایی (Brightness) و شفافیت (Opacity) رو شخصی‌سازی کنید. اگر هم بخواید خود تصویر اصلی تار بشه، کافیه از همون منو گزینه Object Blur رو انتخاب کنید.
آموزش ۳ روش اصلی ماسک کردن عکس
سه روش کاملا متفاوت برای ماسک کردن عکس در ایکس دی وجود داره که هر کدوم در شرایط خاصی کاربرد دارن.
- روش اول: یک شکل (مثلا دایره برای پروفایل) روی عکس بکشید، هر دو لایه رو انتخاب کنید و با کلیک راست گزینه Mask with Shape رو بزنید.
- روش دوم: ابتدا شکل مورد نظرتون رو رسم کنید و سپس عکس رو بگیرید و مستقیما داخل اون شکل رها کنید.
- روش سوم: عکس رو کپی یا کات کنید (Ctrl+C)، شکل رو انتخاب کنید و کلیدهای ترکیبی Ctrl+Alt+V رو بزنید تا عکس دقیقا درون اون شکل جایگذاری بشه.
در تمام این روش‌ها با دوبار کلیک روی تصویر ماسک شده، می‌تونید به راحتی عکس رو داخل شکل جابه‌جا کنید یا اندازه‌اش رو تغییر بدید.
ویرایش مستقیم تصاویر در فتوشاپ (Edit in Photoshop)
با کلیک راست روی هر عکس و انتخاب Edit in Photoshop، اون تصویر مستقیما درون فتوشاپ باز میشه. به عنوان مثال اگر بخواید با قابلیت Sky Replacement در فتوشاپ آسمان یک عکس رو تغییر بدید، به محض اینکه کارتون تمام شد و کلیدهای Ctrl+S رو برای ذخیره زدید، تصویر شما درون ایکس دی هم به صورت خودکار آپدیت میشه. این همگام‌سازی، سرعت دیزاین رو به شکل چشم‌گیری افزایش میده.
ترکیب رنگ و تصویر با Blending Modes
قابلیت بلندینگ مود (Blending Mode) به شما اجازه میده رنگ یک شکل رو با تصویر زیرین اون ترکیب کنید. برای این کار کافیه یک شکل رنگی روی عکستون قرار بدید و از پنل سمت راست، حالت بلندینگ (مثل Darken) رو انتخاب کنید. اگر قبلا در فتوشاپ کار کرده باشید، این حالت‌های ترکیبی براتون کاملا آشنا هستن و جلوه‌های بصری فوق‌العاده‌ای به رابط کاربری شما میدن.
این مهارت در پروژه‌های طراحی چه کاربردی دارد؟
در این درس، نحوه برش و ماسک‌کردن تصویر و تنظیم افکت‌های محوشدگی در Adobe XD را تمرین می‌کنید. این‌ها امکانات نرم‌افزارند؛ انتخاب تصویر و افکت مناسب برای یک رابط کاربر به هدف طرح و اصول طراحی بستگی دارد.
آشنایی با ابزار، تنها بخشی از مسیر یادگیری است. برای یادگیری تخصصی طراحی رابط کاربر (UI)، سرفصل‌ها و پروژه‌های دوره UI Design Plus را ببینید. این دوره علاوه بر آموزش ابزار، اصول طراحی، تمرین‌های عملی و پروژه‌های طراحی رابط کاربر را پوشش می‌دهد.
ادامه مسیر
- قسمت قبل: Text و Typography — قسمت ۳
- قسمت بعد: Boolean — قسمت ۵
- سوالات پرتکرار Adobe XD
