افزودن رنگ و تصویر در Adobe XD

افزودن رنگ و تصویر در Adobe XD

در این قسمت، روش افزودن رنگ و تصویر را در Adobe XD یاد می‌گیریم. ابتدا با رنگ‌ها شروع می‌کنیم.

 در آرت‌بوردتان، شکلی را که می‌خواهید به آن رنگ بدهید، انتخاب کنید. مثلا، دکمه‌ی "ورود" را با سبز رنگ آمیزی کنید. به Properties Inspector بروید و روی دکمه‌ی "Fill" کلیک کنید. یک پنل کوچک ظاهر می‌شود. بخش رنگارنگ بزرگی که مشاهده می‌کنید، انتخاب‌کننده‌ی رنگ (Color Picker) است. با کلیک بر روی هر بخشی از آن، هنگام کلیک کردن، رنگ شکلی که انتخاب کرده‌اید، به رنگی که موس شما روی آن است، تغییر خواهد کرد. همچنین، می‌توانید کد HEX آن رنگ را نیز در Color Picker بررسی کنید.

برای برخی از اشکال‌تان، فقط به حاشیه (Border) نیاز دارید. به عنوان مثال، به دکمه‌ی "ثبت نام" در تصویر بالا نگاه کنید. از رنگ پر نشده و فقط حاشیه‌ی سبز دارد. برای ایجاد یک حاشیه‌ی رنگ، شکل را انتخاب کنید و در Properties Inspector روی "Border" کلیک کنید. سپس همان روشی را که برای رنگ کردن دکمه‌ی "ورود" انجام دادید، تکرار کنید. آیا می‌خواهید ضخامت Border را افزایش دهید؟ از گزینه‌ی "Size"، درست زیر بخش "Border" استفاده کنید.

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

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

حالا بیایید یک ماسک رنگی روی یک تصویر اعمال کنیم. ما تصویر پس‌زمینه‌ی اپلیکیشن Activistمان را انتخاب کرده‌ایم. 

برای اعمال ماسک رنگی روی یک تصویر، به سادگی یک مستطیل در بالای تصویر اضافه کنید. مطمئن شوید که مستطیل دقیقا روی تصویر باشد و هیچ حاشیه‌ای نداشته باشد.

حالا، از قسمت ظاهر Properties Inspector مقدار شفافیت (Opacity) را تا 50% کاهش دهید و سپس روی Fill کلیک کنید و رنگ مورد نظرتان را برای آن انتخاب کنید. ما برای اپلیکیشن Activist خود، یک پوشش آبی را انتخاب کرده‌ایم.