मोबाइल उपकरणों के लिए छवियों की तैयारी

मोबाइल के लिए इमेजिंग हमेशा ऐसा नहीं लगता है

ग्राफिक्स पेशेवरों के लिए यह तेजी से आम हो रहा है कि न केवल उनके काम को प्रिंट में दिखाई दे, बल्कि वेब और डिवाइस जैसे आईफोन, आईपैड, एंड्रॉइड डिवाइस और एंड्रॉइड टैबलेट पर भी दिखाई दे। सतह पर, इसे "अच्छी चीज" के रूप में देखा जा सकता है क्योंकि मीडिया हमारे काम डिजिटल स्क्रीन पर फैलता है। नकारात्मकता स्क्रीन की बड़ी संख्या और स्क्रीन संकल्पों की भ्रमित संख्या है। अनुभवी पेशेवरों को यह सोचना असामान्य नहीं है कि उन दिनों के साथ क्या हुआ जब सीएमवाईके प्रारूप में 300 डीपीआई रिज़ॉल्यूशन टीआईएफएफ छवि मानक थी। ओह अच्छे पुराने दिनों के लिए!

वह दिन अब लद गए। अब हमें इस तथ्य का सामना करना पड़ता है कि 200 से 200 छवि एक डिवाइस पर ठीक दिखाई दे सकती है और फिर भी दूसरे पर चौथाई आकार और तीन-चौथाई आकार दिखाई दे सकती है। यह वास्तव में डिवाइस निर्माताओं द्वारा "रेज़ोल्यूशन आर्म्स रेस" के लिए आता है क्योंकि वे अपने प्रतिस्पर्धियों की तुलना में स्क्रीन में अधिक पिक्सेल जाम करने का प्रयास करते हैं।

यह हमें "सांसों का उदय" कहने के लिए लाता है। प्रत्यय उन चीजें हैं - @ 2x, @ 3x - एक छवि के नाम पर tacked। वे अनिवार्य रूप से, उदाहरण के लिए, सही डिवाइस पर सही जगह पर सही छवि डाल दें। फिर यह भी बेहतर हो जाता है।

हमारे बहुत से काम में आइकन के साथ काम करना शामिल है और फ्लैट डिजाइन आंदोलन के उदय के साथ, ये चीजें ऐसे वेक्टर ड्राइंग अनुप्रयोगों में इलस्ट्रेटर और स्केच के रूप में बनाई गई हैं। समस्या यह है कि उपकरण बस .ai या .eps फ़ाइलों को प्रस्तुत नहीं कर सकते हैं। उन्हें स्केलेबल वेक्टर ग्राफिक्स में परिवर्तित करने की आवश्यकता है और, आइकन बनाने के लिए उपयोग किए गए एप्लिकेशन के आधार पर, एक एसवीजी विकल्प भी नहीं हो सकता है।

फिर यह भी बेहतर हो जाता है।

सॉफ़्टवेयर की एक नई श्रेणी- प्रोटोटाइपिंग अनुप्रयोग - जो आपकी छवियों और आइकन से पहले असेंबली पॉइंट बन रहे हैं, डिवाइसों के लिए बाहर आ गए हैं और उनके पास उनकी विशिष्टता भी है।

यह ट्यूटोरियल ग्राफिक्स के लिए फ़ोटोशॉप और स्केच के बीच और एडोब एक्सपीरियंस डिज़ाइन का उपयोग करके आपके विचार और अंतिम तैनाती के बीच कुछ दर्द बिंदुओं का प्रदर्शन करने के लिए चलता है। आएँ शुरू करें।

05 में से 01

एडोब फोटोशॉप में मोबाइल उपकरणों के लिए छवियां कैसे तैयार करें

इस प्रक्रिया में पहला कदम आपके लक्षित डिवाइस या उपकरणों को जानना है। इस मामले में, आप आईफोन 6 को लक्षित करेंगे जिसमें 375 पिक्सल का स्क्रीन क्षेत्र 667 पिक्सेल ऊंचा होगा। डिज़ाइन स्क्रीन की चौड़ाई होने के लिए छवि को कॉल करता है।

इस्तेमाल की जाने वाली छवि को स्विट्जरलैंड के बर्न में बर्न मिनस्टर कैथेड्रल के अंदर गोली मार दी गई थी। फ़ोटोशॉप में छवि खुलने के बाद, छवि और उसके रिज़ॉल्यूशन के आयामों को देखने के लिए छवि> छवि आकार का चयन करें । जाहिर है, 300 पीपीआई के संकल्प के साथ 3156 x 2592 और 23.4 एमबी का फ़ाइल आकार बस एक छवि काम नहीं करेगा।

छवि आकार संवाद बॉक्स के अंदर, संकल्प को 100 पीपीआई में कम करें । इसे पहले करें क्योंकि छवि आयाम भी बदल जाएंगे। संकल्प सेट के साथ, चौड़ाई को 375 पिक्सल में बदलें। यदि आप छवि आकार डेटा की जांच करते हैं तो आप देखेंगे कि छवि 23.4 एमबी से अधिक मोबाइल-अनुकूल 338k तक घट गई है। परिवर्तन स्वीकार करने के लिए ठीक क्लिक करें और छवि आकार संवाद बॉक्स बंद करें।

05 में से 02

एडोब फोटोशॉप में संवाद बॉक्स "संवाद के रूप में ..." का उपयोग कैसे करें

एक बार जब छवि निर्यात के लिए तैयार हो जाए, तो निर्यात करें संवाद बॉक्स खोलने के लिए "निर्यात> निर्यात करें ..." का चयन करें ।

यह डायलॉग बॉक्स फ़ोटोशॉप के लिए हालिया जोड़ा है और वर्षों के लिए उपयोग किए जाने वाले "वेब के लिए सहेजें" संवाद बॉक्स को प्रतिस्थापित करता है। यदि आपको अभी भी इसकी आवश्यकता है, तो आप इसे निर्यात पॉप डाउन में पा सकते हैं। यह स्पष्ट कारणों से है, जिसे अब "वेब के लिए निर्यात (विरासत)" के नाम से जाना जाता है। यदि यह इस संवाद बॉक्स की आपकी पहली यात्रा है, तो यहां एक संक्षिप्त दौरा है:

• आकार: यह कॉलम छवि के आउटपुट आकार को सेट करता है। इस क्षेत्र का दिलचस्प पहलू यह छवि को बड़ा करेगा, लेकिन डिवाइस की स्क्रीन पर बड़ी संख्या में पिक्सल की वजह से छवि डिवाइस पर "अस्पष्ट" दिखाई नहीं देगी।
• 1 एक्स: इसे पकड़ने पर क्लिक करें और आपको कई आकारों के साथ प्रस्तुत किया जाएगा। 1x, 2x और 3x श्रेणियां परंपरागत रूप से ऐप्पल से हाय डीपीआई डिवाइस से जुड़ी हैं और वे कुछ अन्य लोगों के साथ एंड्रॉइड डिवाइसों के लिए छवियां तैयार करेंगे।
• प्रत्यय: यह विकल्प आपका आकार दिखाएगा लेकिन इसे @ 2x के रूप में दिखाया जाएगा या आकार चुना जाएगा। यह प्रत्यय छवि नाम में जोड़ा जाएगा।
• + चिह्न: आउटपुट के लिए विभिन्न आकार जोड़ने के लिए इसे क्लिक करें। इस मामले में, इसे दो बार क्लिक करें और पॉप डाउन से 2x और 3x चुना है। यह व्यावहारिक रूप से किसी भी आईओएस डिवाइस को कवर करेगा।
• ट्रैश कैन: इस पर क्लिक करें और लाइनअप से पसंद हटा दिया गया है।
• फ़ाइल सेटिंग्स: प्रारूप चुनें - jpg, png, gif या svg - छवि के लिए सबसे उपयुक्त। अगर फ़ाइल का आकार चिंता का विषय है तो आप गुणवत्ता सेटिंग्स को भी कम कर सकते हैं।
• छवि का आकार: आप छवि के भौतिक आयामों को बदल सकते हैं।
• कैनवास आकार: आप छवि कैनवास के भौतिक आयामों को बदल सकते हैं।
• मेटाडाटा: आप छवि और मेटाडेटा में कॉपीराइट और अपनी संपर्क जानकारी जोड़ सकते हैं।

समाप्त होने पर, सभी निर्यात करें बटन पर क्लिक करें। आपसे पूछा जाएगा कि आप छवियों को कहां रखना चाहते हैं। विकसित करने के लिए एक अच्छी आदत है नया फ़ोल्डर बटन क्लिक करना और निर्यात की गई छवियों को रखने के लिए एक फ़ोल्डर बनाना। जब आप निर्यात पर क्लिक करते हैं, तो आपको फ़ोल्डर में छवियों को दिखाया जाएगा।

05 का 03

स्केच 3 में बोहेमियन कोडिंग से मोबाइल उपकरणों के लिए छवियां कैसे तैयार करें

स्केच 3, बोहेमियन कोडिंग से एक मैकिंटोश-केवल एप्लिकेशन, वेब और ऐप डिज़ाइन पर गहन ध्यान देने के कारण यूएक्स और यूआई डिजाइनरों के बीच तेजी से प्रमुखता प्राप्त कर रहा है। वास्तव में फ़ोटोशॉप, कई तरीकों से, स्केच के साथ "पकड़ो" खेलने की अजीब स्थिति में है।

स्केच में मोबाइल के लिए एक छवि तैयार करने के लिए, आर्टबोर्ड पर छवि का चयन करें और गुण पैनल के नीचे निर्यात योग्य बटन पर क्लिक करें । यह निर्यात संवाद बॉक्स खुल जाएगा। 2x और 3x संस्करण जोड़ने के लिए + चिह्न पर क्लिक करें और प्रत्यय भी जोड़ें। उपलब्ध प्रारूप पीएनजी, जेपीजी, टीआईएफ, पीडीएफ, ईपीएस, और एसवीजी हैं। इस मामले में, जेपीजी चुनें। निर्यात बटन पर क्लिक करें और निर्यात करें या निर्यात की गई विभिन्न छवियों को पकड़ने के लिए फ़ोल्डर बनाएं।

04 में से 04

आपको छवि के तीन (या अधिक) संस्करण बनाने की आवश्यकता क्यों है

कई मामलों में, मोबाइल बाजार संकल्पों का "जंगली पश्चिम" है और एक आकार निश्चित रूप से सभी फिट नहीं है। उपरोक्त उदाहरण में एडोब एक्सपीरियंस डिज़ाइन से, छवि 2 आईफोन 6 आर्टबोर्ड और एक एंड्रॉइड डिवाइस आर्टबोर्ड पर रखी गई है। ध्यान दें कि बाईं ओर 1x संस्करण आधा आकार कैसा लगता है। यह बिल्कुल ठीक है कि छवि आईफोन 6 पर अपनी रेटिना स्क्रीन के साथ कैसे दिखाई देगी। 2x संस्करण पूरी तरह फिट बैठता है और एंड्रॉइड संस्करण स्क्रीन से बाहर चला जाता है। आपकी पसंद या तो छवि को स्केल करना या फ़ोटोशॉप से ​​छवि को एक अलग आकार में निर्यात करना है।

05 में से 05

टेस्ट अर्ली, टेस्ट अक्सर, कुछ भी भरोसा नहीं, किसी पर भरोसा न करें और विशेष रूप से स्वयं

आपको समझने की आवश्यकता है कि यह प्रक्रिया की शुरुआत है। अपने काम को कई उपकरणों पर देखना जैसे कि आपको वर्कफ़्लो का एक महत्वपूर्ण टुकड़ा माना जा सकता है। आपको यह भी पता होना चाहिए कि यह ऐप या मोबाइल वेब प्रोजेक्ट के लिए ग्राफिक्स संपत्ति बनाने की प्रक्रिया में पहला कदम है।

प्रोटोटाइप अनुप्रयोगों का उपयोग दर्द बिंदुओं को उजागर करने का एक शानदार तरीका है, लेकिन इन संपत्तियों को डेवलपर द्वारा उपयोग के लिए आउटपुट होने की आवश्यकता होगी। कई मामलों में, संपत्तियों सहित भौतिक आयाम, भौतिक रूप से विशाल होंगे और एसवीजी लेकिन पीएनजी प्रारूप में नहीं होंगे। पहली नज़र में, यह शीर्ष पर थोड़ा सा प्रतीत होता है लेकिन स्केलिंग छवियों के सुनहरे नियम को याद रखें: स्केल अप से स्केल करना बेहतर है।

निचली पंक्ति आपके डेवलपर के साथ मिलकर काम करना है और प्रोटोटाइप सॉफ्टवेयर का उपयोग अपने डिजाइन के इरादे को दिखाने के तरीके के रूप में करना है। आखिरकार, उन संपत्तियों को अंतिम उत्पाद के लिए तैयार होने की आवश्यकता होगी और आपके डेवलपर के पास आपके लिए आवश्यकतानुसार बेहतर संभाल है।