70% تخفیف تمام دوره های مکتب تی وی برای شما تا زمان محدود
گرید ها و تکرار کننده ها در Adobe xd
ژوئن 29, 2022 پشتیبانی مکتب تی وی 574 بازدید

استفاده از گرید ها و تکرار کننده ها در Adobe xd

در این آموزش قصد داریم درباره گرید ها و تکرار کننده ها در Adobe xd صحبت کنیم و به معرفی ابزار Repeat Grid در Adobe XD بپردازیم.

ابتدا از بخش iOS App، آیفون را انتخاب کنید.

گرید ها و تکرار کننده ها در Adobe xd

سپس برای اضافه کردن یک المان به صفحه کاری، از بخش اسکرین یک بخش از طرح را انتخاب کرده و کپی بگیرید.

گرید ها و تکرار کننده ها در Adobe xd

سپس با استفاده از ابزار Rectangle (یا کلید R در کیبورد) یک مستطیل در صفحه ایجاد کنید.

برای اضافه کردن متن، ابزار Text (یا کلید T در کیبورد) را انتخاب کرده و با کلیک کردن در صفحه طراحی، یک متن به دلخواه ایجاد کنید.

ما داخل این طرح، یک مستطیل سفید رنگ اضافه کردیم و داخل این مستطیل یک دایره و دو متن هم ایجاد کردیم که این ها در پوشه ای به نام grid ساخته شده است.

ابزار Repeat Grid در Adobe XD

در این قسمت می خواهیم مستطیل و محتوای داخل آن را کپی بگیریم ولی نمیخواهیم با گرفتن Alt صفحه کلید این کار را انجام دهیم. یک راه حل ساده، استفاده از ابزار Repeat Grid در Adobe XD  است.

برای استفاده از این ابزار، همه المان های ایجاد شده در صفحه را انتخاب کرده و در سمت راست در پنل Properties بر روی Repeat Grid کلیک کنید. همچنین می توان از کلیدهای میانبر Ctrl + R  در ویندوز و Cmd + R در مک استفاده کرد.

ابزار Repeat Grid در Adobe XD

به محض انتخاب این گزینه، دستگیره های سبز رنگ در سمت راست و پایین عناصر ظاهر می شوند. برای تکرار یک عنصر به صورت خودکار در شبکه عمودی، دستگیره را به پایین بکشید و برای تکرار عنصر در شبکه افقی، دستگیره را به سمت راست بکشید.

ابزار Repeat Grid در Adobe XD

توجه داشته باشید که با ایجاد تغییر در عنصر اولیه، تغییرات در طول تکرار منعکس می شوند. این کار باعث افزایش سرعت طراحی می شود.

برای غیر فعال کردن Repeat Grid روی یک عنصر، بر روی گزینه Ungroup Grid کلیک کنید یا کلیدهای ترکیبی Shift + Ctrl + G  را بفشارید.

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

در ادامه به بررسی نحوه جایگزین کردن متن در repeat grid و جایگزین کردن تصویر در repeat grid می پردازیم.

نحوه وارد کردن متن به repeat grid

در این قسمت می خواهیم یک فایل متنی از اسم کشورها را در محیط کاری به جای متن منوی اول اضافه کنیم.

در ابتدا باید متن به فرمت txt. را با استفاده از Word، Notepad و… ایجاد کنید.

برای وارد کردن متن به repeat grid، می توان به صورت جداگانه متن را به داخل عنصر درگ کرد یا فایل متنی را کلیک کرده و بر روی عناصر repeat grid درگ کرد. برای ویرایش متن نیز میتوان بر روی آن دوبار کلیک کرده و آن را ویرایش کرد.

نحوه وارد کردن متن به repeat grid

نحوه وارد کردن متن به repeat grid

نحوه وارد کردن تصاویر به repeat grid

حال برای قرار دادن عکس ها داخل دایره، ابتدا پوشه ای از تصاویر در فرمتی که XD پشتیبانی می کند، مانند PNG، JPEG و GIF را ایجاد کنید.

سپس مانند فرایند وارد کردن متن، می توان به صورت یک به یک تصاویر را به داخل المان درگ کرد یا چندین تصویر را انتخاب کرده و آن ها را بر روی عناصر درگ کرد.

نحوه وارد کردن تصاویر به repeat grid

در ادامه تنظیماتی بر روی المان ها انجام می دهیم، سایز آنها را تغییر داده و خط دور را آبی می کنیم.

نحوه وارد کردن تصاویر به repeat grid

در ادامه کار قبلی می خواهیم متن های پایین فایل متنی را پر کنیم. برای این کار، ابتدا باید متن را از حالت گرید خارج کرد. سپس فایل متنی را انتخاب کنید. هر کدام از این فایل های متنی برای یک متن در لایه ها است.

جایگزین کردن متن در repeat grid

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

جایگزین کردن متن در repeat grid

در ادامه یک محیط کاری دیگر به نام ای پد انتخاب کرده و می خواهیم مشابه کارهایی که در محیط کاری آیفون انجام دادیم را در این محیط نیز انجام دهیم.

گرید ها و تکرار کننده ها در Adobe xd

ابتدا بک گراند و نوار بالای صفحه را از محیط آیفون نمونه برداری کنید و در محیط ای پد قرار دهید.

گرید ها و تکرار کننده ها در Adobe xd

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

گرید ها و تکرار کننده ها در Adobe xd

حال یک هدر ایجاد کرده و رنگ آن را نارنجی کنید. سپس متن “نام آشپز” و “توضیحات” را در آن قرار دهید. قبل از انجام این کار باید حالت repeat grid را غیرفعال کنید. زیرا هر تغییری در متن، باعث تغییر هدر نیز خواهد شد.

جایگزین کردن تصویر در repeat grid

سپس عناصر موجود در محیط آیفون را در محیط ای پد قرار دهیم. برا این کار، روی لایه مخصوص گرید راست کلیک کرده و گزینه Copy را انتخاب کنید. سپس در محیط ای پد راست کلیک کرده و Paste کنید.

جایگزین کردن تصویر در repeat grid

جایگزین کردن تصویر در repeat grid

دقت کنید به دلیل این که عرض گرید کم است، پس از کپی کردن، عناصر در دو ستون قرار می گیرند.

ابزار Repeat Grid در Adobe XD

در این قسمت از آموزش گرید ها و تکرار کننده ها در Adobe xd می خواهیم نحوه ساخت صفحات داخلی و جلوه های خاص برای آنها را بررسی کنیم.

ابتدا محیط کاری آیفون 8/7/6 را انتخاب کنید. منوی بالا در محیط کاری قبلی را در محیط جدید قرار دهید.

ابزار Repeat Grid در Adobe XD

سپس یک عکس را انتخاب کرده و به عنوان پس زمینه در محیط کاری قرار دهید.

ابزار Repeat Grid در Adobe XD

در این قسمت می خواهیم زمانی که کلمه Africa در محیط کاری قبلی کلیک شد، به این محیط ارجاع داده شود. برای این کار، در محیط جدید، با استفاده از ابزار Text متن Africa را نوشته و در بالای صفحه قرار دهید.

گرید ها و تکرار کننده ها در Adobe xd

سپس یک مستطیل رسم کرده و در پایین صفحه قرار دهید. خاصیت بلور کردن را نیز فعال کنید. حال متن مورد نظر را داخل کادر مستطیل شکل قرار دهید.

گرید ها و تکرار کننده ها در Adobe xd

سپس یک دایره ترسیم کنید. این دایره محل قرار گرفتن تصویر شخص است. تصویر شخص را انتخاب کرده و به داخل دایره درگ کنید.

گرید ها و تکرار کننده ها در Adobe xd

در این مقاله به بررسی نحوه جایگزین کردن متن در repeat grid و جایگزین کردن تصویر در repeat grid پرداختیم و نحوه وارد کردن متن به repeat grid و نحوه وارد کردن تصاویر به repeat grid را شرح دادیم. همچنین مراحل ساخت صفحات داخلی و جلوه های آن ها را بررسی کردیم.

امتیاز دادن به این مقاله
دیدگاه کاربران

بدون دیدگاه

0 0 رای ها
امتیازدهی به مقاله
guest

0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
+
0
    0
    لیست خرید شما
    سبد خرید شما خالی استبازگشت به فروشگاه