آموزش طراحی UI : چگونه به سرعت چندین عکس را به المان‌های جایگزین عکس در ادوبی XD اضافه کنیم؟

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

با انتخاب Android Mobile از صفحه شروع یک سند جدید ایجاد کنید.

ابزار (Rectangle(R را انتخاب کنید و Shift را برای کشیدن یک مربع که تمام عرض صفحه خود را پر می‌کند، نگه دارید. همچنین می‌توانید عرض و ارتفاع ۳۶۰ پیکسل را در سمت راست وقتی که شکل انتخاب شده، وارد کنید، و داخل مربع را با یک رنگ دلخواه پر کنید.

عرض Artboard یا صفحه طراحی 360 پیکسل است، و برای اینکه پایین این مربع ۳ ردیف عکس بگذاریم باید عرض را تقسیم بر سه کنیم تا سایز ردیف عکس ها به دست بیایند(۳۶۰/۳ = ۱۲۰).

خوب دوباره R را بزنید و Shift را نگه دارید و یک مربع با طول و عرض ۱۲۰ پیکسل درست کنید. موقعیت این مربع دقیقا زیر مربع بزرگتر سمت چپ Artboard هست.

مربع کوچک را انتخاب کنید و روی دگمه Repeat Grid {برای کار با این ابزار می توانید به مقاله آموزش Repeat Grid در Adobe XD رجوع کنید} در سمت راست صفحه طراحی کلیک کنید.

می‌بیند که اطراف المان مورد نظرتون یک حاشیه سبز رنگ ایجاد شده است، لغزنده (Slider) سمت راست را انتخاب کنید و آن را به سمت راست بکشید تا مربع تکرار شود، و سه مکان برای عکس ایجاد کنید.

وقتی که از ابزار Repeat Grid استفاده می‌کنید، ادوبی XD به صورت اتماتیک بین اشیا مختلف تکرارشده یک شکاف (فاصله) ایجاد می‌کند. با انتخاب و کلیک کردن در داخل این فضا (شکاف در بین اشیا)، خواهید دید که برخی راهنماهای صورتی ظاهر می‌شوند، که به شما امکان می‌دهد فاصله بین لبه‌ها را تنظیم کنید. برای این آموزش، فاصله بین اشیا را به صفر کاهش دهید، سپس کشویی سبز را به سمت راست بکشید تا سه مکان برای عکس کامل شود.

بعد، نوار لغزنده سبز پایین را بکشید و مرحله بالا را تکرار کنید و فاصله شکاف(Gap) را به صفر برسانید.

مربع بزرگتر را انتخاب کنید و از پوشه تصاویرتان{برای داشتن تصاویری عالی به سایت www.unsplash.com مراجعه کنید}، تصویر ویژه خود را به داخل مربع بکشید و این تصویر را به صورت خودکار وارد سند می‌کند تا این فضا را اشغال کند.

بعد، Shift را نگه دارید و عکس‌های دیگر را که می‌خواهید وارد کنید را انتخاب کنید و آنها را روی اولین مربعی کوچکی که ایجاد کردیم بکشید. سپس ادوبی XD به طور خودکار تمام مربع‌های کوچک دیگر را با تصاویر انتخاب شده شما پر می‌کند(حتی اگر تعداد تصاویر کمتر از تعداد مربع‌ها باشد خود‌به‌خود با تصاویر تکراری پر می‌شوند).

به یاد داشته باشید، که ترتیب وارد کردن عکس‌ها به ادوبی XD، اینگونه است که وقتی یکی از عکس های انتخابی را Drag and Drop می‌کنید روی المان‌ها به ترتیب بعد از عکس انتخابی چیده خواهند شد. این هم تصویر نهایی که شما خواهید ساخت :