تکنیک سینماگراف در طراحی سایت

تکنیک سینماگراف در طراحی سایت

سینماگراف به نوعی تلفیق عکس و حرکت (ویدیو) اطلاق می شود که، قسمت اعظم تصویر مانند عکس ثابت و در سکون می باشد و تنها بخشی از آن مانند ویدئو متحرک می باشد. تصاویر سینما گراف با فرمت های ویدئویی مانند Mp4، GIF، MOV و غیره ساخته می‌شوند و افتکت ها و اکشن های ساده ولی تاثیرگذار و شگفت انگیز به وجود می‌آورند. تصویری که در زیر مشاهده می کنید، نمونه‌ای زیبا از تصاویر سینماگراف می باشد.

تکنیک سینماگراف در طراحی سایت

استفاده از فایل های gif در طراحی سایت و به ویژه بنرهای تبلیغاتی نقش بسیار پررنگی داشت ولی با تغییر الگوریتم های بهینه سازی و البته پیشرفت HTML5 و CSS3 بنرهای تبلیغاتی مدرن جایگزین آنها شدند.

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

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

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

چرا سینماگراف :

ایده دنبال کردن یک ترند جدید فقط به این خاطر که رایج شده به هیچ وجه ایده خوبی نیست. ولی اگر این ترند تأثیر زیادی داشته باشد و هدفمند باشد چرا که نه؟
چشم انسان حرکت را دوست دارد
سینماگرافی به عنوان یک ترند جدید در طراحی سایت پیش بینی شده ولی هنوز تعداد کمی از وب سایت ها شروع به استفاده از آن کرده اند و آنقدرها رایج نشده، بنابراین هنوز برای اکثر کاربران وب یک ویژگی جدید و جالب میباشد.
سینماگراف ها نه کاملاً تصویر هستند نا کاملاً ویدئو، در واقع ترکیبی از این دو هستند که با حرکت های کوچک باعث جلب توجه کاربر و درگیر کردن ذهن میشوند. همانطور که میدانید هر چیزی که باعث حتی لحظه ای توقف و توجه کاربر شود برای وب سایت یک امتیاز و برد محسوب میشود.
یکی از مؤثرترین راه های جلب توجه کاربر، ویدئو میباشد زیرا چشم انسان حرکت را دوست دارد. ولی یک ویدئوی خوب برای صفحه اصلی مسلماً حجم زیادی هم خواد داشت بنابراین ممکن اسن بر روی سرعت لود سایت اثر منفی بگذراد.
با استفاده از سینماگراف هم پهنای باند کمتری نیاز دارید و هم آپشن حرکت را فراهم کرده اید. همچنین با توجه به جدید بودن این مفهوم میتوانید بر جنبه تازگی و جذابیت سینماگراف هم تکیه کنید. کاربران در هر سایتی با این ویژگی مواجه نمیشوند بنابراین دیدن آن در سایت شما برای کاربر تازگی و جذابیت دارد و آن ها را تحت تأثیر قرار میدهد.

نحوه پیاده سازی سینما گراف درطراحی سایت :

• استفاده از سینماگراف آماده
  تعداد زیادی از فایل های gif یا همان سینماگراف های آماده وجود دارد که میتوانید از آن ها استفاده کنید. اگر میپرسید که سینماگراف آماده بهتر است یا چیزی که اختصاصی برای خودتان طراحی شده باید بگویم که اگر چیزی به صورت آماده وجود دارد که جوابگوی تمام نیازهای شماست چرا که نه، میتوانید از آن استفاده کنید. خوب حال سؤال بعدی این است که سینماگراف های آماده را از کجا پیدا کنیم؟
  خبر خوب این است که گزینه های زیادی در اختیار شماست. سینماگراف های آماده از نوع پولی که میتوانید با توجه به بودجه تان از بین آن ها انتخاب کنید و یا حتی سینماگراف های آماده به صورت رایگان هم هستند که میتوانید در این سایت freecinemagraphs.com وgallereplay.com آن ها را ببینید و برای تولید سینماگراف برای ios استفاده از ابزارهای flixel.com و برای اندروید نرم افزار Loopsie پیشنهاد میشود.
• ایجاد سینماگراف اختصاصی
  شاید نتوانید چیزی را که میخواهید در بین سینماگراف های آماده پیدا کنید یا حتی شاید تمایل دارید که یک سینماگراف منحصر به فرد و مخصوص به خودتان داشته باشید. سینماگراف دقیقاً چطور ساخته میشود؟
  خوب آیتم های زیر را برای شروع باید داشته باشید:
  • دوربین فیلمبرداری یا هر دوربینی که بتوان با آن فیلم گرفت
  • یک ۳ پایه
  • یک مدل یا هر چیز دیگری که لازم است
  • یک کامپیوتر
  • نرم افزار ویرایش ویدئو
  • استفاده از فوتوشاپ یا هر نرم افزار ویرایشی دیگر مثل flixel
  اینها تمام چیزهایی هستند که برای ساخت سینماگراف به آن نیاز دارید. ولی از همه مهمتر برای ایجاد یک سینماگراف تأثیرگذار نیاز به ایده ای جالب و خوب دارید.

نحوه ساخت سینما گراف به کمک فتو شاپ :

برای شروع کار ابتدا نیاز به یک ویدیوکلیپ کوتاه دارید.البته اگر ویدیو شما بخشی از یک ویدیو بزرگ‌تر است می‌توانید با ابزارهای رایگان موجود آن بخش مورد نظر را جدا کنید. در نهایت ویدیو را از آدرس File » Import » Video Frames to Layers درون فتوشاپ اضافه کنید.

بر اساس اندازه و کیفیت ویدیو، مقداری طول می‌کشد تا به برنامه اضافه شود.

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

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

حالا کلیدهای CTRL+G در ویندوز یا Command + G در مک را بزنید یا از منوی Layer » New روی گزینه Group From Layers را کلیک کنید.

سپس باید از آدرس Layer » Layer Mask گزینه Reveal All را بزنید تا به لایه ماسک اضافه شود.

بعد از اینکه ماسک را اضافه کردید کلیدهای Ctrl + I یا Command + I را بزنید تا رنگ مورد نظر لایه‌ها ست شود.

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

سپس  از منوی Window پنجره Timeline را فعال کنید.  می‌بینید که تمام فریم‌ها به صورت ترانسپرنت در آمده‌اند، غیر از لایه اول.

برای حل این مشکل، روی لایه اول کلیک کنید و از آیکون Unfiy Layer Visibility گزینه Match button را انتخاب کنید.

سپس بر روی آیکون تغییر وضعیت در Timeline کلیک کنید و تمام فریم‌ها را انتخاب کنید. سپس دوباره روی آیکون تغییر وضعیت کلیک کنید و گزینه Copy Frames را بزنید.

بعد از کپی کردن فریم‌ها دوباره به تغییر وضعیت بروید و روی Paste Frames کلیک کنید. در پنجره جدید متد را Paste After Selection انتخاب کرده و اوکی را بزنید.

یک بار دیگر بر روی تغییر وضعیت کلیک کنید (این بار آخر خواهد بود) و گزینه Reverse Frames را انتخاب کنید.

سینما گراف شما تقریبا آماده‌ست. کافی است از آدرس زیر File » Save for Web به تنظیمات ذخیره سازی بروید. در پنجره تازه گزینه گیف را انتخاب کنید و اگر اندازه و تنظیمات دیگر را دوست دارید، تغییر دهید و کار را ذخیره کنید.

نگران اضافه کردن این گیف‌ها به سایت‌های خود نیز نباشید. این گیف‌ها با گیف‌های معمول از نظر عملی تفاوتی ندارد. برای مثال در وردپرس کافی است به سراغ اضافه کردن پرونده چند رسانه‌ای بروید و گیف خود را شبیه به دیگر عکس‌ها به مطلب اضافه کنید.

نکات کاربردی برای استفاده از سینماگراف در طراحی سایت

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

۱- حرکت در تصویر نامحسوس باشد

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

۲- فضا برای پیام خود باقی بگذارید

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

۳- سینماگراف شما تکرار پذیر باشد

به منظور جلوگیری از افزایش حجم فایل و در نتیجه صفحه باید زمان فایل ویدیو یا gif خود را کوتاه کنید. این زمان کوتاه فرصت کافی به کاربر برای درک اتفاقات موجود در تصویر را نمیدهد به همین دلیل همیشه از ویدیوهایی استفاده کنید که تکرار پذیر بوده و انتها و ابتدای مشخصی ندارند. با این روش میتوان یک ویدیوی چند ثانیه ای را حتی برای چند دقیقه نگاه کرد و لذت برد.

۴- در تصاویر خود از انسان استفاده کنید

تحقیقات نشان میدهد تصاویری که در آنها یک انسان حضور دارد جلب توجه بیشتری برای مخاطبین دارند. همچنین اگر فرد موجود در تصویر در حال نگاه کردن به فضای مورد نظر شما (دکمه خرید یا متن مهم) باشد شانس شما برای جلب توجه کاربر و ترغیب به کلیک افزایش پیدا خواهد کرد. تاثیر این تکنیک را میتوان در طراحی سایت شرکتی و یا سایت های خدماتی به وضوح مشاهده کرد.

۵- فایل سینماگراف را بهینه کنید

بهترین راه حل برای شما کوتاه کردن طول ویدیو و البته تکرارپذیر بودن آن است. کاهش کیفیت یا حجم میتواند به کلی اثربخشی آن را از بین برده و حتی برای کاربر آزاردهنده باشد. مشکل حجم را ترجیحا با کوتاه کردن زمان برطرف کنید.

با این وجود ابزارهای متنوعی هستند که بدون کاهش ملموس کیفیت ویدیو حجم آن را تا حد زیادی کاهش میدهند. استفاده از آنها میتواند بر سرعت لود صفحه تاثیر چشمگیری داشته باشد.این یک ترجیح شخصی است، ولی بهتر است که به دنبال بهترین کیفیت باشید. به عقیده من فدا کردن کیفیت برای رسیدن به حجم کمتر مخصوصاً برای فایلی که قرار است مرکز توجه کاربر باشد کار اشتباهی است. برای ایجاد تعادل بین حجم وکیفیت، توصیه میکنم سینماگراف های کوتاه ایجاد کنید(یعنی چرخه حرکت در مدت زمان کمتری اتفاق بیفتد).یک ابزار خوب برای فشرده سازی ویدئو https://clipchamp.com/ میباشد که میتوانید از آن استفاده کنید.