तपाइँको फोटोशप डिजाइनलाई एक मिनेट भन्दा कममा CSS कोडमा रूपान्तरण कसरी गर्ने

सीएसएस फोटोशप

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

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

सटीक हुन कोसिस गर्नुहोस्

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

गाईडहरूको प्रयोग र इन्टरफेसको नियमहरूले तपाईंलाई सफा, टेम्प्लेट निर्माण गर्न मद्दत गर्दछ यसका सबै तत्त्वहरूसँग पूर्ण रूपमा पigned्क्तिबद्ध गरिएको।

वेब फोटोशप

प्रत्येक तत्वका सबै सुविधाहरू कन्फिगर गर्नुहोस्

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

  • आकार
  • स्थिति
  • स्ट्रोक रंग
  • रंग भर्नुहोस् (ढाँचा सहित)
  • ड्रप छाया

पाठ तहहरूबाट हामी निम्न मानहरू क्याप्चर गर्न सक्छौं:

  • फन्ट परिवार
  • फन्ट आकार
  • फन्ट मोटाई
  • रेखा उचाई
  • रेखांकित
  • स्ट्राइकथ्रु
  • सुपरस्क्रिप्ट
  • सब्सक्रिप्ट
  • पाठ पign्क्तिबद्ध

यो दिमागमा राख्नुहोस् र यी मानहरूको प्रत्येकलाई तपाईंले खोजिरहनुभएको शैली प्रदान गर्न सेट गर्नुहोस्।

तह समूहहरूसँग काम गर्नुहोस्

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

रूपान्तरण गर्न चरणहरू

एकचोटि तपाईंले आफ्नो मकअप गरेपछि, तपाईंले प्रत्येक तत्त्वलाई निजीकृत गर्नु भएको छ र तिनीहरूलाई समूहहरू द्वारा समूहबद्ध गर्नुभयो, तपाईंले केवल यी चरणहरू अनुसरण गर्नुपर्नेछ:

 

  • तह प्यानेलमा जानुहोस् र यी दुई विकल्पहरू मध्ये एउटा छनौट गर्नुहोस्:
    • आकार वा पाठ तह वा तहहरूको समूहमा दायाँ क्लिक गर्नुहोस् र छनौट गर्नुहोस् CSS प्रतिलिपि गर्नुहोस् कन्टेक्स्ट मेनूमा।
    • आकार वा पाठ तह वा तहहरूको समूह चयन गर्नुहोस्, त्यसपछि विकल्प छनौट गर्नुहोस् CSS प्रतिलिपि गर्नुहोस् तह प्यानल मेनूमा।
  • कोडलाई तपाईंको स्टाईलसिट कागजातमा टाँस्नुहोस् र html5 मार्फत तपाईंको पृष्ठहरूमा यसलाई लागू गर्नुहोस्।

    सीएसएस फोटोशप १

    सीएसएस फोटोशप १


लेखको सामग्री हाम्रो सिद्धान्तहरूको पालना गर्दछ सम्पादकीय नैतिकता। त्रुटि क्लिक गर्न रिपोर्ट गर्नुहोस् यहाँ.

टिप्पणी गर्न पहिलो हुनुहोस्

तपाइँको टिप्पणी छोड्नुहोस्

तपाईंको ईमेल ठेगाना प्रकाशित हुनेछैन। आवश्यक फिल्डहरू चिन्ह लगाइएको छ *

*

*

  1. डाटाका लागि उत्तरदायी: मिगुएल gelन्गल ग्याटन
  2. डाटाको उद्देश्य: नियन्त्रण स्पाम, टिप्पणी प्रबन्धन।
  3. वैधानिकता: तपाईंको सहमति
  4. डाटाको सञ्चार: डाटा कानुनी बाध्यता बाहेक तेस्रो पक्षलाई सूचित गरिने छैन।
  5. डाटा भण्डारण: डाटाबेस ओसीन्टस नेटवर्क (EU) द्वारा होस्ट गरिएको
  6. अधिकार: कुनै पनि समयमा तपाईं सीमित गर्न सक्नुहुनेछ, पुन: प्राप्ति र तपाईंको जानकारी मेटाउन।