آیا هنر طراحی حرکتی شما باعث میشود افراد در مسیر خود متوقف شوند؟ آیا آن را میخواهید؟
شما میخواهید گرافیکهای متحرک نمایشی بسازید، اما بازی شما آن ظرافت اسکرول متوقف کننده را ندارد. در حالی که راه های زیادی برای ایجاد آثار هنری جذاب وجود دارد، همه چیز از اصول اولیه شروع می شود. وقتی کار با این آموزش تمام شد، میتوانید عناصر طراحی را در یک قطعه تجزیه و تعریف کنید، و اینکه چرا آنها کار میکنند. آماده اید؟
![](/wp-content/uploads/history/725/wvsgpwtp93.jpeg)
سلام، من جاستین پیترسون هستم و مدیر محتوای دیجیتال در ورزش هستم. هنگام کار در پخش زنده تلویزیونی، شما باید کلاه های مختلفی بپوشید. من در واقع با پرسه زدن در حاشیه به عنوان یک فیلمبردار شروع کردم. وقتی وارد طراحی متحرک شدم، با گرافیکم به دیوار برخورد کردم و در تعجب بودم که چرا آنها صیقلی به نظر نمیرسند. امروز، من اینجا هستم تا دروس طراحی حرکت را با شما به اشتراک بگذارم که به من کمک کرد از حاشیه خارج شوم و وارد زمین بازی شوم.
در این ویدیو، شما یاد خواهید گرفت:
- تصمیمات طراحی را درک کنید
- نوع خود را انتخاب کنید
- اصول کنتراست را شناسایی کنید
- مهارت های دوربین خود را به CG ترجمه کنید
- برش را انجام دهید
نحوه طراحی نمایشنامه ورزشی با توقف نمایشی
{{lead-magnet}}
درک طراحی شما
![](/wp-content/uploads/history/725/wvsgpwtp93.gif)
ما شروع خواهیم کرد با یک صحنه بسیار آشنا: نگاه تقسیم صفحه. اینجاست که شبکه میخواهد خط و نشان بکشد و مخاطبان طرفی را انتخاب کنند. این بخشی از چیزی است که ورزش را به یک سرگرمی سرگرم کننده تبدیل می کند.و من می خواهم همین کار را در اینجا انجام دهم. بنابراین در این یکی، رنگ و بافت، متناوب، اگر فریم به فریم بروم، فقط رنگ را تغییر می دهم. من رنگ را معکوس می کنم. و این یک راه بسیار قدرتمند برای استفاده از رنگ در کار شما نیز هست. یک مثال عالی از این به عنوان تغییر رنگ، تغییر بافت از بلوک بزرگ، میتوانید ببینید که وقتی وارد اینجا میشوید، آنها با سکته مغزی شروع میشوند. سپس به پر کردن می رویم و سپس رنگ ها را معکوس می کنیم.
جاستین پیترسون (08:26): شما آن ها را می بینید، می بینید که رنگ ها در پس زمینه تغییر می کنند و معکوس می شوند. حالا بیایید روی لوگوی تیم تک تمرکز کنیم. دلیلی که می خواستم این را برجسته کنم این است که نشان می دهد چقدر تغییر رنگ و بافت قدرتمند می تواند رنگ باشد و بافت اصلی ترین چیزی است که در حال تغییر است. همانطور که برای فاش شدن و لوگوی نهایی باز می شود، اطلاعات قابل انتقال زیادی از زندگی واقعی به CG وجود دارد. این چیزی است که قبلاً دیدهاید و میتوانید من را با زاویه پایین به سمت بالا ببینید. و دلیل این امر این است که زاویه کم با لنز زاویه باز باعث می شود ورزشکار بزرگتر از زندگی ظاهر شود. پس بریم سراغ CG. و در این مثال، من یک انتقال دارم که ایجاد کردم تا تفاوت بین لنزهای زاویه باز با زاویه کم با لنزهای 85 میلیمتری را به شما نشان دهم. تفاوت زیادی وجود دارد.
جاستین پیترسون (09:23): من ضعیف هستم. و عنصر لنز زاویه باز به من این امکان را می دهد که واقعاً به جسم نزدیک شوم. و وقتی من این را بازی می کنم، تومی تواند دو تفاوت را ببیند. پسزمینه این یکی بسیار دورتر به نظر میرسد و نورهایی در بالای آن میبینید. و این یکی، لنز 85 میلیمتری، پسزمینه له شده و واقعی است، بسیار نزدیکتر از لنز زاویه باز به Shamrock است. مسئله این است که من هیچ کدام را حرکت ندادم. تنها کاری که انجام دادم تغییر فاصله کانونی دوربین بود. بنابراین بیایید به مثالی از زوایای پایین دوربین از vistech بپردازیم. می بینید که چگونه دوربین را واقعاً پایین نگه می دارند تا چیزها را بزرگتر از آنچه هستند احساس کنند
جاستین پیترسون (10:05): به تصاویر سیاه و سفید ما در اینجا برگردیم. من دایرهای طراحی کردهام و آن را متحرک کردهام و سپس آن را برای تکرار دنبال کردم. این مانند یک انیمیشن دنبال کننده رهبر است. و شما این را در همه جا خواهید دید. در واقع، اگر به این مثال آخر برگردم، اگر به تمام عناصر سفید نگاه کنید، ببینید که چگونه با صفحه در اینجا روبرو می شوند، سپس از بالا شروع می شود و به سمت پایین پایین می آید. و سپس از همان عنصر سفید برای گسترش و برجسته کردن لوگو استفاده مجدد می کنند. سپس باز می گردد و به سمت بالا می رود تا بازیکن را آشکار کند. بنابراین میتوانید ببینید که چگونه از تکرار برای هدایت آن حرکت پویا استفاده میشود. به احتمال زیاد، اگر در سال گذشته در رسانه های اجتماعی بوده اید، نوع خاصی از ویدیو را دیده اید. میدانی، آنهایی که مردم کفشهایشان را بالا میاندازند و ناگهان لباسهایشان در دنیای ما عوض میشود. به این کات کبریت می گویند. ما فقط هستیمهمین جا می پریم و در مورد قطع کبریت صحبت می کنیم. بنابراین در این قطعه، من یک لوگو میگیرم و اندازه آن را در طول خط تنظیم میکنم. و پس از آن که آن را از طریق خط می شکند و سپس من تغییر اشکال. بنابراین از یک لوگو به یک مستطیل تبدیل می شود. و این همان برش اصلی کبریت است، جایی که شما یک شی را می گیرید. و در حالی که در امتداد یک مسیر حرکت می کند، تغییر می کند یا به چیز دیگری تبدیل می شود.
جاستین پیترسون (11:44): من اینجا قطعه ای از بلوک بزرگ دارم که می خواهم درباره آن صحبت کنم زیرا بسیاری از موارد را نشان می دهد. مثالها در اینجا، نه همه، اما بسیاری از مثالها در اینجا برای کمک و تقویت برخی از درسهایی که قبلاً آموختهاید. بنابراین بیایید همانطور که در اینجا پیش می رویم، آنها را صدا کنیم، رنگ، اندازه رنگ از بزرگ به کوچک اندازه رنگ، رنگ، شکل، متن تکراری از stroke، و رنگ فیل در سکته ها تغییر می کند. و رنگ وارونه فیل. حالا یک شکل آبشاری وجود دارد. بنابراین در اینجا در این مثلث مقداری تکرار وجود دارد.
جاستین پیترسون (12:52): شما در اینجا مقداری شنسواری، متن، شکلهای آبشاری بیشتری را میبینید که با تکرار تغییر شکل به، از مثلث به یک ضربدر تکرار مستطیل ، با پر و اندازه از کوچک به بزرگ است. و سپس این مثلث را از اینجا گرفتیم، این مثلثی که اینجا بود و آن را به سمت خود چرخاندیم. و سپس برمی گردد و کمی رنگ وجود دارد. رهبر آنجا را نیز دنبال کنید تا واقعاً به این امر کمک کنیدتضاد. بنابراین من میخواهم آن را برای شما پخش کنم تا بتوانید آن را با هم در کنسرت ببینید. خیلی ساده است، نه؟ درک اصول طراحی می تواند بازی طراحی حرکتی شما را به سطح بالاتری برساند، اما قرار نیست همه آن را از آموزش های یوتیوب دریافت کنید. اگر میخواهید بیشتر بدانید، شروع طراحی را بررسی کنید، و در این دوره هشت هفتهای پروژههای الهامگرفته از صنعت را در حین یادگیری مفاهیم کلیدی طراحی که بلافاصله کار طراحی شما را ارتقاء میبخشد، شرکت میکنید، شما تمام موارد اساسی را خواهید داشت. دانش لازم برای شروع ساختن استوریبردهایی که آماده حرکت هستند. اگر از این ویدیو لذت بردید، حتماً برای آموزش های بیشتر، پخش زنده و اخبار صنعت در کانال مشترک شوید و مطمئن شوید که نماد زنگ را زده اید. بنابراین وقتی نکته بعدی خود را منتشر کردیم به شما اطلاع داده می شود.
موسیقی (14:13): [موسیقی بیرونی].
تیم اصلی و root، root، root خود را انتخاب کنید!شما می خواهید آرم های بزرگ و پررنگ و رنگ ها و نمادهای تیم در پس زمینه کار کنند. همچنین میتوانید از این طراحی صفحهنمایش تقسیمشده برای معرفی بازیکنان، با نام، اعداد، و آمار آنها در مقابل یک تصویر با وضوح بالا استفاده کنید.
![](/wp-content/uploads/history/725/wvsgpwtp93-1.jpeg)
این طراحی به دلیل تعادل کار می کند. به هیچ یک از تیم ها وزن بیشتری داده نمی شود، که رقابت آینده را به عنوان نبرد برابر به فروش می رساند. هنگامی که متوجه شدید که این انتخاب طراحی چگونه تصویر را بهبود می بخشد، وقت آن است که در مورد متن تصمیم بگیرید.
نوع خود را انتخاب کنید
![](/wp-content/uploads/history/725/wvsgpwtp93-2.jpeg)
دو نوع تایپ متمایز وجود دارد و احتمالاً آنها را به اندازه کافی می شناسید. : Serif و Sans-Serif. سریف دارای "پاهای" اضافی است، قطعات تزئینی در بالا و پایین. Sans-Serif ... بدون آن پاها است. کاملاً خود توضیحی است.
![](/wp-content/uploads/history/725/wvsgpwtp93-3.jpeg)
به خاطر داشته باشید که تایپوگرافی تماماً در مورد بیان پیام به بیننده است. شما چیزی نمی خواهید که حواس را از پیام یا خوانایی منحرف کند، بنابراین من همیشه توصیه می کنم به Sans-Serif پایبند باشید. تعداد زیادی فونت عالی برای انتخاب وجود دارد، و می توانید مطمئن باشید که مخاطبان شما می توانند آنچه را که تنظیم می کنید انتخاب کنند.
اصول کنتراست را شناسایی کنید
![](/wp-content/uploads/history/725/wvsgpwtp93-4.jpeg)
کنتراست برای ایجاد تاکید، تسلط و انرژی پویا در گرافیک استفاده می شود. در ویدیوی بالا به جزئیات مربوط به اندازه، شکل، پر کردن و استروک، و رنگ و بافت میپردازیم.
کنتراست یک راه عالی برای نشان دادن رابطه بین انواع مختلف است.اشیاء در طراحی شما اگر اتاقی پر از مربع دارید، دایره به طور ناگهانی خودنمایی می کند. اگر هر پرنده ای در یک خط آبی باشد، رنگ قرمز ناگهان پویاتر و جالب تر می شود. در ورزش MoGraph، میتوانید از کنتراست برای ایجاد یک روایت برای رویداد آینده استفاده کنید و حتی علاقه بیشتری به مخاطبان خود اضافه کنید.
مهارت های دوربین خود را به CG ترجمه کنید
![](/wp-content/uploads/history/725/wvsgpwtp93-5.jpeg)
مهارت های قابل انتقال بسیاری از عکاسی واقعی به کار با دوربین CG وجود دارد. به عنوان مثال، زمانی که فیلمبرداری در کنارهها انجام میدادم، اغلب از یک لنز با زاویه دید واید استفاده میکردم و از زاویه کم عکس میگرفتم. در نهایت ورزشکاران را بزرگتر از زندگی نشان داد، که دقیقا همان لحنی بود که ما سعی داشتیم به آن ضربه بزنیم. خب در مورد گرافیک شما هم همینطور است.
![](/wp-content/uploads/history/725/wvsgpwtp93-1.gif)
توجه کنید که چگونه آرم با زاویه کم شما را به داخل می کشاند و جسم را با حسی از قدرت و احترام نشان می دهد. از سوی دیگر، تصویر مسطح، لوگو را در پس زمینه خرد می کند. اگرچه ممکن است از نظر فنی کار کند، اما از نظر زیبایی شناختی به هیچ وجه موثر نیست.
دفعه بعدی که ESPN را تماشا میکنید، به این نکته توجه کنید که چه تعداد از گرافیکهای آنها با لنزهای زاویه باز از زاویه کم رندر شدهاند. .
Make the Cut
![](/wp-content/uploads/history/725/wvsgpwtp93-6.jpeg)
اگر در سال گذشته در رسانههای اجتماعی بودهاید، احتمالاً شاهد این بودهاید که مردم یک کفش را بالا میاندازند و به طرز جادویی تغییر میدهند. لباس آنها در صنعت، ما این را Match Cut می نامیم. خوب، این نیز یکی از موثرترین ابزار شما استمی توانید از آن برای گره زدن دسته ای از تصاویر به یکدیگر برای ترکیب بندی عالی استفاده کنید.
[ADD SSING GIF HERE]
همانطور که می بینید، من با یک لوگو شروع می کنم، حرکت را مطابقت می دهم تا تبدیل به یک خط شود، سپس دوباره آن حرکت را مطابقت می دهم تا به عدد تبدیل شود. من دگرگونی را در برش پنهان می کنم، اما حرکت جادو را می فروشد.
می خواهید طراحی خود را ارتقا دهید؟
همین! خیلی ساده، ها؟ درک اصول طراحی می تواند بازی طراحی حرکتی شما را به سطح بالاتری برساند، اما قرار نیست همه آن را از یک آموزش YouTube دریافت کنید. اگر می خواهید بیشتر بدانید، Design Kickstart را بررسی کنید!
در این دوره 8 هفته ای، همزمان با یادگیری مفاهیم کلیدی طراحی که کار طراحی شما را ارتقاء می بخشد، پروژه های الهام گرفته از صنعت را انجام خواهید داد. در پایان، تمام دانش طراحی اساسی لازم برای شروع ساختن استوریبردهایی که آماده حرکت هستند را خواهید داشت.
--------------------- ------------------------------------------------ ------------------------------------------------ -----------
رونوشت کامل آموزش در زیر 👇:
جاستین پیترسون (00:00): شما می خواهید موشن گرافیک های نمایشی بسازید، اما بازی آن ظرافت توقف اسکرول را ندارد. خوب، من اینجا هستم تا به شما بگویم که می توانید به آنجا برسید، اما باید با اصول اولیه شروع کنید. وقتی تماشای این ویدیو را تمام کردید، میخواهم بتوانید عناصر طراحی را در یک مورد تجزیه و تعریف کنیدقطعه و چرا کار می کنند. آیا آماده هستید؟
جاستین پیترسون (00:25): سلام، نام من جاستین پیترسون است. من مدیر محتوای دیجیتال و ورزش هستم که در ورزش کار می کنم. همه ما می دانیم که شما باید کلاه های مختلفی بپوشید. در واقع به عنوان یک فیلمبردار شروع به پرسه زدن در حاشیه ها کرد. وقتی شروع به کار کردم، وقتی شروع به انتقال به طراحی حرکت کردم، با گرافیکم به دیوار برخورد کردم و در تعجب بودم که چرا امروز صیقلی به نظر نمی رسند. من اینجا هستم تا دروس طراحی حرکتی را با شما به اشتراک بگذارم که به من کمک کرد از حاشیه خارج شده و وارد بازی شوم. در این ویدیو، شما می خواهید یاد بگیرید که تصمیمات طراحی را درک کنید، نوع خود را انتخاب کنید، اصول کنتراست را شناسایی کنید، مهارت های دوربین خود را به CG ترجمه کنید و قبل از شروع برش ها را انجام دهید، مطمئن شوید که مواد موجود در لینک در توضیحات را گرفته اید.
جاستین پیترسون (01:10): برای شروع این کار. ما قرار است از یک مکان آشنا شروع کنیم، اما ابتدا میخواهم به دیکسون، صندلی عقب، بلوک بزرگ در مقابل فناوری و دو خلاق جدید برای به اشتراک گذاشتن کارهای شگفتانگیزشان که در این آموزش استفاده خواهیم کرد، فریاد بزنم. ظاهر اسپلیتاسکرین چیزی است که همه طرفداران آن را دیدهاند، صرفنظر از اینکه آن را بهعنوان یک ظاهر صفحهشکن تشخیص دادهاند یا خیر. این یک گرافیک بازی سنتی است که در آن یک تیم در سمت چپ، یک تیم در سمت راست وجود دارد. راههای مختلفی برای نشان دادن این موضوع وجود دارد، اما اساساً تصمیم طراحی به ترسیم یک خط خلاصه میشوددر شن و ماسه و گفتن، چه کسی را برای تیم سمت چپ یا تیم سمت راست ریشه می دهی. پس زمینه هایی را با رنگ های تیم خواهید دید و لوگوها بزرگ و پررنگ خواهند بود. بنابراین بیایید به چند روش مختلف برای نشان دادن این نگاه کنیم.
جاستین پیترسون (01:51): ما نسخه افقی داریم، یک نسخه عمودی از بالا و پایین داریم، و سپس در این مورد نیز تغییراتی وجود دارد. ، جایی که ما یک برش عکس به عنوان قهرمان داریم و سپس بالا و پایین. از طرف دیگر، این یک نمایندگی است. این برعکس چیزی است که من با بازیکنان در سمت راست و نام بازیکنان بالا و پایین در سمت چپ به شما نشان دادم. همچنین خواهید دید که آنها ساختار افقی را در اینجا پیاده سازی کردند تا بازیکنان ساختار افقی را به چپ و راست نشان دهند. و سپس در اینجا، بالا و پایین را انجام می دهند. بنابراین آنها اساساً چند روش مختلف برای نزدیک شدن به این موضوع را در یک گرافیک ترکیب کردند.
جاستین پیترسون (02:32): دو نوع حروف متمایز وجود دارد که احتمالاً از Saraf و San Saraf آگاه هستید. بنابراین صراف یکی است که این عناصر زینتی یا پاهای اضافی را به انتهای حروف چسبانده است. در حالی که شن سارا همانطور که از نامش پیداست بدون هدیه سارا است. بنابراین بیشتر کارهایی که قرار است در ورزش انجام دهید با ماسه صراف خواهد بود. قانون شماره یک نوع خوانایی است. و با نوع حرکت در سراسر صفحه، نهایی شماهدف برقراری ارتباط است و موج سواری در شن انتخاب خواهد شد زیرا شیک، تمیز و خواندنی است.
Justin Peterson (03:14): کنتراست برای ایجاد تاکید، تسلط، بصری استفاده می شود. نشانه ها، و مهمتر از همه، انرژی پویا در گرافیک. ما متداول ترین انواع کنتراست را در گرافیک ورزشی، اندازه، شکل، پر کردن، و سکته مغزی و رنگ و بافت پوشش خواهیم داد. اولین نوع کنتراست که می خواهیم پوشش دهیم اندازه است. بنابراین من دو مربع را در کنار هم قرار دادهام و میخواهم این مربع را بیرون بکشم تا بتوانید ببینید که واقعاً در کنار هم هستند. من نقاط لنگر را اینجا درست در وسط دارم. و اگر این نوار لغزنده را از پهلو به پهلو بمالم، می توانید ببینید که استفاده از اندازه به عنوان عنصر کنتراست می تواند حرکات پویا ایجاد کند. بنابراین من در اینجا یک عبارت روی این نوار لغزنده دارم و فقط میخواهم آن را برای شما پخش کنم تا بتوانید منظور من را ببینید. حالا کمی احمقانه است، اما به شما این ایده را می دهد که استفاده از کنتراست اندازه چه کاری می تواند برای شما انجام دهد. و من یک مثال در اینجا دارم تا نشان دهم این در یک اجرا چگونه به نظر می رسد. خیلی خوب. بنابراین اگر در اینجا فریم به فریم پیش بروم،
جاستین پیترسون (04:25): می توانید یک لوگوی بزرگ در کنارش با برخی عناصر دیگر و یک لوگوی کوچکتر در اینجا ببینید. به نظر می رسد نوعی شبیه به این است. میتونی اونو ببینی؟ بنابراین آنها از کنتراست در اینجا برای ایجاد انرژی در هنگام آشکار کردن تیم ها، آرم ها و نام ها استفاده می کنند. نوع بعدی کنتراست که مادارند اینجا شکل است. بنابراین وقتی این را بازی میکنم، آه، دایره برجسته میشود، زیرا از قبل همه مربع بود، و سپس دایره را دریافت میکنید. بنابراین اجازه دهید به شما نشان دهم که در عمل چگونه به نظر می رسد. من این دو مربع را تنظیم کرده ام، مشابه آنچه در اندازه، مثال اندازه کنتراست مشاهده کردید. و من فقط می خواهم این را بیرون بکشم تا بتوانید ببینید که آنها دو مربع بودند، اما آن را به داخل منتقل کردم. به طوری که نقطه مرکزی در واقع درست در وسط اینجا باشد. و من گردی را در اینجا افزایش میدهم تا دایره باشد.
جاستین پیترسون (05:27): بنابراین وقتی این را پخش میکنم، یک دایره و یک مربع و در نقاط مختلف اینجا میبینید. ، تقریباً می توانید ببینید که کلید یک زمین بسکتبال شبیه اینجاست، تضاد بین یک مربع، با یک دایره در بالا. و من می خواهم به این مثال برگردم و همچنین می توانیم در مورد عناصر انتقالی که در اینجا علاوه بر اندازه استفاده می شود صحبت کنیم. بنابراین می توانید نمای مثلث را در اینجا ببینید. و همانطور که می چرخم، وقتی از طرف دیگر برگشت، ورق زد. بنابراین، مثلث به سمت راست می رود، و اینگونه است که بقیه آرم را نشان می دهند. و ترکیب شکلها با اندازه واقعاً باعث میشود این انیمیشن احساس کند که در حال بازگشت به فضا هستید، و همچنین در هنگام بازگشت به آن عمق میدهد. اوم، و سپس بدیهی است که حالت کلی مثلث ها زوایایی است که حرکت و حرکت در آن است.در چارچوب اتفاق می افتد.
جاستین پیترسون (06:27): قبلاً در مورد انواع بازگشت به آن، نگاه و احساس اینجا صحبت کرده ایم. بیایید از موج سواری خلاص شویم زیرا می دانیم که در بیشتر موارد از sand Sarah استفاده می کنیم، فقط متن را از فیل به ضربه متناوب می کنیم. شما می توانید حرکت پویا را ببینید. و اگر این را با چندین لایه متن دیگر ترکیب کنید، خواهید دید که این نوع کنتراست چقدر حرکت پویا می تواند ایجاد کند. پس بیایید به این مثال از صندلی عقب دیکسون بپردازیم و پر از شعر فیل است. به عنوان مثال در این مثال، همه چیز نوازش شده است. و وقتی به ریو میرسی، پر میشود. بنابراین از بین همه این شهرهای دیگر، این واقعیت که ریو به دلیل توجه بیشتر به آن پر شده بود، استفاده از این 500 را دوست دارم که از فیل به سکته مغزی می رود زیرا علاوه بر آن حرکت نیز وجود دارد. بنابراین همانطور که وارد می شود و در حالت ته نشین شدن قرار می گیرد، به ترتیب آبشاری به سکته مغزی تغییر می کند که توجه بیشتری را به عدد 500 جلب می کند.
جاستین پیترسون (07:28): اگر تا این لحظه توجه کرده اید ، من فقط در نمونه هایم از سیاه و سفید استفاده کرده ام. و این عمدی بود زیرا میخواستم تضاد سیاه و سفید در مقابل رنگ ایجاد کنم. و من متوجه شدهام که اغلب وقتی در مورد کنتراست صحبت میکنید، زمانی که یک عنصر سیاه و سفید است در مقابل افزودن رنگ، دیدن آن آسانتر است. بنابراین من سعی کردم سیاه و سفید را طرح کنم و نمونه های رنگی را به شما نشان دهم.