اگر یک جنبه کار با Illustrator وجود دارد که من واقعا از آن لذت نمی برم، تبدیل هنر خط به تصاویر svg برای موبایل یا وب است. با استفاده از منوی صادرات> صادرات به عنوان و به صورت وحشیانه صادقانه، ویژگی ذخیره برای وب - صادرات> ذخیره برای وب - دقیقا آسان برای استفاده نیست.
تبدیل یک نقاشی به فرمت .vv یک جعبه محاوره ای بود که برای افرادی که در این جریان کار می کردند، یک آرایه دلخواه از گزینه ها را ارائه داد، اما بعضی از فرمت های .vvg وجود نداشت و تنها یکی از آنها مناسب بود فرمت هنگامی که شما به این گردش کار می رسید، معامله بزرگ نبود، اما منحنی یادگیری شیب داشت.
این همه با ویژگی های Export For Screens جدید - Export> Export for Screens - و پانل صادرات Asset که به Illustrator CC 2015 در ماه ژوئن 2016 معرفی شده تغییر یافته است. در این "How To" من می خواهم به شما نشان دهد که چگونه از هر دو استفاده کنید امکانات. بیا شروع کنیم.
01 از 04
چگونه برای دسترسی به صادرات برای نمایش در Adobe Illustrator CC 2015
پس از استفاده از Illustrator از Illustrator 88 فکر می کنم می توانم تمایلی به درک Illustrator به عنوان یک ابزار طراحی جدی برای رابط ها و پروژه های وب و تلفن همراه درک کنم.
وقتی که در نسخه CS4 نسخه 2008 معرفی شد، فکر کردم این یک افزونه جالب برای برنامه بود. هنگامی که برای اولین بار از ویژگی Save For Web در Illustrator دیدم دوباره آن را جالب دیدم اما همان ویژگی را در Adobe Fireworks یافتم که با گرافیک وب از Illustrator هماهنگ بود.
با ظهور یک رویکرد تلفن همراه برای طراحی و افزایش وابستگی به تصاویر SVG برای پروژه های تلفن همراه، Illustrator ابزار من برای استفاده از SVG بود و تبدیل به یک توقف مهم در گردش کار طراحی UI شد.
با این حال، اگر من نیاز به صادرات دارایی های تلفن همراه داشتم، Sketch 3 و Photoshop CC 2015 ابزار من انتخاب هستند. Illustrator در ماه ژوئن 2016 با لیست بسیار زیبایی صادرات برای منوها وارد لیست شده است.
در مثال بالا، من دو صفحه را برای آیفون تعیین کرده ام و آنها در Artboards جداگانه به نام "Home" و "Places" نامگذاری شده است. برای خروج آنها، من File> Export> Export for Screens را انتخاب کردم. جعبه محاوره Export for Screens باز می شود.
02 از 04
نحوه استفاده از جعبه گفتگو صادرات برای محافظ صفحه نمایش
وقتی کادر محاوره ای ظاهر می شود، بر روی هر یک از مباحث کلیک کنید تا انتخاب شود. پس از آن ورزش یک علامت چک می کند. شما همچنین می توانید با کلیک بر روی یک نام مدیا پلیر آن را انتخاب کنید و آن را تغییر دهید. این خوب است که بدانید که آیا آثار هنری شما "Artboard 1" و "Artboard 2" نامیده شده است، که به صراحت به شما چیزی نمی گوید.
شما در انتخاب منطقه سه گزینه دارید:
- همه: این انتخاب هر یک از مباحث را در سند به عنوان یک فایل جداگانه صادر می کند.
- محدوده: طیف وسیعی از هنرهای تجسمی را وارد کنید. این به خصوص برای پروژه های با چند بمب های مختلف مفید است.
- سند کامل: این را انتخاب کنید و تمام جلوه های هنری را به یک سند تک تقسیم کنید.
منطقه صادرات به شما اجازه می دهد تا پوشه مقصد را برای خروجی انتخاب کنید. پوشه پیش فرض مکان فعلی سند Illustrator خواهد بود.
فرمت ها جایی است که "جادو اتفاق می افتد. شما متوجه خواهید شد که سه آیکون - iOS وجود دارد. آندروید و دنده دو مورد اول خود توضیحی هستند. نماد Gear تنظیمات فرمت را باز می کند که به شما اجازه می دهد تا کنترل کنید که چگونه هر یک از فرمت های فایل در لیست بهینه سازی می شود. این تنظیمات "فرمت خاص" هستند و هنگامی که تغییرات خود را انجام داده اید، روی دکمه ذخیره تنظیمات کلیک کنید و این تغییرات به فرمت های خروجی اعمال می شود.
هنگامی که شما iOS یا Android را انتخاب می کنید، لیست تغییر خواهد کرد تا تمام قطعنامه های موجود در آن پلتفرم را شامل شود. لیست iOS فاکتورهای مقیاس پذیری برای صفحه نمایش Retina را نشان می دهد و انتخاب اندروید دارای مقیاس هایی از .75x تا 4x خواهد بود که عملا هر دستگاه اندرویدی را در آن جا قرار می دهد.
اگر یک فرمت نشان می دهد که شما می خواهید حذف کنید، روی "x" کلیک کنید. اگر یکی از شما می خواهید برای اضافه کردن بر روی دکمه + اضافه کردن مقیاس وجود دارد.
پس از اتمام، بر روی دکمه Export Artboard کلیک کنید و یک نوار پیشرفت به شما نشان می دهد که فرآیند تمام شده است.
03 از 04
با استفاده از فایل های صادرات برای صفحه نمایش از Adobe Illustrator CC 2015.
هنگامی که شما نتایج خروجی برای صفحه نمایش را بررسی می کنید، شما کشف خواهید کرد که Illustrator یک نسخه پهن شده از هر صفحه نمایش داده است. در سطح، این ممکن است به نظر می رسد کمی ضعیف است، به خصوص اگر شما انتظار داشتید Illustrator تمام بیت ها و قطعات را به عنوان تصاویر صادر کند.
اگر شما یک لحظه به عقب برگردید و در مورد آن فکر کنید، این دقیقا همان چیزی است که شما نیاز دارید زیرا شما می توانید از این خروجی در یک برنامه نمونه سازی شده مانند Adobe Experience Design ، Principleformac، Atomic.io ، UXPin یا دیگر برنامه های اولیه
در این مثال، از طراحی ادوبی تجربه (XD) برای ایجاد یک کلیک ساده استفاده می کنم. اولین گام در این فرآیند این بود که اندازه آیفون 6 را انتخاب کنید که ابعاد رابط Illustrator را مطابقت داد
وقتی رابط باز شد، ابزار ابزار Artboard را انتخاب کردم و یک بار در یک صفحه نمایش کلیک کردم تا یک صفحه دیگر اضافه شود. سپس آنها را "Home" و "Places" نامگذاری کردم، هر یک از آیتم ها را انتخاب کرده و تصویر png را از Illustrator به داخل Artboard وارد کرد.
برای ایجاد "نقاط قوت" برای کلیک از طریق من یک مستطیل بر روی دکمه Explore در صفحه اصلی کشیدم و مقادیر پر و مرز آن را با حذف کردن آن خواص در پانل Properties تنظیم کردم. من همین کار را با دکمه برگشت در صفحه Places انجام دادم.
برای افزودن Interactivity، حالت نمونه اولیه را انتخاب کردم و سپس بر روی "hotspot" کلیک کردم. سپس یک دکمه به نام سیم را به صفحه Places کشیدم و هدف انتقال در Places را تعیین کردم، حرکت به چپ چپ، تسریع در کاهش سرعت و مدت زمان انتقال به 6 ثانیه.
من این مرحله را با کانون در صفحه Places تکرار کردم. تنها تفاوت این بود که انتقال به سمت راست فشار داده شد. هنگامی که روی دکمه Play کلیک کردم، من نمونه اولیه خود را آزمایش کردم.
04 از 04
نحوه استفاده از پنل اشیاء صادرات در Adobe Illustrator CC 2015
همراه با منوی Save for Screens نیز ادغام یک پانل جدید - Asset Export اضافه کرد که نقطه درد عظیمی در گردش کار طراحی UI را حذف کرد.
نقطه درد آیکون بود. Illustrator یک برنامه طراحی بسیار جذاب بردار است اما برای خروجی، اجازه دهیم 10 آیکون را در یک صفحه با 40 یا 50 مورد از آنها بگنجانیم، هر یک به عنوان یک تصویر SVG ذخیره می شود. این به ناچار با توجه به سفرهای پی در پی به پانل SVG، زمان بیشتری را از معمول به دست آورد. این نقطه درد اکنون چیزی از گذشته است.
این پانل جدید را می توانید در Window> Asset Export ببینید. وقتی پانل باز می شود، دارایی را که می خواهید برای تبدیل به SVG یا فرمت دیگر انتخاب کنید انتخاب کنید و به پانل بکشید. هنگامی که موس را رها می کنید، ریز عکس دارایی به پانل اضافه می شود. نام دارایی اشیاء کشیدن را به پنل نگه دارید تا زمانی که تمام شده باشید.
هر مورد را انتخاب کنید در قسمت تنظیمات صادرات، و یا همه آنها را با پایین نگه داشتن کلید Shift و کلیک بر روی هر یک را انتخاب کنید. قالب خود را انتخاب کنید - در این مثال، من SVG را انتخاب کردم و بر روی دکمه صادرات کلیک کنید. موارد انتخاب شده به صورت فایل های SVG به همان محل فایل Illustrator ارسال می شوند.
از آنجایی که این روند تمام می شود، شما مجبور نیستید از پنل صادرات دارایی استفاده کنید. اگر روی دکمه Save for Screens در پایین پانل کلیک کنید، کادر محاوره ای باز می شود.
برعکس، می توانید بر روی زبانه دارایی در پانل Save for Screens کلیک کنید تا به پنل صادرات دارایی دسترسی پیدا کنید. به عنوان مثال، اگر شما یک آیکون سفارشی در یک متریال داشته باشید، می توانید پنل اکتساب صادرات را در کادر محاوره ای Save for Screen باز کنید و آن آیتم را به پنل صادرات دارائی بکشید.