تکنیک هایی برای بهینه سازی نوشتن متن بر روی عکس (text overlay)، قسمت اول

 

مقدمه

امروزه نوشتن متن بر روی عکس ، متدی بسیار متداول است . اما عکس ها محدودیتی ندارند و میتوانند هر مدل و هر شکلی باشند . چطور مشکلات این متد را حل می کنید ؟ آیا همیشه متن روی عکس ها ، خوانا می مانند ؟

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

اما نگران نباشید ، من اینجا هستم تا تکنیک هایی را برای خوانایی بیشتر متن های روی عکس ، به شما آموزش دهم .

در ابتدا می خواهم چند طرح (mockup) از text overlay ، به شما نشان دهم .

 

 

 

و یک نمونه دیگر :

 

 

 

اگر کمی حرفه ای باشید ، فورا چالش موجود در این دو طرح را متوجه خواهید شد . طرح دوم را با موج های دریا تصور کنید . اگر کف روی موج ها ، در قسمت پایینی عکس قرار داشت ، متن ها همچنان قابل خواندن بود ؟

بیایید با هم این حالت را به تصویر بکشیم :

 

 

متن ها همچنان خوانایی دارند ؟

البته این عکس هایی که گذاشتم با نمونه ای که نشانتان دادم متفاوت است . اما خوب ، هردو موج دریاست .

تصویر پس زمینه (background image) کاملا آشفته و مشوش است . اما نمیتوان تقصیر ها را گردن عکس انداخت . علاوه بر این وقتی تصمیم گرفتید که از متد نوشتن متن بر روی عکس استفاده کنید ، باید خود را برای مواجهه با هر گونه عکسی آماده کنید .

در اینجا نکته ای رو متذکر می شوم . هر دو طرح هایی که در ابتدا به عنوان نمونه معرفی کردم ، هیچ عیب و ایرادی ندارند . در حقیقت ، من عاشق تایپوگرافی (typography) نمونه دوم هستم . هر دوی نمونه ها توسط طراحان برجسته ای ایجاد شده . اما در نظر داشته باشید بعضی طرح ها فقط برای به رخ کشیدن قدرت ایجاد زیبایی توسط طراحان خلق می شوند و خیلی کاربردی نیستند .

هر کسی که بخواهد این طرح ها را به پروژه های عملی تبدیل کند ، به سرعت متوجه مشکل آنها خواهد شد . نوشته موجود با تصویر پس زمینه هم خوانی ندارد .

این طرح ها فقط به عنوان نمونه ذکر شد . پیش فرض آن اینست که عکس هرچه باشد ، متن خواناست . اما به شما نشان میدهم که این فرض همیشه صحیح نیست .

 

2 مشکل سر راه اجرا متد text overlay

امروزه بخاطر محبوبیت طراحی مبتنی بر کارت (card design) ، متد text overlay هم همراه با آن متداول شده است زیرا معمولا card design همیشه با یک تصویر و نوشته ای روی آن همراه است . خوب ، این روش بدی نیست ، اما در نظر داشته باشید ، 2 نکته معمولا در این میان نادیده گرفته می شود .

 

 

 

وقتی متنی را بر روی تصویر قرار می دهید ، دو چیز را قربانی می کنید :

خوانایی متن

خوانایی عبارتست از راحتی کاربر برای فهمیدن متن نوشته شده . خوانایی ، فاکتوری است که نشان می دهد یک کاربر چقدر میتواند کارکترها و حروف را از هم تشخیص دهد .

 ویکی پدیا  

نوشتن متن ، باعث می شود که تصویر بصورت کامل دیده نشود . علاوه بر این ، متن هم ممکن است مانند قبل خوانا نباشد .

باز هم تاکید می کنم ؛ در این متد ، تصویر، هرچیزی ممکن است باشد !
تصاویری که تا اینجا به شما نشان دادم بیشتر mockup بودند یعنی شامل موارد ایده آل بودند و متن ها کاملا با تصاویر همخوانی داشتند . در صورتی که کمی شرایط را تغییر دهیم ، ناگهان همه چیز به هم می خورد مثلا متن هایی با رنگ سفید بر روی تصاویر روشن و یا تصاویری با تم سفید تبدیل به ترکیبی وحشتناک می شود . همینطور است ترکیب آن با تصاویری با تم تیره یا مشکی .

حالا که چالش های بکارگیری این متد را فهمیدیم ، راه حل های موجود را نیز توضیح میدهم .

 

راه حل هایی برای مشکلات استفاده از text overlay

برای رسیدن به خوانایی متن در این متد چندین راه حل وجود دارد . میخواهم این موضوع را برایتان روشن کنم بهترین راه حل وجود ندارد بلکه در هر شرایطی یکی از این روش ها برای شما مناسب خواهد بود .

علاوه بر این ، تصمیم گیری برای استفاده از هرکدام از این راه حل ها بستگی به شخص شما دارد . اینکه به نظرتان در هر پروژه خاص کدامیک برطرف کننده نیازهای شما می باشد .

 

1. استفاده از scrim

اسکریم ، عبارتست از یک لایه گرادیانی نیمه شفاف (semi-transparent gradient layer) که کمک می کند متن نوشته شده بر روی پس زمینه خواناتر شود .

یک اسکریم ، صفحه ای است با گرادیانی از یک رنگ ثابت به یکرنگ شفاف که در پس زمینه متن قرار می گیرد . برای مثال بر روی یک اسکریم با گردیان 40% مشکی تا کاملا شفاف میتوانید متنی با رنگ سفید قرار دهید .

من تصمیم در مورد مقدار شفافیت را برعهده شما می گذارم چون این مورد کاملا سلیقه ایست .

اما به نظر من 40% مشکی به کاملا شفاف نتیجه خوبی می دهد . این ترکیب نه خیلی شفاف است و نه خیلی مزاحم تصویر میشود و با محو شوندگی آرام خود ، کنتراست مورد نیاز برای خوانایی متن را ایجاد می کند .

 

 

دستورالعمل های پیشنهادی برای استفاده از Scrim :

بین 30 تا 70 درصد opacity (به نظر من 40% ایده آل است )
غلظت رنگ مشکی بین 0% تا 100%
اندازه : 50% ارتفاع عکس
اینها قوانین کاملا منعطف و پیشنهادی هستند . اما همانطور که در تصاویر بالا می بینید به خوبی کار می کنند .

در ضمن Matrial Design هم در دستورالعمل خود نکاتی را در این مورد ذکر کرده است .

 

 

مزایا :

سادگی و فراوانی استفاده

افزایش کنتراست برای خوانایی بهتر متن

تغییر نامحسوس در طراحی

معایب :

گرادیان شدید باعث از بین رفتن پیوستگی عکس می شود

در صورت غلظت بالا ، باعث دیده نشدن عکس می شود

امروزه استفاده از scrim ، با اختلاف متداول ترین راه حل برای مشکلات نوشتن متن بر روی عکس است .

 

اما عجله نکنید ! چندین روش دیگر نیز برای رفع مشکلات این متد به شما نشان میدهم که شاید برای شما بهتر از scrim باشد .

 

در قسمت دوم این مقاله با ما باشید