एक मिनट से भी कम समय में अपने फोटोशॉप डिजाइन को सीएसएस कोड में कैसे बदलें

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

यह विशेष रूप से एक बहुत अच्छा विकल्प है क्योंकि यह हमें दृश्य और वास्तविक समय में हमारे डिजाइन के विकास को देखने की अनुमति देता है। इस विकल्प का उपयोग करने और प्राप्त करने के लिए यहां कुछ युक्तियां दी गई हैं अधिकतम प्रदर्शन:

सटीक होने की कोशिश करें

एक पेशेवर परिणाम प्राप्त करने के लिए, यह अनुशंसा की जाती है कि आप अपनी साइट के माप और अनुपात को ध्यान में रखें। आपके द्वारा डिज़ाइन किए गए टेम्प्लेट की चौड़ाई और ऊँचाई मान सेट करें और उन्हें अपने मॉकअप पर लागू करें। जब आप CSS कोड की प्रतिलिपि बनाते हैं तो हम प्रत्येक तत्व को कैनवास के प्रत्येक तत्व और कैनवास के किनारों के बीच की दूरी के रूप में लेते हैं। अपने उपयोगकर्ताओं को अधिकतम पठनीयता प्रदान करने के लिए प्रत्येक तत्व के संरेखण और उनमें से प्रत्येक के बीच रिक्ति सहित अपने डिजाइन में शामिल करने जा रहे आकारों और पदानुक्रमित कारणों को भी ध्यान में रखें।

गाइड और इंटरफ़ेस के नियमों का उपयोग आपको अपने सभी तत्वों के साथ एक साफ, स्वच्छ टेम्पलेट बनाने में मदद करेगा।

प्रत्येक तत्व की सभी विशेषताओं को कॉन्फ़िगर करें

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

• आकार
• Posición
• स्ट्रोक का रंग
• रंग भरें (ग्रेडिएंट सहित)
• परछाई डालना

पाठ परतों से हम निम्नलिखित मूल्यों को पकड़ सकते हैं:

• फ़ॉन्ट परिवार
• फ़ॉन्ट आकार
• फ़ॉन्ट मोटाई
• ऊंची लाईन
• रेखांकित
• स्ट्राइकथ्रू
• ऊपर की ओर लिखा हुआ
• सबस्क्रिप्ट
• पाठ्य संरेखण

इसे ध्यान में रखें और इनमें से प्रत्येक मान को उस शैली को प्रदान करने के लिए निर्धारित करें जिसे आप देख रहे हैं।

परत समूहों के साथ काम करें

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

कन्वर्ट करने के लिए कदम

एक बार जब आप अपना मॉकअप कर लेते हैं, तो आपने प्रत्येक तत्व को अनुकूलित कर लिया है और आपने उन्हें समूहों द्वारा समूहीकृत कर दिया है, आपको केवल इन चरणों का पालन करना होगा:

• परतों पैनल पर जाएं और इन दो विकल्पों में से एक चुनें:
  • किसी आकृति या पाठ परत पर या परतों के समूह पर राइट-क्लिक करें और चुनें CSS को कॉपी करें संदर्भ मेनू में।
  • एक आकार या पाठ परत या परतों के एक समूह का चयन करें, फिर विकल्प चुनें CSS को कॉपी करें परत पैनल मेनू में।