स्क्रैच से एक वेबसाइट डिजाइन करना - इलस्ट्रेटर या फ़ोटोशॉप?

11

अगर मैं स्क्रैच से एक वेबसाइट डिज़ाइन कर रहा हूं और मैं इसे स्लाइस करना चाहता हूं और इसे Adobe Dreamweaver में बाद में कोड करूं, तो क्या मुझे इलस्ट्रेटर या फ़ोटोशॉप में वेबसाइट का डिज़ाइन बनाना चाहिए? क्यों?

— JFW
स्रोत

1

मैं फ़ोटोशॉप को इसके व्यापक उपयोग और अधिक ट्यूटोरियल के लिए सुझाऊंगा।

— जिचाओ

6

शुरू करने के लिए आपको पुरानी 'स्लाइस ए इमेज' मेथडोलॉजी का उपयोग करते हुए वेबसाइट डिजाइन नहीं करनी चाहिए। आदर्श रूप से, आप एचटीएमएल / सीएसएस में शुरू करेंगे और अपने इमेज एप्लिकेशन का उपयोग करेंगे।

— DA01

@ जिचाओ: आपकी टिप्पणी को एक उत्तर में बनाया जाना चाहिए।

— फिलिप रेगन

2

@ DA01 "इस तरह के व्यक्तिपरक मामले के लिए बहुत जरूरी नहीं हो सकता है"। सभी के अनुरूप कोई सर्वोत्तम अभ्यास नहीं है।

— जरी कीनलेन

2

@ तियु बहुत सच है। उस ने कहा, इन दिनों स्लाइस-एन-पासा कम ही सबसे अच्छा अभ्यास है। मैं एक उत्तर में विस्तृत करूँगा।

— DA01

26

त्वरित शाब्दिक जवाब: इलस्ट्रेटर और फ़ोटोशॉप के बीच, फोटोशॉप, जैसा कि यह रेखापुंज है, जैसा कि वेब साइट है।

थोड़ा और अधिक विस्तृत जवाब: आप दोनों का उपयोग करेंगे।

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

लंबे उबाऊ व्याख्यान जवाब:

"स्लाइस-एन-डाइस" विधि थोड़ा दिनांकित है। यह एक दशक पहले लोकप्रिय था लेकिन इन दिनों यह अनुशंसित दृष्टिकोण नहीं है। मैं सुझाव देता हूं:

साइट को 'स्केच' करने के लिए जो भी एप्लिकेशन (AI / PSD) का उपयोग करें। उच्च निष्ठा के लिए स्वतंत्र महसूस करें, लेकिन इसे केवल एक मजाक के रूप में व्यवहार करें।
आपके द्वारा स्थापित किए जाने के बाद, साइट का निर्माण शुरू करें। HTML / CSS / JS में गोता लगाएँ।
आवश्यकतानुसार, व्यक्तिगत ग्राफ़िकल तत्वों को बनाने के लिए फ़ोटोशॉप में कूदें जिनकी आपको आवश्यकता है।

क्यों? वैसे, फ़ोटोशॉप में डिज़ाइन करना आपके द्वारा काम किए जाने वाले माध्यम का हिसाब नहीं है। यह एक निश्चित कैनवास है और वेब एक निश्चित कैनवास नहीं है और न ही यह मानक कैनवास भी है। यह टीम को एक पिक्सेल-परफेक्ट आइडिया की ओर ले जाता है और वेब केवल पिक्सेल परफेक्ट नहीं है।

— DA01
स्रोत

हो सकता है, हम कैनवास की चौड़ाई को ठीक कर सकें, क्योंकि कई प्रसिद्ध निश्चित चौड़ाई वाली वेबसाइटें हैं। अधिक जानकारी के लिए, कृपया 960.gs देखें ।

— जिचाओ 21:11

कि तुम वहाँ आधे रास्ते मिल जाएगा। कुछ स्क्रीन के लिए।

— 1:01 बजे DA01

यह एक समस्या होनी चाहिए। हालांकि, मेरे पास कोई बड़ा एलसीडी नहीं है, इसलिए मेरे पास इसका परीक्षण करने का कोई अवसर नहीं है।

— जिचाओ

1

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

— DA01

2

आपके उत्तर में आतिशबाजी की सिफारिश करने के लिए +1। एक बहुत ही कम, लेकिन शक्तिशाली वेब डिज़ाइन अनुप्रयोग।

— ड्वेन चारिंगटन

7

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

हालांकि, ध्यान रखें:

आतिशबाजी पीएनजी संपीड़न के लिए बेहतर है, हालांकि। फ़ाइल का आकार फ़ोटोशॉप की तुलना में 20% -30% छोटा है।
यदि आप सड़क को जानते हैं तो आप साइट (टीशर्ट्स, पोस्टर्स, फ्लायर्स, आदि) के लिए अन्य गैर-वेब सामग्री डिज़ाइन कर रहे हैं यदि आप वेक्टर आधारित कार्यक्रम में शुरू करते हैं तो बेहतर है।

— जिन
स्रोत

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

— user56reinstatemonica8

कुशल छवि संपीड़न के विषय पर, मैं एडोब के किसी भी ऐप पर निर्भर नहीं हूं। ImageOptim , एक मैक ऐप की तरह कुछ आज़माएं । अन्य स्थानीय और वेब आधारित समाधान हैं। आपको कुछ मामलों में बहुत छोटे ग्राफिक्स मिलेंगे।

— प्लेनक्लोथेस

6

मुझे DA01 से असहमत होना है।

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

सिर्फ इसलिए कि कागज या व्हाइटबोर्ड की एक शीट में वेब दस्तावेज़ के सभी मिनट गुण नहीं होते हैं, इसका मतलब यह नहीं है कि इसका उपयोग किसी वेबसाइट को वायरफ़्रेम करने के लिए नहीं किया जा सकता है। इसी तरह, तथ्य यह है कि ब्राउज़र विंडो को बढ़ाया और आकार दिया जा सकता है, डिजाइन मॉकअप के मूल्य पर कोई असर नहीं पड़ता है। किसी भी अनुभवी वेब डिजाइनर को लेआउट के कुछ हिस्सों को लोचदार के रूप में योजना बनाने और वेब प्रौद्योगिकियों की सीमाओं के लिए पता चल जाएगा। एक लेआउट के सभी दृश्य तत्वों को अभी भी एक सपाट छवि के भीतर दर्शाया जा सकता है (यह है कि स्क्रीन पर इसे कैसे प्रस्तुत किया गया है)।

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

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

— केल्विन हुआंग
स्रोत

2

मुझे नहीं लगता कि हम असहमति में हैं। मैं 'अनुभवी वेब डिज़ाइनर' वेरिएबल के आधार पर आपसे पूरी तरह सहमत हूँ। समस्या यह है कि PSD mockups के प्रभारी लोग अक्सर वेब डिजाइनर का अनुभव नहीं करते हैं और जो परियोजना के आगे बढ़ने पर सभी प्रकार के सिरदर्द का कारण बनता है। जैसा कि 'पूर्ण लेआउट के मॉकअप' के लिए मैं भी सहमत हूं। मैं यह नहीं कहूंगा कि हमेशा एक उच्च निष्ठा PSD फ़ाइल होना चाहिए या हमेशा होना चाहिए, हालांकि। वायरफ्रेम अक्सर पर्याप्त होते हैं।

— DA01

3

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

— DA01

मैं आपकी दोनों राय के साथ रहना चाहता हूँ, और शायद यह परियोजनाओं पर भी निर्भर करता है। मैं दोनों बिंदुओं को समझ सकता हूं, हालांकि मुझे कहना होगा कि मैं पर्याप्त रूप से रोगी नहीं हूं या यदि मैं पहले पीएस में पूरे पृष्ठ को डिजाइन करता हूं तो विवरण में खो जाना महसूस करता हूं। साथ ही, CSS में डिज़ाइन PS से भिन्न दिखते हैं। इसके अलावा मैंने पाया कि अगर आपको कोडिंग करने की आदत है, तो कम से कम मेरे लिए मैं इसे पीएस में बदलने से ज्यादा तेज हूं। और आखिरी लेकिन कम से कम नहीं, चीजें बदल सकती हैं (ध्यान से हर विस्तार की योजना के बाद भी), और जब कोडिंग मैं अभी भी अक्सर डिजाइन (सीएसएस, आदि से) में चुनौतियों का पता लगाता हूं और मुझे बदलना होगा - PS में शायद ही कभी ऐसा हो .. ।

— क्रिस

1

यहाँ एक मजेदार तरीके से यह समझाते हुए एक अच्छी पोस्ट है :) http://www.gomediazine.com/tutorials/photoshop-vs-illustrator-part-1/

यहाँ एक बहुत ही विश्वसनीय स्रोत "http://99designs.com/help/whats-the-difference-between-photoshop-and-illustrator" से बेहतर विवरण दिया गया है।

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

— वेद
स्रोत

4

99designs किसी भी चीज़ का विश्वसनीय स्रोत नहीं है।

— DA01

क्या कोई विशेष कारण है जो आप कहेंगे? बस स्पष्टीकरण के लिए मैं उनके साथ काम नहीं करता हूं या उनसे किसी भी तरह से जुड़ा हुआ हूं, हालांकि अतीत में मैंने उनके लेख और ब्लॉग बहुत उपयोगी पाए हैं। उन्हें कई बड़े मीडिया नामों जैसे कि msnbc, new york times आदि से भी पहचान मिली है .... तो क्या मैं यहाँ कुछ याद कर रहा हूँ? कृपया बाँटें।

— वेद

2

और सिर्फ अपनी बात को साबित करने के लिए स्टैक ओवर फ्लो लोगो 99 डिज़ाइन 99designs.com/users/245023

— वेद

2

@ DA01: कृपया हमेशा समझाएं कि कुछ विश्वसनीय क्यों नहीं है, अन्यथा आपकी टिप्पणी में कुछ भी रचनात्मक नहीं है।

— लिटिलमैड

1

क्राउड-सोर्सिंग के माध्यम से डिजाइन प्रतियोगिता मेरे लिए कभी भी अच्छी नहीं रही और इसे प्रोफेसनल डिजाइनरों द्वारा प्रचारित नहीं किया जाना चाहिए। (साथ ही, यह मेरे देश में थोड़ा गैरकानूनी है: D)

— शिर्किरू

1

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

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

कभी भी आप HTML उत्पन्न करने के साथ "स्लाइस स्वचालित रूप से" आप कोड पर नियंत्रण खोने का फैसला करते हैं। अपने करियर की शुरुआत में यह ठीक है, आप सीख रहे हैं, लेकिन यह एक बिंदु पर पहुंच जाएगा, जहां आपको कोड जानना होगा, क्योंकि अनुकूलन के लिए यह उन्नत टेक्स्ट एडिटर पर बेहतर हाथ कोड है (उदाहरण के लिए सॉफ्टवेयर अल्ट्राडिट) खुद का html और css।

एकमात्र क्षण जो मुझे अधिक उपयोगी लगता है वह है स्वचालित स्लाइसिंग जब मुझे ईमेल के लिए डिज़ाइन करते समय टेबल कोड उत्पन्न करना होता है।

— Littlemad
स्रोत

0

फ़ोटोशॉप छवि तैयार करने के लिए। यानी यह साइट की सामग्री के बारे में है। क्लाइंट आपके पोर्टफोलियो को बढ़ाने के लिए भुगतान नहीं कर रहा है। केएल

— केन लक्ष
स्रोत

2

जीडी में आपका स्वागत है। मुझे लगता है कि मैं समझता हूं कि आप क्या कर रहे हैं, लेकिन क्या आप उस पर थोड़ा विस्तार कर सकते हैं?

— फर्राटे

0

यह स्पष्ट है कि आपको व्यापक वेब डिज़ाइन मॉकअप के लिए फ़ोटोशॉप का उपयोग करना चाहिए।

इलस्ट्रेटर डिज़ाइन अभी भी फ़ोटोशॉप डिज़ाइन की तुलना में धीमी प्रक्रिया करते हैं।

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

यदि आप फोटोशॉप में मॉकअप बनाते हैं तो आप उन दस्तावेजों को तेजी से प्रोटोटाइप के लिए पटाखों में आसानी से स्थानांतरित कर सकते हैं।

— MarsMan
स्रोत

-1

फोटोशॉप बेहतर होगा। यह उपयोगकर्ताओं को स्लाइस करने में मदद करेगा।

— लहिरु चतुरंग
स्रोत

4

यह उत्तर थोड़ा छोटा है। क्या आप समझा सकते हैं कि आपका क्या मतलब है?

— मेन्सच

2

अब कौन स्लाइस करता है?

— स्कॉट