एका मिनिटापेक्षा कमी वेळात आपले फोटोशॉप डिझाइन सीएसएस कोडमध्ये कसे रूपांतरित करावे

सीएस 6 आवृत्ती आल्यापासून अ‍ॅडोबने फोटोशॉपमध्ये वेब डिझाईन्सची मांडणी आणि विकसित करण्याचा एक अतिशय उपयुक्त पर्याय लागू केला. ऑपरेशन आहे खुप सोपे आणि सर्व वरील वेगवान. अनुप्रयोगाद्वारे आम्ही आमच्या आकार आणि मजकूर स्तरांचा संदर्भ घेत कॅस्केडिंग शैली पत्रके तयार करण्यात सक्षम होऊ. प्रक्रिया आमची मॉकअप विकसित करणे, आमच्या घटकांची कोड आवृत्ती कॉपी करणे आणि ती आमच्या पत्रकावर पेस्ट करणे इतकी सोपी आहे.

हा एक चांगला पर्याय आहे विशेषत: कारण ते आम्हाला दृश्यात्मक दृष्टीने आणि वास्तविक वेळेत आमच्या डिझाइनची उत्क्रांती पाहण्याची परवानगी देते. हा पर्याय वापरण्यासाठी आणि मिळविण्यासाठी येथे काही टिपा आहेत जास्तीत जास्त कामगिरी:

तंतोतंत होण्याचा प्रयत्न करा

व्यावसायिक परिणाम मिळविण्यासाठी आपण आपल्या साइटची मोजमाप आणि प्रमाण विचारात घ्यावे अशी शिफारस केली जाते. आपण डिझाइन करीत असलेल्या टेम्पलेटची रुंदी आणि उंची मूल्ये सेट करा आणि ती आपल्या मॉकअपवर लागू करा. आपण सीएसएस कोड कॉपी करता तेव्हा आम्ही प्रत्येक घटक आणि कॅनव्हासच्या कडांमधील पिक्सलमधील अंतर संदर्भात ठेवतो. आपल्या डिझाइनमध्ये प्रत्येक घटकांचे संरेखन आणि आपल्या वापरकर्त्यांस जास्तीत जास्त वाचनयोग्यता प्रदान करण्यासाठी त्या दरम्यानचे अंतर यासह आकार आणि श्रेणीबद्ध कारणे देखील लक्षात घ्या.

मार्गदर्शकांचा आणि इंटरफेसच्या नियमांचा वापर आपल्याला त्याच्या सर्व घटकांचे योग्य प्रकारे संरेखित केलेले एक स्वच्छ आणि स्वच्छ टेम्पलेट तयार करण्यात मदत करेल.

प्रत्येक घटकाची सर्व वैशिष्ट्ये कॉन्फिगर करा

सीएसएस कोड कॉपी करण्याचा पर्याय आम्हाला फॉर्म आणि मजकूर थरांच्या वापरापासून आमच्या साइटची उत्तम सुस्पष्टता डिझाइन करण्याची संधी देते. प्रत्येक लेयरची सामग्री क्लिपबोर्डवर कॉपी केली जाईल आणि आम्ही ती आमच्या स्टाईल शीटमध्ये द्रुतपणे पेस्ट करू. आकार स्तरांमधून, खालील सेटिंग्जसाठी मूल्ये कॅप्चर करा:

• आकार
• स्थान
• स्ट्रोक रंग
• रंग भरा (ग्रेडियंट्ससह)
• ड्रॉप सावली

मजकूर स्तरांमधून आम्ही खालील मूल्ये हस्तगत करू शकतो:

• फॉन्ट कुटुंब
• फॉन्ट आकार
• फॉन्ट जाडी
• ओळीची उंची
• अधोरेखित
• स्ट्राईकथ्रू
• सुपरस्क्रिप्ट
• सबस्क्रिप्ट
• मजकूर संरेखन

हे लक्षात ठेवा आणि आपण शोधत असलेली स्टाईल प्रदान करण्यासाठी यापैकी प्रत्येक मूल्ये सेट करा.

थर गटांसह कार्य करा

हे फंक्शन दोन प्रकारच्या वर्गाद्वारे आयोजित केलेल्या आमच्या कार्याचे भाषांतर करते, प्रत्येक गटासाठी एक आकार किंवा मजकूरचे स्तर एकत्र करते आणि या प्रकारच्या प्रत्येक थरांसाठी एक वर्ग. प्रत्येक गट वर्ग एक मूलभूत घटक प्रतिनिधित्व करेल ज्यात प्रत्येक गटात समाविष्ट केलेल्या स्तरांशी संबंधित असलेल्या मुलाच्या डीआयव्ही घटकांचा समावेश असेल. अशा प्रकारे, मूल कंटेनरच्या वरच्या आणि डाव्या मूल्यांचे मूळ कंटेनरच्या संदर्भात निश्चित केले जाईल. आपण हे लक्षात घेतलेच पाहिजे की हा पर्याय स्मार्ट ऑब्जेक्टसह उपलब्ध नाही आणि एकापेक्षा जास्त थरांना ते गटबद्ध केल्याशिवाय एकाच वेळी लागू होणार नाहीत.

रूपांतरित करण्यासाठी चरण

एकदा आपण आपले मॉकअप बनविल्यानंतर, आपण प्रत्येक घटक सानुकूलित केला आहे आणि आपण त्यांना गटानुसार गटबद्ध केले आहे, आपल्याला केवळ या चरणांचे अनुसरण करावे लागेल:

• स्तर पॅनेल वर जा आणि या दोन पर्यायांपैकी एक निवडा:
  • आकार किंवा मजकूर स्तर किंवा स्तरांच्या गटावर उजवे क्लिक करा आणि निवडा सीएसएस कॉपी करा संदर्भ मेनूमध्ये.
  • आकार किंवा मजकूर स्तर किंवा स्तरांचा समूह निवडा, नंतर पर्याय निवडा सीएसएस कॉपी करा स्तर पॅनेल मेनूमध्ये.