मोबाइल उपकरणहरूको लागि छविहरू तयारी गर्दै

मोबाइलको लागी इमेजिङ सधैँ यो जस्तो देखिन्छ

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

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

यसले हामी "क्यान्सरको उदय" मा के भन्छौं। प्रत्यय ती चीज हुन् - @ 2x, @ 3x - एउटा छविको नाममा राखिएको छ। तिनीहरू अनिवार्य रुपमा, उदाहरणका लागि, दाहिने यन्त्रमा दाहिने ठाउँमा दायाँ छवि राख्नुहोस्। त्यसपछि यो अझ राम्रो हुन्छ।

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

त्यसपछि यो अझ राम्रो हुन्छ।

त्यहाँ सफ्टवेयर-प्रोटोटाइप अनुप्रयोगहरू छन् - जुन विधानसभा बिन्दु बन्नु अघि तपाइँको तस्बिरहरू र प्रतिमाहरू यन्त्रहरूमा घुमाईएका छन् र तिनीहरूसँग पनि तिनीहरूका अभावहरू छन्।

ग्राफिक्सका लागि फोटोशिप र स्केच बीच यो ट्यूटोरियल चाल र Adobe अनुभव डिजाइन प्रयोग गरेर तपाईंको विचार र सक्रिय तैनाती बीचको दर्द बिन्दुहरूको केहि प्रदर्शन गर्न। सुरू गरौं।

01 of 05

Adobe Photoshop मा मोबाइल यन्त्रहरूको लागि चित्रहरू कसरी तयारी गर्ने

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

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

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

02 को 05

कसरी "निर्यात को रूप मा ..." संवाद को उपयोग को लागी Adobe Boxhop मा Adobe Photoshop

छवि निर्यातको लागि तयार भएपछि, "निर्यात> निर्यात निर्यात को रूपमा ..." चयन गर्नुहोस् संवाद संवाद बक्स खोल्नको लागि।

यो संवाद बाकस भर्खरको फोटोशपको अतिरिक्त छ र "वेबका लागि बचत गर्नुहोस्" संवाद बाकसलाई तिनीहरूले प्रति वर्षको लागि प्रयोग गरे। यदि तपाई अझै पनि यसको आवश्यकता छ भने, तपाई यसलाई निर्यात पप डाउनमा पाउन सक्नुहुनेछ। यो स्पष्ट कारणहरूको लागि, "अब वेबको लागि निर्यात (विरासत)" भनिन्छ। यदि यो यो संवाद बक्समा तपाइँको पहिलो भ्रमण हो, यहाँ एउटा छोटो भ्रमण हो:

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

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

03 of 05

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

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

स्केचमा मोबाइलको लागि छवि तयार गर्न, आर्टबोर्डमा छवि छान्नुहोस् र गुण प्यानलको तलबाट निर्यात योग्य बटन क्लिक गर्नुहोस् । यसले निर्यात संवाद बक्स खोल्छ। 2x र 3x संस्करणहरू थप्न + चिन्हमा क्लिक गर्नुहोस् र प्रत्ययहरू थप गर्नुहोस्। ढाँचाहरू उपलब्ध छन् PNG, JPG, TIF, PDF, EPS, र SVG। यस अवस्थामा, JPG छान्नुहोस्। निर्यात बटन क्लिक गर्नुहोस् र लक्षित गर्नुहोस् वा निर्यात गरिएका विभिन्न तस्विरहरू राख्न फोल्डरमा सिर्जना गर्नुहोस्।

04 को 05

किन तपाइँलाई छविको तीन (वा थप) संस्करण सिर्जना गर्न आवश्यक छ

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

05 को 05

प्रारम्भिक परीक्षण, परीक्षा अक्सर, ट्रस्ट कुनै पनि छैन, ट्रस्ट कुनै एक र विशेष गरी आफै

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

प्रोटोटाइप अनुप्रयोगहरू प्रयोग गरेर बिन्दु बिन्दुहरूलाई उजागर गर्ने एक राम्रो तरिका हो तर यी सम्पत्तिहरू विकासकर्ताद्वारा प्रयोगको लागि आउटपुट हुन आवश्यक छ। धेरै अवस्थामा, आइकन्स सहित सम्पत्तिहरूको भौतिक आयाम शारीरिक रूपमा विशाल हुनेछ र एसएसभी मा तर PNG ढाँचा हुनेछ। पहिलो नजरमा, यो शीर्ष माथि सार्न सक्छ तर छविहरू स्केलिंगको सुनको नियम सम्झनुहोस्: यो राम्रो हुन्छ कि माथिल्लो तह भन्दा तल तल।

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