استفاده از گرید ها و تکرار کننده ها در Adobe xd
تاریخ انتشار : تیر ۸, ۱۴۰۱ تاریخ به روز رسانی : دی ۲۸, ۱۴۰۲ نویسنده : پشتیبانی مکتب تی وی زمان مورد نیاز مطالعه : 6 دقیقه تعداد بازدید : 961 بازدیددر این آموزش قصد داریم درباره گرید ها و تکرار کننده ها در Adobe xd صحبت کنیم و به معرفی ابزار Repeat Grid در Adobe XD بپردازیم.
همین الان با وارد کردن اطلاعات خود در فرم، دوره شروع طراحی رابط کاربری با نرم افزار Adobe Xd را به صورت رایگان دریافت کرده و 10/000 تومان شارژ هدیه در کیف پول خود دریافت نمایید.شروع طراحی رابط کاربری با نرم افزار Adobe Xd
استفاده از گرید ها و تکرار کننده ها در Adobe xd
ابتدا از بخش iOS App، آیفون را انتخاب کنید.
سپس برای اضافه کردن یک المان به صفحه کاری، از بخش اسکرین یک بخش از طرح را انتخاب کرده و کپی بگیرید.
سپس با استفاده از ابزار Rectangle (یا کلید R در کیبورد) یک مستطیل در صفحه ایجاد کنید.
برای اضافه کردن متن، ابزار Text (یا کلید T در کیبورد) را انتخاب کرده و با کلیک کردن در صفحه طراحی، یک متن به دلخواه ایجاد کنید.
ما داخل این طرح، یک مستطیل سفید رنگ اضافه کردیم و داخل این مستطیل یک دایره و دو متن هم ایجاد کردیم که این ها در پوشه ای به نام grid ساخته شده است.
در این قسمت می خواهیم مستطیل و محتوای داخل آن را کپی بگیریم ولی نمیخواهیم با گرفتن Alt صفحه کلید این کار را انجام دهیم. یک راه حل ساده، استفاده از ابزار Repeat Grid در Adobe XD است.
برای استفاده از این ابزار، همه المان های ایجاد شده در صفحه را انتخاب کرده و در سمت راست در پنل Properties بر روی Repeat Grid کلیک کنید. همچنین می توان از کلیدهای میانبر Ctrl + R در ویندوز و Cmd + R در مک استفاده کرد.
به محض انتخاب این گزینه، دستگیره های سبز رنگ در سمت راست و پایین عناصر ظاهر می شوند. برای تکرار یک عنصر به صورت خودکار در شبکه عمودی، دستگیره را به پایین بکشید و برای تکرار عنصر در شبکه افقی، دستگیره را به سمت راست بکشید.
توجه داشته باشید که با ایجاد تغییر در عنصر اولیه، تغییرات در طول تکرار منعکس می شوند. این کار باعث افزایش سرعت طراحی می شود.
برای غیر فعال کردن Repeat Grid روی یک عنصر، بر روی گزینه Ungroup Grid کلیک کنید یا کلیدهای ترکیبی Shift + Ctrl + G را بفشارید.
هنگام استفاده از Repeat Grid، به طور خودکار بین عناصر تکرار شده یک فاصله ایجاد می شود. با انتخاب و کلیک بر روی شکاف بین عناصر، مکان نما به فلش های دوتایی تغییر پیدا می کند که با استفاده از آن ها می توان فاصله بین عناصر را تنظیم کرد.
در ادامه به بررسی نحوه جایگزین کردن متن در repeat grid و جایگزین کردن تصویر در repeat grid می پردازیم.
نحوه وارد کردن متن به repeat grid
در این قسمت می خواهیم یک فایل متنی از اسم کشورها را در محیط کاری به جای متن منوی اول اضافه کنیم.
در ابتدا باید متن به فرمت txt. را با استفاده از Word، Notepad و… ایجاد کنید.
برای وارد کردن متن به repeat grid، می توان به صورت جداگانه متن را به داخل عنصر درگ کرد یا فایل متنی را کلیک کرده و بر روی عناصر repeat grid درگ کرد. برای ویرایش متن نیز میتوان بر روی آن دوبار کلیک کرده و آن را ویرایش کرد.
نحوه وارد کردن تصاویر به repeat grid
حال برای قرار دادن عکس ها داخل دایره، ابتدا پوشه ای از تصاویر در فرمتی که XD پشتیبانی می کند، مانند PNG، JPEG و GIF را ایجاد کنید.
سپس مانند فرایند وارد کردن متن، می توان به صورت یک به یک تصاویر را به داخل المان درگ کرد یا چندین تصویر را انتخاب کرده و آن ها را بر روی عناصر درگ کرد.
در ادامه تنظیماتی بر روی المان ها انجام می دهیم، سایز آنها را تغییر داده و خط دور را آبی می کنیم.
در ادامه کار قبلی می خواهیم متن های پایین فایل متنی را پر کنیم. برای این کار، ابتدا باید متن را از حالت گرید خارج کرد. سپس فایل متنی را انتخاب کنید. هر کدام از این فایل های متنی برای یک متن در لایه ها است.
سپس یکی یکی متن ها رو در وسط لایه صفحه قرار می دهیم. اگر دقت کرده باشید یک خط در وسط صفحه وجود دارد که این به این معناست که عناصر از راست و چپ هم اندازه هستند.
در ادامه یک محیط کاری دیگر به نام ای پد انتخاب کرده و می خواهیم مشابه کارهایی که در محیط کاری آیفون انجام دادیم را در این محیط نیز انجام دهیم.
ابتدا بک گراند و نوار بالای صفحه را از محیط آیفون نمونه برداری کنید و در محیط ای پد قرار دهید.
هنگامی که آیکون باتری و درصد را در ای پد قرار می دهیم، در ترازبندی مشکل ایجاد می شود. برای رفع این مشکل، باید آیکون درصد و باتری و Shift کیبورد را انتخاب کرده و گزینه تراز را کلیک کنید. سپس پس زمینه نوار را مشکی کنید.
حال یک هدر ایجاد کرده و رنگ آن را نارنجی کنید. سپس متن “نام آشپز” و “توضیحات” را در آن قرار دهید. قبل از انجام این کار باید حالت repeat grid را غیرفعال کنید. زیرا هر تغییری در متن، باعث تغییر هدر نیز خواهد شد.
سپس عناصر موجود در محیط آیفون را در محیط ای پد قرار دهیم. برا این کار، روی لایه مخصوص گرید راست کلیک کرده و گزینه Copy را انتخاب کنید. سپس در محیط ای پد راست کلیک کرده و Paste کنید.
دقت کنید به دلیل این که عرض گرید کم است، پس از کپی کردن، عناصر در دو ستون قرار می گیرند.
در این قسمت از آموزش گرید ها و تکرار کننده ها در Adobe xd می خواهیم نحوه ساخت صفحات داخلی و جلوه های خاص برای آنها را بررسی کنیم.
ابتدا محیط کاری آیفون 8/7/6 را انتخاب کنید. منوی بالا در محیط کاری قبلی را در محیط جدید قرار دهید.
سپس یک عکس را انتخاب کرده و به عنوان پس زمینه در محیط کاری قرار دهید.
در این قسمت می خواهیم زمانی که کلمه Africa در محیط کاری قبلی کلیک شد، به این محیط ارجاع داده شود. برای این کار، در محیط جدید، با استفاده از ابزار Text متن Africa را نوشته و در بالای صفحه قرار دهید.
سپس یک مستطیل رسم کرده و در پایین صفحه قرار دهید. خاصیت بلور کردن را نیز فعال کنید. حال متن مورد نظر را داخل کادر مستطیل شکل قرار دهید.
سپس یک دایره ترسیم کنید. این دایره محل قرار گرفتن تصویر شخص است. تصویر شخص را انتخاب کرده و به داخل دایره درگ کنید.
نحوه وارد کردن متن به repeat grid و نحوه وارد کردن تصاویر به repeat grid چگونه است؟
در این مقاله به بررسی نحوه جایگزین کردن متن در repeat grid و جایگزین کردن تصویر در repeat grid پرداختیم و نحوه وارد کردن متن به repeat grid و نحوه وارد کردن تصاویر به repeat grid را شرح دادیم. همچنین مراحل ساخت صفحات داخلی و جلوه های آن ها را بررسی کردیم.
دیدگاه کاربران
بدون دیدگاه