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

ادامه مقاله قسمت اول

 

2- نوشتن متن بر روی تمام صفحه

مانند روشی که در قسمت قبل ذکر کردم ( استفاده از اسکریم ) ، این روش بر اساس استفاده از یک صفحه خالی یکدست با رنگ مشکی و 40 درصد opacity است .

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

بنابراین بخاطر اینکه متن تمام صفحه شما را می پوشاند بهتر است که تمام عکس را کمی تیره کنید .

در عکس بالا لایه ای با 40% شفافیت سیاه رنگ بکار رفته است .

مزایا :

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

معایب :

باعث تیره و مبهم شدن عکس می شود
باعث قربانی شدن قابلیت دید عکس می شود
اهمیت عکس را در حد تزیین پایین می آورد
حالا چند نمونه از جاهایی که از این روش استفاده شده نشان می دهم :

 

 

در نظر داشته باشید که تصاویر بخش غالب رابطه کاربری هستند . اگرچه ، متن نوشته شده بر روی آنها بیشتر به چشم می آیند و تاثیر غالب را دارند .

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

 

 

3-  صفحه تمام رنگی (color overlay)

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

استفاده از صفحه رنگی بهترین راه برای خنثی کردن شلوغی های یک عکس است . این روش با استفاده از کمرنگ کردن تمامی رنگ های مختلف ، حالتی مانند monotone روی عکس ایجاد می کند.

معمولا برای این کار از رنگ برند استفاده می کنند .

 

4- soft gradients

برای استفاده از این تکنیک به یاد داشته باشید ، متن شما باید به اندازه کافی contrast داشته باشد .

همچنین در این روش از رنگ های ناهماهنگ (jarring colors) استفاده نکنید بلکه رنگ ها را طوری انتخاب کنید که با هم هماهنگ باشند .

برای انتخاب رنگ های مناسب برای این تکنیک می توانید از Coolors و Kuler by Adobe استفاده کنید . این وب سایت ها به شما کمک می کنند که رنگ های متناسب با هم را پیدا کنید.

در اینجا یک مثال از کاربرد صحیح این روش به شما نشان می دهم.

مزایا :

تاکید بهتر بر روی برند ( اگر برند دارای رنگ باشد )
تون تک رنگ (single color tone) کنتراست بهتری برای متن ایجاد می کند.

معایب :

بدلیل مشخص نشدن جزییات عکس ، برای عکس از چهره افراد مناسب نیست
لینک زیر مجموعه ای از soft gradient های فوق العاده ای است که می توانید از آنها استفاده کنید : 
dribbble.com/

 

5- تصویر نیمه شفاف (semi-transparent image)

این روش برپایه استفاده از یک تصویر نیمه شفاف بر روی یک رنگ solid در پس زمینه استوار است . این متد باعث ملایم شدن تصویرهای پس زمینه شلوغ و درهم می شود که منجر به چشمگیر شدن متن می شود .

این تکنیک شامل ایجاد 3 لایه است :

لایه زیرین : رنگ solid
لایه میانی : تصویر نیمه شفاف ( 40% opacity )
لایه رویی : متن

مزایا :

درصورت استفاده از رنگ های ملایم ، متن خوانا تر می شود
استفاده از تصویر monotone ، نویز در تصویر را کاهش می دهد

معایب :

ممکن است باعث از بین رفتن جزییات مهم تصویر شود
فقط مناسب تصاویر دکوری زیباست

 

6- Blur

استفاده از یک بلور گاوسی (Gaussian blur) باعث ملایم تر شدن تصویر شده که نهایتا باعث خوانایی بهتر متن می شود .

بلور گاوسی عبارتست از کاهش نویز و جزییات تصویر

کسانی که از دستگاههای مبتنی بر iOS استفاده می کنند با این روش آشنا هستند . طراحان iOS از بلور برای ایجاد عمق استفاده می کنند . در حالیکه طراحان اندروید (material design) از سایه ها برای ایجاد عمق سود می برند .

در عکس بالا سمت چپ از بلور 16 پیکسل استفاده شده و در عکس سمت راست از بلور 4 پیکسلی . مطمئن شوید از بلوری استفاده می کنید که تصویر پس زمینه را کاملا محو نکند .

مزایا :

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

معایب :

بطور کامل عکس را قربانی متن می کند
همچنان مشکل هم رنگی متن و عکس را حل نمی کند
در دنیای مبتنی بر material design نیازهای شما را براورده نمی کند.

 

7- Text highlight

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

این روش ، زمانی که متن کوچک است و فضای کافی در عکس وجود دارد بسیار کارامد است .

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

مزایا :

خوانایی بسیار خوب متن نوشته شده روی عکس
کنتراست خوب

معایب :

استفاده از رنگ پس زمینه متن ممکن است احساس عدم ارتباط میان متن و عکس ایجاد کند
ممکن است به صورت کامل عکس پس زمینه را بلاک کند

 

8- سیاه و سفید کردن تصویر

این روش بیشتر بر روی تصویر کار میکند تا متن . اما به هرحال خیلی جاها جواب می دهد.

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

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

به ترکیب بی نقص scrim و سیاه و سفید کردن عکس دقت کنید . این دو متد با هم معجزه می کنند .

 

9- بازی با رنگ ها و جای عناصر

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

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

به جاگذاری هوشمندانه متن که دور از عکس می باشد دقت کنید . همچنین رنگ ملایم پس زمینه ، خیلی گیج کننده نیست . هر دو این عوامل باعث خوانایی و جلب توجه متن ها می شود .

 

کنتراست

کنتراست عبارتست از ایجاد تمایز شدید میان اجزای متعامل و نزدیک به هم

متوجه نکته شدید ؟ تمامی تکنیک هایی که گفتم برای افزایش کنتراست متن بود . کنتراست عاملی است که باعث دیدن یک المان از المان های همراهش می شود . همیشه برای خوانایی متن باید کنتراست بالایی میان تصویر با آن وجود داشته باشد .

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

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

 

خلاصه

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

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

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

شما میتوانید تکنیک های گفته شده را با هم ترکیب کنید . تنها محدودیت شما ، تصورات شماست .

خوب ، در انتهای مقاله نظرتان چیست ؟ آیا تکنیکی را جا انداختم ؟ آیا شما تکنیکی دارید که لازم است به این لیست اضافه شود ؟ اگر نظری دارید لطفا از طریق ایمیل زیر با من در میان بگذارید:

hooman_the1@yahoo.com