उत्पाद ग्राफिक्स 6 तकनीक छवियों को अधिक जानकारीपूर्ण बनाने के लिए
विपणन तकनीकों के साथ वेब डिजाइनर बहुत चालाक हो गए हैं। Luring पेज कंटेंट हमेशा अच्छा होता है, लेकिन जब आपके विज़िटर का ध्यान खींचने की बात आती है तो इमेज मीडिया का सबसे लोकप्रिय रूप है। उन्हें डेमो वीडियो जैसी ध्वनि की आवश्यकता नहीं होती है और वे सेकंड के एक मामले में महत्वपूर्ण जानकारी को जल्दी से रिले कर सकते हैं। यह आसान लग सकता है, लेकिन वेबसाइटों पर सूचनात्मक छवियों के निर्माण के लिए कुछ उल्लेखनीय तकनीकें हैं.
इनमें फीचर लेबल, क्लोज-अप स्क्रीनशॉट, मूल्य तुलना और अन्य मिनट विवरण शामिल हैं। वेब डिजाइनर नए एप्लिकेशन, सॉफ़्टवेयर, वीडियो गेम या कई अन्य उत्पादों के मॉडल के लिए सूचना ग्राफिक्स का उपयोग कर सकते हैं! हालाँकि आमतौर पर आप इन तकनीकों को प्रौद्योगिकी के विभिन्न क्षेत्रों में उपयोग करते देखते हैं.
नीचे दिए गए विचारों की जांच करें जहां हम न केवल युक्तियां प्रदान करते हैं, बल्कि सुंदर उत्पाद ग्राफिक्स के वास्तविक जीवन के उदाहरण महान जानकारी के साथ जाम से भरे हुए हैं.
1. अपनी सामग्री पर विस्तार करें
अच्छी वेब पेज सामग्री के स्थान पर सूचनात्मक छवियों का उपयोग नहीं किया जाना चाहिए। बजाय अपने प्रमुख बिंदुओं पर विस्तार करने के लिए इमेजरी का उपयोग करें तथा उन्हें स्पष्ट रूप से स्पष्ट करें अपने आगंतुकों के लिए। ऐसा करने का सबसे अच्छा तरीका है महत्वपूर्ण क्षेत्रों को उजागर करने के लिए एक छोटा डेमो बनाना एक ट्यूटोरियल के। कुछ जानकारीपूर्ण ग्राफिक्स और स्क्रीनशॉट के साथ यह बहुत आसान है कि आपके पाठक की रुचि प्रत्येक चरण के माध्यम से चलती रहे.
जब आप किसी सॉफ़्टवेयर ट्यूटोरियल (जैसे कि फ़ोटोशॉप ट्यूटोरियल) को प्रदर्शित करने का प्रयास करते हैं, तो यह मुश्किल हो सकता है संदेश को लिखित पाठ में व्यक्त करें. आगंतुक आपके लेख पर उतरेंगे और तुरंत उप-सचेत रूप से एक सेकंड के एक अंश के भीतर सामग्री का न्याय करना शुरू कर देंगे। वेब डिज़ाइनर वॉल में CSS3 के गोल चित्र बनाने के लिए एक आसान ग्राफिक के साथ एक शानदार ट्यूटोरियल है। इसमें कुछ लेबल और प्रभाव का क्लोज-अप शॉट शामिल है.
मूल लेख पृष्ठ पर यह चित्र आपके सिर में एक बहुत स्पष्ट तस्वीर जोड़ता है जो आप बना रहे हैं। लेखक ने एक छोटा डेमो लिंक जोड़ा है, लेकिन कुछ डेमो छवियों को भी शामिल क्यों नहीं किया है? आपको ठीक से लेबल डेमो शॉट के साथ ध्यान आकर्षित करने की अधिक संभावना है.
की कोशिश मीडिया सामग्री के लिए केवल चित्र जोड़ने से बचें अपनी पोस्ट में यदि आप अपने तरीकों की व्याख्या कर सकते हैं या बिना किसी छवि के तर्क पहले यहां शुरू कर सकते हैं। बाद में अपनी वेब कॉपी को देखने के बाद आपको एक विस्तृत छवि ग्राफिक में कुछ बिंदुओं को पुन: प्रसारित करने पर विचार करना चाहिए। विशेष रूप से आप एक मिल सकता है जटिलता बढ़ने पर ट्यूटोरियल को अधिक दृश्य संकेतों की आवश्यकता होती है. दो उदाहरणों में वेबसाइट डेटाबेस या टेबल डेटासेट बनाना शामिल हो सकता है.
2. हाइलाइट उल्लेखनीय विशेषताएं
क्योंकि सॉफ्टवेयर / प्रौद्योगिकी के प्रत्येक टुकड़े में इतनी सारी विशेषताएं होंगी कि हर एक बिट की व्याख्या करना लगभग असंभव है। इतना ही नहीं, लेकिन यह अत्यधिक संभावना नहीं है कि आपके आगंतुक आपकी जानकारी ग्राफिक पर 20+ लेबल पढ़ने में रुचि लेंगे. सबसे दिलचस्प सुविधाओं के लिए छड़ी तथा थोड़ा और अधिक गहराई से समझाने के लिए लेबल का उपयोग करें.
अपने लेबल सामग्री के लिए वेब कॉपी लिखते समय सुस्त भाषा से बचें जब भी संभव हो। यदि आगंतुक आपके एप्लिकेशन के नवीनतम संस्करण को देख रहे हैं, तो वे रंग योजना में होने वाले परिवर्तनों की अधिक परवाह नहीं कर सकते हैं। यह उनके दैनिक वर्कफ़्लो को कैसे प्रभावित करेगा? इसके बजाय शायद उनके लिए क्या फायदेमंद है, इस पर प्रकाश डालिए, एक नए इंटरफ़ेस पैनल या बहु-उपयोगकर्ता कनेक्टिविटी की तरह। ये आम तौर पर होना चाहिए अमूर्त विशेषताएं जिसे आप अभी देख नहीं सकते “देख” उत्पाद पर.
इन विशेषताओं को स्पष्ट रूप से समझाने के लिए इस तरह के एक लेबल होने से सबसे प्रचुर प्रतिक्रिया मिलेगी। आगंतुकों को लगेगा कि वे बुद्धिमान, परिपक्व दुकानदार हैं जो अपने निर्णय लेने में सक्षम हैं। यदि वे वास्तव में आपकी सुविधाओं को पसंद करते हैं, तो यह आपके सॉफ़्टवेयर या उत्पाद को खरीदने की दिशा में एक बड़ा धक्का देता है.
नीचे मोज़िला फ़ायरफ़ॉक्स अपडेट पृष्ठ से एक उदाहरण है.
आप देख सकते हैं कि डिजाइनरों ने लेबल और नई सुविधाओं को इंगित करने के लिए बिंदीदार रेखाओं का उपयोग किया है। ये वास्तव में एक कंटेनर के अंदर स्थित पृष्ठभूमि की छवियां हैं div. आश्चर्यजनक रूप से सभी लेबल पाठ HTML टैग्स के अंदर भी लिखे गए हैं (नहीं सिर्फ एक बड़ी छवि).
मुझे लगता है कि यह विधि Google क्रॉलर बॉट्स के लिए आसान नहीं है, लेकिन उन मोबाइल उपयोगकर्ताओं के लिए भी है जो सामान्य रूप से पूर्ण वेबपृष्ठ का अनुभव नहीं कर सकते हैं.
यह भी ध्यान दें कि पैनोरमा बाईं ओर कैसे विशेषता है एक छोटा सा प्रदान करता है “और अधिक जानें” संपर्क. यह संभवतः सबसे अच्छा अभ्यास है जब आप सूचना ग्राफिक्स का निर्माण कर सकते हैं! यदि आपके पास एक ही पृष्ठ के भीतर वैकल्पिक पृष्ठ या एंकर हैं तो आपके आगंतुक जटिल सुविधाओं के बारे में अधिक समझने के लिए इन लिंक पर क्लिक कर सकते हैं.
याद रखें कि जानकारीपूर्ण ग्राफिक्स का उपयोग आपके आगंतुकों को टीज़र और उत्पाद सुविधाओं को आसानी से प्रदर्शित करने के लिए किया जाता है। तो यद्यपि आप ग्राफिक के चारों ओर अंतरिक्ष में सीमित कर सकते हैं हमेशा बाहरी पृष्ठ पर अधिक जानने का अवसर प्रदान करें.
3. सरल, विनीत लेबल
लेबल सूचनात्मक उत्पाद ग्राफिक्स बनाने में वास्तव में सबसे महत्वपूर्ण पहलू हैं। आगंतुकों को आपके उत्पाद, सॉफ्टवेयर, वेबसाइटों, मोबाइल ऐप आदि में विभिन्न क्षेत्रों को समझने की आवश्यकता होगी, दुर्भाग्य से टेबल और बुलेटेड सूचियों का उपयोग केवल इतनी दूर जा सकता है। जब आपको वास्तव में उत्पाद सुविधाओं की व्याख्या करने की आवश्यकता होती है, तो इसे चुनना महत्वपूर्ण है हॉटस्पॉट लेबलिंग के लिए.
Apple कंप्यूटर संभवतः सरलीकृत लेबल विवरण का सबसे अच्छा उदाहरण है। टैबलेट, लैपटॉप, या बदनाम iPhone की तलाश में आप उनके ग्राफिक्स पर इन सटीक तकनीकों को देख सकते हैं। उनकी विशेषताएं और तकनीकी चश्मा आम तौर पर अन्य बड़े ब्रांड के कंप्यूटर निर्माताओं के समान हैं। फिर भी उनके चित्रमय मॉडल इतने प्राचीन हैं कि उत्पाद व्यावहारिक रूप से खुद को बेच रहे हैं.
ध्यान दें कि जब आप इस प्रक्रिया को तोड़ते हैं तो यह बहुत आसान है जितना आप सोच सकते हैं! उत्पाद ग्राफिक्स समग्र वेबसाइट डिजाइन का एक मानक हिस्सा हैं। यहां तक कि अगर आप उर्वरक या बेड शीट या ट्रेडिंग कार्ड बेच रहे हैं, तो आप इन लेबलिंग तकनीकों को अच्छे उपयोग के लिए डाल सकते हैं। और यद्यपि Apple के पास वास्तव में कुछ सरल जानकारीपूर्ण ग्राफिक्स हैं, वे ऐसा करने वाली एकमात्र कंपनी नहीं हैं। प्रयत्न अपने आला में व्यवसायों के लिए चारों ओर घूमना यह देखने के लिए कि क्या वे अपनी वेबसाइट पर किसी फैंसी जानकारी लेबल या टीज़र स्क्रीन को स्पोर्ट करते हैं.
4. गतिशील सामग्री के साथ इमेजरी
कुछ वेब डेवलपर्स के लिए यह केवल आपके सॉफ़्टवेयर के लेबल वाले ग्राफिक बनाने के लिए पर्याप्त नहीं हो सकता है। ऐसी बहुत सी अनूठी सुविधाएँ हो सकती हैं, जिन पर आप जाना चाहते हैं, लेकिन आपके वेबपृष्ठ के एक छोटे से हिस्से में समाहित हैं। यह संभव है परिचयात्मक चरणों की एक श्रृंखला का निर्माण एक छोटे उत्पाद डेमो में आप आगंतुकों का नेतृत्व.
न्यूज़बेरी सुरुचिपूर्ण ढंग से इसका एक उदाहरण दिखाता है। उनके मुख पृष्ठ पर आप एक छोटे से लघु-नेविगेशन वाले ब्लॉक क्षेत्र को देखेंगे। वे विभिन्न स्क्रीनशॉट के साथ प्रक्रिया के साथ 5 कदम और कुछ वर्णनात्मक पाठ के साथ शामिल हैं। यहां तक कि अगर आपको कोई अंदाजा नहीं है कि न्यूजबेरी का उपयोग किस लिए किया जाता है, तो परिचयात्मक सामग्री चीजों को बहुत स्पष्ट रूप से समझाती है. तुम भी स्लाइड की श्रृंखला में कुछ डेमो लिंक की पेशकश कर रहे हैं.
जैसा कि आप उनकी सामग्री के माध्यम से आगे बढ़ते हैं, आपको ध्यान देना चाहिए कि कई स्लाइड्स में एक छोटे ब्राउज़र विंडो के अंदर स्क्रीनशॉट होते हैं। यह प्रभाव वास्तव में नकल करने के लिए बहुत सरल है! आपको बस जरूरत है अपने बैकग्राउंड इमेजरी और री-साइज स्क्रीनशॉट के रूप में उपयोग करने के लिए एक इमेज खोजें. यह प्रभाव हर उत्पाद के लिए काम नहीं करेगा, लेकिन यह एक वेब एप्लिकेशन से स्क्रीन फ्रेम करने का एक अच्छा तरीका है.
5. स्पष्ट स्क्रीनशॉट और उत्पाद तस्वीरें
अपने उत्पादों के लिए सभी सर्वोत्तम लेबल और सुविधाओं को शामिल करना संभव है, लेकिन अभी भी बिक्री से गायब है। आपके ग्राफ़िक के लिए आपके द्वारा चुने गए स्क्रीनशॉट और फ़ोटो अंततः सभी महीन विवरणों के समान महत्वपूर्ण हैं. विंडोज और मैक ओएस एक्स पर कीबोर्ड शॉर्टकट के साथ आपके पूरे डेस्कटॉप के स्क्रीनशॉट लेने के तरीके हैं। फ़ोटोशॉप में कुछ समय के साथ संयुक्त इस पद्धति का उपयोग करके आप बहुत दिलचस्प फीचर डेमो जमा कर सकते हैं.
यदि आपका उत्पाद बहुत जटिल है, तो आपको कोशिश करनी चाहिए कुछ अलग छवियों को एक साथ रखा. ट्वीटबॉट की वेबसाइट से ऊपर का उदाहरण ऐप पर टैपिंग एक्शन को इंगित करने के लिए नीले घेरे का उपयोग करता है। कई लेबल वाले एकल स्क्रीनशॉट के बजाय 3-5 अलग ग्राफिक्स को संयोजित करने के लिए एक छोटी jQuery छवि गैलरी का उपयोग करने पर विचार करें। यह आपको अधिक अवसर देता है उत्पाद के विभिन्न दृष्टिकोणों पर ध्यान दें जबकि आगंतुकों को अधिक समृद्ध अनुभव प्रदान किया जाता है.
जब आप अपने पीसी या स्मार्टफोन से एक शॉट स्नैप करते हैं तो तस्वीर को हमेशा 100% ज़ूम पर सहेजा जाता है। फ़ोटोशॉप जैसे छवि संपादकों में इन को फिर से आकार देने की क्षमता है, लेकिन वे अक्सर विवरण खो देते हैं। तो आप इस तरह के ग्राफिक को अपनी छोटी वेबसाइट में कैसे फिट कर सकते हैं? सबसे अच्छी तकनीकों में से एक है बढ़ाई जिसमें आप आवेदन को नीचे रखते हैं और सबसे महत्वपूर्ण टुकड़ों के आवर्धित खंड बनाते हैं। यह तकनीक भौतिक उत्पादों की तुलना में सॉफ़्टवेयर में अधिक देखी जाती है - मैंने नीचे डिज़ाइन प्रक्रिया को विस्तृत किया है.
6. "ज़ूम लेंस" प्रभाव का निर्माण
मैं Adobe Photoshop में एक आवर्धक कांच प्रभाव के निर्माण के लिए कदम उठा रहा हूँ। यदि आप किसी अन्य ग्राफिक्स संपादक का उपयोग कर रहे हैं, तो आप संभवतः समान कार्य कर सकते हैं, लेकिन मेनू और कमांड अलग-अलग होंगे.
इस तकनीक का सबसे अच्छा उदाहरण मैक एप्स होमपेज के लिए थिंग्स पर है। ग्राफिक में छोटा छोटा एप होता है, इसलिए यह एक छोटे से ड्रॉप शैडो के साथ पेज पर पूरी तरह फिट होगा। हालाँकि कुछ महत्वपूर्ण क्षेत्रों में आप अंदर की सामग्री के साथ एक वृत्त को बहुत बड़ा देखेंगे। उन्होंने लेंस के माध्यम से चमकने वाले प्रकाश के रूप में प्रकट होने के लिए एक सफेद आंतरिक चमक को भी जोड़ा है!
बोनस: "ज़ूम लेंस" प्रभाव फ़ोटोशॉप ट्यूटोरियल
एक स्क्रीनशॉट को हथियाने के लिए जिसे आप अपने ग्राफिक के लिए उपयोग करना चाहते हैं। मैंने हांगकीट होम पेज की एक त्वरित स्क्रीन ली है। मैं बस ब्राउज़र विंडो को क्रॉप करने जा रहा हूं और लगभग 700px का आकार दूंगा। आपको अपनी वेबसाइट के सामग्री क्षेत्र में फिट होने के लिए चौड़ाई का आकार बदलना चाहिए। अब इस बैकग्राउंड के ऊपर एक नई लेयर बनाएं और इसे प्रॉपर रखने के लिए शिफ्ट होल्ड करते हुए सर्कुलर सिलेक्शन करें। आप जिस भी रंग को पसंद करेंगे, उसे भरें.
चरण 1
सर्कल को चयनित रखते हुए, लेयर्स पैनल में फिल% को 0% में बदलें। परत एफएक्स के तहत 1px-2px काला स्ट्रोक और एक सफेद आंतरिक चमक जोड़ें। आप कम सफेद प्रकाश व्यवस्था के लिए अपारदर्शिता को कम कर सकते हैं.
चरण 2
अभी भी अपनी पृष्ठभूमि परत पर सर्कल चयनित चाल को बनाए रखते हुए और हिट करें ctrl (मैक उपयोगकर्ता के लिए, यह कमांड या cmd कुंजी है.) + c कॉपी करने के लिए। फिर बैकग्राउंड के ऊपर एक नई लेयर बनाएं लेकिन आवर्धक सर्कल और पेस्ट के नीचे। आप वैकल्पिक रूप से सिर्फ ctrl + j को हिट कर सकते हैं, केवल चयन के साथ नई परत को डुप्लिकेट करने के लिए.
ट्रांसफॉर्म टूल को खोलने के लिए ctrl + t को हिट करें। अब पकड़े जाने के दौरान नई डुप्लिकेट परत को मापें खिसक जाना सब कुछ आनुपातिक रखने के लिए और alt केंद्र को स्थिर रखने के लिए.
चरण 3
Ctrl दबाएं और अपना चयन फिर से करने के लिए आवर्धक ग्लास लेयर आइकन पर क्लिक करें। ध्यान दें कि आपको अभी भी लेयर्स पैनल में डुप्लीकेटेड बैकग्राउंड लेयर को हाइलाइट करना चाहिए (एक सीधे हमारे आवर्धक कांच के नीचे) जिसका अर्थ है कि इसमें हल्का नीला बैकग्राउंड होगा.
वर्तमान चयन को पलटने के लिए Ctrl + Shift + i दबाएं। अब हमारे री-स्केल किए गए स्क्रीनशॉट से अतिरिक्त कचरा बाहर निकालने के लिए डिलीट करें। एक जोड़ा प्रभाव के लिए एक छोटी बूंद छाया जोड़ने के लिए परत FX मेनू को खींचें। आप एक पतली 1px वर्टिकल लाइन भी खींच सकते हैं और लिक्विफाई फिल्टर का उपयोग कर सकते हैं (फ़िल्टर> लिक्विड करें) एक छोटा सा हैंडल बनाएं!
निष्कर्ष
शानदार उत्पाद ग्राफिक्स डिजाइन करने के लिए आपको मूल बातें याद रखना चाहिए। आगंतुक बस यह समझना चाहते हैं कि आप उन्हें बेचना क्या चाहते हैं! इस जानकारी को प्राप्त करने का सबसे आसान तरीका स्क्रीनशॉट या एकल विवरण ग्राफिक की एक श्रृंखला है। इस पहेली के लिए लेबल केवल दूसरा टुकड़ा है, जहाँ आप सबसे महत्वपूर्ण फीचर सेट को रेखांकित कर सकते हैं.
जब आप इन सभी तकनीकों को एक साथ रखते हैं तो संभवतः आप बड़ी तस्वीर को देखना शुरू कर देंगे। डाउनलोड और खरीदारी आसमान छू जाएगी - खासकर यदि आप अपने ग्राफिक्स को अपने होम पेज पर फ्रंट-एंड-सेंटर पर रखते हैं। ये तकनीक उत्पाद डिजाइन के क्षेत्र में ग्राफिक और वेब डिजाइनरों के लिए एकदम सही हैं। हमने कुछ सार विचार विस्तृत किए हैं, लेकिन हम आपके विचारों को नीचे चर्चा क्षेत्र में सुनना पसंद करेंगे!
