यह Adobe Photoshop दिखाएगा ट्यूटोरियल और कैसे का उपयोग करने पर चर्चा Photoshop उस के रूप में निर्यात किया जाएगा एक वेब साइट को डिजाइन करने के लिए html और छवि स्लाइसें. यह बाद में एक में लाया जा सकता है html संपादक कार्यक्रम जैसे Adobe Dreamweaver. इस एक है Adobe Photoshop वेब डिजाइन कैसे सीधे में एक पूरा वेब पेज बनाने के लिए दिखा ट्यूटोरियल Photoshop.
वहाँ एक वेबसाइट की डिजाइन दृष्टिकोण करने के लिए कई अलग अलग तरीके हैं. कुछ में पूरी बात डिजाइन करने के लिए चुन Dreamweaver, या फिर उनके साइट का निर्माण कागज पर एक संक्षिप्त वर्णन जल्दी कर, जबकि अन्य एक ग्राफिकल डिजाइन दृष्टिकोण और उपयोग को प्राथमिकता Photoshop डिज़ाइन उपकरण के रूप में. एक के रूप में अपनी साइट का निर्माण Photoshop फ़ाइल पहले अपनी साइट के निर्माण के बाद बहुत विभिन्न कारणों के लिए आसान बनाता है.
किसी भी डिजाइन अवधारणा की शुरुआत से कुछ है कि आप पहले से ही देख सकता है एक अच्छी प्रेरणा प्राप्त करने के लिए है. जैसे कि एक चित्रकार उन्हें आसपास के दुनिया से प्रेरणा मिलती है, एक वेब डिजाइनर भी वे क्या देखने से प्रेरणा मिलेगी. कभी कभी वह एक मौजूदा साइट है, साइट टेम्पलेट्स, एक चित्र या से, ग्राफिक, या लोगो.
एक अच्छी प्रेरणा के अलावा अपने लक्षित दर्शकों को पहचानने है और क्या वे के साथ सहज हो आसपास डिजाइनिंग. लेआउट और शैली अपने दर्शकों को पहले से ही करने के लिए क्या उपयोग है के साथ कुछ अनुरूप होना चाहिए. स्क्रीन संकल्प भी जब एक वेबसाइट डिजाइन पर विचार किया जाना चाहिए. पृष्ठ के चौड़ाई और आपके पृष्ठ की तह पहले अपनी साइट की सफलता के लिए महत्वपूर्ण हैं. (इस गुना से पहले वे पृष्ठ नीचे स्क्रॉल करने के लिए है आपके दर्शक देखता है कि क्षेत्र है.) जब अपना काम आप अपने दर्शकों के एक हिस्से को काट रहे हैं आसान हो सकता है सिर्फ बड़े परदे प्रस्तावों मिलनसार. वेब उपयोगकर्ताओं के बहुमत आज, एक कारक के कम हो जाएगा पहले कभी और भविष्य के वेब साइटों को छोटे परदे के लिए बनाया प्रस्तावों में से बड़ा स्क्रीन संकल्प का उपयोग करें, लेकिन अब के लिए यह अभी भी विचार किया जाना चाहिए.
के लिए अपनी साइट इतना है कि यह और विस्तारित अनुबंध एक उपयोगकर्ता विंडो आकार के आधार पर एक लचीला चौड़ाई के लिए यह भी संभव है, यह तब होता है जब कि सभी को समायोजित करेगा एक साइट बनाने के प्रयास इष्टतम है. एक साइट में कम से कम 750 पिक्सल चौड़ा की एक खिड़की के आकार को समायोजित करने के लिए इष्टतम है डिजाइन. न्यूनतम संकल्प ज्यादातर लोगों ने आज प्रयुक्त 800 x 600 है.
का उपयोग करके अपनी वेबसाइट बनाने के कदम Photoshop हैं:
1. उपयोग करना Photoshop इस देखो और आप चाहते हैं कि साइट के लेआउट डिजाइन करने के लिए.
2. अप में छवि टुकड़ा Photoshop, इस कटा छवियों या एक के रूप में निर्यात html. समझ html स्वरूपण कैसे में जाने की अपनी छवि टुकड़ा करने की व्याख्या के लिए एक बहुत मदद मिलती है html.
3. इस बनाएँ html टेम्पलेट मैच के लिए Photoshop साइट डिजाइन और या उपयोग में कटा छवियाँ ड्रॉप Dreamweaver को समायोजित करने के लिए html फ़ाइल Photoshop से बनाए आपके PSD स्लाइस.
इस ट्यूटोरियल एक छवि से बनाया जाएगा में इस साइट का डिजाइन उसकी चरागाह में bessie.
यह एक खुश साइट = ओ होना चाहिए
एक हेडर ग्राफिक बनाने
में एक वेबसाइट डिजाइनिंग का पहला भाग Photoshop आपकी साइट के लिए एक शीर्ष ग्राफिक पैदा कर रही है. हेडर ग्राफिक आपकी साइट के पहले और देखा जाएगा कि समग्र देखो के लिए केन्द्र होगा और आपकी साइट के महसूस मुख्य चित्रमय हिस्सा है. को समाप्त हेडर ग्राफिक मिल यहां.
चरणों का पालन करने के लिए:
1. सही यहाँ क्लिक करें इस छवि को बचाने के लिए. एक नए फ़ोल्डर में छवि को बचाने.
2. में डाउनलोड फ़ाइल खोलने Photoshop.
3. छवि के सही पक्ष में गाय लोगो के साथ 745 x 320 के लिए फसल छवि. इस चयन के आयताकार एक प्रकार का बड़ा खेमा उपकरण (मी) करने के लिए, शैली ड्रॉपडाउन निर्धारित आकार चुन तो अधीन. ऊंचाई के लिए चौड़ाई और 320 के लिए px 745 px में डाल. स्थिति को अपने एक प्रकार का बड़ा खेमा अपने शीर्षक और फसल छवि (छवि मेनू फसल) बनाने के लिए.
4. छवि के शीर्ष पर स्थित एक छोटे से 10 पिक्सेल पंख बनाएँ. इस ढाल उपकरण चुनें (छ), शीर्ष ढाल उपकरण विंडो में ढाल पर क्लिक करें, शुरू और खत्म करने के लिए सफेद रंग सेट, और 100% करने के लिए 0% अस्पष्टता को समाप्त करने के लिए शुरू अस्पष्टता सेट. एक नई परत और खींचें और सीधे रैंप बनाने के लिए ऊपर पकड़े पारी में रैंप का निर्माण करना.
5. इस समय छवि नीचे शुरू से अधिक एक और रैंप बनाने और शीर्ष (रैंप सीधा रखने के लिए पाली पकड़ने की दिशा में बिजली के द्वारा) के ग्राफिक हल्का. रैंप के अंत बिंदु छवि से ऊपर के बारे में 300 पिक्सल में ग्राफिक के लिए एक अच्छा धुन्ध देने के लिए किया जाना चाहिए. यह गाय खेत में एक उज्जवल दिन की उपस्थिति देता है.
6. आखिर हम भी आगे की विपरीत दिशा के रूप में पिछले एक में एक और ऊर्ध्वाधर रैंप बनाने के हेडर ग्राफिक हल्का करने के लिए जा रहे हैं. प्रारंभ बिंदु को गाय लोगो के ऊपर और नीचे भी साथ रहने को ग्राफिक के नीचे से ऊपर 1 पिक्सेल होना चाहिए.
7. जहाँ आप अपने वेब बचाने का उपयोग करने के लिए वेबसाइट (ALT + SHIFT + Ctrl + बनाने के लिए जा रहे हैं एक फ़ोल्डर में हेडर ग्राफिक बचाने ओं). एक जेपीजी के रूप में बचा, अनुकूलित, पर के बारे में 70 गुणवत्ता.
आपके हेडर अब बना दिया गया है ग्राफिक. इस ग्राफिक अलग अलग तरीकों से एक साइट में टेम्पलेट का उपयोग किया जा सकता है. यह पूर्ण पैमाने पर इसका इस्तेमाल करते हैं और इसके आसपास के नेविगेशन और शरीर पाठ लपेटो, या आकार में कमी की और यह सेट एक और अधिक आधुनिक डिजाइन में लेआउट खाके.
में एक वेबसाइट लेआउट डिजाइनिंग Photoshop
अपनी वेब साइट के डिजाइन कि विशिष्ट तत्वों को शामिल कम से कम तीन अलग हिस्सों चाहिए था:
1. शीर्षक
कंपनी का लोगो
ग्राफिक बैनर
लिंक / बटन को घर के लिए, के बारे में, और संपर्क पृष्ठ
2. शरीर
पृष्ठ पर पाठ के लिए सामग्री क्षेत्र
चित्र या ग्राफिक्स सामग्री के साथ शामिल
3. पाद लेख
कॉपीराइट सूचना
नीति के लिंक / उपयोग की शर्तें, और वापस ऊपर करने के लिए लिंक
जब लेआउट डिजाइन में पैदा Photoshop अतिरिक्त नेविगेशन के लिए जगह छोड़ने के लिए सुनिश्चित हो, पाठ, भविष्य में और साइट विस्तार या तुम क्योंकि तुम अपने डिजाइन में और अधिक पृष्ठों की लिंक्स के लिए कमरे में छोड़ कर नहीं किया था खुद को पूरी तरह से अपनी साइट redesign करने की जरूरत मिल सकता है. निम्न चरणों के लिए लेआउट बनाने के लिए उपयोग किया जाता है Photoshop वेब साइट लेआउट कि हो सकता है यहाँ डाउनलोड.
चरणों का पालन करने के लिए:
1. बनाने एक नया PSD 745 x 600 px px फाइल और लेआउट के रूप में इसे बचाना.psd
2. इस दस्तावेज़ में हेडर ग्राफिक जगह. ((g_header हेडर फ़ाइल खोलने.) jpg, यह (Ctrl + चुनें एक), प्रतिलिपि (Ctrl + ग), इस लेआउट को सक्रिय.PSD खिड़की, पेस्ट (Ctrl + V).)
3. इस लेआउट पकड़े पारी के शीर्ष करने के लिए शीर्षक को स्थानांतरित करने के लिए इस कदम उपकरण (v) का उपयोग करें यह जगह में शीर्ष पर तस्वीर देना.
4. खुले कंपनी का लोगो, कॉपी और पेस्ट अपने लेआउट में.
5. इस लोगो बदाल (Ctrl + T) और साइट लेआउट के ऊपरी बाएँ कोने में यह कदम.
6. इस प्रकार क्षैतिज उपकरण (टी) का उपयोग करते हुए गाइड के शीर्ष पर दो लोगो के बीच आकाश में कुछ छोटे पाठ लिंक बनाएँ. प्रकार शब्द "घर", 4 रिक्त स्थान, "संपर्क", एक और 4 रिक्त स्थान, और फिर "" के बारे में. पाठ 12 पीटी के बारे में होना चाहिए, Arial फ़ॉन्ट, एक आनन्द प्रकाश के लिए हरे रंग में रंग # a6ff94 का उपयोग.
7. पाठ (परत परत शैली dropshadow) 2 की दूरी और 3 के एक आकार के साथ एक dropshadow दे.
8. मूल पाठ इस प्रकार के कदम उपकरण और तीर कुंजी उचित ऊपर छोड़ दिया लोगो के पास का उपयोग करने की स्थिति.
9. छोटे गाय लोगो से नीचे हमें कुछ बड़े नेविगेशन बनाएँगे / छवि लिंक्स:
() के प्रकार टी "मुख पृष्ठ 1 पृष्ठ 2 पृष्ठ 3 पृष्ठ को क्षैतिज प्रकार के उपकरण का उपयोग करते हुए 4" arial का उपयोग, काली पाठ के साथ 17 pt फ़ॉन्ट. शब्दों के बीच 4 या 5 रिक्त स्थान के बारे में डाल बटन कुछ जगह देने के लिए.
एक नई परत बनाने
और आप अभी बनाया पाठ नीचे खींचें
इस आयताकार एक प्रकार का बड़ा खेमा उपकरण (एम) के साथ बड़ा नेविगेशन बस के चारों ओर एक क्षेत्र का चयन करें.
इस रंग बाल्टी उपकरण चुनें (छ) और (# a6ff94) हरे रंग के साथ नए खाली परत के चयनित क्षेत्र को भरने.
इस परत मेनू परत शैली करने के लिए जा रहा द्वारा एक बटन की तरह इस परत देखो bevel और उभारदार नक्क़ाशी करना. ठीक दबाव के डिफ़ॉल्ट सेटिंग का उपयोग करें
तुम बस बनाया ठोस हरी पृष्ठभूमि परत में प्रत्येक शब्द के बीच पिक्सल के एक कॉलम हटाने अपने एक कॉलम एक प्रकार का बड़ा खेमा उपकरण का उपयोग. यह एक अलग तरह का बटन bevel और बना प्रत्येक शब्द देखो टूट जाएगा. तुम में ज़ूम करने के लिए सही में शब्दों के बीच करने की जरूरत पड़ सकती है.
8. नई परत बटन पर इसे खींच कर हरे बटन परत डुप्लिकेट या परत मेनू में जाना नकली परत.
9. नीचे हरे बटन परत का चयन करें और फिल्टर मेनू करने के लिए जा रहा द्वारा एक प्रस्ताव के स्तर के बारे में 150 पिक्सल की दूरी के साथ गड़बड़ जोड़ें धब्बा Motion दाग़.
10. के नीचे के बारे में 10 पिक्सल और 20% करने के लिए मत पारदर्श निचली परत blurred चाल. यह तुम्हारा बटन के नीचे सामग्री से ऊपर विभाजित में मदद करने के लिए एक सूक्ष्म रेखा देता है.
12. कि पाद लेख पाठ के पीछे की पृष्ठभूमि बन जाएगा कॉपीराइट पाठ के पीछे एक नई परत बनाने, विश्वास है कि परत चुना है बनाना.
13. , लेकिन पृष्ठ के तल में एक क्षेत्र को चुनने के लिए आयताकार एक प्रकार का बड़ा खेमा उपकरण (एम) का प्रयोग सिर्फ एक छोटे से उच्च कॉपीराइट पाठ की तुलना में.
14. इस रंग बाल्टी उपकरण का उपयोग (छ) और चमकीले हरे रंग (# a6ff94) के साथ इस क्षेत्र को भरने.
15. (परत मेनू परत शैली आंतरिक चमक) भीतरी परत चमक शैली का उपयोग करके पंख बाहरी छोर सामान्य करने का मिश्रण मोड सेट, सफेद (# FFFFFF के रंग) और 10 पिक्सल का आकार.
अब हम एक सरल डिजाइन किया है, मज़ाक, वेबसाइट में Photoshop एक शीर्षक और पाद लेख के साथ. शीर्ष और पाद लेख के बीच में सफेद स्थान सभी पाठ सामग्री और यह है कि वास्तविक वेब साइट में भर जाएगा चित्रों की जाएगी.
में छवियों टुकड़ा करने की क्रिया Photoshop वेब के लिए
अब है कि हम साथ एक सरल वेबसाइट तैयार की है Photoshop हमें टुकड़ों में उसे काट दो और एक के रूप में टुकड़े निर्यात html फ़ाइल है कि बाद में इस्तेमाल किया जा सकता है और संशोधित Dreamweaver. जब कि प्रत्येक टुकड़ा एक मेज और छवि के रूप में और यथासंभव सरल कुछ ने स्लाइसें रखने की कोशिश एक अलग सेल हो जाएगा याद अपनी वेबसाइट डिजाइन टुकड़ा करने की क्रिया. यकीन है और शुरू हो और जब कभी संभव हो तो डिजाइन के बाहर अपने स्लाइसें अंत करना Photoshop तुम एक अंश के रूप में याद किया होगा एक एकल पिक्सेल गलती नहीं है. खुला हम पहले बनाया वेबसाइट डिजाइन, इस टुकड़ा उपकरण (कश्मीर) का चयन करें और शुरू हो जाओ. (बेहतर परिणाम के लिए - दृश्य मेनू तस्वीर तड़क पर बारी (+ SHIFT + Ctrl;), यकीन परतों के लिए तस्वीर पर बना दिया है.) डाउनलोड कटा PSD यहाँ संचिका.
चरणों का पालन करने के लिए:
पूरे ग्राफिक के चारों ओर एक टुकड़ा बना. बाहर शुरू की ग्राफिक और अंत के बाहर ग्राफिक. यह बताने में मदद करेगा Photoshop कहीं है कि हम नहीं चाहते एकल पिक्सेल ग्राफिक्स का निर्माण नहीं करने के लिए.
पाद लेख के शुरू ग्राफिक और लेआउट के बाहर ग्रे में समाप्त टुकड़ा. जो तुम्हारे लिए परत के ऊपर मिल तड़क हैं.
ऊपर के ग्रे में ग्राफिक और बड़े नेविगेशन के ठीक नीचे से ऊपर को समाप्त शुरू भर में सभी तरह के हैडर टुकड़ा. यह दो में (अरे नहीं गाय टुकड़ा चाहिए! ). अब आप अपने शीर्ष भाग के लिए 3 स्लाइस चाहिए था, अपनी सामग्री, और आपके पाद लेख.
टुकड़ा बाहर सभी बटन, आप प्रत्येक बटन के लिए एक ही स्थान पर है ताकि बटन की ऊंचाई एक ही हैं तड़क कर रहे हैं सुनिश्चित करने के लिए प्रयास करें. के लिए कम, आप आसपास के टुकड़ा के नीचे करने के लिए तस्वीर सकता है बड़ा बटन.
आपका Photoshop वेब डिजाइन अब और वेब के लिए बचाने के लिए तैयार कटा होना चाहिए.
/ बचत का निर्यात Photoshop एक वेब पेज के रूप में स्लाइसें
पहले के संस्करणों में Photoshop वेब के लिए एक कटा छवि को बचाने के साथ ही imageready, पर किया जा सकता है अब यह सब में बनी है Adobe Photoshop CS3. इस ट्यूटोरियल कैसे हम में बनाया कटा वेबसाइट डिजाइन को बचाने के लिए तुम्हें दिखाता हूँ के निम्न भाग Photoshop एक के रूप में html संबद्ध छवियों के साथ फाइल.
चरणों का पालन करने के लिए:
के साथ अपने कटा मेनू फ़ाइल चुनें वेब और उपकरणों के लिए बचा खुला ग्राफिक (ALT + SHIFT + Ctrl + s). यह वेब और उपकरणों खिड़की के लिए बचा लाता है.
इस पूर्व निर्धारित ड्रॉपडाउन अंतर्गत उच्च गुणवत्ता के लिए जेपीईजी का चयन और प्रकार संचिका. (यह केवल एक प्राथमिकता है.)
क्लिक करें उत्तमीकृत मेनू तीर उत्पादन रूपरेखाएँ संपादित करें पर क्लिक करें और उप मेनू खोलने के लिए...
हम विस्तार में उत्पादन में सेटिंग्स पर यहाँ नहीं जाऊँगा. रूपरेखाएँ ड्रॉपडाउन से डिफ़ॉल्ट सेटिंग्स का चयन. पीछे और अगले सभी रूपरेखाओं को देखने के लिए उपयोग.
ठीक पर क्लिक करें और फिर बचा. आप एक स्थान से आप आसानी से ढूँढ सकते हैं बचत कर रहे हैं सुनिश्चित करें.
प्रकार के रूप में सहेजने का चयन: html और छवियाँ (*.html )
सेटिंग: डिफ़ॉल्ट सेटिंग्स
स्लाइस: सभी स्लाइसें
सहेजें पर क्लिक करें
बधाई हो तुम अब सफलतापूर्वक के साथ एक वेबसाइट तैयार की है Photoshop, यह कटा, और फिर सफलतापूर्वक एक के रूप में यह निर्यात html फ़ाइल! कुछ सरल है कि संशोधनों की आवश्यकता है लेकिन इससे पहले कि डिजाइन पूरी तरह से एक वेब पृष्ठ या वेबसाइट टेम्पलेट के रूप में इस्तेमाल किया जा सकता है किया जाना है, लेकिन मैं चलता हूँ कि के लिए एक और ट्यूटोरियल.
अब है कि हम साथ एक सरल वेबसाइट तैयार की है Photoshop हमें टुकड़ों में उसे काट दो और एक के रूप में टुकड़े निर्यात html फ़ाइल है कि बाद में इस्तेमाल किया जा सकता है और संशोधित Dreamweaver. जब कि प्रत्येक टुकड़ा एक मेज और छवि के रूप में और यथासंभव सरल कुछ ने स्लाइसें रखने की कोशिश एक अलग सेल हो जाएगा याद अपनी वेबसाइट डिजाइन टुकड़ा करने की क्रिया. यकीन है और शुरू हो और जब कभी संभव हो तो डिजाइन के बाहर अपने स्लाइसें अंत करना Photoshop तुम एक अंश के रूप में याद किया होगा एक एकल पिक्सेल गलती नहीं है. खुला हम पहले बनाया वेबसाइट डिजाइन, इस टुकड़ा उपकरण (कश्मीर) का चयन करें और शुरू हो जाओ. (बेहतर परिणाम के लिए - दृश्य मेनू तस्वीर तड़क पर बारी (+ SHIFT + Ctrl;), यकीन परतों के लिए तस्वीर पर बना दिया है.) डाउनलोड कटा PSD यहाँ संचिका.
गाइड के शीर्ष पर दो लोगो के बीच आकाश में कुछ छोटे पाठ लिंक बनाएँ. प्रकार शब्द "घर", 4 रिक्त स्थान, "संपर्क", एक और 4 रिक्त स्थान, और फिर "" के बारे में. पाठ 12 पीटी के बारे में होना चाहिए, Arial फ़ॉन्ट, एक आनन्द प्रकाश के लिए हरे रंग में रंग # a6ff94 का उपयोग.
और आप अभी बनाया पाठ नीचे खींचें
