एक सक्षम वेब डिज़ाइनर होने का मतलब है की ग्रिड पर ठोस समझ होना, खासकर यदि आप रेस्पॉन्सिव वेब डिज़ाइन बनाना चाहते हैं। इस ट्यूटोरियल में आपके खुद के कस्टम ग्रिड बनाने के लिए एक फ़ोटोशॉप स्क्रिप्ट पर नज़र डालेंगे, साथ ही हम हुड (hood) को खोलेंगे और देखेंगे कि स्क्रिप्ट वास्तव में कैसे बनाई गई है।

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

हमारी स्क्रिप्ट के मामले में, यह डॉक्यूमेंट साइज के कैसे भी होने पर फ़ोटोशॉप गाइड्स जेनेरेट करेगा। यह हमें कॉलम की संख्या, गटर का आकार और लेआउट की चौड़ाई को निर्दिष्ट करने की अनुमति देगा। ठीक है, इतना परिचय काफी है, चलो अंदर कूदें।

• एक्टिव डॉक्यूमेंट रिफरेन्स के लिए वेरिएबल का उपयोग करें।
• यूजर से इनपुट प्राप्त करने के लिए प्रॉम्प्ट (prompt) का उपयोग।
• Number() फ़ंक्शन का प्रयोग ताकि यह सुनिश्चित हो सके की केवल नंबर डाटा टाइप ही है।
• हमारे डॉक्यूमेंट में गाइड्स जोड़ने के लिए Guides.add()।
• किसी प्रोसेस को दोहराने के लिए "for" लूप का यूजर।
• कोड को कंडीशन के साथ एक्सेक्यूट करने के लिए "if" का उपयोग करें या इसे छोड़ दें।
• डाक्यूमेंट्स को मापने के लिए इकाइयों को कैसे परिवर्तित करें।

डेवलपमेंट प्रोसेस में कूदने से पहले, आइए पहले एडोब फोटोशॉप में स्क्रिप्ट को कैसे इनस्टॉल करें और इसका उपयोग करें।

स्टेप 1: उपयोग डाउनलोड और इंस्टॉल करना

यह स्क्रिप्ट फ़ोटोशॉप CS5 और इसके बाद के वर्जन के साथ कम्पेटिबल है। आप ऊपर दिए गए लिंक "डाउनलोड करें: सोर्स कोड" से स्क्रिप्ट डाउनलोड कर सकते हैं या आप मेरी वेबसाइट से स्क्रिप्ट के अपडेट किए गए वर्जन को डाउनलोड कर सकते हैं। स्क्रिप्ट (.jsx फ़ाइल) डाउनलोड करने के बाद, फ़ाइल को [Photoshop root]\Presets\Scripts पर कॉपी करें।

फिर आप फोटोशॉप में File > Scripts में जाकर स्क्रिप्ट तक पहुँच सकते हैं जैसा की नीचे दिखाया गया है।

स्टेप 2: उपयोग स्क्रिप्ट को लॉन्च करना

इस स्क्रिप्ट को लॉन्च करने से पहले आपको कम से कम एक एक्टिव डॉक्यूमेंट को ओपन करके रखना होगा (इस समय स्क्रिप्ट नहीं चलेगी और एक error को थ्रो करेगी)। आपके द्वारा स्क्रिप्ट सफलतापूर्वक लॉन्च करने के बाद यह अपना पहला prompt दिखाएगा। यह आपको अपने वेब डिज़ाइन के लिए उपयोग किए जाने वाले लेआउट की चौड़ाई को प्रवेश करने के लिए कहेंगे।

मैंने 960px की चौड़ाई का इस्तेमाल डिफ़ॉल्ट रूप से किया है, इसलिए यदि आप इस समय कोई वैल्यू को नहीं डालते हो तो यह 960px के साथ ही होगा। आप जितनी चाहे उतनी चौड़ाई डाल सकते हैं, लेकिन यह आदर्श रूप से एक सम संख्या होनी चाहिए। यदि आप एक विषम संख्या डालते हैं, जैसे 955, तो स्क्रिप्ट के भीतर की गणना दशमलव में संख्या को प्रस्तुत करेगी। इसका अर्थ है, एक पिक्सेल का फ्रैक्शन, जो संभव नहीं है, जहां तक पोजीशन गाइड का संबंध है। यहां तक कि अगर हम उस फ्रैक्शन वैल्यू को राउंड ऑफ करते हैं, तो हमारे पास गाइड के लिए 100% सटीक पोजीशन नहीं होगी।

स्टेप 3: उपयोग कॉलम की संख्या

पहले prompt पर "Enter" को दबाए जाने के बाद (या लेआउट की चौड़ाई सेट करने के बाद OK दबाने पर) अगला prompt प्रकट होता है जो आपको अपने लेआउट में उपयोग किए जाने वाले कॉलमों की संख्या एंटर करने के लिए कहता है। डिफ़ॉल्ट रूप से मैं 12 कॉलम का उपयोग कर रहा हूं।

स्टेप 4: उपयोग मार्जिन और गटर

अंत में, तीसरा prompt प्रकट होता है, जिसे मार्जिन की वैल्यू की जरूरत होती है (सीमाओं और बाहरी कॉलम के बीच का स्थान)। यह वैल्यू तब गटर स्पेस को प्राप्त करने के लिए दुगुना हो जाती है, जैसा कि 960 ग्रिड सिस्टम में होता है।

स्टेप 5: उपयोग परिणाम

आपके द्वारा तीनों prompts में वैल्यू डालने के बाद आप कॉलम के रूप में व्यवस्थित अपने डॉक्यूमेंट में गाइड्स को देखेंगे। यदि आपको वहां कोई गाइड नहीं दिखती, तो संभवतः आपने गाइड की विजिबिलिटी को बंद करके रखा होगा। आप View > Show > Guides (Ctrl +;) में जाकर उनकी विजिबिलिटी को पुनर्स्थापित कर सकते हैं।

उपरोक्त इमेज में आप कॉलम, मार्जिन्स और गटर स्पेस देख सकते हैं। इन रंगों को सिर्फ यह स्पष्ट करने के लिए डाला है कि क्या क्या है। लाल रंग कॉलम दिखाता है; मार्जिन के लिए हरा और गटर के लिए सफेद। वास्तव में आपको ये रंग नहीं मिलते हैं; बस निम्नलिखित इमेज के रूप में गाइड्स मिलती है।

अब हम इस स्क्रिप्ट का इस्तेमाल करने से परिचित हैं, चलिए देखते हैं कि हम इसे जावास्क्रिप्ट के साथ कैसे लिख सकते हैं!

स्टेप 1: डेवलपमेंट डॉक्यूमेंट की जांच

इससे पहले कि हम वास्तव में स्क्रीप्टिंग शुरू करें, हमें यह जानना होगा कि क्या एप्लिकेशन में एक फ़ोटोशॉप डॉक्यूमेंट खुला हुआ और सक्रिय है। हम इस कंडीशन का उपयोग करके इसे जांचते हैं:

 if ( app.documents.length != 0 ) 
 { 
 
 //Our entire code will go here 
 
 } else { 
 
 //No active document exists
 
 }

हम सभी निम्न कोड को इन प्रथम कर्ली ब्रेसेस के भीतर रखेंगे और हम अपनी स्क्रिप्ट को }  ब्रेस के साथ ख़त्म करेंगे जैसा ऊपर है।

स्टेप 2: डेवलपमेंट यूनिट्स को बदलना

हमारा पहला काम फ़ोटोशॉप डॉक्यूमेंट के मेज़रमेंट यूनिट्स को पिक्सल में परिवर्तित करना होगा - वेब के लिए डिजाइन करते वक्त हमें पिक्सल में परिपूर्ण होना चाहिए!

//This shall set  measuring units of document to Pixels.
  preferences.rulerUnits  = Units.PIXELS;

स्टेप 3: डेवलपमेंट डॉक्यूमेंट की चौड़ाई

अगला हम फ़ोटोशॉप डॉक्यूमेंट के डायमेंशन को निर्धारित करेंगे।

var doc = app.activeDocument; //save reference of active document to variable "doc" for easy typing later on
  var docWidth = doc.width; //gets the width of the document
and stores it in "docWidth"

यह ग्रिड प्रणाली डॉक्यूमेंट की ऊंचाई के लिए स्वतंत्र है, इसलिए हमें इसे प्राप्त करने की आवश्यकता नहीं है।

स्टेप 4: डेवलपमेंट हॉरिजॉन्टल सेंटर

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

var docXcenter = docWidth / 2 ;

इस बिंदु पर यह स्पष्ट नहीं हो सकता है कि मैं इसके केंद्र का मूल्यांकन क्यों कर रहा हूं, लेकिन जैसे हम आगे बढ़ते हैं, मैं अपनी स्क्रिप्ट के भीतर इसके उपयोग की व्याख्या करूँगा।

स्टेप 5: डेवलपमेंट उसे मेज़रमेंट

इस बिंदु पर हमें यूजर को लेआउट की चौड़ाई, जिसे वह इस्तेमाल करना चाहता हैं, से कॉलम की संख्या और गटर स्पेसिंग पूछने की जरूरत है।

उदाहरण के लिए, 960gs निम्नलिखित फिक्स्ड कॉम्बिनेशंस का उपयोग करता है:

• Layout width : 960px
• 1st combination: 12 columns : 10px outer margin : 20px inner gutter
• 2nd combination: 16 columns : 10px outer margin : 20px inner gutter
• 3rd combination: 24 columns : 5px outer margin : 10px inner gutter

यदि हम इन कॉम्बिनेशंस में से किसी एक का उपयोग करते हैं तो हम स्पष्ट परिणाम प्राप्त करेंगे (चलो पहला मानते हैं) एक डिफ़ॉल्ट के रूप में।

// Get layout width from user. Default  to 960px.
var layoutWidth = Number ( prompt ( 'Enter layout width:' , 960 ) ) ;
 // This gets number of columns from user. Most appropriately 12,16, or 24. Default 12 columns. 
  var cols = Number ( prompt ( 'Enter numbers of columns:' , 12 ) );
// Gets margins from left right from user. Which will  later be doubled to get gutter. Default 10px
  var margin = Number ( prompt ( 'Enter space between columns:' , 10 ) );

वास्तव में Prompt() क्या है?

ठीक है, इससे पहले कि हम कंही भी आगे बढ़ें, सबसे पहले "prompt" क्या है पर एक नज़र डालते हैं।

prompt ("Message to user here", "Default value here");

Prompt यूजर को मैसेज के साथ डायलाग दिखाता है और एक इनपुट बॉक्स भी जैसा नीचे दिखाया गया है:

यूजर आवश्यक इनपुट को एंटर करता है, इस बिंदु पर prompt इनपुट को रीटर्न करता है।

Prompt का पहले भाग (जो अल्पविराम (comma) से पहले होता है) यूजर के लिए डायलॉग में एक मैसेज डालता है। हम यूजर को इनपुट टाइप के लिए गाइड करते हैं, और वैल्यूज को वैलिड करते हैं आदि। उदाहरण के लिए;

prompt("Enter number of columns. Appropriate values are 12, 16, 24.", 12);

Prompt का दूसरा भाग prompt डायलॉग के लिए एक डिफ़ॉल्ट वैल्यू है। यहां कॉलम के मामले में, हम 12 को डिफ़ॉल्ट वैल्यू के रूप में इस्तेमाल कर रहे हैं।

और Number() के बारे में क्या?

नंबर एक ऐसा मेथड है जो दिए गए इनपुट से नंबर को निकालता है। यदि यूजर ने नंबर के अलावा कोई अन्य वैल्यू को एंटर किया है (जैसे एक नाम या कोई दूसरी स्ट्रिंग), तो मेथड एक NaN (Not a Number) को रीटर्न करेगा। यह सैनिटेशन यह सुनिश्चित करता है कि आप केवल नंबर डाटा-टाइप को ही प्राप्त करें जो की इन स्थितियों में आवश्यक हैं जहाँ केवल नंबर ही कार्य करते हैं।

पहली लाइन लेआउट की चौड़ाई की वैल्यू को प्राप्त करती है। वेबसाइट की वास्तविक बात उस चौड़ाई के भीतर होती है। जैसा कि हम 960gs का उपयोग कर रहे हैं, इसकी डिफ़ॉल्ट वैल्यू 960px है, लेकिन आप इसे अपनी पसंद की चौड़ाई में बदल सकते हैं।

दूसरी लाइन में, हम कॉलम की संख्या प्राप्त करते हैं जो हमारा यूजर इन लेआउट डिज़ाइन में देना चाहता है। 960gs 12, 16 या 24 कॉलम का उपयोग करते हैं क्योंकि वे बहुत प्रभावी ढंग से काम करते हैं, लेकिन वे किसी भी तरह अनिवार्य नहीं हैं।

तीसरी लाइन में हम वह स्पेस प्राप्त करते हैं जो कॉलम और लेआउट की सीमाओं के बीच स्थित है। यह स्पेस आमतौर पर गटर के रूप में कॉलम के बीच दुगुनी होती है।

स्टेप 6: डेवलपमेंट गटर और सेण्टर की गणना करना

var gutter = space * 2; 
//Calculates the horizontal center of the layout and so the center of document 
  var layoutHalf = layoutWidth / 2 ;

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

स्टेप 7: डेवलपमेंट लिमिट्स को परिभाषित करना

कोड के इस सेक्शन की पहली दो लाइन्स में हम अपने लेआउट के बाएं और दाएँ बॉउंड्रीज़ की स्थिति की गणना कर रहे हैं। हम इन्हें बाहरी सीमा के रूप में देख रहे हैं; बायां सीमा minLimitOuter है और दांयीं सीमा maxLimitOuter है।

निम्नलिखित दो लाइन्स में हम अपने लेआउट के भीतर की बॉउंड्रीज़ की गणना कर रहे हैं। यह प्रभावी रूप से हमारे लेआउट चौड़ाई में से गटर की चौड़ाई को घटाता है। इसे उस मार्जिन के रूप में सोचें जो सीधे लेआउट चौड़ाई के अंदर स्थित हो।

  //outer limits that is the layout width;
  var maxLimitOuter = docXcenter + layoutHalf;
var minLimitOuter = docXcenter - layoutHalf;

  //Inner limits for 960gs
  var minLimitInner = minLimitOuter + space;
  var maxLimitInner = maxLimitOuter - space;

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

तो layoutHalf क्या है? यह यूजर द्वारा परिभाषित लेआउट की चौड़ाई का आधा हिस्सा है। हमने उस चौड़ाई को आधे में विभाजित किया ताकि हम हर एक आधे हिस्से को docXcenter के दोनों तरफ रख सकें। यहां से हम लेआउट के बाएं और दाएं किनारों पर गाइड्स की स्थिति निर्धारित कर सकते हैं।

बाएं गाइड की स्थिति होगी (डॉक्यूमेंट का केंद्र - लेआउट चौड़ाई का आधा) और इसलिए राइट साइड के किनारे पर गाइड की स्थिति होगी (डॉक्यूमेंट का केंद्र + लेआउट चौड़ाई का आधा)।

स्टेप 8: डेवलपमेंट कॉलम की चौड़ाई

यहां हम प्रत्येक कॉलम की चौड़ाई की गणना करते हैं। "गाइड जोड़ने" के प्रोसेस को दोहराते समय हमे इस वैल्यू की आवश्यकता होगी।

 var colWidth = ( layoutWidth - ( cols * gutter ) ) / cols;

स्टेप 9: डेवलपमेंट बाहरी लिमिट्स के लिए गाइड्स जोड़ना

अंत में, हम अपनी पहली वास्तविक "गाइड जोड़ने" के स्टेप में आते हैं! यहां हम लेआउट की बॉउंड्रीज़ पर दो गाइड जोड़ते हैं; हमारी बाहरी लिमिट्स।

doc.guides.add ( Direction.VERTICAL , minLimitOuter );
doc.guides.add ( Direction.VERTICAL , maxLimitOuter );

पहली लाइन हमारे डॉक्यूमेंट में एक वर्टीकल गाइड को लेआउट के बांये किनारे पर minLimitOrder पोजीशन पर जोड़ती है और लेआउट के राइट किनारे पर maxLimitOuter को।

मुझे कोड की उपरोक्त लाइन्स के बारे में कुछ और समझाने दें।

 doc.guides.add(Direction.VERTICAL/HORIZONTAL, position)

यह लाइन वास्तव में हमारे फ़ोटोशॉप डॉक्यूमेंट पर गाइड्स को जोड़ती है। "doc" हमारे वर्तमान में एक्टिव डॉक्यूमेंट का एक रिफरेन्स है। "guides" गाइड क्लास का एक ऑब्जेक्ट है, जो डॉक्यूमेंट के भीतर स्थित है और फ़ोटोशॉप डॉक्यूमेंट के अंदर गाइड्स के बिहेवियर और प्रॉपर्टीज के लिए जिम्मेदार है। "add" क्लास गाइड का एक मेथड है जो हमारे डॉक्यूमेंट में गाइड्स को जोड़ता है।

doc.guides.add() एक मेथड है जिसे केवल दो पैरामीटर्स की आवश्यकता होती है। पहला है गाइड की दिशा, जो वर्टीकल या हॉरिजॉन्टल हो सकता है। दूसरा पैरामीटर बस गाइड की स्थिति है। यदि आप अपनी यूनिट को पिक्सेल पर सेट करते हैं तो यह मान लेगा कि 2nd पैरामीटर की वैल्यू पिक्सल या क्रमानुसार कुछ और है।

स्टेप 10: डेवलपमेंट पहला लूप

पहला लूप हमारे गाइडों के पहले ग्रुप को और इनर लिमिट्स को डील करता है:

  for ( i = 0 ; i < cols ; i++ ) {
  guidPos = minLimitInner + ( ( colWidth + gutter ) * i );
  if ( guidPos > maxLimitInner ) {
  break;
  }
  doc.guides.add ( Direction.VERTICAL , Number ( guidPos ) );
  }

आइए इस पर गौर करें। हम अपने कोड को "cols" बार दोहराते (लूप) हैं, क्योंकि यह हमारे कॉलम की संख्या है जो हमारा यूजर उपयोग करना चाहता है। कोड के इस हिस्से में हम अपनी इनर बॉउंड्रीज़ को भी जोड़ सकते हैं।

"for" के बाद पहली लाइन एक "guidPos" वेरिएबल है जो गाइड की पोजीशन बताता है। "minLimitInner" सुनिश्चित करता है कि हमारी पहली गाइड की पोजीशन minLimitInner से शुरू हो; आंतरिक बॉउंड्रीज़ से। फिर हम "i" के साथ colwidth और गटर को गुणा करते जाते हैं जो कि 0 से "cols" बार दोहराया जाता है। इस तरह से हम डॉक्यूमेंट में हमारी गाइड्स का पहला ग्रुप जोड़ते हैं। ये गाइड्स प्रत्येक कॉलम के बाईं ओर होंगे।

फिर दूसरी लाइन में हम जांचते हैं कि क्या guidPos की वैल्यू maxLimitInner से अधिक है; डॉक्यूमेंट के दांयी ओर की आंतरिक बाउंड्री। यदि ऐसा है तो यह लूप से बाहर आ जाता है। यदि यह कंडीशन true नहीं होती है, लूप तब तक जारी रहता है जब तक कंडीशन पूरी नहीं होती है।

कोड की तीसरी लाइन, बस guidPos की पोजीशन में डॉक्यूमेंट में गाइड्स को जोड़ती है।

स्टेप 11: डेवलपमेंट सेकंड लूप

हमारे दूसरे ग्रुप की गाइड्स से डील करने का समय।

for ( j = 0 ; j < cols ; j++ )
  {
if ( j == 0 ) 
{ multiply = 0
  }
  else
  {
  multiply = 1;
  }

temp_gutter = ( gutter * multiply ) ;
guidPos = ( minLimitOuter - space ) + ( ( colWidth + gutter ) * ( j + 1 ) );
 if ( guidPos > maxLimitInner ) 
{
  break;
  }  
doc.guides.add ( Direction.VERTICAL , Number ( guidPos ) );

कुछ मामूली अंतर के साथ कोड का यह हिस्सा हमारे कॉलम के दाहिने किनारों और दाहिने इनर बाउंड्री में गाइड्स जोड़ता है।

यहां पूर्ण कोड है:

if ( app.documents.length != 0 ) 
{ 
    preferences.rulerUnits = Units.PIXELS;
    var layoutWidth = Number ( prompt ( ' Enter layout width: ' , 960 ) );
    var cols = Number ( prompt ( ' Enter numbers of columns: ' , 12 ) );
    var space = Number ( prompt ( ' Enter space between columns: ' , 10 ) );
    
    var doc = app.activeDocument;
    var docWidth = doc.width;
    var docXcenter = docWidth / 2;
    
    
    var gutter = space * 2; //gutter space
    var layoutHalf = layoutWidth / 2;
    
    
    //outer limits that is the layout width;
    var maxLimitOuter = docXcenter + layoutHalf;
    var minLimitOuter = docXcenter - layoutHalf;
    
    
    //Inner limits for 960gs
    var minLimitInner = minLimitOuter + space;
    var maxLimitInner = maxLimitOuter - space;
    
    var colWidth = ( layoutWidth - ( cols * gutter ) ) / cols;
    
    
    doc.guides.add ( Direction.VERTICAL , minLimitOuter );
    doc.guides.add ( Direction.VERTICAL , maxLimitOuter );
    
    
    for ( i = 0 ; i < cols ; i++ )    
    {    
        guidPos = minLimitInner + ( ( colWidth + gutter ) * i );
        
        if ( guidPos > maxLimitInner )
        { 
            break;
        }
        
        doc.guides.add ( Direction.VERTICAL , Number ( guidPos ) );
    
    }
    
    
    
    for ( j = 0 ; j < cols ; j++ ) 
    {
        if ( j== 0 )
        {
            multiply = 0
        }
        
        else
        {
            multiply = 1;
        }
        
        temp_gutter = ( gutter * multiply );
        
        guidPos = ( minLimitOuter - space ) + ( ( colWidth + gutter ) * ( j + 1 ) );
        
        if ( guidPos > maxLimitInner ) 
        {
            break;
        }
        doc.guides.add ( Direction.VERTICAL , Number ( guidPos ) );
    }
     
    }// end-if app.documents.length
        
    else
    {
       alert ( " No active document exists " );
      }

हांलांकि इस स्क्रिप्ट में खामियों और कमियां हो सकती हैं, लक्ष्य सिर्फ आपको एक प्रैक्टिकल उदाहरण के साथ फ़ोटोशॉप में जावास्क्रिप्ट के बारे में थोड़ा सा सिखाना था। आप शायद इसे पूरा ना समझ सके होंगे, लेकिन मुझे आशा है कि इसने कम से कम आपकी जिज्ञासा बड़ाई हो। यदि आपके पास कोई प्रश्न हैं, तो कृपया उन्हें कमैंट्स में छोड़ दें।