چگونگی ترکیب عکس و متن در طراحی

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

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

۱. ترکیب بندی

ترکیب عکس و متن ، Vedad Siljak

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

اما متن، تنها نیمی از معادله است؛ چگونگی ظاهر شدن عکس در طراحی شما، به همین اندازه اهمیت دارد. پس شما باید به دو نکته زیر توجه کنید:

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

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

ترکیب عکس و متن ، From Up North.

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

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

ترکیب عکس و متن ، Dwinawan Hariwijaya.

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

ترکیب عکس و متن ، Andrea Brunty.

و نمونه زیر، از انواع مختلف بریدن استفاده کرده است که اجازه داده عکس ها درون شکل حروف قرار بگیرند:

ترکیب عکس و متن ، Amanda Jewell.

۲. نقطه کانونی

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

ترکیب عکس و متن ،  Epiphany Search.

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

ترکیب عکس و متن ،  Andrew Reifman.

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

ترکیب عکس و متن ، Tal Goretsky.

۳. تعادل

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

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

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

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

ترکیب عکس و متن ،  Dave and Misi Narcizo.

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

ترکیب عکس و متن ، Stefan Belavy.

۴. انتخاب عکس

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

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

ترکیب عکس و متن ، Jarrod Taylor.

نمونه بسته بندی های زیر، یک مثال دیگر در این زمینه است: چه راه بهتری غیر از استفاده از عکس های رنگی از سبزیجات برای نشان دادن اینکه محصول شما تازه و سالم است، وجود دارد؟ علاوه بر این، فونت ها در نوشته های fresh، farmer’s Market، seasonal یکسان حفظ شده است. متن و عکس ها به خوبی توانسته اند، یک پیغام مشابه را منتقل کنند.

ترکیب عکس و متن ، Cowan.

۵. پس زمینه ی متن

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

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

ترکیب عکس و متن ،  Erik Marinovich.

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

ترکیب عکس و متن ، Via Yoplait.

ادیت یا اضافه کردن یک افکت به عکس: فرض کنیم که شما یک عکس خوب برای پروژه کاری خود یافته اید، اما برای اینکه متن خود را در آن قرار دهید، مناسب نباشد. شاید فضای خالی کافی نداشته باشد، یا جزئیات جذاب زیادی در آن موجود باشد. شما همچنان می توانید از آن استفاده کنید، اما باید تلاش بیشتری برای اینکه متن شما، در ذهن باقی بماند و به طراحی بنشیند، بکار برید. راه های مختلفی برای انجام دادن این روش از جمله موارد زیر وجود دارد:

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

ترکیب عکس و متن ، Charley Massiera.

ترکیب عکس و متن ، Caleb Royce Lummer.

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

ترکیب عکس و متن ، Christopher Lee.

ترکیب عکس و متن ، Ludmila Shevchenko.

• روشن تر یا تیره تر کردن عکس: اگر ترجیح می دهید که المان مازادی را به لایه خود اضافه نکنید، پس بهتر است خود عکس را ادیت کرده تا به ماندگاری متن شما کمک کند.

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

ترکیب عکس و متن ، Simon Robinson.

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

ترکیب عکس و متن ، Kyril Ku.

۶. رنگ و کنتراست در ترکیب عکس و متن

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

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

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

ترکیب عکس و متن ، Family Design Co.

ترکیب عکس و متن، Sam Thibault.

• استفاده از رنگ های متضاد: برای داشتن یک ظاهری دراماتیک تر، از ترکیب رنگ هایی که در کنتراست با رنگ عکس می باشد، استفاده کنید. چرخه رنگ ها، یک محل مناسب برای پیدا کردن رنگ های مکمل، یا متضاد، است، جفت رنگ هایی مانند آبی و نارنجی یا بنفش و زرد، مانند طراحی های زیر.

ترکیب عکس و متن ، Vedad Siljak.

ترکیب عکس و متن ،  Stink Digital / Razorfish / Spotify.

کنتراست. شما می توانید از طریق رنگ ها، (مانند آنچه که در مثال های قبل دیده اید)، در عکس کنتراست ایجاد کنید،  اما روش های دیگری مانند کنتراست در اندازه، مکان، شکل و بیشتر نیز مفید خواهند بود. طراحی های کارت پستال زیر،  از تمام این ویژگی ها استفاده کرده اند: رنگ صورتی سالمون، یا رنگ آبی و سبز درون عکس، کاملاً در تضاد است؛ اندازه کلمات با همدیگر، کنتراست ایجاده کرده است، همانند اشکال متنی در انتخاب فونت ها؛ که حالت جهت گیری انحنایی کلمه ی ROAD کاملاً با انواع دیگر تایپوگرافی های طراحی در تضاد است (اما از انحنای تپه پیروی می کند). تمام این گزینه ها، برای شما ترکیب بندی بصری زیبایی را فراهم کرده و به متن شما کمک می کند تا در خاطر باقی بماند.

ترکیب عکس و متن ، طراحی با Andrew Pennington.

الهام بیشتر 

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

این تراکت : ۱) از یک عکس که دارای یک فضای خالی محو در بالای آن است برای متن استفاده کرده است (کمی نیز آن را روشن کرده است)؛ ۲) رنگ متن را از درون عکس به بیرون کشیده است (نگاهی به رنگ بلیز مرد و متن بالای آن بیاندازید).

ترکیب عکس و متن ، طراحی توسط Family Design Co

کاور مجله : ۱) از اشکال مختلف پس زمینه ای برای متن، در کاور رویی کتاب استفاده کرده است، ۲)  اما فضای خالی در کاور پشتی، از اشکال عکس نیز پیروی کرده است؛ ۳) متونی با رنگ های کنتراست (آبی و نارنجی، یکی دیگر از جفت رنگ های مکمل در چرخه ی رنگ می باشد).

ترکیب عکس و متن ، Behance توسط Ryan Szulc

صفحه اول سایت:  یک ترکیب بندی متعادل عمودی؛ ۲) متن/عکس را مکمل و حامی یکدیگر، هردوی این ترم ها، همدیگر را چه از جنبه ی بصری و چه از جنبه ی پیغامی /موضوعی، حمایت کرده و مکمل هم هستند.

ترکیب عکس و متن ، Dribbble توسط Elliott Munoz

کاور کاتالوگ: ۱) یک لایه متعادل کننده دارد؛ ۲) عکس و متن در طراحی به گونه ای ترکیب شده است که به آن عمق دهد، عکس محصول شرکت را نشان داده و متن، فواید آن را توضیح می دهد.

ترکیب عکس و متن ، Dribbble توسط Jarad Johnson

بروشور: ۱) از یک بخش خارج از فوکوس برای قرار دادن متن استفاده کردند؛ ۲) از رنگ های شاد برای بخش های خاصی از متن استفاده کنید، تا متن بیشتر در ذهن باقی بماند.

ترکیب عکس و متن ، Print Only توسط Brownstein Group

در انتها

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