آموزش طراحی بنر گیف در ۹ گام
تصاویر متحرک یکی از پرطرفدارترین و جذاب‌ترین نوع مدیا است که کاربران پیام رسان‌ها و شبکه‌های اجتماعی به وفور از آن در محیط مجازی استفاده می‌کنند. در این مقاله به آموزش طراحی بنر گیف به روش ساده خواهیم پرداخت.
در مقالات قبل نکات مهم در طراحی لوگو و طراحی کارت ویزیت در فتوشاپ و سایر ابزارهای گرافیکی را بررسی کردیم. باورتان نمی‌شود که ساخت یک گیف متحرک در فتوشاپ چقدر آسان است! این راهنمای آسان شما را مرحله به مرحله برای ساخت یک گیف در فتوشاپ هدایت می‌کند.
کاربرد گیف‌ها این روزها از اهمیت زیادی برخوردار هستند که در همه جا بصورت آنلاین دیده می‌شوند. آیا تاکنون هنر زیبای ساخت گیف را یاد نگرفته‌اید؟ این یک مهارت الزامی در بازار شغلی رقابتی امروز و آرزوی کارفرمایان و مشتریان طراحی آزاد است که باید به نمونه کارهای طراحی آنلاین شما افزوده شود.
اگر قصد دارید نحوه ساخت گیف در فتوشاپ را یاد بگیرید این مقاله به شما کمک می‌کند! این راهنما در تولید الگوها، بنرهای متحرک و محتوای تبلیغاتی به شما کمک می‌کند بدون اینکه وقتتان را بگیرد.
ساخت گیف در ۹ مرحله
گام اول: تصاویر را در فتوشاپ بارگذاری کنید
قبل از اینکه بتوانید یک گیف متحرک در فتوشاپ بسازید باید تصاویرتان را وارد کنید و آمادگی‌های لازم برای متحرک کردن آن‌ها را انجام دهید. چهار رویکرد مختلف در اینجا وجود دارد که عمدتأ به شما بستگی دارند :
آیا یک سری تصاویر را آماده دارید؟
پس یک سری تصاویر دارید که جریان دارند و می‌توانید آن‌ها را متحرک کنید یا مشتری‌تان تصاویری را به شما ارائه داده که نیاز دارید. فوق‌العاده است. با رفتن به بخش File > Scripts > Load Files Into Stack به راحتی می‌توانید شروع کنید. این گزینه سودمند شما را قادر می‌سازد تا دامنه وسیعی از تصاویر را به طور همزمان بارگذاری کنید بجای اینکه مجبور شوید هریک را به طور جداگانه در سند وارد کنید.
باید فایل‌ها را باز کنید، پس گزینه Browse را انتخاب کرده و هر فایلی که قصد دارید درون سند جایگذاری کنید را تعیین کنید. وقتی کلید OK را فشار دهید فتوشاپ به طور خودکار یک لایه برای هر تصویری که تصمیم گرفتید درج کنید می‌سازد.
یک تصویر دارید؟ (یا اصلأ تصویری ندارید؟)
اگر هیچ تصویری ندارید یا یک تصویر دارید که می‌خواهید برروی آن کار کنید (همانطور که معمولأ برای بنرهای متحرک صدق می‌کند)، یک سند جدید با File > New ایجاد کنید. سپس فقط تصویرتان را در پنجره پروژه فتوشاپ وارد کنید یا به بخش File > Open بروید و تصویرتان را انتخاب کنید.
اگر می‌خواهید فریم‌های اضافی با تصاویر دیگر درون این سند جدید بسازید باید لایه‌هایی را برای هریک از آن‌ها بصورت دستی ایجاد کنید. برای انجام این کار گزینه Layer > New > Layer را انتخاب کنید یا برروی کلید Layer در پالت لایه کلیک کنید.
در مسیر ساخت یک گیف در فتوشاپ قرار دارید! وقتی این مرحله با یکی از روش‌های فوق تمام شد هر لایه را نامگذاری کنید تا جریان کارتان سازماندهی شود. بر روی اسم لایه‌ها در پالت لایه‌ها دوبار کلیک کنید و هریک را مجددأ نامگذاری کنید. این کار را به یک عادت تبدیل کنید: باعث می‌شود وقتی نوبت به ذخیره گیف در فتوشاپ می‌رسد ویرایش فایل‌هایتان خیلی راحت‌تر شود اگر بتوانید با یک نگاه هریک از اجزا را تشخیص دهید.
گام دوم: پنجره Time Line را باز کنید
قبل از اینکه شروع به متحرک‌سازیِ چیزی کنید به توانایی ساخت کی‌فریم نیاز دارید. برای انجام این کار باید پنجره گاه‌شمار را باز کنید. در زمان ساخت یک گیف متحرک در فتوشاپ این پنجره به طور پیش‌فرض باز نمی‌شود، بنابراین به قسمت Window > Timeline بروید و گزینه شروع را انتخاب کنید.
وقتی این گزینه گاه‌شمار را انتخاب کردید پنجره در انتهای صفحه نمایشتان ظاهر می‌شود. قبل از اینکه این فرآیند را ادامه دهید از نیازمندی‌های مخاطبانتان اطلاع پیدا کنید. شما قصد دارید آن‌ها را خوشحال کنید بنابراین باید با آن‌ها در تماس باشید!
گام سوم: انیمیشنِ فریم بسازید
این مرحله از این ساده‌تر نمی‌شود. برروی کلید Frame Animation درون گاه‌شمار کلیک کنید. تغییر این طرح کلی درواقع حالت TimeLine را در سبک فریم به فریم تنظیم می‌کند. اکنون تصویر شما بصورت یک فریم در این TimeLine طرح ریزی می‌شود. این فریم‌ها جایی هستند که می‌توانید ویرایش‌های انیمیشن خود را اعمال کنید.
یک انیمیشن فریم (کی‌فریم) چیست؟
فریم‌ها در اینجا دقیقأ چه هستند؟ می‌توانیم ویرایش‌های فریم به فریم را برروی تصاویرمان در این فریم‌های TimeLine (کی‌فریم‌ها) انجام دهیم و اثرات متحرکی مثل چشمک زدن متن را از طریق لایه‌ها ایجاد کنیم. پنجره گاه شمار شما را قادر می‌سازد تا لایه‌ها را روشن و خاموش کنید، عناصر را در فریم‌های جداگانه حرکت دهید، متن را بچرخانید، فیلترها را اعمال کنید و طول فریم‌های زمانی خاص را تنظیم کنید.
گام چهارم: به هر فریم یک لایه اختصاص دهید
وقتی در حال ساخت یک گیف متحرک در فتوشاپ هستید باید مطمئن شوید که هر فریم لایه خاص خودش را دارد. این کار به شما قدرت می‌دهد تا هر فریم را ویرایش کنید بدون اینکه بر فریم‌های دیگر در پروژه‌تان تأثیر بگذارید. این بخش ضروری طراحی یک انیمیشن تمیز است. برای تقسیم تصاویر در لایه‌ها، گزینه Select > All Layers را انتخاب کرده و سپس آیکون منوی TimeLine را در سمت راست بالای پنجره پیدا کنید:
از آنجا گزینه Create New Layer For Each Frame (ساخت یک لایه ی جدید برای هر فریم) را انتخاب کنید. اکنون باید لایه‌ها را برای هر فریم جداگانه که در حال حاضر در سندتان وجود دارد تفکیک کنید.
گام پنجم: از لایه‌ها فریم بسازید
سپس در همین منو پیش بروید و گزینه Make Frames From Layers (ساخت فریم از لایه‌ها) را انتخاب کنید. این کار موجب می‌شود یک لایه جداگانه برای یک فریم در گاه‌شمار ایجاد شود. سپس باید بتوانید هر فریم جداگانه را در گاه‌شمارتان انتخاب کنید و عناصر را ویرایش نمایید. تا اینجا بیشترین حجم کار را انجام داده‌اید. هرچه انیمیشن شما پیچیده‌تر باشد به فریم‌های بیشتری نیاز دارید. اگر از متنی که خودتان ایجاد کرده‌اید استفاده می‌کنید مطمئن شوید که فونت آن با فونت‌های وب همخوانی دارد!
گام ششم: مدت زمان فریم را تعیین کنید
تقریبأ تمام چیزی که برای ساخت یک گیف در فتوشاپ نیاز داشتید را یاد گرفتید. فقط چند نکته دیگر باقی مانده است! حالا که فریم‌های پایه را در اختیار دارید در مرحله بعدی باید تعیین کنید که هر فریم برای چه مدتی پخش شود. اگر این کار را انجام ندهید انیمیشن شما رفتار عجیبی خواهد داشت یا شاید اصلأ پخش نشود.
این فرآیند بسیار ساده‌ای است: فریمی که قصد دارید ویرایش کنید را انتخاب نمایید و سپس برروی فلش کلیک کنید و زمان مورد نظر را از کرکره‌ای که ظاهر می‌شود انتخاب کنید. به طور پیش‌فرض فتوشاپ هر فریم را برابر با صفر ثانیه تنظیم کرده، بنابراین آن را تغییر دهید در غیر این صورت انیمیشن شما عملکرد درستی نخواهد داشت. سعی کنید برای شروع 0.2 یا 0.5 ثانیه را انتخاب کنید. همیشه می‌توانید این زمان را بعدأ ویرایش کنید.
گام هفتم: گزینه‌های حلقه (لوپینگ)
حالا که یک گیف در فتوشاپ درست کردید، زمان آن رسیده که اطمینان حاصل کنید این گیف درست عمل می‌کند. آیا می‌خواهید تصویرتان بیش از یکبار تکرار شود؟ پس باید از گزینه‌های حلقه استفاده کنید. در پایین گاه‌شمار چندین گزینه مشاهده می‌کنید. گزینه Once را انتخاب کرده و کرکره را باز کنید.
می‌توانید از میان گزینه‌های از پیش ساخته شده انتخاب کنید و مشخصات خودتان را پیاده کنید. هر تقاضایی که دارید را انتخاب کنید. رایج‌ترین گزینه انتخاب شده «برای همیشه (Forever» است زیرا بیشتر گیف‌های متحرک قرار است بارها و بارها تکرار شوند تا زمانیکه باز هستند.
گام هشتم: پیش نمایش
در مرحله بعدی ساخت یک گیف متحرک در فتوشاپ باید گیفتان را پیش نمایش دهید تا مطمئن شوید به درستی طبق برنامه کار می‌کند. فتوشاپ شما را قادر می‌سازد تا آن را در برنامه مشاهده کنید بدون اینکه نیاز به ذخیره آن در فرمت فایل باشد. برای پیش نمایش گیف متحرکتان فقط کافی است برروی گزینه Play (پخش) در Timeline کلیک کنید.
گام نهم: گیفتان را در فتوشاپ ذخیره کنید سپس آن را خارج نمایید
اکنون زمانِ ذخیره کردن گیف در فتوشاپ رسیده است. توجه داشته باشید که باید گیف را کمی متفاوت با چیزی که به آن عادت دارید (دستور ذخیره‌سازی عادی) ذخیره کنید. باید به بخش File > Export > Save for Web (Legacy) بروید. مراحل را دنبال کنید، فایل را نامگذاری کنید و تمام! ذخیره کردن گیف در فتوشاپ تا این حد آسان است.
وقتی عملیات خارج کردن را انجام دادید آن را در خارج از فتوشاپ نیز تست کنید (و می‌توانید از افراد خلاق دیگر بازخورد کسب کنید) چون ممکن است گاهی اوقات ناسازگاری‌هایی وجود داشته باشد که از قلم انداخته‌اید. همچنین خودِ سند را ذخیره کنید زیرا بعدأ به فایل PSD نیاز پیدا خواهید کرد اگر قرار باشد چیزها را ویرایش کنید.
کار با ویدیو
همچنین می‌توانید از فتوشاپ برای ساخت فایل‌های گیف متحرک از کلیپ‌های ویدیویی استفاده کنید. برای انجام این کار به بخش File > Import > Video Frames To Layers مراجعه کنید. با انجام این کار یک کادر دیالوگ باز می‌شود که درمورد فایل ویدیویی مورد نظر سئوال می‌کند. ویدیوتان را انتخاب کنید تا هزاران گزینه دیگر برایتان باز شود.
نکته در اینجا این است که باید مجموع تعداد فریم‌ها را محدود کنید، به ویژه اگر ویدیو طولانی‌تر از چند ثانیه باشد. در غیر این صورت، هزاران فریم خواهید داشت و در نتیجه هماهنگی چیزها غیرممکن خواهد شد.
برای محدودسازی فریم‌ها چند گزینه پیش روی شما وجود دارد. می‌توانید از دیالوگ موجود برای برش بخش خاصی از ویدیو استفاده کنید (از طریق دکمه رادیویی Selected Range) یا گزینه Limit To Ever Frames را انتخاب کنید و مجموع تعداد فریم‌هایی که باید محدود شوند را تعیین کنید. برای مثال، اگر برروی چک‌باکس کلیک کردید و عدد «4» را وارد کردید برنامه فقط هر چهار فریم ویدیو را در فتوشاپ وارد می‌کند. این امر را بخاطر بسپارید زیرا بیشتر ویدیو غالبأ از 20 تا 30 فریم در ثانیه استفاده می‌کند. به تمام فریم‌ها برای یک گیف نیاز ندارید، بنابراین آن را سبُک و قابل ویرایش نگه دارید!
گیف‌هایتان را با دنیا به اشتراک بگذارید
گیف‌های متحرک نوع قدرتمندی از رسانه هستند که احتمالأ برای مدت‌های طولانی ماندگار خواهند شد و مخاطبان مشتاقانه از آن‌ها استفاده می‌کنند. وقتی یاد گرفتید چگونه یک گیف در فتوشاپ درست کنید باید آن را در نمونه کار طراحی آنلاین‌تان درج کنید و دیوانه‌کننده‌ترین انیمیشن‌هایتان را به نمایش بگذارید.
آیا یک نمونه کار آنلاین ندارید؟ می‌توانید از یک سازنده وب‌سایت بخواهید ظرف چند دقیقه برایتان بسازد. اطمینان حاصل کنید که برنامه کار آنلاین‌تان با ویژگی‌های طراح همخوانی داشته باشد، مثل تم‌های جالب و تایپوگرافی هوشمندانه و گالری‌های نمایش برای مخاطب، بنابراین مشتریان شما می‌توانند آن‌ها را در سایتتان ملاحظه کنند. در اینجا وب‌سایت‌های جالب طراحان و برنامه کارهای مملو از گیف‌های متحرک را ملاحظه کنید و می‌توانید از آن‌ها الهام بگیرید.
چگونه می‌توانید از گیف‌ها در بازاریابی‌تان استفاده کنید؟
۱.در رسانه‌های اجتماعی
پینترست اولین رسانه‌ای بود که گیف‌های متحرک را معرفی کرد و پس از آن تویتر از آن‌ها استفاده کرد. و تا تابستان سال ۲۰۱۵ فیسبوک نیز وارد قضیه گیف شد. سپس اینستاگرام با بومرنگ بازی را عوض کرد؛ بومرنگ کاربران را قادر ساخت تا فیلم بگیرند و گیف خودشان را به اشتراک بگذارند. در هریک از این رسانه‌های اجتماعی گیف‌های متحرک روش فوق‌العاده‌ای برای دوام رسانه هستند.
۲.در ایمیل‌هایتان
گیف‌های متحرک به شکل یک تصویر عادی در ایمیل نمایش داده می‌شوند. بنابراین چرا با جایگزین کردن تصاویر ثابت با گیف‌های متحرک به ایمیلتان رونق نمی‌دهید؟
نه تنها این کار توجه مخاطبان را به خود جلب می‌کند بلکه می‌تواند تأثیر مستقیمی بر کار شما بگذارد. برای برخی از برندها درج یک گیف متحرک در ایمیل‌ها با ۱۰۹% افزایش درآمد همبستگی دارد. از گیف‌ها برای نمایش محصولات، اطلاعیه رویدادها یا اغوای مخاطبان استفاده کنید.
۳.در پست‌های بلاگ
پست‌های شما ضرورتأ نباید درباره گیف‌های متحرک باشد یا مثل فهرست به سبک BuzzFeed ساختاربندی شده باشد تا بتوانید گیف‌ها را در آن‌ها درج کنید – اگرچه هر از چندگاهی با گیف‌های احمقانه زیادی مواجه می‌شویم.