پس از ایجاد یک انیمیشن در فتوشاپ، باید در یکی از فرمت های موجود ذخیره شود، یکی از آنها GIF است. یکی از ویژگی های این فرمت این است که در نظر گرفته شده برای نمایش (پخش) در مرورگر است.
اگر شما علاقه مند به گزینه های دیگر برای صرفه جویی در انیمیشن، ما توصیه می کنیم خواندن این مقاله:
درس: نحوه ذخیره ویدئو در فتوشاپ
فرآیند ایجاد یک انیمیشن GIF در یکی از درس های قبلی توصیف شد و امروز ما درباره نحوه ذخیره فایل در فرمت GIF و تنظیمات بهینه سازی صحبت خواهیم کرد.
درس: ایجاد یک انیمیشن ساده در فتوشاپ
صرفه جویی در GIF
برای شروع، ما مواد را تکرار می کنیم و پنجره تنظیمات ذخیره را بخوانیم. آن را با کلیک کردن بر روی "ذخیره برای وب" مورد در منوی File باز می شود.
پنجره شامل دو بخش است: بلوک پیش نمایش
و بلوک تنظیمات
پیش نمایش
گزینه های مشاهده را انتخاب کنید در بالای بلوک انتخاب شده است. بسته به نیازهای، شما می توانید تنظیمات دلخواه را انتخاب کنید.
تصویر در هر پنجره، به جز اصلی، به طور جداگانه پیکربندی شده است. این کار انجام می شود به طوری که شما می توانید گزینه بهینه را انتخاب کنید.
در سمت چپ بلوک مجموعه ای کوچک از ابزار وجود دارد. ما فقط از "دست" و "مقیاس" استفاده خواهیم کرد.
با استفاده از "دست" شما می توانید تصویر را در پنجره انتخاب شده حرکت دهید. انتخاب نیز توسط این ابزار ساخته شده است. "مقیاس" عمل مشابهی را انجام می دهد. تقریبا و حذف تصویر نیز می تواند دکمه ها در پایین بلوک باشد.
پایین پایین دکمه با کتیبه "مشاهده" است. این گزینه انتخاب شده را در مرورگر پیش فرض باز می کند.
در پنجره مرورگر، به جز برای تنظیم پارامترها، ما همچنین می توانیم کد GIF HTML را دریافت کنیم.
تنظیمات بلوک
در این بلوک، پارامترهای تصویر پیکربندی شده اند، آن را بیشتر در نظر بگیرید.
- طرح رنگی. این تنظیم تعیین می کند که کدام جدول از رنگ های نمایه شده در هنگام بهینه سازی به تصویر اعمال می شود.
- ادراکی، و به سادگی "طرح ادراک". هنگامی که استفاده می شود، فتوشاپ یک جدول از رنگ ها را ایجاد می کند، که توسط سایه های فعلی تصویر هدایت می شود. به گفته توسعه دهندگان، این جدول تا حد ممکن نزدیک به چگونگی چشم انسان رنگ است. به علاوه - تصویر نزدیک ترین اصلی اصلی است، رنگ ها حداکثر ذخیره می شوند.
- طرح انتخابی شبیه به یک قبلی است، اما رنگ های مربوط به وب امن برای وب به طور عمده در آن استفاده می شود. همچنین بر روی صفحه نمایش سایه ها تقریبا به ابتدا متمرکز شده است.
- انطباقی. در این مورد، جدول از رنگ هایی که در تصویر بیشتر شایع هستند ایجاد می شود.
- محدود. شامل 77 رنگ است، برخی از نمونه هایی که به صورت سفید به صورت سفید جایگزین می شوند (دانه).
- سفارشی. هنگام انتخاب این طرح، ممکن است پالت خود را ایجاد کنید.
- سیاه و سفید. این جدول تنها از دو رنگ (سیاه و سفید)، همچنین با استفاده از دانه استفاده می کند.
- در نمرات خاکستری. 84 سطح از سایه های خاکستری وجود دارد.
- MacOS و پنجره ها. داده های جدول بر اساس ویژگی های نقشه برداری تصاویر در مرورگرهای اجرای این سیستم عامل ها کامپایل می شوند.
در اینجا چند نمونه از برنامه های کاربردی وجود دارد.
همانطور که می بینید، سه نمونه اول کیفیت کاملا قابل قبول دارند. علیرغم این واقعیت که بصری آنها تقریبا از یکدیگر متفاوت نیستند، تصاویر مختلف این طرح ها به طور متفاوتی کار خواهند کرد.
- حداکثر تعداد رنگ ها در جدول رنگ.
تعداد سایه ها در تصویر به طور مستقیم بر وزن آن تاثیر می گذارد، و بر این اساس، بر روی سرعت دانلود در مرورگر. مقدار 128 اغلب استفاده می شود، زیرا این تنظیم تقریبا بر کیفیت تاثیر نمی گذارد، در حالی که وزن GIF را کاهش می دهد.
- رنگ های وب این تنظیم تحمل را ایجاد می کند که سایه ها به معادل یک پالت وب امن تبدیل می شوند. فیلد فایل توسط مقدار تعیین شده توسط نوار لغزنده تعیین می شود: مقدار بالاتر است - فایل کمتر است. هنگام تنظیم رنگ های وب نیز نباید درباره کیفیت را فراموش کنید.
مثال:
- Dysrying به شما اجازه می دهد تا انتقال بین رنگ ها را با مخلوط کردن سایه هایی که در جدول نمایه انتخابی انتخاب شده اند، صاف کنید.
همچنین، تنظیم به نحوه حفظ شیب و یکپارچگی سایت های تک رنگ کمک می کند. هنگام استفاده از توزیع، وزن فایل را افزایش می دهد.
مثال:
- شفافیت. فرمت GIF تنها پیکسل های کاملا شفاف یا کاملا مات را پشتیبانی می کند.
این پارامتر، بدون تنظیم اضافی، منحنی خطوط را نشان می دهد، خانم های پیکسل را ترک می کند.
تنظیم "مات" نامیده می شود (در برخی از سردبیران "Kaima"). با آن، آن را پیکربندی شده است برای مخلوط کردن تصاویر پیکسل با پس زمینه از صفحه ای که آن را در آن قرار می گیرد. برای بهترین صفحه نمایش، یک رنگ مربوط به رنگ پس زمینه سایت را انتخاب کنید.
- درهم آمیخته یکی از مفیدترین تنظیمات وب است. در صورتی که فایل دارای وزن قابل توجهی باشد، به شما امکان می دهد بلافاصله یک عکس را در صفحه نمایش دهید، زیرا بارهای بهبود کیفیت آن را افزایش می دهد.
- SRGB Conversion کمک می کند تا حداکثر رنگ های تصویر اصلی را ذخیره کند.
راه اندازی "شفافیت دیافراگم" به طور قابل توجهی کیفیت تصویر را بدتر می کند و ما در مورد پارامتر "از دست دادن" در بخش عملی درس صحبت خواهیم کرد.
برای بهترین درک فرآیند راه اندازی GIF ها در فتوشاپ، باید تمرین کنید.
تمرین
هدف بهینه سازی تصاویر برای اینترنت حداکثر کاهش وزن فایل در حالی که حفظ کیفیت است.
- پس از پردازش تصویر، به منوی «فایل - ذخیره برای وب» بروید.
- نمایش حالت "4 گزینه" را نشان می دهد.
- بعد، شما به یکی از گزینه هایی نیاز دارید که بیشتر شبیه به اصلی باشد. اجازه دهید آن را یک تصویر به سمت راست منبع. این کار به منظور تخمین اندازه فایل با حداکثر کیفیت انجام می شود.
تنظیمات تنظیمات به شرح زیر است:
- طرح رنگ "انتخابی".
- "رنگ" - 265.
- "Diazering" "تصادفی"، 100٪ است.
- DAWS را در مقابل پارامتر "interlaced" حذف کنید، زیرا تصویر نهایی تصویر بسیار کوچک خواهد بود.
- "رنگ های وب" و "زیان" - صفر.
نتیجه را با اصل مقایسه کنید. در پایین پنجره نمونه، می توانیم اندازه GIF فعلی و سرعت بارگیری را در سرعت اینترنت مشخص مشاهده کنیم.
- به تصویر زیر پیکربندی شده بروید. بیایید سعی کنیم آن را بهینه سازی کنیم.
- طرح بدون تغییر را ترک کنید
- تعداد رنگ ها تا 128 کاهش می یابد.
- مقدار dysmering به 90٪ کاهش یافته است.
- رنگ های وب لمس نمی کنند، زیرا در این مورد به ما کمک نمی کند که کیفیت را حفظ کنیم.
اندازه GIF از 36.59 کیلو بایت به 26.85 کیلوبایت کاهش یافت.
- از آنجاییکه برخی از دانه ها و نقص های کوچک در حال حاضر در تصویر حضور دارند، سعی کنید "زیان ها" را افزایش دهید. این پارامتر یک سطح مجاز از دست دادن داده ها را در هنگام فشرده سازی GIF تعریف می کند. ارزش را به 8 تغییر دهید.
ما هنوز موفق به کاهش اندازه فایل، در حالی که از دست دادن کمی در کیفیت. GIF ها در حال حاضر وزن 25.9 کیلوبایت دارند.
مجموع، ما توانستیم اندازه تصویر حدود 10 کیلو بایت را کاهش دهیم، که بیش از 30 درصد است. نتیجه بسیار خوبی است.
- اقدامات بیشتر بسیار ساده است. روی دکمه ذخیره کلیک کنید.
ما یک مکان را انتخاب می کنیم، نام GIF را به نام GIF انتخاب می کنیم و "ذخیره" را دوباره فشار می دهیم.
لطفا توجه داشته باشید که یک فرصت همراه با GIF وجود دارد تا یک سند HTML ایجاد شود که تصویر ما ساخته خواهد شد. برای انجام این کار، بهتر است یک پوشه خالی را انتخاب کنید.
در نتیجه، ما یک صفحه و پوشه را با تصویر دریافت می کنیم.
نکته: هنگام اختصاص یک نام فایل، سعی کنید از کاراکترهای سیریلیک استفاده نکنید، زیرا همه مرورگرها قادر به خواندن آنها نیستند.
این درس برای صرفه جویی در تصویر در فرمت GIF تکمیل شده است. بر روی آن، ما متوجه شدیم که چگونه می توانید فایل را برای قرار دادن در اینترنت بهینه سازی کنید.