फ़ोटोशॉप CS6 में एक स्वच्छ और सुरुचिपूर्ण ब्लॉग लेआउट डिज़ाइन करें

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

इस ट्यूटोरियल का अनुसरण करने के लिए, आपको निम्नलिखित संसाधनों की आवश्यकता होगी:

• बर्न मोंटाग से मुफ्त फ़ॉन्ट संस्कार.
• 26 PSDFreemium से दोहराए जाने वाले पिक्सेल पैटर्न.
• डेनियल सेलविटेला से मुक्त सामाजिक मीडिया प्रतीक.

• डेमो

कैनवास तैयार करना

चरण 1

इस डिजाइन में, हम इसकी रूपरेखा के रूप में 960 ग्राम का उपयोग करने जा रहे हैं। अपने मुख्य पृष्ठ से टेम्पलेट डाउनलोड करें और ज़िप फ़ाइल के अंदर, फ़ोटोशॉप फ़ाइल खोजें। फ़ोटोशॉप में '12 कॉलम ग्रिड 'फ़ाइल खोलें.

इसे छिपाने के लिए 12 Col ग्रिड परत के लिए आंख आइकन पर क्लिक करें; हमें अभी इसकी आवश्यकता नहीं है.

चरण 2

वर्तमान कैनवास का आकार बहुत छोटा है। क्लिक करें चित्र> कैनवास का आकार (या Ctrl + Alt + C)। एक बड़ा आकार जोड़ें और सुनिश्चित करें कि इसके लंगर बिंदु को केंद्र में सेट करें.

चरण 3

शासक को प्रकट करने के लिए Ctrl + R दबाएं। क्लिक करें देखें> नया नई गाइड बनाने के लिए गाइड जो हमें सही ढंग से डिजाइन करने में मदद करेगी। चुनते हैं खड़ा और स्थिति पर: 185 px कैनवास के ऊपरी बाएँ कोने से एक ऊर्ध्वाधर गाइड 185 px बनाने के लिए.

चरण 4

स्थिति में एक और ऊर्ध्वाधर गाइड बनाएं 150 पीएक्स, 1095 पीएक्स तथा 1130 पीएक्स.

नीचे कैनवास के अंदर हमारा अंतिम गाइड है.

रंग थीम तैयार करना

चरण 5

इस डिजाइन के लिए, हम Colorlouver से एक अच्छे रंग संयोजन का उपयोग करने जा रहे हैं। एक jpeg फ़ाइल के रूप में रंग संयोजन को खोलने के लिए पूर्वावलोकन लिंक पर क्लिक करें.

रंग संयोजन को सहेजें और इसे फ़ोटोशॉप फ़ाइल के अंदर रखें। छवि को सीधे कैनवास के अंदर रखकर हम उसके रंग को तेज और आसान बना सकते हैं.

पृष्ठभूमि तैयार करना

चरण 6

चुनते हैं पृष्ठभूमि परत और इसे अनलॉक करने के लिए परत पैनल के शीर्ष पर लॉक आइकन पर क्लिक करें। रंग बदलने के लिए थंबनेल पर डबल क्लिक करें.

दूसरे रंग पर क्लिक करें, # 948,371, इसका चयन करने के लिए.

चरण 7

कैनवास के ऊपर एक आयताकार आकृति बनाएं। यह दूसरी पृष्ठभूमि होगी.

चरण 8

आकार चयनित रखें। में विकल्प बार, खुला भरना रंग बॉक्स और फिर क्लिक करें रंग पहिया आइकन. जब रंग पिकर संवाद बॉक्स खोला जाता है, तो इसे चुनने के लिए पहले रंग पर क्लिक करें। इसके लिए आघात रंग का चयन करें कोई नहीं.

चरण 9

एक नई परत बनाएं और फिर आयताकार मार्की टूल का उपयोग करके ऊपरी कैनवास का चयन करें। सक्रिय करें ढालनुमा उपकरण और इसे भरें रेडियल ढाल सफेद से काले तक। सुनिश्चित करें कि ढाल कैनवास के ऊपर केंद्रित है.

इसे बदलें मिश्रण मोड सेवा मेरे स्क्रीन और इसकी कमी करें अस्पष्टता सेवा मेरे 37%.

चरण 10

एक नई परत बनाएं और इसे 'छाया' नाम दें.

दिखाए गए की तरह द्वितीयक पृष्ठभूमि के तल पर एक आयताकार चयन बनाएं। क्लिक करें संपादित करें: भरें. सेट उपयोग सेवा मेरे काली. क्लिक करें ठीक काले रंग के साथ चयन भरने के लिए.

चरण 11

इसे गाऊसी ब्लर का उपयोग करके नरम करें। क्लिक करें फ़िल्टर> धुंधला> गाऊसी धुंधला.

चरण 12

Alt दबाए रखें और फिर कर्सर को बीच रखें साया तथा ऊपरी पृष्ठभूमि परत। Alt कुंजी जारी किए बिना, पर क्लिक करें परत को क्लिपिंग मास्क में बदलें. इसे क्लिपिंग मास्क में परिवर्तित करके, छाया अब ऊपरी पृष्ठभूमि के अंदर जाती है.

चरण 13

छाया नीचे लाओ अस्पष्टता सेवा मेरे 50% सूक्ष्म बनाने के लिए। नीचे, आप 100% आवर्धन में परिणाम देख सकते हैं.

चरण 14

इन परतों को एक समूह में रखना हमेशा एक अच्छा विचार है। यह करने के लिए, सभी परतों का चयन करें और फिर Ctrl + G पर क्लिक करें.

हैडर

चरण 15

दिखाए गए जैसे ऊपरी कैनवास पर एक आयत बनाएं.

चरण 16

में विकल्प बार, सेट आघात रंग # af9f8e.

चरण 17

इसके लिए भरना रंग, का चयन करें रैखिक ढलान से # d0c4b9 से # a89c91.

नीचे 100% दृश्य में परिणाम है.

साइट का नाम

चरण 18

डिज़ाइन के बाईं ओर साइट का नाम जोड़ें। नीचे दिखाए अनुसार प्लेसमेंट को ध्यान से देखें। टेक्स्ट को डबल क्लिक करें और जोड़ें परछाई डालना. इसके फॉन्ट के लिए, सैशन का उपयोग करें.

मेन्यू

चरण 19

मेनू बार के दूसरी तरफ मेनू ड्रा करें। फ़ॉन्ट संसेशन 14 pt का उपयोग करें। फिर से, नियुक्तियों पर ध्यान दें.

चरण 20

सक्रिय मेनू के लिए, इसके फ़ॉन्ट प्रकार को बोल्ड पर सेट करें.

चरण 21

सक्रिय बहुभुज उपकरण और सेट करें पक्षों सेवा मेरे 3. के साथ एक त्रिकोण आकृति बनाएं भरें: # 3D3123 तथा स्ट्रोक: कोई नहीं. जोड़ना परत की शैली > ड्रॉप शैडो.

चरण 22

आइए इसके नीचे एक पंक्ति जोड़कर सक्रिय मेनू पर जोर दें। सक्रिय करें लाइन टूल और इसके लिए अपना वजन निर्धारित किया है 5 पीएक्स. चुनते हैं # f76b6a इसके फिल के लिए, बिना स्ट्रोक के.

सक्रिय मेनू के नीचे लाइन डालें और मेनू बार के नीचे 1 px स्थान जोड़ें.

चरित्र शैलियों का उपयोग करना

चरण 23

चरित्र चरित्र को चरित्र शैली के रूप में सहेजते हैं। यह फीचर InDesign में कैरेक्टर स्टाइल्स का एक सरलीकृत संस्करण है। इसे बचाने के लिए, टेक्स्ट को सक्रिय करें और फिर 'न्यू कैरेक्टर स्टाइल' आइकन पर क्लिक करें.

नई कैरेक्टर स्टाइल पर डबल क्लिक करें और निम्नलिखित सेटिंग का उपयोग करें.

चरण 24

अन्य मेनू का चयन करें और फिर इसे लागू करने के लिए वर्ण शैली पर क्लिक करें। यदि आपको कैरेक्टर स्टाइल के बगल में एक प्लस चिह्न मिलता है तो इसका मतलब है कि चरित्र की एक अलग सेटिंग है। सेटिंग्स को ओवरराइड करने के लिए, गोलाकार तीर आइकन पर क्लिक करें.

चरण 25

सक्रिय मेनू के लिए एक नई चरित्र शैली बनाने के लिए पिछले चरण को दोहराएं.

चरण 26

तो, चरित्र शैलियों का उपयोग करने की बात क्या है? चरित्र शैलियाँ हमें चरित्र सेटिंग को केंद्रीकृत करने में मदद करती हैं। हम बस उस शैली का उपयोग करके हर पाठ को संपादित करने के लिए चरित्र शैली को संपादित कर सकते हैं। नीचे एक उदाहरण देखें। अगर हम कैरेक्टर स्टाइल के अंदर फॉन्ट टाइप को एडिट करते हैं शीर्ष मेनू - सामान्य कोरबेल के लिए, सभी सामान्य मेनू स्वचालित रूप से कोरबेल में बदल जाते हैं.

चरण 27

एक नई परत बनाएं और इसे मेन्यू बार के नीचे रखें। अपने आकार के आधार पर नया चयन करने के लिए मेनू बार Ctrl-क्लिक करें। इससे भरें काली.

चरण 28

Ctrl + D का उपयोग करके चयन निकालें इसे जोड़कर नरम करें गौस्सियन धुंधलापन, फ़िल्टर> धुंधला> गाऊसी धुंधला.

स्लाइडर

चरण 29

10 स्तंभों की चौड़ाई के साथ एक आयताकार आकृति बनाएं (नीचे देखें).

इसके लिए रंग भरें चुनते हैं # dfd1c2. इसके लिए आघात चुनते हैं # c8baac आकार के साथ 10 पीटी. रेखा पूर्वावलोकन के बगल में स्थित छोटे ड्रॉपडाउन तीर पर क्लिक करें और सुनिश्चित करें अंदर संरेखित करें चूना गया.

चरण 30

फ्रेम के ऊपर एक तस्वीर चिपकाएँ। इसे रूपांतरित करें क्लिपिंग मास्क Ctrl + Alt + G. मारने से चित्र स्वचालित रूप से स्लाइडर फ़्रेम के अंदर चला जाएगा। यदि आवश्यक हो, तो आप इसके फ्रेम को प्रभावित किए बिना चित्र को स्थानांतरित और आकार दे सकते हैं.

चरण 31

एक ही रंग के साथ स्लाइडर के पीछे एक और आयताकार आकृति बनाएं। सुनिश्चित करें कि इसे सबसे बाहरी मार्गदर्शक पर स्नैप करें। जोड़ना लेयर स्टाइल> पैटर्न ओवरले PSDfreemium से पिक्सेल पैटर्न का उपयोग करना। नीचे इसकी टोन अस्पष्टता सूक्ष्म बनाने के लिए.

चरण 32

आकार के साथ एक आयताकार आकार ऊपर खींचें भरें: # b3aca5 तथा कोई स्ट्रोक नहीं. Ctrl + T और फिर हिट करें इसे 45 ° घुमाएँ. परत आकार में परिवर्तित करें क्लिपिंग मास्क.

चरण 33

आकार को डुप्लिकेट करें और इसे आकार दें। इसे बदलें भरना एक गहरे रंग के लिए। परत आकार में परिवर्तित करें क्लिपिंग मास्क.

चरण 34

दूसरी तरफ एक और तीर खींचने के लिए उसी चरण को दोहराएं.

चरण 35

नया चयन करने के लिए Ctrl-click स्लाइड फ्रेम। एक नई परत बनाएं और इसे एक में बदलें क्लिपिंग मास्क. के साथ चयन भरें काली.

चरण 36

तब रद्द करें (Ctrl + D) नरम यह प्रयोग कर रहा है गौस्सियन धुंधलापन.

यदि आवश्यक हो तो आप छाया अपारदर्शिता को कम कर सकते हैं.

चरण ३ 37

स्लाइडर के कोने पर एक गोल आयत बनाएं # C8baac भरें.

चरण 38

आकृति के अंदर एक वृत्त बनाएं। इसका सेट करें आघात सेवा मेरे काली आकार के साथ 1 पीटी तथा भरण निकालें.

चरण 39

को चुनिए वृत्त पथ का उपयोग करना पथ चयन उपकरण। Shift + Alt- इसे डुप्लिकेट करने के लिए पथ को खींचें.

अधिक सर्कल बनाने के लिए इसे दोहराएं.

चरण 40

सर्कल पथों में से एक का चयन करें। इसे एक नई परत में काटने के लिए Ctrl + Shift + J दबाएं.

चरण 41

में विकल्प बार, इसे हटा दें आघात और इसका परिवर्तन करें भरना को रेडियल से ढाल # e38989 से # bb5c5c. जोड़ना परत शैली> बाहरी चमक तथा परछाई डालना.

चरण 42

स्लाइडर के नीचे एक अण्डाकार चयन ड्रा करें। एक नई परत बनाएं और इसे भरें काली.

चरण 43

अचयनित करें (Ctrl + D)। इसका उपयोग करके नरम करें गौस्सियन धुंधलापन.

लोअर बैकग्राउंड

चरण 44

नीचे की पृष्ठभूमि के लिए एक और आयताकार आकृति बनाएं। उसी का उपयोग करें भरना तथा आघात स्लाइडर आकार के रूप में रंग.

हमेशा की तरह, इसके प्लेसमेंट से बहुत सतर्क रहें। हम चाहते हैं कि यह कैनवास पर हर गाइड को कवर करे.

जोड़ना लेयर स्टाइल> पैटर्न ओवरले.

नीचे 100% आवर्धन का परिणाम है.

चरण 45

आयताकार मार्की टूल का उपयोग करके इसके अपियर एरिया का चयन करें.

चरण 46

एक नई परत बनाएं, इसे आकृति के पीछे रखें। के साथ चयन भरें काली. Ctrl + T दबाएं, राइट क्लिक करें और चुनें परिप्रेक्ष्य.

इसके ऊपरी कोनों को बाहर की ओर खींचें.

फिर से राइट क्लिक करें और चुनें स्केल. ऊपरी हैंडल को नीचे खींचें.

राइट क्लिक करें और चुनें ताना. बाएँ और दाएँ खंड को भीतर की ओर खींचें.

इसका उपयोग करके नरम करें गौस्सियन धुंधलापन.

नीचे स्वर दिया अस्पष्टता सेवा मेरे 20%.

चरण 47

पृष्ठभूमि के अंदर एक सफेद आयताकार ड्रा करें। यह साइट की मुख्य सामग्री के लिए पृष्ठभूमि बनने जा रहा है.

पृष्ठभूमि के बाएँ, दाएँ और ऊपरी भाग में 10 px का स्थान जोड़ें। रिक्ति आसान होनी चाहिए क्योंकि हमने शुरुआती चरणों में गाइड बनाया है। जोड़ना परत शैली> बाहरी चमक.

चरण ४ 48

आकृति के ऊपरी भाग से एक नया गाइड, 25 px जोड़ें.

अनुभाग शीर्षक

चरण 49

पृष्ठ अनुभाग शीर्षक और उसके विवरण के लिए एक नई वर्ण शैली जोड़ें.

प्रकार टूल का उपयोग करके अनुभाग शीर्षक और उसका विवरण जोड़ें। हमारे द्वारा पहले की गई शैलियों को लागू करें। पहले की गई गाइड की मदद से इसकी पृष्ठभूमि के ऊपरी भाग से 25 px स्थान जोड़ना सुनिश्चित करें.

50 कदम

साइट के विवरण के तहत एक 5 पीएक्स लाइन बनाएं भरें: # 938270 तथा स्ट्रोक: कोई नहीं.

ब्लॉग पोस्ट

चरण 51

पोस्ट शीर्षक के लिए एक और चरित्र शैली बनाएं.

चरण 52

एक पोस्ट शीर्षक जोड़ें और पिछली चरित्र शैली लागू करें.

चरण 53

4 कॉलम चौड़ाई के साथ शीर्षक के तहत एक आयत आकृति बनाएं। सेट सफेद इसके लिए भरना तथा #bebebe इसके लिए आघात. जोड़ना लेयर स्टाइल> स्ट्रोक.

चरण 54

आकृति के शीर्ष पर एक चित्र चिपकाएँ। इसे क्लिपिंग मास्क में परिवर्तित करें (Ctrl + Alt + G).

चरण 55

के साथ एक गोल आयत बनाएँ भरें: # 8e8380 तथा स्ट्रोक: कोई नहीं. इसे रूपांतरित करें क्लिपिंग मास्क.

चरण 56

ब्लॉग मेटाडेटा के लिए नई चरित्र शैलियाँ बनाएं.

चरण 57

आकृति के शीर्ष पर मेटाडेटा पाठ जोड़ें और हमारे द्वारा पहले बनाई गई चरित्र शैली लागू करें.

चरण 58

सक्रिय प्रकार टूल और टेक्स्ट बॉक्स बनाने के लिए क्लिक करें। इसकी चौड़ाई 4 कॉलम पर सेट करें। क्लिक करें टाइप> पेस्ट लोरम इप्सम इसे फ़ोटोशॉप से ​​ऑटो-जनरेट लोरम इप्सम से भरना है.

चरण 59

चरित्र सामग्री के लिए एक नया अनुच्छेद शैली बनाएं। Paragraph Styles पैनल पर नए आइकन पर क्लिक करें.

अनुच्छेद शैली पर डबल क्लिक करें और निम्न सेटिंग का उपयोग करें.

चरण 60

इस शैली को पोस्ट सामग्री पर लागू करें। आप इसकी इंडेंट और स्पेसिंग सेटिंग्स के साथ भी प्रयोग कर सकते हैं.

वेब डिज़ाइन के लिए, हाइफ़नेशन को निष्क्रिय करें.

चरण 61

के साथ एक गोल आयत बनाएँ भरें: # 8e8380 तथा स्ट्रोक: कोई नहीं. जोड़ना लेयर स्टाइल> पैटर्न ओवरले. स्थिरता के लिए, स्लाइडर के समान पैटर्न का उपयोग करें.

चरण 62

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

चरण 63

पिछला बटन सामान्य स्थिति के लिए है। आइए इसे डुप्लिकेट करें और इसका रंग बदलें # f76b6a. इसके अलावा, इसके लेबल प्रकार को बोल्ड पर सेट करें.

चरण 64

पोस्ट को एक समूह के अंदर रखें और फिर इसे कॉपी करने के लिए Ctrl + J दबाएं। समूह को डुप्लिकेट करने के लिए Alt- ड्रैग करें.

अधिक पोस्ट बनाने के लिए उसी चरण को दोहराएं। प्रत्येक पोस्ट की तस्वीर और शीर्षक बदलना याद रखें.

चरण ६५

प्रतिलिपि और पढो बटन और उसके लेबल को संख्या में बदलें। हम इसका उपयोग पेज नेविगेशन के लिए करने जा रहे हैं। होवर की स्थिति के लिए एक बटन सेट करना याद रखें.

चरण 66: पाद

चलो पाद पर काम करना शुरू करते हैं। एक विजेट शीर्षक और उसका विवरण जोड़ें.

चरण 67

लिंक जोड़ें और उसके नीचे 1 px लाइन खींचें। सेट भरें: कोई नहीं तथा स्ट्रोक: # 8e8380.

चरण 68

क्लिक करें अधिक विकल्प बटन और चयन करें धराशायी रेखा.

चरण 69

विजेट में और लिंक जोड़ें.

चरण 70०

विजेट को डुप्लिकेट करें.

चरण 71

हमें हॉवर की स्थिति को भी जोड़ना होगा। लिंक को बोल्ड में सेट करें.

उस सक्रिय लिंक के नीचे, एक 5 px लाइन जोड़ें। इसका रंग सेट करें # f76b6a. स्थिरता के लिए, इस लिंक की उपस्थिति मेनू बार पर सक्रिय मेनू के समान है.

चरण 72

निचले क्षेत्र में एक और आयत जोड़ें। इसका सेट करें भरना सेवा मेरे # 3d3123.

पाद सूचना

चरण 73

उपयोग करके पाद लेख जानकारी जोड़ें प्रकार उपकरण। एक अंधेरा दे दो परछाई डालना अपनी पृष्ठभूमि के विपरीत जोड़ने के लिए.

सामाजिक जाल

चरण 74

Daniele Selvitella से कुछ सोशल मीडिया आइकन जोड़ें। जोड़ना परत शैली> बाहरी चमक.

स्टेप 75

सामान्य आइकन नीचे टोन करें 50%. मँडरा हालत के लिए, चलो बस रखने के लिए अस्पष्टता पर 100%.

चरण 76

फ्री हैंड कर्सर आइकन को पकड़ो और सक्रिय या होवर लिंक के ऊपर सबसे छोटा हैंड कर्सर रखें.

अंतिम परिणाम

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

• डेमो
• स्रोत डाउनलोड करें