আপনার সাইটের জন্য একটি অ্যানিমেটেড 3 ডি লোগো তৈরি করুন

কন্টেন্ট

• শুরু হচ্ছে
• টার্নটেবলের বেস তৈরি করা হচ্ছে
• পা তৈরি করছে
• বাহু এবং মাথা
• রঙ এবং টেক্সচার
• রেন্ডারিং এবং রফতানি
• লোগো শেষ হচ্ছে
• লোগো অ্যানিমেট করুন

ওয়েবে থ্রিডি অ্যানিমেশন তৈরির বিভিন্ন উপায় রয়েছে, তাদের বেশিরভাগেরই জাভাস্ক্রিপ্ট এবং ওয়েবজিএল সম্পর্কে ভাল জ্ঞান প্রয়োজন, বা ফ্ল্যাশের মতো প্লাগ-ইন ব্যবহার। সিএসএস 3 ডি রূপান্তরকে ধন্যবাদ, কেবল এইচটিএমএল এবং সিএসএস ব্যবহার করে 3 ডি তৈরি করা সম্ভব, তবে এটি করা সহজ নয়। ত্রিদিভ, আমার নিখরচায় অনলাইন অ্যাপ্লিকেশনটি, প্রক্রিয়াটিকে সহজতর করে একটি সহজ এবং স্বজ্ঞাত WYSIWYG ইন্টারফেস সরবরাহ করে যা ব্যবহারকারীদের একটি একক লাইন কোড না লিখে 3 ডি অবজেক্ট তৈরি করতে সক্ষম করে।

এই টিউটোরিয়ালে, আমরা কেবলমাত্র এইচটিএমএল এবং সিএসএস ব্যবহার করে একটি কল্পিত রেকর্ড লেবেল, ‘ত্রিদিব রেকর্ডস’ এর জন্য একটি লোগো তৈরি এবং অ্যানিমেট করতে যাচ্ছি। লোগোটির জন্য মূল ভিজ্যুয়াল ত্রিদিব ব্যবহার করে 3 ডি তৈরি করা যাচ্ছে। তারপরে আমরা নিয়মিত এইচটিএমএল এবং সিএসএস ব্যবহার করে টাইপোগ্রাফিক উপাদান যুক্ত করব।

আপনি এখানে চূড়ান্ত অ্যানিমেশন এবং কোড তৈরি করতে পারেন।

শুরু হচ্ছে

আমরা ত্রিদিব ব্যবহার করে 3 ডি তে টার্নটেবল তৈরি করে শুরু করতে যাচ্ছি। ট্রিডি ডট কম এ গিয়ে অ্যাপটি চালু করুন launch আপনাকে ক্রোম, সাফারি বা অপেরা 15 (বা তার পরে) ব্যবহার করতে হবে।

শুরু করার আগে, ত্রিদিব ইন্টারফেসটি বোঝা গুরুত্বপূর্ণ। সম্পাদকের মূল বিভাগটি চারটি দর্শন নিয়ে গঠিত: উপরের বামদিকে 3 ডি ভিউ রয়েছে, যা দৃশ্যের সম্পূর্ণ দৃশ্য সরবরাহ করে। অন্য তিনটি দর্শন এটিকে উপরের, পাশ এবং সামনে থেকে দেখায়। এই তিনটি দর্শন ব্যবহার করে, আপনি 3D আকার তৈরি করতে, সম্পাদনা করতে এবং স্থানান্তর করতে পারেন।

অনুভূমিক সরঞ্জামদণ্ডটি দুটি ভাগে বিভক্ত: বাম অংশটি আপনার নথির সাথে সম্পর্কিত তথ্য প্রদর্শন করে; ডান অংশে আকার তৈরি এবং সম্পাদনার সরঞ্জাম রয়েছে contains দ্য সরান নির্বাচন এবং সম্পাদনা করুন নির্বাচন বোতামগুলি বিভিন্ন সম্পাদনা মোডের মধ্যে স্যুইচ করে।

বৈশিষ্ট্য ফলক (সাইডবার) গ্রিডে জুম এবং স্ন্যাপের মতো নথির সেটিংস এবং নির্বাচিত আকারের বৈশিষ্ট্য (আকার, অবস্থান, রোটেশন, রঙ এবং তাই) প্রদর্শন করে। মাত্রা এবং অবস্থানের জন্য ব্যবহৃত ইউনিটটি হ'ল ইএমএস; ঘূর্ণন কোণ ডিগ্রি হয়।

টিউটোরিয়ালে পরে কোনও বিভ্রান্তি এড়াতে, আমরা নিম্নলিখিত শর্টহ্যান্ড ব্যবহার করতে যাচ্ছি:

ডাব্লু = প্রস্থ এইচ = উচ্চতা ডি = গভীরতা ডায়াম = ব্যাস x ডিগ্রি = এক্স-অক্ষের ঘূর্ণন y ডিগ্রি = ওয়াই-অক্ষের ঘূর্ণন ডিগ্রি = জেড-অক্ষের মধ্যে ঘূর্ণন

টার্নটেবলের বেস তৈরি করা হচ্ছে

জুম মানটি 200 এ সেট করে শুরু করুন pes আকারগুলি আঁকতে সহায়তা করতে, স্ন্যাপটিকে গ্রিড সেটিংয়ে সক্রিয় করুন নথি সেটিংস সাইডবারের বিভাগ। স্ন্যাপ মান সেট করুন 0.125.

টার্নটেবলের বেসটি একটি সাধারণ কিউবয়েড দিয়ে তৈরি, তাই ক্লিক করুন কিউবয়েড যুক্ত করুন উপরের টুলবারে বোতাম। আপনার সম্পাদকের চারটি ভিউতে কিউবয়েড উপস্থিত হওয়া উচিত।

আকৃতিটির নাম পরিবর্তন করুন বেস বৈশিষ্ট্য ফলকের নাম ক্ষেত্রটি ব্যবহার করে (নীচে বৈশিষ্ট্য আকৃতি)। আকৃতির নামটি অবশ্যই একটি বৈধ সিএসএস শ্রেণীর নাম হতে হবে কারণ এটি সম্পাদকের দ্বারা উত্পন্ন কোডে ব্যবহৃত হবে। লোগো অ্যানিমেট করার সময় আমরা এই শ্রেণীর নামগুলি পরে ব্যবহার করব, সুতরাং নিশ্চিত হয়ে নিন যে আপনি সঠিকভাবে তৈরি প্রতিটি নতুন আকারের নাম দিয়েছেন।

কিউবয়েডটির নাম হয়ে গেলে, নিশ্চিত হয়ে নিন যে এটি শীর্ষ দৃশ্যে নির্বাচিত হয়েছে (এটি নীল রঙে হাইলাইট করা উচিত, তার চারপাশের সরঞ্জামগুলির একটি বৃত্তাকার রিং দিয়ে), তারপরে ক্লিক করুন সম্পাদনা করুন সম্পাদনার হ্যান্ডেলগুলি দেখানোর জন্য রিংয়ের শীর্ষে বোতামটি। প্রস্থ এবং গভীরতা না আসা পর্যন্ত কিউবাইডের পাশে নিয়ন্ত্রণের হ্যান্ডেলগুলি টেনে আনুন ডাব্লু = 10 এবং d = 8 মধ্যে বৈশিষ্ট্য আকৃতি.

পাশের দৃশ্যের ভিতরে আকৃতিটিতে ক্লিক করুন। এটি এই দৃশ্যে সম্পাদনা হ্যান্ডলগুলি দেখায়, আমাদের উচ্চতা পরিবর্তন করতে দেয়। উচ্চতা পৌঁছানো অবধি সামঞ্জস্য করুন এইচ = 2। আপনি বৈশিষ্ট্য ফলকে সরাসরি মানগুলিও টাইপ করতে পারেন। কিউবয়েডের কোণগুলি বন্ধ করে দেওয়ার জন্য, বৈশিষ্ট্যের ফলকে কোণার মানগুলি পরিবর্তন করুন 1.75, তারপর টিপুন [প্রবেশ করুন] পরিবর্তনগুলি প্রয়োগ করার জন্য কী। আপনার কাছে এরকম কিছু থাকবে।

পা তৈরি করছে

টার্নটেবলের পায়ের জন্য, আমরা সিলিন্ডার ব্যবহার করতে যাচ্ছি। একটি সিলিন্ডার যুক্ত করুন, তারপরে এর ব্যাসটি পরিবর্তন করুন diam = 1.75 এবং এর উচ্চতা h = 0.5। ক্লিক করুন সরান আকারে টেনে নিতে সক্ষম অঞ্চলটি দেখানোর জন্য উপরের সরঞ্জামদণ্ডে নির্বাচন বাটন। সিলিন্ডারটি একটি কোণে রেখে বেসের নীচে সরান। (আপনার এটিকে শীর্ষ, পাশ এবং সামনের দৃশ্যে সরানোর প্রয়োজন হতে পারে))

সিলিন্ডারের নকল করুন (টিপুন প্রতিলিপি সরঞ্জামগুলির বৃত্তাকার রিংয়ের বোতামটি টিপুন বা টিপুন ডি কী) এবং নতুন সিলিন্ডারটিকে বেসের অন্য কোণে সরানো। চারটি ফুট সঠিকভাবে অবস্থান না করা পর্যন্ত প্রক্রিয়াটি পুনরাবৃত্তি করুন। সিলিন্ডারগুলির নাম রাখতে ভুলবেন না (উদাহরণস্বরূপ, ফুট-বাম-শীর্ষ, ফুট-ডান-উপরে, ফুট-বাম-নীচে, ফুট-বাম-শীর্ষ)। আপনি যখন এটি করেন, ফলাফলটি দেখতে এমন হওয়া উচিত।

আমরা এখন প্লাটার, ডিস্ক, আর্ম অক্ষ এবং বোতামটি তৈরি করা দেখব। পরবর্তী আকার তৈরির প্রক্রিয়াটি পায়ের জন্য একই রকম। বিভিন্ন সিলিন্ডারের জন্য ব্যবহৃত মাত্রাগুলি এখানে:

থালা: ডায়াম = 7; এইচ = 0,5 ডিস্ক: ডায়াম = 6.75; এইচ = 0,25 বোতাম: ডায়াম = 1.5; h = 0,25 আর্ম-অক্ষ-বেস: ডায়াম = 2.25; এইচ = 0,25 আর্ম-অক্ষ: ডায়াম = 1.375; এইচ = 1

সিলিন্ডারগুলির পার্শ্বগুলি পরিমার্জন করতে, আপনি বৈশিষ্ট্যের ফলকে পাশের ক্ষেত্রটি ব্যবহার করে প্রত্যেকের মুখের সংখ্যা বাড়িয়ে নিতে পারেন। খুব বেশি দিক যুক্ত করবেন না কারণ এটি সম্পাদকের চূড়ান্ত কর্মক্ষমতা এবং চূড়ান্ত অ্যানিমেশনকে নেতিবাচকভাবে প্রভাবিত করতে পারে। এই ক্ষেত্রে, আমি আপনাকে প্লাটার এবং ডিস্কের জন্য 32 টিরও বেশি পক্ষ ব্যবহার না করার পরামর্শ দিচ্ছি। আপনি ভালো কিছু থাকতে হবে।

বাহু এবং মাথা

বাহু এবং টার্নটেবলের মাথাটির জন্য, আমরা কিউবিড ব্যবহার করতে যাচ্ছি। বাহুটির জন্য একটি কিউবয়েড তৈরি করুন (ডাব্লু = 0.25; এইচ = 0.25; d = 4), তারপরে একটি ঘূর্ণন প্রয়োগ করুন -33° উপরে y- অক্ষ। মাথার জন্য, একটি কিউবয়েড তৈরি করুন (ডাব্লু = 0.5; h = 0.5; d = 1), তারপরে একটি ঘূর্ণন প্রয়োগ করুন -33° উপরে y- অক্ষ। বাহু-অক্ষ সিলিন্ডারের সাহায্যে উভয় আকার সারিবদ্ধ করুন। ফলাফলটি দেখতে এমন হওয়া উচিত।

রঙ এবং টেক্সচার

আমরা টার্নটেবলের সাথে প্রায় শেষ করেছি। চূড়ান্ত পদক্ষেপটি হ'ল রঙগুলি বরাদ্দ করা এবং ভিনিলটিতে একটি টেক্সচার প্রয়োগ করা (একটি চিত্র যা রেকর্ডের পৃষ্ঠকে উপস্থাপন করে)। রঙ বরাদ্দ করতে, একটি আকার নির্বাচন করুন এবং ক্লিক করুন রং বৈশিষ্ট্য ফলকে ক্ষেত্র। ত্রিদিব আপনাকে কোনও আকারের প্রতিটি মুখের জন্য পৃথক রঙ নির্দিষ্ট করতে দেয় তবে এই উদাহরণে আমাদের সমস্ত মুখের রঙ পরিবর্তন করতে সমস্ত ক্ষেত্র ব্যবহার করতে হবে। এটি করতে, ক্ষেত্রের মধ্যে কেবল একটি হেক্স রঙের কোড প্রবেশ করুন, তারপরে টিপে নিশ্চিত করুন প্রবেশ করুন.

এই উদাহরণে ব্যবহৃত রঙগুলি এখানে:

বেস: # 0099FF ফুট, বোতাম, অক্ষ, বাহু এবং মাথা: # F2EEE5 ডিস্ক: # fa7f7a

একধরনের প্লাস্টিকের টেক্সচারের জন্য, প্রক্রিয়া রঙ বরাদ্দ করার অনুরূপ। ডিস্ক সিলিন্ডারটি নির্বাচন করুন, তারপরে ক্লিক করুন ইমেজ বৈশিষ্ট্য ফলকে ক্ষেত্র। আপনি উপরের ক্ষেত্রের একধরনের প্লাস্টিকটিতে প্রয়োগ করতে চান চিত্রটির ইউআরএল আটকান এবং টিপে নিশ্চিত করুন প্রবেশ করুন। আপনি নিজের ছবি ব্যবহার করতে পারেন বা এই উদাহরণটিতে ব্যবহৃত একটি ডাউনলোড করতে পারেন।

আপনার এখন এমন কিছু হওয়া উচিত যা দেখতে দেখতে ভাল লাগবে।

রেন্ডারিং এবং রফতানি

এখন যখন টার্নটেবলটি সম্পন্ন হয়েছে, আমরা রফতানির আগে যেভাবে এটি রেন্ডার করা হয়েছে সেখানে কাজ করব। ক্লিক করুন পূর্বরূপ বৈশিষ্ট্য ফলক শীর্ষে বোতাম। এতে জুম মান সেট করুন 200 বড় টার্নটেবল প্রদর্শন করতে। আকারগুলির কালো সীমানা অপসারণ করতে, এ যান সীমানা ফলকটি বিভাগে এবং অস্বচ্ছতা সেট করুন 0। ফলাফলটি দেখতে এমন কিছু হওয়া উচিত।

আমরা চাই টার্নটেবল শীর্ষ থেকে জ্বালানো হোক। এটি করার জন্য, দৃশ্যটি এমনভাবে ঘোরান যাতে টার্নটেবলের শীর্ষটি আপনার মুখোমুখি হয়। বেসটি পুরোপুরি আয়তক্ষেত্রাকার দেখতে হবে। বৈশিষ্ট্য বাক্সটির tridiv.com/d/4k6 সেশনে হালকা এবং গা dark় মান পরিবর্তন করা দৃশ্যের মধ্যে ছায়া পুনরায় জন্মানো। আলোর মানটি এতে পরিবর্তন করুন 0.

টার্নটেবল এখন রফতানি করতে প্রস্তুত!

লোগো শেষ হচ্ছে

আমরা লোগোটিতে পাঠ্য যুক্ত করতে এবং লোগো অ্যানিমেশন তৈরি করতে প্রস্তুত। ক্লিক করুন সম্পাদনা করুন এর নীচে বাম দিকে কোডপেন বোতামে পূর্বরূপ কোডপেনে কোড এক্সপোর্ট করতে দেখুন। এটি লক্ষণীয় গুরুত্বপূর্ণ যে ত্রিদিব দ্বারা উত্পাদিত সিএসএস কোডটি ভেন্ডর উপসর্গগুলি ব্যবহার করে না, তাই কোডটি প্রতিটি ব্রাউজারে কার্যকরী করার জন্য আপনাকে প্রিফিক্স.কম বা লেভারও.github.io/prefixfree এর মতো সরঞ্জামগুলি ব্যবহার করতে হবে। জাভাস্ক্রিপ্ট ফলকটি বন্ধ করে শুরু করুন, যেমন আমরা এটি ব্যবহার করতে যাচ্ছি না। এইচটিএমএল ফলকে, প্রয়োগ করা স্টাইল ট্যাগটি সরিয়ে দিন .সীন ডিভ

সিএসএস ফলকে প্রসারিত করুন এবং নিম্নলিখিত কোডটি যুক্ত করুন:

.scene {রূপান্তর: অনুবাদ Y (-140px) রোটেটএক্স (-55deg); }

এখানে অনুবাদ Y (-140px) টার্নটেবল 140px উপরের দিকে সরান, এর নীচে পাঠ্যের জন্য জায়গা রেখে। এরপর রোটেটএক্স (-৫৫ ডিগ্রি) টার্নটেবলের উল্লম্ব ঝোঁক সেট করে।

পাঠ্য যোগ করতে, আপনাকে একটি যুক্ত করতে হবে .শিরোনাম খোলার পরে ডান # ত্রিদিব এইচটিএমএল ফলকে ডিভ। ভিতরে, দুটি যোগ করুন স্প্যানস> (.মন-শিরোনাম এবং .সুব-শিরোনাম) দ্বারা পৃথক এইচআর />:

ডিভি আইডি = "ত্রিদিব"> বিভাজন> স্প্যান> ট্রাডিভ / স্প্যান> এইচআর /> স্প্যান> রেকর্ডস / স্প্যান </ div>…

তারপরে আপনাকে সঠিক ফন্ট এবং শৈলী প্রয়োগ করতে হবে। সিএসএস ফলকে লোগোতে ব্যবহৃত ওপেন সানস ফন্টটি আমদানি করুন এবং পাঠ্য উপাদানগুলির জন্য প্রাথমিক শৈলী যুক্ত করুন।

@ ইম্পোর্ট ইউআরএল (http://fouts.googleapis.com/css?family=Open+Sans:300); / * পাঠ্য ব্লক কেন্দ্রীকরণ + বেসিক ফন্ট শৈলী * / শিরোনাম {অবস্থান: পরম; শীর্ষ: 50%; বাম: 50%; মার্জিন: 0 0 0 -165px; প্রস্থ: 330px; উচ্চতা: 5 এম; হরফ-পরিবার: ‘ওপেন সানস’, সানস-সিরিফ; হরফ ওজন: 300; হরফ-আকার: 24px; পাঠ্য-সারিবদ্ধ: কেন্দ্র; চিঠি-ফাঁক: 1.5 মি; রঙ: # 0099FF; } শিরোনাম এইচআর {সীমানা: 1px কঠিন # fa7f7a; মার্জিন: .75 এম 0; } শিরোনাম স্প্যান {প্রদর্শন: ব্লক; main .মেনাইট-শিরোনাম {হরফ আকার: 2.15 মিম; s .সুব-শিরোনাম {পাঠ্য-ইনডেন্ট: .25 এম; }

ভয়েল! আপনার লোগোটি সম্পূর্ণ। এটি নীচের চিত্র মত কিছু দেখতে হবে। আপনার 3D মডেলটি শেষ হয়ে গেলে, আপনি স্টাইল, অ্যানিমেশন বা মাউস ইভেন্ট যোগ করে সিএসএসের শক্তিটিকে আরও উন্নত করতে ব্যবহার করতে পারেন: কেবল 3D মডেলের সাথে অন্য কোনও এইচটিএমএল উপাদানের মতো আচরণ করুন।

লোগো অ্যানিমেট করুন

এখানে লোগো ব্যবহার করে একটি অ্যানিমেশন দেখুন। টার্নটেবলের ‘অংশ’ পড়ার অংশগুলি যেমন, প্রতিটি প্রত্যেকে বিভিন্ন বিলম্বের সাথে একই কীফ্রেম অ্যানিমেশন ভাগ করে। আকারগুলির উপরে শীর্ষ বৈশিষ্ট্য সেট করা আছে 50%। পড়ন্ত প্রভাব তৈরি করতে, আমরা শীর্ষস্থানীয় বৈশিষ্ট্যটি অ্যানিমেট করি -400px প্রতি 50%:

@ কিফ্রেমস পড়ে {0% {শীর্ষে: -400px; } / * আমরা অ্যানিমেশনটি 400px a * / 100% {শীর্ষে আকৃতিটির অবস্থানের অবস্থান শুরু করি: 50%; } / * এরপরে আমরা এটির মূল অবস্থানে এটি শেষ করব * /}

আপনি এই অ্যানিমেশনটি সমস্ত আকারে যুক্ত করতে পারেন, নীচে:

.শ্যাপ {শীর্ষ: -400px; অ্যানিমেশন: পতন 1s এগিয়ে 0s এগিয়ে; }

উপরের বৈশিষ্ট্যটি সেট করুন -400px এবং একটি বিলম্ব যোগ করুন:

.প্ল্যাটার {অ্যানিমেশন-দেরি: 1.05 এস; d .ডিস্ক {অ্যানিমেশন-বিলম্ব: 1.35s; b বাটন {অ্যানিমেশন-বিলম্ব: 1.5 সে; } ...

এটি ব্যবহার করে চূড়ান্ত ‘বাউন্স’ প্রভাব তৈরি করুন ঘোরানো বৈশিষ্ট্য:

90% {রূপান্তর: অনুবাদ Y (-5 এম) রোটেটএক্স (780deg) রোটেটওয়াই (0deg); } 95%; রূপান্তর: ট্রান্সলেট ওয়াই (-4 এম) রোটেটএক্স (620 ডিগ্রি) রোটেটওয়াই (0 ডিগ্রি); } 100%; রূপান্তর: অনুবাদ Y (-4.5 মিমি) রোটেটএক্স (660 ডিগ্রি) রোটেটওয়াই (0deg); }

এটিই আমরা এই নির্দিষ্ট সংস্করণটি তৈরি করেছি, তবে মনে রাখবেন: কোনও সীমা নেই!

শব্দ: জুলিয়ান গার্নিয়ার

এই নিবন্ধটি মূলত নেট ম্যাগাজিন ইস্যুতে 248 প্রকাশিত হয়েছিল।