Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. GIF
Design

10 روش برای بهینه سازی یک فایل انیمیشن GIF

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Animation in Adobe Photoshop.
How to Create an Animated Pixel Art Sprite in Adobe Photoshop
Create Your Own Animated Pre-loader in Photoshop

Persian (پارسی) translation by Ahmad Mostofi (you can also view the original English article)

GIF یک فرمت استاندارد برای فشرده سازی تصاویری با نواحی بزرگی از رنگ های سالید و جزئیات دقیق مثل لاین آرت، لوگو یا متن می باشد. بعد از معرفی فرمت های JPEG و PNG، بخاطر اینکه تصویری با عمق بیت 8 بود، میتوانست از محیط وب ناپدید شود، اما بخاطر قابلیت انیمیشن فریمی آن، هنوز یک فرمت فایل محبوب در وب است. در این آموزش، نگاهی نزدیک خواهیم داشت به همه ی انتخاب های در دسترسی که با آن میتوان ویدیو را به انیمیشن GIF تبدیل کرد و اینکه چطور میتوان اندازه فایل آن را بهینه کرد. پس شروع میکنیم!

به هر حال اگر اغلب با فایل انیمیشن GIF کار کردید، ممکن است بخواهید یک راه حل خودکار را بررسی کنید. اکشن فتوشاپ Gift Export در وبسایت Envato Market موجود است که به شما اجازه میدهد تا چند تصویر را بردارید، آنها را بطور خودکار در فتوشاپ بارگذاری کنید و بصورت یک GIF خروجی بگیرید.


1. برش انیمیشن

اول از همه لازم است فایل ویدیو را با فتوشاپ باز کنید. اکثر اوقات به کل سکانس ویدیویی برای انیمیشن GIF نیاز ندارید، بنابراین میتوانید آنرا در پنل Timeline برش دهید. آپشن Loop را فعال کنید و سعی کنید جای مناسبی را برای بریدن ویدیو پیدا کنید.

10 Ways to Optimize a GIF File

2. کاهش سایز تصویر

میتوانید سایز تصویر را هم از منوی Image یا اینکه بعدا در پنجره ی Save for Web کاهش دهید. من ترجیح میدهم این کار را در ابتدا در پنجره ی Image Size انجام بدهم، چون وقتی تصویر را در پنجره Save for Web باز میکنید موجب صرفه جویی قابل توجهی در زمان می شود. اگر تصویر را تغییر اندازه دهید، لایه ی ویدیویی شما بایستی به یک Smart Object تبدیل شود، اما لازم نیست نگران این مساله باشید، این مورد بر جریان کاری شما اصلا تاثیری نخواهد گذاشت.

10 Ways to Optimize a GIF File

3. ذخیره برای وب Save for Web

مساله ی مورد علاقه من در مورد این جریان کاری این است که لازم نیست روی پنل تایم لاین هیچ تبدیلی انجام دهید تا بتوانید یک انیمیشن فریمی ذخیره کنید، چون موقعی که فرمت فایل GIF را بعنوان خروجی انتخاب میکنید، پنجره ی Save for Web این کار را برای ما انجام میدهد. توجه کنید که آپشن های انیمیشن در گوشه سمت راست پایین پنجره نمایان خواهد شد. در صورتی که میخواهید سایز تصویر را بیشتر کم کنید، همچنان میتونید این کار را در اینجا انجام دهید.

10 Ways to Optimize a GIF File

4. کاهش تعداد فریم ها

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

10 Ways to Optimize a GIF File

5. تعداد رنگ

مناسب ترین آپشن برای بهینه سازی یک فایل GIF تعداد رنگ های استفاده شده در جدول رنگ است. تعداد حداکثر رنگ 256 می باشد، که مربوط به محدودیت عمق بیت 8 می باشد. بطور کلی خوب است که 64 رنگ یا کمتر را بکار بگیرید، اما بسته به ویدیوی اصلی ممکن است نیاز باشد تعداد رنگ ها را افزایش دهید تا نتیجه بهتری بدست آورید.

10 Ways to Optimize a GIF File

6. کدام الگوریتم تقلیل رنگ را انتخاب کنیم؟

  • الگوریتم Perceptual برای این است که یک جدول رنگ سفارشی ایجاد کنیم که طی آن به رنگ هایی که چشم انسان حساسیت بیشتری به آنها دارد اولویت بدهیم.
  • الگوریتم Selective برای این است که جدول رنگی مشابهی با جدول رنگ Perceptual ایجاد کنیم، اما با در نظر گرفتن نواحی رنگ وسیعتر و حفظ رنگ های وب. این جدول رنگ معمولا تصاویری با بهترین ادغام رنگ را ایجاد میکند. (الگوریتم Selective انتخاب پیش فرض است.)
  • الگوریتم Adaptive برای این است که با نمونه برداری از رنگ های طیفی که بیشتر در تصویر ظاهر میشود یک جدول رنگ ایجاد کنید. برای مثال، یک تصویر با سایه های فقط سبز و آبی، یک جدول رنگ در درجه اول با رنگ های سبز و آبی ایجاد میکند. در اکثر تصاویر، رنگ ها در نواحی بخصوصی از طیف متمرکز می شوند.
  • در الگوریتم Restrictive از جدول رنگی استاندارد 216 رنگی ایمن وب مشابه با پنل های 8 بیتی (256 رنگی) ویندوز و مک استفاده شده است. این آپشن شما را از این مساله مطمئن میسازد که در زمانیکه تصویر با رنگ 8 بیت نمایش داده شد هیچ نویز رنگی از مرورگر به رنگ ها اعمال نخواهد شد. در صورتیکه که تصویر شما کمتر از 216 رنگ دارد، رنگ های بی استفاده از جدول حذف میشوند.
10 Ways to Optimize a GIF File

7. افزودن نویز برای کاهش اعوجاج (Dithering)

از آنجاییکه فایل های GIF شامل تعداد محدودی رنگ هستند، ممکن است بخواهیم رنگ های از دست رفته را با رنگ های موجود با استفاده از امکان Dithering شبیه سازی کنیم. از منوی Dither، یکی از الگوریتم ها برای این شبیه سازی انتخاب میکنیم. روش Diffusion اجازه میدهد که مقدار dither را تنظیم کنید. با الگوریتم های Pattern و Noise، هیچ چیزی را نمیتوانید تنظیم کنید. هر چه نویز dither بیشتری در تصویر اضافه کنید، اندازه فایل بیشتر می شود. عمل Dithering پیکسل هایی با رنگ متفاوت نزدیک به رنگ کناری ایجاد میکند تا رنگ های ثانویه را شبیه سازی کند یا تغییرات رنگی را هموار کند. برای بعضی تصاویر باید عمل dithering انجام شود تا ظاهر خوبی بدست آید، اما بهتر است حداقل مقدار ممکن را برای آن در نظر بگیرید تا اندازه فایل را تا حد ممکن کمتر حفظ کنید.

10 Ways to Optimize a GIF File

8. تصویر مناسب وب (Web Snap) ، تصویر بی کیفیت (Lossy)، شفافیت (Transparency)، تصویر تقسیم شده (Interlaced)

  • Web Snap استفاده میشود تا از اضافه کردن نویز dithering در یک مرورگر جلوگیری شود. این کار با تغییر برخی رنگ ها به رنگ های ایمن وب انجام میشود. هر چقدر رنگ های ایمن وب بیشتری در یک GIF باشند، نویزدهی dithering مرورگر کمتر خواهد شد. مقدار 0 درصد هیچ رنگی را تغییر نمیدهد، در حالیکه مقدار 100 درصد تمامی رنگ های تصویر را به رنگ های ایمن وب تغییر می دهد.
  • فشرده سازی بی کیفیت (Lossy) اطلاعات بصری را دور می اندازد که میتواند اندازه فایل را کاهش دهد.
  • در صورتی که تصویر دارای ناحیه ترانسپرنت است، گزینه Transparency را انتخاب کنید تا پیکسل های ترانسپرنت را حفظ کنید؛ برای اینکه بخشی یا همه ی پیکسل های ترانسپرنت را با رنگ مت پر کنید تیک انتخاب Transparency را بردارید.
  • فایل های GIF با خطوط مجزا شده (Interlaced) در مرورگر در چند مسیر بارگذاری می شوند (مثل تصاویر Progressive با فرمت JPEG)


9. نسخه های اصلی و بهینه شده را مقایسه کنید

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

10 Ways to Optimize a GIF File

10. پیش نمایش کنید، پریست را ذخیره کنید و اندازه فایل را بهینه کنید

در صورتیکه از تنظیمات خود راضی هستید، با امکان Preview به فایل GIF نهایی در مرورگر نگاهی بکنید و فراموش نکنید که تنظیمات خود را بصورت یک Preset ذخیره کنید. همینطور میتوانید با این آپشن اضافی از منوی Optimize یک محدوده برای اندازه فایل مشخص کنید و وقتی اعمال شود فتوشاپ تلاش میکند تا متناسب با سایز، بهترین کیفیت تصویری ممکن را ارائه دهد.

10 Ways to Optimize a GIF File
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.