ट्यूटोरियल: कसरी Adobe Photoshop साथ वेब पृष्ठ लेआउट

आधुनिक - फोटोशप

वेब पृष्ठहरू डिजाइन गर्न को लागी धेरै प्रकारका उपकरणहरू छन् र कोड प्रविष्ट नगरी वा टच नगरी पूर्णतया सरल र कार्यात्मक तरीकाले कार्य गर्दछ। तिनीहरू असंख्य छन्, अनुप्रयोगहरू द्वारा प्रस्तावित (Adobe Dreamweaver उदाहरण हो) वा Wix जस्ता अनलाइन प्लेटफर्महरू मार्फत। यद्यपि वेब डिजाइनरका लागि म्यानुअल प्रक्रियाहरू जान्नु आवश्यक छ। HTML5 र CSS वेबसाइटहरू र ल्यान्डि pages पृष्ठहरूको सजावटका लागि आधारभूत स्तम्भहरू हुन्।

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

हाम्रो वायरफ्रेमको डिजाईनबाट सुरू गर्दै

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

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

 

वायरफ्रेम -1

हाम्रो वायरफ्रेम सिर्जना गर्न, हामीले गर्नुपर्ने पहिलो कुरा भनेको एडोब फोटोशप अनुप्रयोग प्रविष्ट गर्नुहोस् र आयामहरू समावेश गर्नुहोस् जुन हामी हाम्रो पृष्ठमा चाहन्छौं। यस उदाहरणमा हाम्रो पृष्ठ १२1280० पिक्सेल चौडा हुनेछ। जे होस्, अन्तिम मुद्दा अन्तिम गन्तव्य वा उपकरणमा निर्भर हुन सक्दछ जुन हामी हाम्रो पृष्ठ पुन: उत्पादन गर्न चाहन्छौं। त्यहाँ कुनै शंका छैन कि वेब डिजाइन को कार्य र कुशल हुन को लागी, यो हुनु पर्छ उत्तरदायी र यो बजारमा सबै उपकरणहरूमा अनुकूलित हुनुपर्दछ। यद्यपि यस अवस्थामा हामी एक प्रोटोटाइप सिर्जना गर्न काम गरिरहेका छौं जुन हामी डेस्कटप कम्प्युटरमा पुन: उत्पादन गर्न गइरहेका छौं। तैपनि, उत्तरदायी मुद्दा जुन हामी पछि व्यवहार गर्नेछौं, अहिलेको लागि, यहाँ यस उदाहरणको साथ काम गर्नको लागि स्क्रीन आयामहरूको श्रेणीक्रम छ। दिमागमा राख्नुहोस् कि यस अवस्थामा हामी एडोब फोटोशपमा अवतरण पृष्ठको लेआउट बनाउनेछौं र त्यसपछि यसलाई HTML5 र CSS3 मा सार्नेछौं। यस सानो अभ्यासको उद्देश्य भनेको फोटोशपमा सिर्जना गरिएको डिजाइनलाई प्रयोगयोग्य र अन्तर्क्रियात्मक वेब डिजाइनमा रूपान्तरण गर्नु हो जुन प्रयोगकर्ताको चाललाई जवाफ दिन्छ।

मोबाइल फोनका लागि मापन

आईफोन and र S एस: 4२० x 4०

आईफोन and र S एस: 5२० x 5०

आईफोन:: 6 375 x 667।

आईफोन ++: 6१414 x 736 XNUMX

नेक्सस:: 4 384 x 598 XNUMX

नेक्सस:: 5 360 x 598 XNUMX

ग्यालक्सी S3, S4, S5: x 360० x 640०

HTC One: x 360० x 640०

ट्याब्लेट मापन

आईप्याड सबै मोडेलको साथ साथै आईप्याड मिनी: १०२1024 x 768

ग्यालक्सी टैब २ र ((.2.० इन्च): x०० x १०२3

ग्यालक्सी टैब २ र ((.2.० इन्च): x०० x १०२3

नेक्सस:: 7 603 x 966 XNUMX

नेक्सस:: 10 800 x 1280 XNUMX

माइक्रोसफ्ट सतह W8 RT: 768 x 1366

माइक्रोसफ्ट सतह W8 प्रो: x२० x १२720०

डेस्कटप कम्प्युटरहरूका लागि मापन

सानो स्क्रीन (नेटबुकमा उदाहरणका लागि प्रयोग गरिएको): १०२1024 x .००

मध्यम स्क्रीन: १२1280० x /२० / १२720० 1280००

ठूला स्क्रीनहरू: चौडाई १ 1400०० पिक्सेल भन्दा बढी, उदाहरण १1400०० x or ०० वा १900०० x १२००।

 

वायरफ्रेम-गाइड

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

वायरफ्रेम -1 ए

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

Wireframe- फाइनल

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

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

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

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

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

वेब

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

web2

संरचना १, २, and र of को हिस्सा हुनेछ पृष्ठभूमि हाम्रो वेबसाइटबाट, त्यसैले यो वास्तवमै हामीलाई आवश्यक छैन कि हामी यस्तो रूपमा Adobe Photoshop बाट निर्यात गर्न सक्छौं, यद्यपि हामीले यो गर्न सक्दछौं, यो आवश्यक छैन। जब यो आउँछ फ्ल्याट र colorsहरू (फ्ल्याट डिजाइन र मटेरियल डिजाइनको अत्यावश्यक सुविधाहरू मध्ये एक, ती सीएसएस स्टाइलसिट प्रयोग गरेर कोड मार्फत पूर्ण रूपमा प्रयोग गर्न सकिन्छ)। यद्यपि, बाँकी एलिमेन्टहरू हाम्रो HTML कोडमा पछि सम्मिलितको लागि बचत गर्नुपर्दछ। यो सानो रेखाचित्रमा हामीले पृष्ठको पृष्ठभूमिमा सम्बन्धित क्षेत्रहरू पुन: उत्पादन गरेका छौं जसले गर्दा हाम्रो साइटको अन्तिम उपस्थिति कस्तो हुन्छ भन्ने बारे स्पष्ट विचार पाएका छौं।

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

एकचोटि हामीले प्रत्येक तत्वहरू सिर्जना गर्‍यौं जुन हाम्रो वेब पृष्ठ बनाउँदछ, यो समय उनीहरूलाई निर्यात गर्न र HTML बचत फोल्डर भित्र छविहरू फोल्डरमा बचत गर्न सुरु गर्ने समय हो। यो महत्त्वपूर्ण छ कि तपाईं तपाईंको वायरफ्रेमबाट निर्यात गर्न प्रयोग गर्नुहुनेछ, किनभने सम्भवतः तपाईंले स्केलेटन कन्फिगरेसनको आधारमा केही मूल तत्त्वहरू परिमार्जन गर्न आवश्यक पर्दछ। (उदाहरण को लागी, यस मामला मा, हामी मूल बटन, लोगो र संरचना को हिस्सा हो कि तत्व को धेरै, कम क्षेत्र को छवि सहित) को आकार परिवर्तन गरेका छौं।

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

  • हाम्रो लोगो।
  • सबै बटनहरू (ती जुन मुख्य मेनूको अंश हो र बाँकी हो)।
  • सबै छविहरू।

हामी यसलाई धेरै तरीकाले गर्न सक्दछौं र हुनसक्छ तपाईले एक विकल्प फेला पार्नुहुनेछ जुन तपाईका लागि बढी प्रभावकारी छ। तर यदि यो पहिलो पटक हो कि तपाईं यस प्रकारको लेआउट बनाउन लाग्नुभएको छ भने, म सिफारिस गर्दछु कि तपाईं निम्न सल्लाहहरूको पालना गर्नुहोस्।

  • पहिले तपाईले फोल्डरमा जानुपर्नेछ जहाँ हाम्रो तारफ्रेम समावेश गरिएको पीडीएस फाईल अवस्थित छ र तपाईले निर्यात गर्न लाग्नु भएको तत्वहरूको जति पटक यसको नक्कल बनाउनुहोस्। यस अवस्थामा हामीले मूलबाट १२ प्रतिलिपिहरू सिर्जना गरेका छौं र तिनीहरूलाई समान फोल्डरमा बचत गरेका छौं। अर्को, तपाईले प्रत्येक प्रतिलिपिलाई पुन: नामकरण गर्नुहुनेछ र ती प्रत्येकलाई त्यसमा समावेश भएको एलिमेन्टको नाम दिनुहोस्। हाम्रो १२ प्रतिहरू पुन: नामकरण हुनेछ: लोगो, मेनू बटन १, मेनू बटन २, खोजी पट्टी, माथिल्लो बटन १, माथिल्लो बटन २, माथिल्लो बटन and र माथिल्लो बटन 12.। बाँकी four वटा नाम परिवर्तन हुनेछ: छवि १, छवि २, छवि and र छवि।।
  • एकचोटी यो काम सकिए पछि हामी लोगो नामको साथ फाइल खोल्नेछौं।
  • हामी हाम्रो लेयर प्यालेटमा जानेछौं र त्यो लेयर फेला पार्नेछौं जुन हाम्रो लोगो समावेश गर्दछ। त्यसो भए हामी थिच्नेछौं Ctrl / Cmd जबकि हामी लेयर थम्बनेलमा क्लिक गर्छौं। यस तरीकाले लोगो स्वत: चयन गरिएको छ।
  • अर्को चरण फोटोशपलाई बताउने छ कि हामी यसलाई सटीक तरीकाले त्यो लोगो काट्न चाहन्छौं। यसको लागि हामीले कुञ्जी वा आदेशबाट क्रपिंग उपकरणमा कल गर्नुपर्नेछ C.
  • एकचोटि हामीले यो गरिसकेपछि हामी काट्ने पुष्टि गर्न हाम्रो इन्टर बटनमा क्लिक गर्नेछौं।
  • अब हामी माथि फाइल मेनूमा जान्छौं सेभ हाउ क्लिक गर्न। हामी नाम छनौट गर्नेछौं, जुन यस केसमा «लोगो be हुनेछ र हामी त्यसलाई एउटा ढाँचा निर्दिष्ट गर्नेछौं PNG, फाईल हुनका लागि जुन वेबमा उच्च गुणवत्ता प्रदान गर्दछ।
  • हामी सबै प्रतिलिपिहरू र तत्वहरूको साथ प्रक्रिया दोहोर्याउँदछौं। जब तपाईं ट्रिम गर्नु हुन्छ, निश्चित गर्नुहोस् हाम्रो प्यालेटमा बाँकी तहहरू छन् अदृश्य वा हटाइयो। यस तरीकाले हामी प्रत्येक तत्वलाई पारदर्शी पृष्ठभूमिमा बचत गर्न सक्दछौं।

बटन १

यस अवस्थामा हामी लेयर प्यालेटबाट हाम्रो मेनू बटन २ छनौट गर्दैछौं। तपाईं स्क्रीनशटमा हेर्न सक्नुहुनेछ कि कसरी हाम्रो बटनको सीमा स्वत: चयन गरिएको छ।

बटन २

एकचोटि हामीले C कुञ्जीबाट क्रपिंग उपकरण चयन गर्नुभयो, हाम्रो क्यानभास केवल हाम्रो बटनको आयामहरूमा कम हुनेछ।

सेभ बटन

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

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

सारांश:

  1. डिजाईन संरचना तपाईंले प्रसारण गर्न चाहानुभएको सामग्री र तपाईंले आफ्नो वेबसाइटमा सिर्जना गर्नुपर्दछ कि वर्गहरूमा विशेष ध्यान दिने वेबसाइटको।
  2. तपाइँको कंकाल वा मा काम गर्नुहोस् wireframe एडोब फोटोशपबाट कुन क्षेत्रहरूमा सामग्रीहरू देखा पर्नेछन् र तिनीहरूको ढाँचा।
  3. उपायहरू र ब्रान्डहरूमा निर्भर गर्दै जुन तपाईं पहिले विकसित गर्नुभयो, सुरु गर्नुहोस् डिजाईन वेबको सतह। सबै तत्वहरू (दुवै अस्थायी र स्थिर) समावेश गर्दछ। सम्बन्धित बटन, लोगो, र छविहरू समावेश गर्न नबिर्सनुहोस्।
  4. सबै तत्वहरू काट्नुहोस् जुन प्रोजेक्टको एक एक गरेर हिस्सा हुन्छ। निश्चित गर्नुहोस् कि उनीहरूसँग सहि उपायहरू छन् र ती कारणहरूले तपाईलाई पछि समस्या उत्पन्न गर्दैन।
  5. ढाँचामा सबै तत्वहरू बचत गर्नुहोस् PNG परियोजना फोल्डर भित्र छवि फोल्डरमा HTML.
  6. दिमागमा राख्नुहोस् कि यस परियोजनाको वेब विन्डोमा आउटपुट हुनेछ त्यसैले यो महत्त्वपूर्ण छ कि तपाईले र you्ग मोडलाई ध्यानमा राख्नुभयो र लागू गर्नुभयो। RGB.
  7. अन्य वेबसाइटहरू द्वारा प्रेरित हुनुहोस् जुन तपाईं काम गर्नु अघि प्रशंसा गर्नुहुन्छ, र यो कुरा तपाईंको टीमका सदस्यहरूसँग छलफल गर्न नबिर्सनुहोस्। यदि यो ग्राहकको लागि परियोजना हो भने यसमा लाग्ने कोशिश गर्नुहोस् ब्रीफिंग जहाँसम्म सकेसम्म

 


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

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

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

तपाईंको ईमेल ठेगाना प्रकाशित हुनेछैन।

*

*

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

  1.   समुद्री डाकू राजा भन्यो

    hahahahahaha र यी सबैको अन्तमा, तपाईं सुरु बटनमा जानुहुन्छ, कम्प्यूटर बन्द गर्नुहोस्, र तपाइँ एक कमबख्त पेशागतमा जानुहुन्छ जसले तपाईंलाई वेबसाइट बनाउनुहुने छ कि कमबिट बकबक छैन;)

  2.   रोनी भन्यो

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

bool (सत्य)