مطمئن نیستید با Adobe XD از کجا شروع کنید؟ ما به شما کمک خواهیم کرد شما در کمترین زمان طراحی های جالب UI/UX خواهید داشت.
Adobe XD یک ابزار قدرتمند است که به شما امکان می دهد طرح های UI/UX برای نرم افزار، برنامه ها، وب سایت ها و موارد دیگر ایجاد کنید. این همچنین شامل ایجاد موکاپ ها، نمونه های اولیه و اجزای رابط کاربری سفارشی برای یک رابط است. با استفاده از Adobe XD می توانید طرح های ساده و پیچیده ایجاد کنید.
در اینجا، نحوه افزودن گرافیک های ساده از جمله اشکال، تصاویر و متن را به پروژه جدید Adobe XD توضیح خواهیم داد. این با راهنمای نحوه تبدیل گروهی از اشکال به اجزا و نحوه استفاده مجدد از آن اجزا در صفحه دنبال خواهد شد. در نهایت، مقاله نحوه صادرات گرافیک خود را نیز پوشش می دهد. بیایید درست بپریم داخل
ایجاد یک پروژه Adobe XD
هنگامی که یک پروژه جدید Adobe XD ایجاد می کنید، باید اندازه طرح بندی پروژه خود را انتخاب کنید. این چند قالب را برای شما فراهم می کند تا بر اساس برخی از دستگاه های محبوب انتخاب کنید.
چند نمونه از این موارد عبارتند از iPhone X/XS/11 Pro (375px در 812px)، iPad (768px در 1024px) یا Web 1920 (1920px در 1080px). از طرف دیگر، شما همچنین می توانید یک عرض و ارتفاع سفارشی برای پروژه خود انتخاب کنید.
هنگامی که یک پروژه جدید ایجاد کردید، Adobe XD یک صفحه خالی باز می کند. اینجاست که می توانید شروع به اضافه کردن تصاویر، اشکال، متن یا سایر عناصر طراحی کنید. بسته به اینکه کدام نسخه Adobe XD را دارید، ممکن است بتوانید برخی از ویژگی های جدیدی را که Adobe XD ارائه می دهد کشف کنید.
عنصر طراحی سطح بالا خود صفحه بوم است. اگر آن را برجسته کنید، می‌توانید از پنجره سمت راست برای تغییر مستقیم برخی از ویژگی‌های آن، مانند عرض یا ارتفاع بوم، استفاده کنید.
نحوه افزودن تصاویر
راه های مختلفی وجود دارد که می توانید تصاویر را به پروژه Adobe XD خود اضافه کنید.
- اولین گزینه این است که روی نماد منوی همبرگر در بالای ستون سمت چپ کلیک کنید. روی Import کلیک کنید و فایلی را که می خواهید اضافه کنید باز کنید.
- گزینه دیگر این است که به تصویر خود در فایل اکسپلورر بروید و فایل را مستقیماً به Adobe XD بکشید.
- گزینه سوم این است که اگر تصویر خود را در نرم افزار دیگری مانند مایکروسافت ورد باز دارید، کپی و جایگذاری کنید.
نحوه تغییر اندازه و تغییر موقعیت یک تصویر
شما می توانید یک تصویر را مستقیماً روی بوم یا با تغییر ویژگی های آن تغییر مکان داده و اندازه آن را تغییر دهید.
- تصویر را برجسته کنید. وقتی یک عنصر طراحی را روی بوم برجسته می‌کنید، می‌توانید ویژگی‌های آن را در قسمت سمت راست ببینید.
- عرض و ارتفاع تصویر را تغییر دهید. اینها با فیلدهای W و H نشان داده می شوند.
- همچنین می توانید مختصات X و Y را در جایی که قسمت بالای سمت چپ تصویر شروع می شود تغییر دهید.
- برای جابجایی تصویر در اطراف، روی بوم کلیک کرده و آن را بکشید.
- برای تغییر اندازه، نقاط واقع در لبه های تصویر را بکشید.
نحوه تنظیم لبه های یک تصویر
می توانید گوشه های تصویر را برای تغییر شکل آن تنظیم کنید.
- تصویر را برجسته کنید.
- نقاطی را در اطراف تصویر خواهید دید. علاوه بر این، نقاطی نیز در گوشه‌های تصویر وجود دارد.
- روی نقطه ای که در داخل تصویر قرار دارد کلیک کرده و بکشید. این به آرامی تصویر را به شکل دیگری تغییر می دهد.
نحوه اضافه کردن افکت های دیگر به تصویر
با افزودن افکت ها می توانید تصویر را بیشتر دستکاری کنید. این شامل کدورت، حاشیه‌ها، جلوه‌های تاری و موارد دیگر می‌شود.
- تصویر را برجسته کرده و Opacity را در سمت راست تغییر دهید.
- در حالی که هنوز در قسمت سمت راست هستید، رنگ Border را تغییر دهید. در اینجا می توانید ضخامت، سبک خط تیره و سبک گوشه حاشیه را نیز تغییر دهید.
- یک افکت تاری به تصویر اضافه کنید و مقدار تاری شی را تغییر دهید تا شدت تاری را کم یا زیاد کنید.
نحوه اضافه کردن اشکال
شما می توانید اشکال را در Adobe XD از طریق صفحه سمت چپ اضافه کنید.
- در پنجره سمت چپ، می‌توانید چندین شکل اصلی از جمله مستطیل، دایره، مثلث و خط ایجاد کنید. شکلی را که می خواهید بکشید انتخاب کنید.
- روی هر نقطه از بوم کلیک کنید و مکان نما را بکشید تا شکل را ایجاد کنید.
نحوه اضافه کردن اشکال سفارشی
می توانید از ابزار شکل سفارشی برای ایجاد شکل دلخواه خود استفاده کنید.
- در قسمت سمت چپ، نماد قلم را انتخاب کنید.
- برای اضافه کردن اولین نقطه یا “گوشه” برای شکل، روی هر نقطه از بوم کلیک کنید. برای هر نقطه از شکل، روی بوم در ناحیه ای که می خواهید باشد کلیک کنید.
- هنگامی که ایجاد شکل را به پایان رساندید، کلید Esc را روی صفحه کلید خود فشار دهید.
نحوه تغییر رنگ یک شکل
می توانید رنگ شکل را با استفاده از پنجره سمت راست تغییر دهید.
- شکل را برجسته کنید.
- در قسمت سمت راست، Fill را تغییر دهید.
- علاوه بر این، می‌توانید حاشیه‌ها را اضافه کنید، جلوه‌ها را محو کنید و کدورت شکل را مانند تصاویر تغییر دهید.
نحوه اضافه کردن متن
شما همچنین می توانید متن را به همان روشی که اشکال اضافه می کنید اضافه و ویرایش کنید.
- بر روی نماد Text در قسمت سمت چپ کلیک کنید.
- برای افزودن یک جعبه متن جدید، روی هر نقطه از بوم کلیک کنید. متن مورد نظر خود را در کادر متنی تایپ کنید.
- از قسمت سمت راست برای ویرایش فیلدهای اندازه، خانواده فونت و تراز استفاده کنید.
نحوه ایجاد کامپوننت
کامپوننت گروهی از عناصر طراحی است که می توان از آنها مجددا استفاده کرد. برای ایجاد و استفاده از یک جزء، ابتدا باید گروهی از اشکال یا دیگر اشیاء طراحی را داشته باشید.
- گروه اشکال را در بوم برجسته کنید. روی گروه کلیک راست کرده و Make Component را انتخاب کنید.
- در پایین صفحه سمت چپ، روی Assets کلیک کنید. یک منوی جدید باز می شود که دارایی هایی را که دارید، از جمله مؤلفه ای که به تازگی اضافه کرده اید، فهرست می کند.
- کلیک کنید و مؤلفه را از لیست اجزا به بوم بکشید. انجام این کار دقیقاً همان گروه از عناصر را ایجاد می کند.
نحوه صادرات اقلام
می توانید موارد جداگانه و همچنین کل صفحه را صادر کنید.
- اگر می‌خواهید یک مورد را صادر کنید، موردی را که می‌خواهید صادر کنید برجسته کنید.
- روی نماد منوی همبرگر در بالای ستون سمت چپ کلیک کنید.
- Export را انتخاب کرده و سپس بر روی Selected کلیک کنید.
- اگر می خواهید کل صفحه (یا همه صفحات) را صادر کنید، به جای آن همه تابلوهای هنری را انتخاب کنید.
- می توانید فرمت فایل (PNG، JPG، SVG، یا PDF)، مورد صادر شده برای چه چیزی باشد (مانند وب یا iOS)، و جایی که می خواهید فایل خود را ذخیره کنید، مشخص کنید.
در Adobe XD مهارت پیدا کنید
اینها فقط اصول اولیه هستند. برخی از ویژگی های دیگر عبارتند از توانایی افزودن لینک ها، نمادها، ادغام برنامه ها و کیت های رابط کاربری. Adobe XD همچنین هر از چند گاهی ویژگی‌های جدیدی را برای کمک به بهبود و ساده‌سازی ساخت ماکت‌ها و طراحی‌های UI سفارشی ارائه می‌کند.
چندین دوره آموزشی آنلاین وجود دارد که به شما کمک می کند تا مهارت های طراحی جدید خود را به سطح بعدی ارتقا دهید.