3 سال پیش
386

طراحی انیمیشن تبلیغی ساده برای وبسایت

در جلسه قبل طراحی انیمیشن حرکتی توسط Tween Animation در فتوشاپ رو یاد گرفتید.

حالا می خوایم یک انیمیشن تبلیغی ساده برای استفاده در وبسایت یا وبلاگ طراحی کنیم.

با من همراه باشید تا طبق ویدیوها و توضیحات زیر با هم این آموزش رو یاد بگیریم.


طراحی انیمیشن تبلیغی :

فتوشاپ رو اجرا کنید و از منوی Windows، گزینه ی Timeline رو فعال کنید.

برای ساخت این انیمیشن، اجزای زیر رو نیاز داریم:

در مثالی که در این آموزش می خوام خدمتتون ارائه بدم، ۳ آیتم یا موضوع رو در نظر دارم. پس برای هر کدوم یک تصویر در نظر گرفته ام. لوگوی گروه رو هم در سمت راست به همراه نشانی و عنوان گروه به طور ثابت چیده م.

می خوایم کاری کنیم که لوگو و نوشته های مرتبطش ثابت باشن و تصاویر و توضیحاتی که مربوط به آیتم ها هستن حرکت کنند.

حرکت اونها هم به صورتی خواهد بود که شبیه به حالت Slideshow یا نمایش نوبتی به ترتیب از آیتم بالایی به پایینی نمایش داده بشن. در حقیقت اشیا رو باید طوری حرکت بدیم که رو به سمت بالا حرکت کنند. پس اولین آیتم رو در بالا قرار میچینیم.


آماده سازی آیتم ها :

یک پروژه ی جدید ایجاد کرده و اندازه ی Width آن را دقیقا برابر با پروژه ی اصلی قرار دهید. اما اندازه ی Height را ۴ برابر در نظر بگیرید. دلیل اینکه ۳ آیتم داریم و ۴ برابر در نظر میگیرم این است که می خواهیم حرکت آخرین آیتم به اولین آیتم را نیز شبیه سازی کنیم. که بیننده احساس دورانی بودن اونها رو داشته باشه.

پس اولین آیتم رو در آخر یک بار دیگر هم تکرار کنید.

در نهایت به اندازه ای که حدس می زنید لولگو رو نمی پوشونه رو انتخاب کنید و از منوی Edit با زدن گزینه ی Copy Merged، همه ی لایه ها رو کپی کنید و به پروژه ی اصلی ببرید.

یک خط هم بین قسمت لوگو و قسمت متحرک می کشیم که اونها رو جداسازی کنه.


متحرک سازی انیمیشن تبلیغی :

در این مرحله می خواهیم قسمتی که آیتم ها رو در اون قرار دادیم رو متحرک کنیم.

طبق ویدیوی آموزشی زیر عمل کنید :

یک فریم جدید در Timeline ایجاد کنید.

در این فریم جدید، لایه ی آیتم ها رو به اندازه ای که آیتم دوم کامل نمایان بشه بالا ببرید.

یک فریم جدید دیگر ایجاد کرده و لایه ی آیتمها رو در حالتی قرار بدید که آیتم سوم نمایان بشه.

در فریم جدید چهارم هم کاری کنید که آیتم تکراری اول، که در پایین‌ترین مکان قرار داره نمایان بشه.

حالا فریم اول و دوم رو با هم انتخاب نموده و دکمه Tween رو بزنید و تعدادهای فریم هایی که می خواید بین این دو تا و برای حرکت موجود باشه رو تعیین کنید و OK بزنید.

همین کار رو برای فریم دوم و سوم ، و همچنین سوم و چهارم هم انجام بدید.

در پایان می تونید زمان توقف فریم های اصلی اول تا چهارم رو به ۱ ثانیه تغییر بدید که آیتم ها متوقف بشن تا بیننده بتونه اونها رو بخونه.


ذخیره سازی :

وقتی جزئیات دلخواه و لازم رو اضافه کردید، پروژه رو با نوع فایل Gif ذخیره کنید.

برای مشاهده ی اون، در یکی از مرورگرهاتون بازش کنید و نتیجه رو ببینید.


نتیجه ی کار :

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب پر بازدید

m
mssqlserver SQL Server error 5133

رفع ارور ۵۱۳۳ در SQL Server

سلام عرض می کنم خدمت اعضای عزیز و کاربران سایت زرین هور امروز قصد دارم در این پست رفع ارور 5133 در پایگاه داده SQL Server را که بیشتر یکی از ارورهای ورژن 2012 این دیتابیس است آموزش بدم. با...

shortcut

چند کلید میانبر کاربردی در ویندوز

روش اضافه کردن دو فایل وُرد جداگانه به هم،روش اضافه کردن دو فایل ،روش اضافه کردن دو فایل وُرد،روش اضافه کردن دو فایل ورد،ورد،word،روش اضافه کردن دو فایل word ،روش اضافه کردن دو فایل word جداگانه به هم

روش اضافه کردن دو فایل وُرد جداگانه به هم

Google

لرزش گیری ویدیو ها بدون نیاز به استبلایزر

call of duty

پابجی یا کالاف؟