آموزش ساخت انیمیشن دو بعدی در فتوشاپ

ابزارهای تولید محتوا » ادوبی فتوشاپ » آموزش ساخت انیمیشن دو بعدی در فتوشاپ
11 سپتامبر 2019 چاپ
آموزش ساخت انیمیشن دو بعدی در فتوشاپ

ساخت انیمیشن دو بعدی در فتوشاپ یکی از قابلیت های مهم و کاربردی در این نرم‌افزار است که می‌توانید از آن برای ساخت انیمیشن‌های کوتاه و یا طراحی بنر تبلیغاتی ساده یا متحرک بهره بگیرید.

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

آموزش ساخت انیمیشن دو بعدی در فتوشاپ
نکته ی مهمی که در این درس باید حتما رعایت کنید این است که برای هر عنصر یا المنت باید یک لایه جدید ایجاد کنید چون اصل ساخت انیمیشن در فتوشاپ بر پایه مخفی کردن و ظاهر کردن لایه هاست.

مراحل ساخت انیمیشن دو بعدی در فتوشاپ

مرحله ۱- ساخت کاراکتر انیمیشن

خوب فتوشاپ عزیز! را صدا بزنید و یک بوم در ابعاد 200 در 200 پیکسل ایجاد کنید.
با ابتکار خود و با استفاده از ابزار قلم‌مو (Brush Tool) یک آدمک ایجاد کنید (دقت کنید همانطور که گفته شد این آدمک را در لایه جدیدی ایجاد کنید).

آموزش ساخت انیمیشن دو بعدی در فتوشاپ - ساخت کاراکتر آدمک در فتوشاپ

بر روی این لایه کلیک راست کنید و گزینه‌ی duplicate layer را انتخاب کنید (این کار را انجام میدهیم تا آدمک لایه‌ی بعدی مثل قبلی باشد، اگر تصویر شما جور دیگریست می‌توانید بجای کپی کردن، لایه جدیدی ایجاد کنید).

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

آموزش ساخت انیمیشن دو بعدی در فتوشاپ - از آدمک یک کپی تهیه کنید

همین روند رو برای سایر لایه ها انجام دهید تا تمام فریم‌های مورد نظر ایجاد شوند.

یادآوری: برای هر آدمک و یا هر تغییری باید یک لایه جدید ایجاد کنید.

آموزش ساخت انیمیشن دو بعدی در فتوشاپ - تمام لایه های تصویر متحرک

و تمام لایه‌های ساخته شده به شکل زیر هستند:

آموزش ساخت انیمیشن دو بعدی در فتوشاپ - تمام لایه ها انیمیشن

مرحله ۲- متحرک سازی لایه‌ها و تبدیل آن‌ها به انیمیشن

وقتی لایه های لازم را ایجاد کردید از منوی window بر روی گزینه‌ی Animation (یا TimeLine) کلیک کنید. با این کار یک محیط کار کوچک در پایین پنجره اصلی ظاهر می‌شود.

ایجاد فریم انیمیشن در فتوشاپ

خب از اینجا به بعد کار اصلی متحرک سازی تصویر و ساخت انیمیشن دو بعدی در فتوشاپ شروع می‌شود.

برای اینکه هرکدام از لایه‌هایی که ساختیم را تبدیل به تصویر متحرک کنید باید برای هر لایه یک فریم ایجاد کنیم. در تصویر بالا در سمت چپ آیکن سطل آشغال یک مربع سفید می‌بینید! که اگر روی آن کلیک کنید یک فریم جدید ایجاد می‌شود.

نکته: برای اینکه لایه (کاراکتر) مورد نظر در این فریم نمایش داده شود باید تمام لایه‌های دیگر به جز این لایه‌ی مورد نظر که میخواهید در این فریم نمایش داده شود، مخفی باشند. (یعنی فقط لایه‌ای که میخواهید درون این فریم باشد علامت چشم کنارش داشته باشد!)

آموزش ساخت انیمیشن دو بعدی در فتوشاپ - ساخت تصاویر متحرک در فتوشاپ

در تصویر بالا هم مشاهده می‌کنید که در فریم دوم، فقط یک لایه نمایان است و بقیه مخفی (hidden) هستند.

به همین ترتیب این کار رو برای تمام فریم ها و لایه ها انجام بدهید.

فریم های متحرک سازی تصویر

تا جایی که تصویر بالا را داشته باشیم.

حالا می‌توانیم برای هر فریم زمان هم تعیین کنیم. بر روی 0 sec که زیر هر فریم دیده می‌شود کلیک کنید تا بتوانید زمان هر فریم را تنظیم کنید.

کار اصلی تمام شده ولی برای اینکه بتوانید انیمیشن دو بعدی که ساخته‌اید را ذخیره کنید یک مرحله دیگر باقی مانده است!

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

آموزش ساخت انیمیشن دو بعدی در فتوشاپ - تبدیل لایه ها به گروه در فتوشاپ

مرحله ۳- ذخیره سازی انیمیشن دو بعدی ساخته شده در فتوشاپ

حالا می‌توانید با کلیک بر منوی file و سپس گزینه‌ی Export و save for web and devices (بر حسب نسخه‌ی فتوشاپ ممکن است این مسیر کمی متفاوت باشد) انیمیشن دو بعدی ساخته شده را ذخیره کنید.

لازم است در اینجا هم دقت کنید که فرمت تصویر را برای ذخیره کردن GIF انتخاب کنید. اگر می‌خواهید از این تصویر برای نمایش در صفحات سایت استفاده کنید و یا یک بنر تبلیغاتی است (که حجم اهمیت پیدا می‌کند) با استفاده از پارامترهایی که در اختیار دارید با کمترین حجم بهترین تصویر را ایجاد کنید.

گفتگو پیرامون آموزش ساخت انیمیشن دو بعدی در فتوشاپ

(منتشر شده: 65 | در انتظار تایید: 0)
علیرضا

میخواستم بدونم فتوشاپ برنامش چه فرق هایی داره مثلا من پرو استفاده میکنم . با cs6 چه فرق های داره کدومشون بهتره

پاسخ دهید
سجاد

در پاسخ به علیرضا

سلام
تفاوت‌ها خیلی جزیی هستن
تقریبا ۹۹٪ مشابه همن و فرقی ندارن

پاسخ دهید
ابراهیمی

سلام من هر وقت گزینه انیمیشن رو میزنم ارور میاد اروره هم اینه we need at last tow folders of layer چیکار کنم یکی جواب بده

پاسخ دهید

در پاسخ به ابراهیمی

سلام
باید اول تعدادی از لایه‌ها رو به عنوان فریم‌های انیمیشن انتخاب کنید.

پاسخ دهید
پارسا

خلاصه و خیلی مفید تشکر فراوان

پاسخ دهید
وارش

ممنون از آموزشتون. سوال من اینه که آیا این انیمیشن در محیط اندروید قابل پخش و اجرا هست؟ یعنی آیا میشه در اینستاگرام مثلا اونو به اشتراک گذاشت و پخش کرد؟ و آیا امکان اضافه شدن صدا روی تصویر هست؟ من دنبال راه ساده ای برای این نوع انیمیشن یا ویژگیهایی که گفتم میگردم.

پاسخ دهید

در پاسخ به وارش

سلام
بله این نوع انیمیشن به صورت فایل گیف در تلگرام و یا به صورت فیلم در اینستاگرام قابل پخش است.
برای صدا باید به صورت جداگانه روی انیمیشن صداگذاری و میکس انجام شود.

پاسخ دهید
هادی

سلام
واقعا وبسایت عالی دارین
من میخوام بدونم چگونه میتونم انیمیشنی رو ککه درست کردم رو براتون به نمایش بگذارم تا نظر بدید در مورد
اخه اولین بارمه
در مورد اساسین / assassin درست کردم
جالب شده انگار

پاسخ دهید
عصرعلم

در پاسخ به هادی

سلام
میتونید در سایتهای آپلود، آپلود کنید و لینکش را در بخش دیدگاه ها یا در شبکه های اجتماعی بگذارید تا دوستان علاقه مند مشاهده کنند و نظر بدهند.

پاسخ دهید
زهرا

عاااااااااااااااااااااااااااااااااااااااااااالی بود.من تازه باهاتون آشنا شدم حرررررررررف ندارید

پاسخ دهید
شهلا

فتوشاپ من هم جدید هست cs6 هست، منم گزینه animation رو پیدا نمیکردم اما با خودم گفتم حتما اسمش در ورزن های جدید تغییر کرده و درست فکر کرده بودم 🙂 ،دوستان عزیز مثل سمانه جان که این مشکلو دارن ، دنبال گزینه Timelineبگردید.

پاسخ دهید
شهلا

به دوستانی که فتوشاپشون جدیده اما گزینه animation رو نداره بگم ، منم همین مشکلو داشتم ، با cs6 کار میکنم ، بجای انیمیشن گزینه Timeline رو انتخاب کنید.

پاسخ دهید
عصرعلم

در پاسخ به شهلا

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

پاسخ دهید
عصرعلم

در پاسخ به amir

سلام
نسخه ی فتوشاپتون چیه؟

پاسخ دهید
سمانه

فتوشاپ من جدیده و در قسمت ویندو چیزی به نام انیمیشن ننوشته من باید چی کارکنم؟؟؟؟؟؟

ممنون

پاسخ دهید
ترنج

به نظرم خيلي كامل و خوب نبود و من نتونستم انجامش بدم ولي بازم ممنون .

پاسخ دهید
طراحی سایت

مرسی خیلی عالی بود ممنونم

پاسخ دهید
قضایی

مرسی منتظر توضیحاتتون هستم
با تشکر فراوان

پاسخ دهید
الهام قضایی

با سلام و خسته نباشید
انیمیشنی که من طراحی کردم داخل محیط فتوشاپ play میکنم مشکلی نداره ولی وقتی save می کنم و play می کنم نشون نمیده ( قابل به ذکر است save طبق آموزش شما انجام دادم)

پاسخ دهید
ناشناس

سلام مرسی از آموزش خوبتون
انیمیشنی که من طراحی کردم داخل محیط فتوشاپ وقتی play می کنم مشکل نداره ولی وقتی save می کنم play می کنم 4 ثانیه اولو نشون میده

پاسخ دهید
عصرعلم

در پاسخ به ناشناس

سلام
اگر امکانش هست فایل لایه باز فتوشاپ را برای من ارسال کنید (به همراه فایل نهایی) تا بررسی کنم.
info[at]AsreElm[dot]com

پاسخ دهید
مصطفی

اشاره به نکته خوبی کردید … انیمیشن در فتوشاپ
برای سرگرمی یا درک مفهوم انیمیشن بد نیست
باید بگم فتوشاپ در قسمت time line ابزار خوبی برای شروع کار انیمیشن داره که شما میتونستید به اون هم اشاره کنید سبکی که شما گفتید یه جورایی میشه گفت دستیه و وقتی دارید با کامپیوتر طراحی میکنید باید از روش cut out استفاده کنید. به کسانی که علاقه مندن، کار با افتر افکت رو پیشنهاد میکنم که خیلی قوی تر از فتوشاپ میشه باهاش انیمیشن ساخت که یادگیریش هم سخت نیست.

پاسخ دهید
مهدی حسامی

سلام جناب مهندس واقعا شما استادید نه از اون استادای تو دانشگاه ها بلکه استاد واقعی چون هزار صفحه آموزش را بصورت عملی در کمتر از چند خط آموزش میدید واقعا مممنونم
من نمیدونم به چه دلیلی ( سئو ، درآمد و … ) بی مننت و رایگان این آموزشها رو در اختیار علاقه مندان میزارید ولی کاری کرده اید که همه ما به شما مدیون باشیم واقعا که من با آموزشهای شما به یک طراح و برنامه نویس تبدیل شده ام خیلی دوستتون دارم خیلی

پاسخ دهید
بهاره

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

پاسخ دهید
عصرعلم

در پاسخ به بهاره

شما لطف دارید، خواهش میکنم
در صورت تمایل میتونید به طور مستقیم از طریق ایمیل هم با ما در ارتباط باشید:

info[at]AsreElm.com

پاسخ دهید
بهاره

آموزش برنامه ای که معرفی کردیددر سایت هست؟ کار باهاش راحته؟

پاسخ دهید
عصرعلم

در پاسخ به بهاره

خیر متاسفانه، آموزشش رو در سایت نداریم
کار با فتوشاپ راحت تره به نسبت Illustrator

پاسخ دهید
بهاره

ممنون که سریع پاسخ دادید
ساخت لوگو رو قبلأ گفتید؟ کجای سایت هست؟!

پاسخ دهید
عصرعلم

در پاسخ به بهاره

یک نمونه از ساخت لوگو آموزش داده شده، ایجاد کردن لوگو با فتوشاپ محدودیتهای زیادی داره برای همین از Illustrator و نرم افزارهای وکتوری استفاده میکنیم برای طراحی لوگو. با اینحال شاید مطلب زیر براتون مفید باشه:

» طراحی لوگوی پپسی در فتوشاپ

پاسخ دهید
بهاره

واقعأ خوب بود،من ساخت لوگو،ساخت فاکتور و امثال اینارو میخوام یاد بگیرم،چون سایت شما خیلی ساده و کامل توضیح میده ممنون میشم یاد بدید!!!اگه میشه ایمیل کنید !
چه جوری +1 بدم به سایتتون؟؟؟؟؟!!!!!

پاسخ دهید
عصرعلم

در پاسخ به بهاره

+1 رو برداشتیم چون باعث میشه سرعت بارگزاری سایت کم بشه، ولی میتونید در صفحه ی Google Plus سایت یا فیسبوک با ما همراه باشید.
انشالله به زودی ساخت فاکتور و سربرگ رو هم آموزش میدیم (البته تا قبل از عید فطر این امکان برای ما فراهم نیست). بعد از عید انشالله آموزش در سایت منتشر خواهد شد.

پاسخ دهید
اب

مرسی خسته نباشید خیلی خوب بود

پاسخ دهید
ناشناس

ممنون. عالی بود.

پاسخ دهید
بهتاش

عالی بود ممنون رفیق

پاسخ دهید
مهتاب

خیلی عالی بود،مختصر و مفید.ممنون

پاسخ دهید
پوریا باباعلی

سلام ممنون ولی من brush toolsرا پیدا نمیکنم

پاسخ دهید
سجاد

در پاسخ به پوریا باباعلی

سلام
در جعبه ابزار فتوشاپ ، یک ابزار هست که به شکل قلم مو هستش که همون Brush Tool هست ، اگر شکل قلم مو رو پیدا نکردید احتمالا شکلک مداد رو پیدا خواهید کرد ، بر روی اون کلیک راست کنید تا ابزارهای زیرمجموعه نمایش داده بشه ، در اونجا میتونید ابزار قلم مو رو پیدا کنید.

پاسخ دهید
امیر

سلام خیلی ممنون واقعا استفاده کردم.

پاسخ دهید
sadegh

اگر می شود انیمیشن ۳ بعدی را توضیح دهید

پاسخ دهید
سجاد

در پاسخ به sadegh

اگر منظور شما انیمیشنهای 3D هست که در تلویزیون مشاهده میکنید ، اونها توسط فتوشاپ تهیه نمیشوند و توسط نرم افزارهایی مثل Maya ، Blender و از این قبیل درست میشوند.

پاسخ دهید
mohamadee

سلام ؛
متشکرم اگر امکانش هست کتابهای ساخت انیمیشین را بصورت pdfبه این ایمیل ارسال فرمایید .
با تشکر از طرف یک دوست قدیمی

پاسخ دهید
سجاد

در پاسخ به mohamadee

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

پاسخ دهید
محمد

سلام.
من از فتوشاپ آنلاین سایت http://www.450.ir/photoshop
استفاده میکنم ولی این تو منوی window نداره!
چیکار کنم؟
ممنون

پاسخ دهید
سجاد

در پاسخ به محمد

سلام دوست عزیز ، در این زمینه با سایت ارائه دهنده ی این خدمات تماس بگیرید.
موفق باشید

پاسخ دهید
روژیار

خیلی وقت بود دنبال این آموزش بودم، واقعآ که دست مریضاد…
خیلی استفاده بردم دوست عزیز…. من شما را در لینک پیوندهای سایتم اضافه کردم….

پاسخ دهید
امیر

سلام من فتوشاپ cs 5 رو دارم اما گزینه animation رو نداره

پاسخ دهید
سلام !

ممنون دوست من ! واقعا عالی بود و خیلی از مشکلات من رو حل کرد. 🙂

پاسخ دهید
علیرضا

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

پاسخ دهید
آسان شارژ

سلام
خسته نباشید
دستتون درد نکنه
انشالله همیشه موفق باشید
AsanSharj.com

پاسخ دهید
سئو

سلام
مطلبتون جالب بود
موفق باشید
یا حق

پاسخ دهید
Nikooo

سپاس و درود
يه چيزی امروز ياد گرفتيم
…. آی حالا انيميشن بسازُم مو… 🙂

پاسخ دهید
z

Aaaaaaaaaali Bood KHODA Kheyretoon Bede.

پاسخ دهید
ali

سلام فتوشاپ من گزینه ی ایمیشن نداره

پاسخ دهید
سجاد

در پاسخ به ali

فکر میکنم از نسخه cs2 به بعد این گزینه به فتوشاپ اضافه شده و در حال حاضر نسخه cs5 در بازار موجود هست.

پاسخ دهید
eslam

در پاسخ به ali

با سلام
پس از انتخاب Window ابتدا از پايين ليست باز شده گزينه Show All Menu Items را انتخاب كن

پاسخ دهید
سجاد

در پاسخ به eslam

سلام ، خیلی ممنون به خاطر توضیحتون .

پاسخ دهید
فراهانی

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

پاسخ دهید
موسی فراهانی

اگه دوست داشتید لینک سایت ما رو بزارید و یه امتیاز پلاس وان هم به ما بدید
http://www.aminhozur.com

پاسخ دهید
ابی

در پاسخ به سجاد

واقعا مختصر و مفید یود
مرسی عالیه

پاسخ دهید
موسی فراهانی

من از مطالب شما استفاده کردم و یه امتیاز پلاس وان هم به شما دادم
ممنون از سایت خوبتون
در ضمن اگه لوازم خانگی خواستید ما یه سایت تخصصی لوازم خانگی هستیم

پاسخ دهید

فقط گزینه‌ی وسط را تیک بزنید. »مشاهده قوانین