2009-07-07 7 views
7

काम पर मैं फ़ोटोशॉप/आतिशबाजी में एक साइट को डिजाइन करने वाला एक सहयोगी देखता हूं, मुझे लगता है कि यह डेटा ले रहा है, इसे काट रहा है और ड्रीमवेवर का उपयोग स्क्रैच से पुनर्निर्माण के लिए कर रहा है।वेब डिज़ाइन PSD से HTML -> अधिक प्रत्यक्ष तरीके?

ऐसा लगता है कि यह बहुत ज्यादा मजाक कर रहा है!

मुझे पता है कि फ़ोटोशॉप एक टेबल आधारित HTML आउटपुट कर सकता है, और आतिशबाजी पूर्ण स्थिति के साथ divs बनायेगी; न ही बहुत उपयोगी लगता है।

मान लीजिए, मैंने प्रोग्रामर बनने के बाद से अधिक (डीडब्ल्यू/एफडब्ल्यू) (सीएस 4/सीएस 3) की कोशिश नहीं की है, इसलिए मुझे नहीं पता कि नए संस्करण इस काम प्रवाह मुद्दे को संबोधित कर रहे हैं, लेकिन क्या हम अभी भी डबल हैंडलिंग बातें?

हम लेआउट मेटाडाटा किसी प्रकार संलग्न कर सकते हैं स्लाइस में सहायता करने के लिए (यह एक रोल ओवर बटन है, यह एक SWF, इस पाठ होगा, इस लोगो में "xyz" <h1> पाठ आदि छिपाने जाएगा) लेआउट पीढ़ी? क्या कुछ गुप्त उपकरण हैं जो इस रूपांतरण प्रक्रिया में सहायता करते हैं? या क्या हम अभी भी तक से चीजें कर रहे हैं?

निराशा तब जारी है जब कहा गया है कि हाथ निर्मित पृष्ठ को फिर से को स्मार्टी टेम्पलेट्स/वर्डप्रेस/जेनेरिक सीएमएस फिट करने के लिए पुन: कार्य करने की आवश्यकता है।

मुझे स्वीकार है कि डिजाइनरों जो कुछ भी करने के लिए सक्षम होने के लिए सिस्टम से मुक्त होने की आवश्यकता है, लेकिन अब तक की आम साइटों:

  • नेविगेशन
  • अधिक लिंक
  • मुख्य सामग्री के साथ एक साइडबार के साथ एक शीर्ष लेख भाग
  • शायद एक और साइडबार
  • एक पाद लेख

बहुत सारे घटकों की समानता को देखते हुए, कटा हुआ डिज़ाइन से कार्यात्मक HTML पर जाने के लिए और अधिक व्यवस्थित दृष्टिकोण नहीं होना चाहिए?

या क्या मैं चीजों को अधिक सरल बना रहा हूं?

-edit- मम्मम्म .... मुझे लगता है कि मैं एक जवाब स्वीकार करूंगा, लेकिन वे वास्तव में नहीं थे जो मैं खोज रहा था।

ऐसा लगता है कि डीओएम को डिजाइन करने की तरह लगता है कि यह पवित्र अंगूर का एक छोटा सा हिस्सा है ("यह केवल एक मॉडल है!"), और शायद एचटीएमएल और जावास्क्रिप्ट के साथ आप "ग्रोवी" चीजों के साथ कर सकते हैं, यह कड़ी मेहनत होगी , लेकिन बाधाओं के एक सेट के साथ (वह 960 सामान दिलचस्प लग रहा है), कुछ अच्छी तरह से डिजाइन रीसेट स्टाइल शीट्स और थोड़ा ... परी धूल? हम काम प्रवाह में सुधार करने में सक्षम होना चाहिए।

फ़ोटोशॉप की टेबल स्वयं बहुत बेकार हैं, मैं सहमत हूं, लेकिन निश्चित रूप से हम यह डेटा ले सकते हैं, और फिर कोशिकाओं के समूह का चयन कर सकते हैं और कह सकते हैं "ठीक है, यह एक टेक्स्ट div, overflow: auto" या "इन कोशिकाओं एक छवि ब्लॉक हैं, इसे चयनित क्षेत्र के समान ऊंचाई/चौड़ाई के साथ शैली दें "। यहां पर काम पर अन्य कमरे में ऐसे हाथी हैं जिन्हें प्रबंधन के लिए औपचारिक परिचय देने की आवश्यकता है, लेकिन डिजाइन के कुछ हिस्सों> पृष्ठ वर्कफ़्लो प्रतीत होता है ... सर्वश्रेष्ठ से अशिक्षित।

+1

सिद्धांत में, आप सही हैं। लेकिन अगर यह इतना आसान था, तो http://www.psd2html.com/ जैसी वेबसाइटें मौजूद नहीं होंगी। –

+0

@musicfreak: यह सही है कि मैं अभ्यास में सही हूं। हो सकता है कि उन साइटों जैसी साइटें सामान्य साइट डिज़ाइन पैटर्न से निपटने के लिए आंतरिक रूप से विकसित हों .. – Assembler

उत्तर

15

मेरे लिए, हाथ से ऐसा करना एक लाभ है। आपको केवल इसे एक बार सही करना होगा, और यदि आप विशेष रूप से दृश्य अपील के लिए जा रहे हैं, तो आपको इसे क्रॉस-ब्राउज़र अनुकूल बनाने से पहले बहुत अधिक काम मिल गया है ...

अन्य को सुनना अच्छा लगेगा जवाब। यह सिर्फ मेरा लेना है क्योंकि मैं दृष्टिहीन आकर्षक साइटों की तुलना में अधिक डेटा संचालित करता हूं।

+2

+1 क्रॉस-ब्राउज़र संगतता का उल्लेख करने के लिए। क्रॉस-ब्राउज़र संगतता का उल्लेख करने के लिए –

+3

+1, जेनरेट किया गया एचटीएमएल एक आपदा होने जा रहा है .... – Colin

+2

+1 इंसान> मशीनें (अभी के लिए ...) – annakata

5

ओमेगा ने इसे छुआ, लेकिन मुझे लगता है कि सबसे बड़ी समस्या क्रॉस-ब्राउज़र संगतता है। यदि उन सभी ब्राउज़र quirks मौजूद नहीं था (खांसीInternetExplorercough), जो आपने सुझाव दिया वह बहुत आसान होगा। हालांकि, यह अक्सर हर ब्राउज़र में पिक्सेल-परिपूर्ण दिखने के लिए बहुत सारे हाथ-कोडिंग लेता है।

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

+1

मुझे पता है कि आईई गन्दा है, हमने सीएसएस शीट आदि को रीसेट कर दिया है, लेकिन हम * समस्याओं को जानते हैं, निश्चित रूप से हम बड़ी समस्याओं का समाधान कर सकते हैं? अपने एनएच संस्करण में सॉफ़्टवेयर के लिए यूएस $ 400, और हर कोई "हाथ से इसे" कह रहा है !? शायद मुझे एडोब लेना चाहिए, और कुछ ... * .bat फ़ाइलें और कुछ छोटी गाड़ी जावास्क्रिप्ट को एक साथ हैक करना चाहिए। और कीमत आधा चार्ज! – Assembler

+2

मैं यहां असेंबलर से सहमत हूं। आईई में काम करने के लिए साबित तकनीक का उपयोग करना पूरी तरह से संभव है। समस्या यह है कि आप जो भी कर सकते हैं उस पर लचीलापन कम कर देता है। अंत में आप जो हासिल करना चाहते हैं उसके आधार पर, आपको अपनी साइट को हैक/हाथ से ट्विक करना पड़ सकता है, इसलिए यह हर ब्राउज़र में काम करता है, लेकिन इन tweaks और हैक्स सामान्य करने और एक PSD-> एचटीएमएल कनवर्टर में पैक करने के लिए लगभग असंभव हैं। – deceze

1

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

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

iWeb (पूरी तरह से WYSIWYG) या डीडब्ल्यू/आतिशबाजी (बीच में कहीं) जैसे उपकरण केवल आपको अभी तक प्राप्त करते हैं या गंभीर सीमाएं हैं। IWeb के मामले में आपको केवल पूर्व-fabbed टेम्पलेट मिलते हैं, अक्सर डीडब्ल्यू/आतिशबाजी के मामले में उप-इष्टतम कोड। आपको यह तय करना होगा कि आप किस सीमा के साथ रह सकते हैं और जब इसे मैन्युअल रूप से करना सर्वोत्तम होता है।

6

आजकल कई लोग इस सटीक समस्या के कारण (एक्स) एचटीएमएल/सीएसएस का उपयोग कर ब्राउज़र में सीधे डिजाइन कर रहे हैं - फ़ोटोशॉप के साथ मिलकर सभी मिलिंग और क्लाइंट को साइन-ऑफ करने के बाद कोड पर जा रहे हैं स्थिर डिजाइन

एंडी क्लार्क की Walls Come Tumbling Down प्रस्तुति एक अच्छी पढ़ाई है।

1

Sitegrinder जैसे कई टूल हैं जो ऐसा करते हैं।

एडोब खुद को लैब्स में एक परियोजना Catalyst कहा जाता है कि आप फ्लैश के लिए और अधिक जो वर्णन किया है:

यह फ़ोटोशॉप से ​​स्लाइस लेता है, तो आप उनके गुणों को बदलने और एक काम कर Flash फ़ाइल को निर्यात करने के लिए अनुमति देता है। (राइट क्लिक बॉक्स, टेक्स्ट प्रॉपर्टी जोड़ें, यह एक टेक्स्ट फ़ील्ड बन जाता है ...)

यदि आप अपना वीडियो देखते हैं (जो आपको चाहिए - यह अद्भुत है), तो आप देखेंगे कि वे जल्द ही सोच रहे हैं कि वेबसाइट जल्द ही होगी इस तरह से बनाया गया।

याहू द्वारा ज़िम्बारा खरीदा जाने से पहले, ऐसा लगता था कि वे ऐसे उपकरण की ओर बढ़ रहे थे जो फ्लैश के लिए उत्प्रेरक के समान क्रॉस-प्लेटफ़ॉर्म HTML उत्पन्न करता था। अब और नहीं। लेकिन याहू में शेक-अप के साथ, इस तरह के सॉफ्टवेयर अभी भी ज़िम्बरा राख से उभर सकते हैं।

1

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

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

9

फ़ोटोशॉप को पूरी तरह से छोड़ें और बस अपने डिजाइनरों को सीधे एचटीएमएल में मजाक कर लें। न केवल आप जटिल, अजीब-महसूस करने वाली प्रक्रिया को हटा देंगे, लेकिन आप बेहतर, अधिक लचीला डिज़ाइन प्राप्त करेंगे, क्योंकि इसमें से 100% HTML/CSS में जो भी संभव है, उस पर आधारित होगा, फ़ोटोशॉप में क्या संभव है।

अधिक पढ़ने:

+0

बहुत सच है। इतनी सारी चीजें हैं जो वे इतनी सख्त परिप्रेक्ष्य से पूरा करती हैं। अच्छी तरह से डाल दिया। –

2

मेरे राय है कि HTML/CSS पर्याप्त सरल है कि एक सक्षम वेब डिजाइनर को इसमें मामूली धाराप्रवाह होना चाहिए। फ़ोटोशॉप में त्वरित दिखने और अनुभव के लिए इसकी जगह है, लेकिन मुझे लगता है कि यह एक महत्वपूर्ण कदम याद करता है: उपयोगकर्ता अनुभव डिजाइन।

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

अगला मैं divs है, जो खुशी से भी wireframes पैदा करता है बाहर बिछाने के लिए सीएसएस का उपयोग करेंगे

अंतिम चरण दृश्य तत्वों आवेदन कर रहा है (समीक्षा और कागज प्रोटोटाइप के लिए उपयोगी।): रंग, पाठ शैलियों, ग्राफिक्स। मैं खूबसूरत पकाए जाने के लिए जो भी ग्राफिक प्रोग्राम की आवश्यकता होगी उसका उपयोग करूंगा।

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

यदि आपको इस विधि में कर्षण की आवश्यकता है तो आप 960 (http://960.gs/) जैसे मानक सीएसएस ग्रिड का उपयोग कर सकते हैं। यह बहुत से अंकगणित और फ्लोटी व्यवसाय को संभालता है जो इस तरह के एक लेआउट लेआउट बनाता है।

राहुल के ऊपर दिया गया लिंक मैं यह भी अनुशंसा के अलावा: http://www.37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss

1

क्या आप शायद के लिए जाना चाहिए अपनी साइट डिजाइन के लिए एक अच्छी तरह से स्थापित ग्रिड प्रणाली के भीतर काम करने डिजाइनरों को प्रशिक्षित है। यदि वे एक ग्रिड/ब्लॉक सिस्टम के रूप में लेआउट को समझ सकते हैं तो उन बाधाओं के भीतर बहुत से रोचक डिजाइन को पूरा किया जा सकता है। लेकिन यह सीधे PSD से HTML तक रूपांतरण नहीं होने वाला है क्योंकि वे दृश्य डेटा का प्रतिनिधित्व करने के दो पूरी तरह से अलग तरीके हैं।

सीएसएस काम को आसान बनाने वाले कई ढांचे हैं।एक खाका सीएसएस

है

http://www.blueprintcss.org/

वहाँ टेम्पलेट्स के बहुत सारे के भीतर फ़ोटोशॉप ग्रिड प्रणाली का प्रतिनिधित्व करने के लिए वहाँ बाहर हैं।

http://konigi.com/tools/photoshop-template-blueprint-css-comps

एक दृश्य की कमी परत के रूप में ग्रिड के बारे में सोचें तो डिजाइन एक फ़ोटोशॉप कंप्यूटर अनुप्रयोग और विशिष्ट HTML/CSS कार्यान्वयन के बीच मैप किया जा सकता। दृश्य तत्वों को साफ ग्रिड बक्से के भीतर बाध्य किया जाना चाहिए। ग्रिड के भीतर SOME तत्व या इकाइयों को पृष्ठभूमि छवियों में मैप किया जा सकता है। सामग्री वाले होल्ड कंटेनरों के साथ अन्य ठोस रंग या सफेद स्थान।

एक अच्छी तरह से समझी और ग्रिड ढांचे के साथ आप पिक्सेल सही लेआउट के बहुत करीब हो सकते हैं।

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

1

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

संबंधित मुद्दे