CSS3 के आविष्कार के साथ, एक वेब डिजाइनर को फ़ोटोशॉप का उपयोग करना चाहिए?


13

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

उदाहरण के लिए, वे फ़ोटोशॉप में जो बनाया है उसे प्राप्त करने के लिए सीमा-त्रिज्या, अस्पष्टता, पृष्ठभूमि ढाल, बॉक्स छाया और पाठ छाया, और अन्य CSS3 नियमों का उपयोग करते हैं। कई बार वे केवल फ़ोटोशॉप से ​​एक छवि आयात करते हैं, जो ब्रश के काम या लोगो की तरह अधिक होती है, या ऐसा कुछ भी।

मेरा सवाल यह है कि क्या वेब डिज़ाइनरों को अभी भी फ़ोटोशॉप का उपयोग कुछ बनाने के लिए करना चाहिए, जिसमें से केवल 20% उनके लिए उपयोगी होगा?

क्या कोई वेब डिज़ाइनर फ़ोटोशॉप में डिज़ाइन बनाने की एक और मध्य परत जोड़ने की जहमत किए बिना सीधे HTML और CSS में पूरी डिज़ाइन बना सकता है, और फिर बस वहाँ बने हुए तत्वों को बना सकता है?


साइट के इंटरफ़ेस को डिज़ाइन करना बनाम डिज़ाइन को देखना दो अलग-अलग विषय हैं। फ़ोटोशॉप एक भयानक तार फ्रेम टूल बनाता है; हालाँकि, MockFlow जैसे उत्पाद एक भयानक दृश्य उपकरण बनाते हैं। मेरे क्लाइंट का 99% तार के फ्रेम की व्याख्या नहीं कर सकता है कि छाया प्रभाव, या रंग योजना एक साथ कैसे काम करेगी (या अनगिनत अन्य दृश्य निर्भरता)।
डॉसन

यह चैट में होना चाहिए या कम से कम मेटा होना चाहिए। इसका परिमित उत्तर नहीं है।
b01

जवाबों:


17

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

इसका मतलब यह नहीं है कि आप फ़ोटोशॉप का उपयोग नहीं करते हैं। लेकिन आप निश्चित रूप से नहीं है।

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

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

तो, सवाल का जवाब देने के लिए:

क्या कोई वेब डिज़ाइनर फ़ोटोशॉप में डिज़ाइन बनाने की एक और मध्य परत जोड़ने की जहमत किए बिना सीधे HTML और CSS में पूरी डिज़ाइन बना सकता है, और फिर बस वहाँ बने हुए तत्वों को बना सकता है?

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


मैं आपके साथ @ DA01 हूं। +1।
सईद नेमाटी

1
+1 महान लेख (ठीक है शायद यह एक लेख नहीं है), लेकिन आपको यकीन है कि इसे अच्छी तरह से अभिव्यक्त किया गया है! आपके द्वारा कही गई हर बात से मैं पूरी तरह सहमत हूं। मैं व्यक्तिगत रूप से अपने ग्राहकों को पूर्ण डिजाइन कार्यक्षमता के साथ लाइव HTML और सीएसएस मॉकअप प्रदान करने के लिए एक बिंदु बनाता हूं ताकि वे डिजाइन को 'अनुभव' कर सकें!
वेब_डिजाइनर

2
+1 के लिए "स्क्रीन ने कार्य प्रस्तुति परत मार्कअप को गोली मार दी"। जब तक मैं इस उत्तर को नहीं पढ़ता, तब तक मैं अपने ही उत्तर में ऐसा कुछ कहने की सोच रहा था, लेकिन मेरे पास जोड़ने के लिए बहुत कुछ नहीं होगा, इसलिए मैं इसके बजाय इसे
बढ़ाता हूं

+1 मैंने अपने डिज़ाइन के अधिकांश काम को एक वर्ष में css3 का उपयोग करते हुए ब्राउज़र में करना शुरू कर दिया और शायद ही कभी फ़ोटोशॉप को और अधिक खोल दिया।
क्रिस_ओ 3

1
+1! फोटोशॉप मुख्य रूप से एक बिटमैप हेरफेर प्रोग्राम है। हल्के, अच्छी तरह से नियंत्रित कोड के लिए, सीधे html और css से बेहतर कोई तरीका नहीं है। हमेशा ऐसी चीजें होंगी जिन्हें पीएस से वेब में बदलना होगा, और जैसा कि मैं इसे देखता हूं; PS केवल क्लाइंट के लिए एक जटिल परत जोड़ता है।
बंटेह

7

** EDIT **

नया ग्राहक?

बिल्कुल - यदि आप एक नए ग्राहक / साइट के लिए एक डिजाइन पिच कर रहे हैं। आम तौर पर ले-लोक को यह देखने में मुश्किल होती है कि आपके (मेरे) सिर में क्या है। वायरफ्रेम, ड्रॉइंग आदि हमेशा इसे काटते नहीं हैं - खरोंच करते हैं - वे इसे काटते नहीं हैं। मैं और अधिक सुनता हूं, "मुझे लगा कि यह ग्राहकों से एक्स" करने जा रहा था जब उनके पास एक डब्ल्यूएफ, या स्केच होता है, जब मैं उनके लोगो, फोटो, कॉर्पोरेट फोंट और यूआई के साथ मॉकअप देता हूं।

कोई अन्य परिदृश्य:

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

** समाप्त **

मैं हां कहूंगा -

यह एक दृश्य के साथ अपने डिजाइन (और comps बनाने के लिए बहुत तेज) को बेचने के लिए बहुत आसान है - भले ही यह सरलीकृत हो। यही पीएस मेरी नौकरियों के लिए सबसे अधिक उपयोगी है।

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

यदि आप अपने सामान्य रूप से उपयोग किए जाने वाले तत्वों की फ़ोटोशॉप लाइब्रेरी रखते हैं: वेक्टर आधारित गोल कोने इनपुट बॉक्स, आपका ग्रिड (ओं), "लोगो यहाँ जाता है" बॉक्स ... सभी एक फ़ाइल की परतों में, या कई फाइलें (आपकी पसंद) - आप समय के एक अंश में होम पेज और आंतरिक पेज बनाने में सक्षम होंगे जो उन्हें कोड करने में लेता है।

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


"समय के एक अंश में उन्हें कोड करने के लिए" जो वास्तव में चीजों की एक पूरी संख्या पर निर्भर करता है - डिजाइनर के कौशल सहित। मुझे लगता है कि यह अक्सर सीएसएस / एचटीएमएल / जेएस में सीधे ग्राहक परिवर्तन / tweaks बनाने के लिए तेज है, फ़ोटोशॉप में वापस जाने से। लेकिन यह बहुत सारे कारकों पर निर्भर करता है।
DA01

DA01 - बिल्कुल। प्रोजेक्ट के परिपक्व होते ही मेरा कार्य प्रवाह बदल जाता है। लॉन्च के बाद, PSDs को छुआ नहीं गया है।
डॉसन

3

क्या आप इस बात की गारंटी दे सकते हैं कि आपके उपयोगकर्ताओं में से 100% के पास ऐसे ब्राउज़र हैं जो आपकी साइट को ठीक उसी तरह से देखेंगे जैसे आप (या अधिक महत्वपूर्ण रूप से, ग्राहक) इसे देखने का इरादा रखते हैं? नहीं? फिर क्या प्रतिशत? 90%? 80%?

क्या आप यह सुनिश्चित कर सकते हैं कि यह अच्छी तरह से खराब हो जाए, ताकि शेष 10% (20%? 40%?) द्वारा देखा गया वैकल्पिक संस्करण स्वीकार्य हो?

यदि दोनों में से कोई एक समस्या है, तो आपको कुछ फ़ोटोशॉप की आवश्यकता है।


माफ़ करना; ऐसा क्यों है? क्या आप समझा सकते हैं कि आपका क्या मतलब है?
बंटेह

@boblet कृपया अपने प्रश्न में विशिष्ट रहें। क्या समझाएं?
लॉरेन-क्लियर-मोनिका-इप्सम

आह क्षमा करें; मैं सोच रहा था कि आप क्यों कहते हैं कि ब्राउज़र की निरंतरता की कमी के कारण आपको कुछ PS की आवश्यकता है? किसी तरह मेरा कोई मतलब नहीं है।
बंटेह

@boblet मेरा मतलब है कि कुछ प्रभावों (जैसे, गोल कोनों) के साथ आप इसे सीएसएस या फ़ोटोशॉप में बना सकते हैं। लेकिन पुराने ब्राउज़र सीएसएस गोल कोनों को संभाल नहीं सकते हैं; वे नियमित बॉक्स कोनों की तरह बाहर आते हैं। इसलिए यदि राउंड कॉर्नर वास्तव में महत्वपूर्ण है, तो आपको इसे ग्राफिक के रूप में बनाने के लिए फ़ोटोशॉप का उपयोग करना होगा ताकि सभी ब्राउज़र इसे देख सकें।
लॉरेन-क्लियर-मोनिका-इप्सम

अहा! यह थोड़ा अधिक समझ में आता है। मैं अब देखता हूं, हालांकि, यह एक पुरानी पोस्ट है, और इन दिनों सीएसएस गोल कोनों, छाया आदि वास्तव में कोई समस्या नहीं है। मैं सिर्फ PS में रमणीय mockups बनाने के अभ्यास से संबंधित था, और फिर समझदार कोड में अनुवाद करने वाली समस्याओं में टकरा रहा था। यह अक्सर ग्राहकों को निगलने में मुश्किल होता है; जैसा कि वे अक्सर उस पुल को नहीं समझते हैं जिसे बिटमैप और कोड के बीच की खाई को बंद करने की आवश्यकता होती है। समझाने के लिए धन्यवाद।
बेंतह

2

सोचने वाली बातें:

  • एक बहुत उन फैंसी डिजाइनों को वेब पर डालने में चला जाता है। कम से कम अधिक जटिल लोगों के लिए। फ़ोटोशॉप अंतिम परिणाम तेजी से देखने में मदद करता है।

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

  • जैसा कि आपने उल्लेख किया है कि वे CSS3 में इसका 80% कर सकते हैं, लेकिन तब उन्हें अंततः फ़ोटोशॉप फॉर्म की आवश्यकता होगी।

  • मेरा तर्क है कि आप फ़ोटोशॉप में मॉक-अप कर रहे हैं यदि आपका डिज़ाइनर और डेवलपर हैं और इससे समय की बचत होगी, अन्यथा फ़ोटोशॉप में हमेशा मॉक-अप करें।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.