गाइड / वेबसाइट बनाइए

स्क्रीनशॉट से वेबसाइट बनाइए

कोई स्क्रीनशॉट या डिज़ाइन की फ़ोटो डालिए, Kodebloc उससे वेबसाइट बना देगा। क्या अच्छा चलता है, और कहां तक।

यह क्या करता है

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

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

स्क्रीनशॉट कैसे जोड़ें

1. एडिटर खोलिए और नई वेबसाइट शुरू कीजिए।
2. मैसेज बॉक्स के पास + पर क्लिक कीजिए और Add a screenshot चुनिए।
3. 5 MB तक की PNG, JPEG या WebP फ़ाइल चुनिए। मैसेज बॉक्स के ऊपर एक छोटा प्रीव्यू दिखेगा, जिस पर लिखा होगा "Your website will follow this screenshot."
4. अपना मैसेज लिखिए: वेबसाइट किस लिए है और उसमें क्या लिखा हो। आप चाहें तो बिना कुछ लिखे सिर्फ़ तस्वीर भी भेज सकते हैं।
5. Build website दबाइए। स्क्रीनशॉट के साथ पहली बार वेबसाइट बनने में बिना स्क्रीनशॉट के मुकाबले थोड़ा ज़्यादा समय लग सकता है।

गलत फ़ाइल चुन ली? प्रीव्यू के पास X ("Remove screenshot") पर क्लिक कीजिए, या दूसरी चुनने के लिए + मेन्यू से Change screenshot चुनिए। एक मैसेज में एक तस्वीर जोड़ सकते हैं।

साथ में मैसेज लिखिए

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

तस्वीर के हर हिस्से का क्या होता है

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

बदलाव के लिए स्क्रीनशॉट

पहली बार बनने के बाद भी आप तस्वीर जोड़ सकते हैं। हो सकता है आपको किसी और वेबसाइट का दाम दिखाने का तरीका पसंद आया हो और आप अपना भी वैसा ही चाहते हों। + मेन्यू में Pick a part of your page से वह हिस्सा चुनिए जिसे बदलना है, उसी मेन्यू से स्क्रीनशॉट जोड़िए, और बताइए कि क्या बदलना है:

तब मैसेज बॉक्स के ऊपर वाले प्रीव्यू पर लिखा होता है "The change will follow this screenshot." AI सिर्फ़ वही बदलता है जो आपने कहा, और आपके अपने शब्द रहने देता है, जब तक आप नए न मांगें। बदलाव के बारे में और जानिए चैट से वेबसाइट बदलिए में।

अच्छे नतीजों के टिप्स

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

सीमाएं

• यह हूबहू कॉपी नहीं है। AI लुक और लेआउट अपनाता है। फ़ॉन्ट, फ़ोटो और छोटी बातें अलग होंगी।
• तस्वीर में हरकत नहीं दिखती। एनिमेशन, खुलने वाले मेन्यू और दूसरे चलने वाले हिस्से रुकी हुई तस्वीर में नहीं दिखते, इसलिए AI उन्हें देख नहीं पाता।
• कुछ ही फ़ाइल टाइप। PNG, JPEG और WebP चलते हैं। किसी और फ़ाइल पर Kodebloc आपसे PNG, JPEG या WebP तस्वीर चुनने को कहता है।
• यह भी बाकी बिल्ड की तरह गिना जाता है। स्क्रीनशॉट के साथ वेबसाइट बनाना या बदलना आपकी रोज़ की सीमा में एक गिना जाता है। जो तस्वीर बिल्ड शुरू होने से पहले ही रिजेक्ट हो जाए, उसकी कोई गिनती नहीं।
• कभी-कभी भीड़ होती है। अगर "We couldn't build from your screenshot right now" दिखे, तो एक मिनट रुककर फिर कोशिश कीजिए, या अपना मैसेज बिना तस्वीर के भेजिए।

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