تصویربرداری برای تلفن همراه همیشه به نظر نمی رسد
این امر به طور فزاینده ای برای عناصر گرافیکی به نظر می رسد که نه تنها کار آنها در چاپ ظاهر می شود، بلکه در وب و دستگاه هایی مانند اپل، iPads، دستگاه های Android و قرص های اندرویدی. در سطح، این می تواند به عنوان یک "چیز خوب" به عنوان رسانه ای که کار ما ظاهر می شود در حال گسترش به صفحه نمایش دیجیتال دیده می شود. نزول تعداد صفحه نمایش ها و تعداد گیج کننده قطعنامه های صفحه نمایش است. شایان ذکر است که هر زمان که یک تصویر TIFF با رزولوشن 300 dpi در فرمت CMYK اتفاق می افتد، عادت به شنیدن فستیوال ها نیست. اوه برای روزهای خوب قدیمی!
آن روزها تمام شده اند اکنون ما باید با این واقعیت که یک 200 تا 200 تصویر ممکن است در یک دستگاه خوب ظاهر شود و با این حال به نظر می رسد سه چهارم در اندازه های دیگر و سه چهارم در یکی دیگر از. این همه واقعا به "حل مسابقات اسلحه" که توسط تولید کنندگان دستگاه انجام می شود، می رود، زیرا آنها سعی می کنند پیکسل های بیشتری را به صفحه نمایش برسانند تا رقباشان.
این ما را به چیزی که ما می گوییم «افزایش ظهور» می رساند. پسوندها آن چیزها هستند - @ 2x، @ 3x - بر روی نام یک تصویر قرار گرفته است. برای مثال، اساسا، تصویر درست را در جای مناسب در دستگاه راست قرار می دهند. سپس آن را حتی بهتر می شود.
بسیاری از کارهای ما شامل کار با آیکون ها می شود و با افزایش جنبش طراحی تخت، این موارد در چنین برنامه های کاربردی بردار مانند Illustrator و Sketch ایجاد می شود. مشکل این است که دستگاهها نمیتوانند فایلهای .ai یا .eps را رندر کنند. آنها باید به گرافیک برداری مقیاس پذیر تبدیل شوند و بسته به برنامه کاربردی که برای ایجاد آیکون استفاده می شود ممکن است یک گزینه SVG وجود نداشته باشد.
سپس آن را حتی بهتر می شود.
یک کلاس جدید از نرم افزار - برنامه های کاربردی نمونه سازی - که تبدیل شدن به نقاط مونتاژ قبل از تصاویر و آیکون های خود را به دستگاه های متلاشی شده وجود دارد و آنها دارای ویژگی های خود را نیز وجود دارد.
این آموزش بین فتوشاپ و Sketch برای گرافیک و استفاده از Adobe Experience Design برای نشان دادن چندین نقطه درد بین ایده شما و استقرار نهایی در حال حرکت است. بیا شروع کنیم.
01 از 05
نحوه تهیه تصاویر برای دستگاه های موبایل در فتوشاپ
اولین گام در این فرایند شناخت دستگاه یا دستگاه هدف شما است. در این مورد، شما آیفون 6 را هدف قرار خواهید داد که دارای یک صفحه نمایش 375 پیکسل با 667 پیکسل است. طراحی باعث می شود که تصویر پهنای صفحه باشد.
تصویر مورد استفاده در کلیسای برنشتاین مینستر در برن، سوئیس مورد ضرب و شتم قرار گرفت. هنگامی که تصویر در فتوشاپ باز می شود، Image> Image Size را انتخاب کنید تا ابعاد تصویر وضوح آن بررسی شود. بدیهی است که یک تصویر 3156 x 2592 با وضوح 300 پیکسل و حجم فایل 23.4 مگابایت به سادگی کار نخواهد کرد.
درون کادر محاوره ای تصویر، رزولوشن را به 100 پیکسل کاهش دهید . برای اولین بار این کار را انجام دهید زیرا ابعاد تصویر نیز تغییر خواهد کرد. با تنظیم Resolution، عرض را به 375 پیکسل تغییر دهید. اگر اطلاعات اندازه تصویر را بررسی می کنید، متوجه می شوید که تصویر از 23.4 مگابایت تا 338k قابل رویت تر شده است. برای پذیرفتن تغییرات را کلیک کنید و کادر محاوره ای اندازه تصویر را ببندید.
02 از 05
نحوه استفاده از جعبه محاوره "Export As ..." در Adobe Photoshop
هنگامی که تصویر برای صادرات آماده است، "Export> Export As ..." را انتخاب کنید تا کادر محاوره ای Export As را باز کنید.
این جعبه گفتگو علاوه بر اخیر در فتوشاپ جایگزین جعبه گفتگو «ذخیره برای وب» است که برای سال ها استفاده می شود. اگر هنوز به آن نیاز دارید، می توانید آن را در Export پاپ آپ پیدا کنید. به دلایل آشکار، اکنون به نام "Export For Web (Legacy)" شناخته می شود. اگر این اولین بازدید شما از این کادر محاوره ای است، اینجا یک تور کوتاه است:
- اندازه: این ستون اندازه خروجی تصویر را تعیین می کند. جنبه جالب این منطقه این است که تصویر را بزرگتر می کند، اما به دلیل تعداد زیادی پیکسل روی صفحه دستگاه، تصویر به عنوان "فاز" در دستگاه ظاهر نمی شود.
- 1X: با کلیک بر روی نگه داشتن این و شما را با تعدادی از اندازه ارائه شده است. دسته های 1x، 2x و 3x به طور سنتی با دستگاه Hi Dpi از اپل همراه هستند و آنها همراه با چند نفر دیگر تصاویر را برای دستگاه های آندروید آماده می کنند.
- پیش فرض: این انتخاب اندازه شما را نشان می دهد، اما به عنوان @ 2x نمایش داده خواهد شد یا اندازه انتخاب شده است. این پسوند به نام تصویر افزوده می شود.
- علامت +: برای اضافه کردن اندازه های مختلف برای خروجی روی این کلیک کنید. در این مورد، آن را دوبار کلیک کنید و 2x و 3x را از پاپ پایین انتخاب کنید. این تقریبا عملا هر دستگاه iOS را پوشش می دهد.
- این سطل زباله: روی این کلیک کنید و انتخاب از لیست انتخابی حذف می شود.
- تنظیمات فایل: فرمت را انتخاب کنید - jpg، png، gif یا svg - برای تصویر مناسب است. اگر حجم فایل نگرانی باشد، می توانید تنظیمات کیفیت را نیز کاهش دهید.
- اندازه تصویر: شما می توانید ابعاد فیزیکی تصویر را تغییر دهید.
- ابعاد بوم: شما می توانید ابعاد فیزیکی بوم تصویر را تغییر دهید.
- متادیتا: شما می توانید کپی رایت و اطلاعات تماس خود را به ابرداده تصویر اضافه کنید.
پس از اتمام، روی دکمه Export All کلیک کنید. از شما خواسته می شود که در آن شما می خواهید تصاویر قرار دهید. یک عادت خوب برای توسعه این است که دکمه New Folder را کلیک کنید و یک پوشه برای نگهداری تصاویر صادر شده ایجاد کنید. وقتی روی Export کلیک میکنید، تصاویر موجود در پوشه نمایش داده میشوند.
03 از 05
نحوه تهیه تصاویر برای دستگاه های موبایل در طرح 3 از کدام بوهمیان
طرح 3، یک برنامه مکینتاش تنها از Bohemian Coding، به دلیل توجه شدید خود به طراحی وب و برنامه، به سرعت در میان طراحان UX و UI به چشم می خورد. در واقع فتوشاپ، به طرق مختلف، در موقعیت عجیب و غریب است که نیاز به بازی کردن با Sketch دارد.
برای تهیه یک تصویر برای تلفن همراه در Sketch، تصویر را روی جلوی صفحه انتخاب کنید و روی دکمه Make Exportable در پایین پانل Properties کلیک کنید . این جعبه محاوره Export را باز می کند. روی نماد + کلیک کنید تا نسخه های 2x و 3x اضافه شود و همچنین پسوندها را اضافه کنید. فرمت های موجود عبارتند از PNG، JPG، TIF، PDF، EPS و SVG. در این مورد، JPG را انتخاب کنید. بر روی دکمه صادرات کلیک کنید و یا یک پوشه ایجاد کنید تا تصاویر مختلف صادر شده را نگه دارید.
04 از 05
چرا شما نیاز به ایجاد سه (یا بیشتر) نسخه از تصویر
در بسیاری از موارد، بازار موبایل "غرب وحشی" قطعنامه است و یک اندازه مطمئنا مناسب همه نیست. در مثال فوق از Adobe Experience Design، تصویر روی 2 آیفون 6 آیفون و یک آیکون های Android device قرار می گیرد. توجه کنید که نسخه 1x در سمت چپ به اندازه نصف است. این دقیقا همان چیزی است که تصویر بر روی آیفون 6 با صفحه نمایش شبکیه خود ظاهر می شود. نسخه 2x کاملا مطابقت دارد و نسخه آندروید از صفحه نمایش می رود. انتخاب شما این است که یا مقیاس تصویر یا صادرات تصویر را از فتوشاپ در اندازه های مختلف.
05 از 05
تست زود، تست اغلب، هیچ اعتماد نکنید، هیچ کس اعتماد نکنید و به خصوص خودتان
آنچه شما باید بدانید این است که فقط آغاز روند است. مشاهده کار خود را به عنوان بسیاری از دستگاه های که شما می توانید به عنوان یک بخش حیاتی از گردش کار در نظر گرفته شده است. شما همچنین باید بدانید که این تنها اولین قدم در ایجاد دارایی های گرافیکی برای پروژه های برنامه یا وب موبایل است.
با استفاده از برنامه های کاربردی نمونه یک روش عالی برای کشف نقاط درد است، اما این همان دارایی ها باید برای استفاده توسط توسعه دهنده مورد استفاده قرار گیرد. در بسیاری از موارد، ابعاد فیزیکی داراییها، از جمله آیکون ها، از لحاظ جسمی بسیار زیاد است و نه در قالب SVG، بلکه PNG. در نگاه اول، این ممکن است به نظر می رسد کمی بیش از حد بالا، اما به یاد داشته باشید قانون طلایی تصاویر مقیاس: بهتر است مقیاس کردن از مقیاس.
خط پایین این است که با توسعهدهنده خود کار کنید و از نرم افزارهای اولیه برای نشان دادن هدف طراحی خود استفاده کنید. در نهایت، با این حال، همان دارایی ها باید برای محصول نهایی آماده شوند، و توسعه دهنده شما دارای دسته ای بهتر از آن چیزی است که او نیاز دارد.