مدرسه اینترنتی
ساخت یک بنر متحرک

ساخت یک بنر متحرک بوسیله Image Ready - قسمت (1)

این مقاله بصورت قدم به قدم شما را برای متحرک نمودن یک بنری (تصویر تبلیغاتی) که در فتوشاپ ساخته شده است را راهنمایی می کند.
توجه: برای انجام این آموزش کاربردی و آسان ما یک بنری را در فتوشاپ طراحی نموده ایم و سپس آنرا متحرک کرده ایم .
بعد از دریافت مثالی از بنر ، مراحل زیر را طی کنید:


اندازه های استاندارد بنرها:

چندین بنر مختلف وجود دارد که بعضی از آنها در زیر لیست شده است:

ابعاد (پیکسل)
نوع
468 x 60 بنر کامل

392 x 72 بنر بصورت عمودی
234 x 60 بنر کامل
125 x 125 نصف بنر بصورت مربعی

120 x 90 بنر دکمه ای
120 x 60 بنر دکمه ای
88 x 31 بنر دکمه ای کوچک
120 x 240 بنر افقی

در این مثال ما به شما بنر متحرک 468x60 پیکسل را یاد می دهیم. فایلی را که دانلود کرده اید را در فتوشاپ باز کنید.
توجه: ما در این مثال ما یک یک بنری با چندین شی و متن در لایه های جدا خواهیم ساخت. خصوصیت رنگ در هر فریم متغیر قرار کرده ایم، برای مثال اولین فریم خاکستری و دومین فریم رنگ قرمز روشن می باشد.
تعدادی از اشیاء و متنهای فریم اول را مرئی و بقیه فریم ها را نامرئی نموده ایم.


بنر در Adobe Image Ready:

بعد از باز کردن بنر در فتوشاپ آنرا با زدن دکمه های ترکیبی (Ctrl+Shift+M) (و یا File > Jump to > Adobe Image ready ) به Adobe Image Ready انتقال دهید.
اگر پالت Animation غیرفعال است آنرا با استفاده از منوی Window آنرا فعال نمایید.
ابتدا از پالت Animation بر روی فریم اول کلیک نمایید. می بینید که در لایه Layers لایه هایی که با رنگ قرمز روشن مشخص شده اند بعضی مرئی و بعضی دیگر نامرئی می باشند.
در پالت Animation بر روی دکمه Duplicate Current Frame کلیک نمایید و یک فریم جدید بسازید و سپس دومین فریم را انتخاب کنید. در فریم دوم همانند فریم اول لایه هایی که مرئی و نامرئی بوده اند همچنان باقی می مانند.
همچنین برای ساخت فریمهای بعدی نیز باید از این دکمه استفاده نمایید.
توجه: در این مثال، 13 فریم ساخته شده است و در هر فریم بعضی لایه ها مرئی و بعضی دیگر نامرئی شده اند

اجرای انیمیشن:

برای اجرای انیمشن ساخته شده در پالت Animation بر روی دکمه Play کلیک کنید تا پیش نمایش آنرا مشاهده نمایید. انیمشن ممکن است که خیلی سریع اجرا گردد.(همه فریم ها با یک سرعت هستند).

زمان بندی فریم ها:

برای تنظیم زمان فریم ها بر روی نشانه گر زیر هر فریم کلیک نمایید تا منوی Pop-up باز گردد. مدت زمانی که هر فریم لازم دارد را برای هر یک تنظیم کنید.

برای ادامه چرخش انیمشن بر روی دکمه "Forever" در پالت Animation کلیک کنید و گزینه Forever را انتخاب کنید.

در زیر لیست دکمه های بر روی پالت Animation همراه با کاربرد آنها نوشته شده است:


تعیین تعداد چرخش دوباره کل انیمشن

پریدن به اولین فریم از روی همه فریم ها

انتخاب فریم قبلی
متوقف کردن انیمیشن
اجرای انیمشن در پنجره سند
انتخاب فریم بعدی
دستوری برای افزودن و تغییر فریم های بین دو فریم
ایجاد فریم جدید بوسیله کپی کردن فریم قبلی
حذف کردن فریم انتخاب شده


بهینه سازی بنر:

برای بهینه سازی بنر، مسیر Window > Show Optimize را طی نمایید تا پالت Optimize ظاهر گردد.

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

توجه : فقط فرمت Gif از فریم های انیمشنی پشتیبانی می نماید.


تست بنر در مرورگر:


برای اطمینان از اینکه در انیمیشن ، متن ها و بقیه لایه ها بصورت درستی جای گذاری شده اند آنرا بر روی مرورگر امتحان می کنیم
برای اینکار مسیر Choose File > Preview In را طی نمایید یا اینکه کلیدهای ترکیبی (Ctrl-Alt-p) را همزمان فشار دهید تا پیش نمایش آن در مرورگر به نمایش در بیاید.
بعد از اینکه بنر خود را تست نمودید باید آنرا ذخیره نمایید.
برای ذخره نمودن بنر باید مسیر File > Save Optimize را طی نمایید تا پنجره با عنوان Save Optimize باز گردد و شما با انتخاب مسیر و نام مورد نظر آنرا بر روی سیستم خود ذخیره نمایید.اجرای انیمیشن:
برای اجرای انیمشن ساخته شده در پالت Animation بر روی دکمه Play کلیک کنید تا پیش نمایش آنرا مشاهده نمایید. انیمشن ممکن است که خیلی سریع اجرا گردد.(همه فریم ها با یک سرعت هستند).

زمان بندی فریم ها:

برای تنظیم زمان فریم ها بر روی نشانه گر زیر هر فریم کلیک نمایید تا منوی Pop-up باز گردد. مدت زمانی که هر فریم لازم دارد را برای هر یک تنظیم کنید.
برای ادامه چرخش انیمشن بر روی دکمه "Forever" در پالت Animation کلیک کنید و گزینه Forever را انتخاب کنید.
در زیر لیست دکمه های بر روی پالت Animation همراه با کاربرد آنها نوشته شده است:

تعیین تعداد چرخش دوباره کل انیمشن

پریدن به اولین فریم از روی همه فریم ها

انتخاب فریم قبلی
متوقف کردن انیمیشن
اجرای انیمشن در پنجره سند
انتخاب فریم بعدی
دستوری برای افزودن و تغییر فریم های بین دو فریم
ایجاد فریم جدید بوسیله کپی کردن فریم قبلی
حذف کردن فریم انتخاب شده


بهینه سازی بنر:


برای بهینه سازی بنر، مسیر Window > Show Optimize را طی نمایید تا پالت Optimize ظاهر گردد.

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

توجه : فقط فرمت Gif از فریم های انیمشنی پشتیبانی می نماید.


تست بنر در مرورگر:

برای اطمینان از اینکه در انیمیشن ، متن ها و بقیه لایه ها بصورت درستی جای گذاری شده اند آنرا بر روی مرورگر امتحان می کنیم
برای اینکار مسیر Choose File > Preview In را طی نمایید یا اینکه کلیدهای ترکیبی (Ctrl-Alt-p) را همزمان فشار دهید تا پیش نمایش آن در مرورگر به نمایش در بیاید.
بعد از اینکه بنر خود را تست نمودید باید آنرا ذخیره نمایید.
برای ذخره نمودن بنر باید مسیر File > Save Optimize را طی نمایید تا پنجره با عنوان Save Optimize باز گردد و شما با انتخاب مسیر و نام مورد نظر آنرا بر روی سیستم خود ذخیره نمایید
در منوی layer می تونید لایه های جدید درست کنید که هر کدومش یک تصویره که معمولا معادل با یک فریم از انیمیشن شماست. میتونید لایه ها رو در Photoshop هم طراحی کنید و با زدن کلیدی که در پایین تصویر مشخص شده اون ها رو به Image ready منتقل کنید


در منوی Animation هم می تونید فریم های جدید درست کنید. با کلیک کردن روی هر فریم در ابزار animation می تونید بعدش توی منوی layer تعیین کنید که کدوم لایه ها دیده بشند و کدوم ها دیده نشند. همون طور که گفتم معمول بر این هست که همه لایه ها مخفی باشند به جز همونی که قراره در فریم مورد نظر دیده بشه... ( برای دیده شدن یا دیده نشدن لایه ها روی عکس چشم بغل اونها در منوی layer کلیک کنید)


برای تعیین زمان طول کشیدن هر فریم هم روی عددی که زیر فریم نوشته شده right Click کنید و زمانش رو تغییر بدین


در پایان که مشخص کردید در هر فریم ، کدوم لایه های دیده بشند، در toolbar اصلی برنامه که مداد و پاک کن و ... داره، عکس Internnet explorer رو بزنید و تصویری رو که ساختید از اونجا save کنید.
__________________



http://gorooh.parsiblog.com/PhotoAlbum/dars2/10e9328c176de902f34269074578f82d.gif

  نوشته شده در روز دوشنبه 88/4/1  ، تعداد


مطالب طلایی - کلیک کنید

آمــار سایت

بازدیــــد امـــــروز : 4
بازدیــــــــد دیـــــــــروز : 34
بازدیـــــــــد کــــــــــل : 1182393
تعـــــداد یادداشت هـــــــا : 3950
منوی اصلی

صفحـه اول سایـت

ساخت فروشگـاه اینترنتـــی

وبلاگ بسازید و کسب درآمد کنید

سایت عکس های متحـرک 

نظرات و پیشنهادات

فهرست موضوعی یادداشت ها

:.: آمــــوزشــــــی :.:
محتوای الکتریکی و نرم افزار
جشنواره ها و پرژوه های برتر
درسنامه هــا و جزوات درسی
پیک دانش آموزی و تکلیف خانه
:.: مطالب عمومی :.:
دانستنیها و اطلاعات عمومی
آموزش و ترفندهای کاربردی
کاردستی و سرگرمی علمی
پژوهش، تحقیق و مقاله ها
:.: نمونـــــه کارهـــا :.:
برنامه ها، نمون برگ ها، طرح ها
درس پژوهـی و اقدام پژوهـی
گزارش تخصصی و راهنمای تدریس
سناریو آموزشی و تجربیات برتر
:.: بانک طـرح درس :.:
طرح درس مقطع ابتدایـــی
طرح درس مقطع متوسطه اول
طرح درس مقطع متوسطه دوم
طرح درس عمومـی و مشترک
:.: پـاورپــوینت هــا :.:
پاورپوینت و اسلاید دوره ابتدایی
پاورپوینت های دوره اول متوسطه
پاورپوینت های دوره دوم متوسطه
پاورپوینت های کاربردی و آموزشی
:.: پایــــه تحصیلــی :.:
کلاس اول، دوم و سوم ابتدایی
چهارم ، پنجم و ششم ابتدایی
هفتم، هشتم و نهم متوسطه
کلاس دهـم، یازدهـم و دوازدهم
:.: سوال امتحانـی :.:
آزمون ها و سوالات دوره ابتدایی
آزمون و سوالات دوره اول متوسطه
آزمون وسوالات دوره دوم متوسطه
سوال های متفرقه و آزمون ورودی
:.: گـــروه مخـاطبـان :.:
آموزگاران، دبیران و کادر دفتری
دانش آموزان و فراگیران مختلف
مشاوران، والدین و افراد متفرقه
گروه های درسی و کارشناسان
لیست آخرین مطالب

پاورپوینت فصل اول علوم تجربی هفتم( تجربه و تفکر )
پاورپوینت فصل سوم علوم تجربی پایه هفتم (اتم ها , الفبای زندگی )
پاورپوینت درس 10 فارسی چهارم دبستان (ابتدایی): باغچه ی اطفال (هم
پاورپوینت درس 7 فارسی چهارم دبستان (ابتدایی): مهمان شهر ما (انتظ
طرح درس و روش تدریس ریاضی پنجم، فصل1: معرفی میلیارد
پاورپوینت علوم اول، درس11: دنیای سرد و گرم
طرح درس ویژه دبیران درس ریاضی چهارم ابتدایی
طرح درس روزانه پایه ی چهارم درس ریاضی صفحه 49 درس آشنایی با ضرب
طرح درس آموزش حجم ریاضی پنجم
تحقیق درسی در مورد اهرم و انواع آن
تحقیق دانش آموزی با موضوع اسید و باز
طرح درس دو نامه، هدیه های آسمان پنجم
تحقیق درسی در مورد نورون عصبی
مقاله با موضوع فیثاغورس و قضیه آن
سوال و جواب علوم چهارم، درس بدن ما 1
[همه عناوین(3913)][عناوین آرشیوشده]

http://www.parsiblog.com/PhotoAlbum/riazi/6af5e218c7b634c3d7afd741834f59d2.jpg