مخلوط کردن نوع و تصویر: نحوه مدیریت برخورد کنترل شده


با تنظیم تصاویر در نوع، می توانید بیش از کلمات یا تصاویر به تنهایی بیان کنید.

اثر اطلاعات زیادی را در فضایی تنگ بسته بندی می کند. اما اگر متن و تصویر با یکدیگر تضاد داشته باشند، ممکن است زشت شود.

طراحان می‌توانند با در نظر گرفتن هدف خود از فاجعه دوری کنند: بیان ایده به وضوح باید بر فاکتور “وای” تکنیک برتر باشد.

تنظیم تصاویر مستقیماً در متن، ارتباط مستقیم کلمات را با جلوه احساسی عکس‌ها ترکیب می‌کند.

کلمات بیان می‌شوند و عکس‌ها بیان می‌شوند. اما وقتی تصاویر گم می شوند یا متن درهم می شود یا هر دو، دچار تضاد می شویم. تصاویر و متن را می توان به طور یکپارچه با هم هماهنگ کرد، اما تنها در صورتی که از دستورالعمل هایی پیروی کنیم که خوانایی هر دو را متعادل کند. برای آشنایی با نحوه ترکیب مؤثر متن و تصاویر، به ادامه مطلب بروید.

 

تعادل خوانایی متن و تصویر

شکل حروف را به عنوان قاب عکس در نظر بگیرید … هر چند غیر معمول. تنظیم یک تصویر در متن مستلزم حذف تکه های تصویر است. برای حفظ خوانایی تصویر، باید تصمیم بگیرید که کدام بخش از تصویر اهمیت دارد. اگر حروف خیلی روی عکس نفوذ نکند، بهتر است.

sample of how letters cut into photos

در بالا، دو مثلث از بالا و پایین به عکس بریده شده است. این برای متن خوب است، که اکنون یک “N” قابل تشخیص است، اما برای عکس بد است، زیرا برخی از جزئیات از نقطه کانونی تصویر (یعنی گل) حذف شده است.

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

sample of text too thin for the photo within

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

thicker text shows more image

تغییر تایپ فیس به Myriad Pro Black بیشتر عکس را نشان می دهد. خواندن متن سخت‌تر است، زیرا جزئیات بیشتری وجود دارد که توجه را جلب کند، اما کلمه «بهار» خوانا است.

انتخاب یک حروف ضخیم کافی نیست. می‌توانیم با ردیابی کلمه، خوانایی تصویر را یک مرحله دیگر بهبود دهیم، بنابراین را اعمال کنیم. اصول گشتالت—مخصوصاً «شدن‌سازی»، اصطلاحی از روان‌شناسی گشتالت است که توصیف می‌کند چگونه با ذهن خود تصاویر و اشکال کامل می‌سازیم، حتی زمانی که به چشمان ما فقط تکه‌ها یا نکاتی داده می‌شود.

better kerning helps the photo

در بالا، حروف در کنار هم قرار می گیرند تا “مرحله” منسجمتری ایجاد کنند که عکس می تواند در آن ظاهر شود.

در جزئیات 1، حروف عمداً روی هم قرار گرفته اند تا کل اشکال را در عکس نشان دهند – اما نه آنقدر که کلمه را مبهم کنند.

در جزئیات 2، سه حرف با اضلاع عمودی به اندازه کافی از هم فاصله دارند که بتوانید آنها را به عنوان حروف تشخیص دهید، اما به اندازه ای نزدیک هستند که اجازه می دهند گلبرگ های گل در میان شکاف های سفید “پرند”. خطوط سیاه خطوط ضمنی را نشان می دهند که افراد به طور ناخودآگاه به هم متصل می شوند. حداقل یک خط دید گشتالت دیگر بر روی حروف کلمه بالا حرکت می کند. اگر آن را مشاهده کردید، در زیر نظر بدهید.

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

careful kerning keeps letters readable

در اینجا، حروف با خطوط منطبق (مانند اضلاع عمودی “r”، “i” و “n”) وقتی با هم فشرده می شوند به راحتی خوانده نمی شوند. این فضای باز برای عکس خوب است اما برای حروف بد است. البته پیوستن حروفی که شکل آنها مطابقت دارند همیشه ایده بدی نیست، اما باید تا حد امکان خوانا باشند.

 

عکس‌های Mo’، مشکلات Mo’

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

sample of twelve letters with many different images

“تابستان فعال” نوع خاصی از تصاویر را تداعی می کند. ترکیب فوق دارای امتیازاتی است. عکس های مختلفی را نشان می دهد: پرتره، ماکرو، مناظر. متن در یک بلوک زوج تنظیم شده است. و فونت به اندازه کافی ضخیم است که بیشتر تصاویر را نشان دهد. اما مشکلاتی وجود دارد.

diagram of the problems

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

improved composition with photos

تغییرات عمده ما در اینجا عبارتند از:

  • تصویر شخص در “S” به “e” در “فعال” منتقل می شود.
  • تصاویر جدید در “m”، “e” و “r” در “تابستان” تنظیم می‌شوند.
  • تصویر شخص در “e” در “تابستان” به “u” منتقل می شود.
  • تصویر رودخانه در تابستان از “i” به “S” منتقل می شود و برای آشکار کردن منبع آن کوچک می شود.
  • تخته غواصی به “i” منتقل می شود و غواص در نقطه بالا قرار می گیرد.
diagram of the solutions and remaining problems

این بهتر است، اما کامل نیست. دومین “m” هنوز در پس زمینه گم می شود. همچنین، افزودن عکس‌هایی با رنگ‌های زنده، پالت رنگ را گسترده‌تر می‌کند که می‌تواند مشکل‌ساز باشد. بیایید دوباره امتحان کنیم.

remaining solutions

می‌توانیم مرزهای نازکی را به “e” در “فعال” و “m” دوم در “تابستان” بدهیم. حاشیه‌ها در اینجا عمداً کم رنگ (45% کدورت) نگه داشته می‌شوند تا توجه را به خود جلب نکنند. ما همچنین می توانیم “S” را در “تابستان” یک حاشیه بگذاریم، اما فقط در صورت لزوم (در آب سفید). حاشیه‌ها فقط در جایی ضروری هستند که عناصر رنگ روشن با پس‌زمینه سفید برخورد کنند.

«r» در «تابستان» دارای ابرهای سفیدی است که در پس‌زمینه ترکیب می‌شوند. اما طراح تصمیم گرفت که شکل “r” هنوز خوانا باشد، بنابراین حاشیه لازم نیست.

گاهی اوقات وقتی به دنبال مشکل هستید راه حل ها ظاهر می شوند. برای مثال، در طول سومین دور تغییرات ما در بالا، طراح غواص گلوله توپ را از پس‌زمینه جدا کرد، که تعامل مستقیم‌تری بین تصویر و متن ایجاد می‌کند.

آخرین لمس ترکیب رنگ ها است. این هر کلمه را متحد می کند.

photos in text, tinted

از تغییرات جزئی رنگ به یکنواختی کامل، هر کلمه بالا درجات مختلفی از رنگ دریافت می کند. با وجود تنوع موضوعات، مقیاس‌ها و زوایای مختلف، رنگ‌های مشابه به هر کلمه کمک می‌کند تا سر جای خود بماند. آیا این لازم است؟ بستگی به اهداف فرد دارد.

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

 

کاهش، استفاده مجدد و بازیافت عکس‌ها

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

در واقع، تنها هفت عکس در این ترکیب استفاده شده است. دو مورد از هفت مورد فقط یک بار استفاده شد. یکی سه بار استفاده شد. نگاهی بیندازید:

seven images used over twelve letters

تنظیم عکس‌ها به شکل حروف همیشه نیاز به برش دارد، بنابراین تصاویر شلوغ – مانند عکس چهار نفر – را می‌توان به روش‌های مختلف برش داد و بارها از آنها استفاده کرد.

 

تغییر متن به تصاویر متناسب

دو کلمه‌ای که به تازگی با آنها سروکار داریم، “تابستان فعال”، با حروف یکسان اما در اندازه‌های نقطه متفاوت تنظیم شده‌اند تا لبه‌هایشان ثابت بماند. هنگام استفاده از یک حرف در هر تصویر، تصمیم طراحی دلخواه است. با این حال، هنگام برخورد با یک تصویر واحد، شکل متن بسیار مهم است. بهترین کار این است که شکل کلی متن را تا حد امکان نزدیک به نسبت های تصویر نگه دارید. به عنوان مثال:

samples of text shapes

“خانه اسپرسو” یک عبارت طولانی است که برای یک تصویر 4×3 مناسب نیست. راه حل این است که متن را متناسب با عکس تطبیق دهید:

  • کلمات برای ایجاد یک بلوک روی هم چیده می شوند.
  • کلمه “خانه” به گونه ای بزرگ شده است که لبه های چپ و راست آن با “اسپرسو” مطابقت داشته باشد.
  • “H” در “house” بزرگ است، اما کوچک شده تا با ارتفاع “ouse” مطابقت داشته باشد. کمترین فاصله ممکن بین دو کلمه باقی می ماند.
  • اگرچه همیشه مطلوب نیست، اما در اینجا نزول کننده در «اسپرسو» مجاز است با «o» در «خانه» ملاقات کند.

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

examples of emphasis on the text vs image

می‌توانیم با افزایش کنتراست در لبه‌های حروف (سمت چپ) بر متن تأکید کنیم. برای تاکید بر تصویر، تصویر محو شده را در فضای سفید بین حروف (راست) نشان می دهیم. “Ghosting” متن را درهم می کند اما تصویر را به عنوان یک کل نشان می دهد.

 

نحوه تنظیم تصاویر در متن با فتوشاپ

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

technique, step 1

ابتدا متن را در یک سند فتوشاپ تنظیم کنید. این ترکیب 615 پیکسل عرض دارد زیرا با مشخصات Webdesigner Depot مطابقت دارد. هنگام ایجاد پروژه خود، اندازه آن را با پروژه خود متناسب کنید.

برای اینکه لبه های حروف را به وضوح ببینید، با متن سیاه در پس زمینه سفید شروع کنید. وقتی کارتان تمام شد، شفافیت لایه متن را روی 20% تنظیم کنید.

palette, step 1

بالا، پالت لایه های فتوشاپ در مرحله اول.

technique, step 2

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

palette, step 2

بالا، پالت لایه های فتوشاپ در مرحله دوم.

technique, step 3

سوم، عکس‌ها یا قسمت‌هایی از عکس‌ها را به عنوان لایه‌های جداگانه به ترکیب اضافه کنید. «بریدن» لایه‌ها (لایه → ایجاد ماسک برش) به لایه بالایی (در این مورد، هر عکس) اجازه می‌دهد فقط در جایی ظاهر شود که لایه زیرین (هر حرف) ظاهر شود.

palette, step 3

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

technique, step 4

در صورت نیاز تکرار کنید.

 

تطبیق ایده

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

composition that mixes non-photo imagery with text

به طور انحصاری برای Webdesigner Depot توسط Ben Gremillion نوشته شده است. بن یک طراح وب آزاد است که مشکلات ارتباطی را با طراحی بهتر حل می کند.

برخورد نوع و تصویر را چگونه مدیریت می‌کنید؟ لطفا نظرات خود را در زیر به اشتراک بگذارید…

بدون دیدگاه

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *