پس از ایجاد انیمیشن در فتوشاپ، شما باید آن را در یکی از فرمت های موجود ذخیره کنید، که یکی از آنهاست گیف. یکی از ویژگی های این فرمت این است که برای طراحی (نمایش) در مرورگر طراحی شده است.
اگر به گزینه های دیگر برای صرفه جویی در انیمیشن علاقه مند هستید، توصیه می کنیم این مقاله را بخوانید:
درس: نحوه ذخیره ویدئو در فتوشاپ
فرایند ایجاد گیف انیمیشن در یکی از درس های قبلی شرح داده شده است و امروز ما درباره نحوه ذخیره فایل در آن صحبت خواهیم کرد گیف و تنظیمات بهینه سازی.
درس: یک انیمیشن ساده در فتوشاپ ایجاد کنید
ذخیره GIF
برای شروع، مواد را تکرار کنید و نگاهی به پنجره تنظیمات ذخیره کنید. با کلیک کردن روی آیتم باز می شود. "ذخیره برای وب" در منو "پرونده".
پنجره شامل دو بخش است: یک بلوک پیش نمایش
و تنظیمات را مسدود کنید.
پیشنمایش بلوک
انتخاب تعداد گزینه های مشاهده در بالای بلوک انتخاب شده است. بسته به نیازهای شما می توانید تنظیم دلخواه را انتخاب کنید.
تصویر در هر پنجره، به جز اصلی، به طور جداگانه پیکربندی شده است. این کار انجام شده است تا بتوانید بهترین گزینه را انتخاب کنید.
در قسمت بالا سمت چپ بلوک مجموعه ای از ابزارهای کوچک وجود دارد. ما فقط از آن استفاده خواهیم کرد "دست" و "مقیاس".
با کمک "دست" شما می توانید تصویر را داخل پنجره انتخاب شده حرکت دهید. انتخاب نیز توسط این ابزار ساخته شده است. "مقیاس" عمل مشابهی را انجام می دهد. شما همچنین می توانید با دکمه های پایین بلوک بزرگنمایی کنید.
فقط زیر دکمه برچسب است "مشاهده". این گزینه انتخاب شده در مرورگر پیش فرض را باز می کند.
در پنجره مرورگر، علاوه بر مجموعه ای از پارامترها، می توانیم دریافت کنیم کد HTML gifs
بلوک تنظیمات
در این بلوک، پارامترهای تصویر تنظیم می شوند، اجازه دهید جزئیات بیشتری را در نظر بگیریم.
- طرح رنگ این تنظیم تعیین می کند که کد رنگ نمایه شده در هنگام بهینه سازی به تصویر اعمال شود.
- ادراکی، اما به سادگی "طرح ادراک". هنگامی که استفاده می شود، فتوشاپ یک جدول از رنگ ها ایجاد می کند که توسط سایه های تصویر هدایت می شود. به گفته توسعه دهندگان، این جدول به همان اندازه ممکن است که چگونه چشم انسان رنگ ها را می بیند. به علاوه - نزدیک به تصویر اصلی، رنگ ها تا آنجا که ممکن است ذخیره می شود.
- انتخابی این طرح شبیه به پیشین است، اما بیشتر از رنگهایی استفاده می کند که برای وب امن هستند. همچنین بر روی نمایش سایه های نزدیک به اصل تمرکز دارد.
- سازگاری. در این مورد، جدول از رنگ هایی که بیشتر در تصویر یافت می شود ایجاد می شود.
- محدود. این شامل 77 رنگ است، برخی از آنها به شکل یک نقطه (دانه) سفید می شوند.
- سفارشی. هنگام انتخاب این طرح، می توانید پالت خود را ایجاد کنید.
- سیاه و سفید. این جدول تنها از دو رنگ (سیاه و سفید) استفاده می کند، همچنین از دانه استفاده می کند.
- در سیاه و سفید. در اینجا 84 سطح سایه خاکستری استفاده می شود.
- MacOS و ویندوز. این جداول بر اساس ویژگی های نمایش تصاویر در مرورگرهایی که این سیستم عامل را اجرا می کنند، کامال می شوند.
در اینجا چند نمونه از استفاده از طرح ها وجود دارد.
همانطور که می بینید، سه نمونه اول کیفیت کاملا قابل قبول دارند. به رغم این واقعیت که از نظر بصری آنها به سختی با یکدیگر متفاوت هستند، این طرح ها بر روی تصاویر مختلف متفاوت عمل می کنند.
- حداکثر تعداد رنگ در جدول رنگ.
تعداد سایه ها در تصویر به طور مستقیم بر وزن آن تاثیر می گذارد و به همین ترتیب سرعت دانلود در مرورگر. بیشترین مقدار استفاده شده 128از آنجا که این تنظیم تقریبا هیچ تاثیری بر کیفیت ندارد، در حالی که وزن GIF را کاهش می دهد.
- رنگ وب این تنظیم میزان تحمل را تعیین می کند که کدام رنگ به یک پالت وب امن معادل است. وزن فایل با مقدار تعیین شده توسط نوار لغزنده تعیین می شود: مقدار بالاتر است - فایل کوچکتر است. هنگام تنظیم وب رنگ ها کیفیت را فراموش نکنید.
مثال:
- تقسیم بندی به شما اجازه می دهد تا انتقال بین رنگ ها را با ترکیب رنگ هایی که در جدول فهرست انتخاب شده اند، صاف کنید.
تنظیمات همچنین تا آنجا که ممکن است به حفظ شیب و یکپارچگی قطعات تک رنگ کمک کند. هنگام استفاده از dithering، وزن فایل افزایش می یابد.
مثال:
- شفافیت فرمت گیف فقط کاملا شفاف و یا پیکسل کاملا قطور پشتیبانی می کند.
این پارامتر، بدون تنظیم اضافی، خطوط منحنی را به ندرت نمایش می دهد و نردبان های پیکسل را ترک می کند.
تنظیم نامیده می شود "مات" (در برخی از نسخه ها "مرز") این می تواند مورد استفاده قرار گیرد برای ترکیب پیکسل تصویر با پس زمینه صفحه که در آن قرار دارد. برای بهترین صفحه نمایش، رنگی را انتخاب کنید که با رنگ پسزمینه سایت منطبق باشد.
- interlaced یکی از تنظیمات مفید برای وب. در این صورت، اگر فایل دارای وزن قابل توجهی باشد، به شما اجازه می دهد بلافاصله تصویر را بر روی صفحه نمایش دهید، همانطور که بارگذاری شده است، کیفیت آن را بهبود می بخشد.
- تبدیل sRGB به نگه داشتن حداکثر رنگ اصلی تصویر در هنگام ذخیره کمک می کند.
سفارشی سازی "شفافیت متقابل" به طور قابل توجهی کیفیت تصویر را کاهش می دهد، اما در مورد پارامتر "زیان" ما در بخش عملی درس درس صحبت خواهیم کرد.
برای درک بهتر از فرایند ذخیره سازی GIF ها در فتوشاپ، شما باید تمرین کنید.
تمرین کنید
هدف بهینه سازی تصاویر برای اینترنت این است که وزن فایل را حداقل با حفظ کیفیت حفظ کند.
- پس از پردازش تصاویر به منو بروید "فایل - ذخیره برای وب".
- نمایش حالت را نمایش دهید "4 گزینه".
- بعد شما نیاز به یکی از گزینه هایی را که تا حد ممکن نزدیک به اصل است. اجازه دهید تصویر به سمت راست منبع باشد. این کار به منظور برآورد اندازه فایل با حداکثر کیفیت انجام می شود.
تنظیمات پارامتر به شرح زیر است:
- طرح رنگ "انتخابی".
- "رنگ ها" - 265.
- "تقسیم" - "تصادفی", 100 %.
- کادر انتخاب را در مقابل پارامتر حذف کنید "اینترلیس"، زیرا حجم نهایی تصویر بسیار کوچک است.
- "رنگ های وب" و "زیان" - صفر
نتیجه را با اصل مقایسه کنید. در پایین پنجره نمونه، می توانیم اندازه فعلی gif و سرعت دانلود آن را با سرعت اینترنت مشخص شده مشاهده کنیم.
- به تصویر زیر فقط پیکربندی کنید. بیایید سعی کنیم آن را بهینه کنیم.
- این طرح بدون تغییر باقی مانده است.
- تعداد رنگ ها به 128 کاهش می یابد.
- معنای "تقسیم" به 90٪ کاهش یافته است.
- رنگ وب لمس نکنید، زیرا در این مورد به ما برای حفظ کیفیت کمک نمی کند.
اندازه GIF از 36.59 کیلو بایت به 26.85 کیلو بایت کاهش یافت.
- از آنجایی که در حال حاضر نقاشی های دانه ای و کوچک در تصویر وجود دارد، سعی خواهیم کرد که افزایش یابد "زیان". این پارامتر سطح قابل قبولی از دست دادن داده ها را در هنگام فشرده سازی تعیین می کند. گیف. مقدار را به 8 تغییر دهید.
ما توانستیم حجم فایل را کاهش دهیم، در حالی که کم کیفیت را از دست می دهیم. گیفکا اکنون 25.9 کیلو بایت وزن دارد.
بنابراین، ما توانستیم اندازه تصویر را حدود 10 کیلو بایت کاهش دهیم که بیشتر از 30 درصد است. نتیجه بسیار خوب
- اقدامات دیگر بسیار ساده است. دکمه را فشار دهید "ذخیره".
یک مکان برای ذخیره کنید، نام GIF را انتخاب کنید، سپس روی "ذخیره ".
لطفا توجه داشته باشید که ممکن است همراه با وجود دارد گیف ایجاد و HTML سند که در آن تصویر ما تعبیه شده است. برای این کار بهتر است یک پوشه خالی را انتخاب کنید.
در نتیجه یک صفحه و یک پوشه با یک تصویر دریافت می کنیم.
نکته: هنگام نامگذاری یک فایل، سعی نکنید از کاراکترهای سیریلی استفاده کنید، زیرا تمام مرورگرها قادر به خواندن آنها نیستند.
در این درس در ذخیره تصاویر در قالب گیف تکمیل شده بر روی آن، ما متوجه شدیم که چگونه فایل را برای قرار دادن در اینترنت بهینه سازی کنیم.
