طراحی گرافیک وب همیشه چالشهای جذابی دارد. یکی از تکنیکهای کلاسیک اما ماندگار که میتواند ظاهر بنرهای سایت، هدر وبلاگ یا حتی پوسترهای تبلیغاتی را دگرگون کند، ترکیب تصویر با متن است. شاید برای شما هم پیش آمده که بخواهید لوگوی یک برند را درون اسمش قرار دهید یا یک منظره طبیعی را به جای رنگِ حروف یک تیتر بزرگ نشان دهید. در این مطلب از سری آموزشهای گرافیک، قصد دارم به زبانی ساده و کاربردی به شما نشان دهم که چگونه میتوانید در نرمافزار قدرتمند فتوشاپ (Adobe Photoshop)، عکس دلخواهتان را در دلِ متن جای دهید.
این تکنیک که به آن **«ماسک کردن متن با تصویر»** یا **Clipping Mask** میگویند، راهی عالی برای ایجاد هماهنگی بصری است. بیایید مراحل کار را با هم مرور کنیم.
مرحله اول: انتخاب تصویر و متن مناسب
قبل از هر چیز، باید بدانید که انتخاب درست اهمیت زیادی دارد. تصویری که انتخاب میکنید باید کنتراست کافی با پسزمینه داشته باشد تا وقتی متن روی آن (یا درون آن) قرار میگیرد، خوانا باشد. برای این تکنیک، بهتر است از فونتهای ضخیم (Bold) استفاده کنید. فونتهای ظریف و نازک ممکن است جزئیات تصویر را به خوبی نشان ندهند. فونتهای فارسی مانند «وزیرمتن»، «ایرانسنس» یا «شبنم» با ضخامت بالا، گزینههای بسیار مناسبی هستند.
مرحله دوم: آمادهسازی بوم در فتوشاپ
۱. نرمافزار فتوشاپ را باز کنید و یک سند جدید با ابعاد مورد نظرتان بسازید.
۲. تصویر مورد نظر را در فتوشاپ باز کنید و آن را به سند خودتان درگ کنید (Drag & Drop).
۳. اکنون لایه متن را ایجاد کنید. ابزار تایپ (Type Tool) را انتخاب کنید و متن یا جملهای که مد نظرتان است را بنویسید.
۴. حتماً مطمئن شوید که لایه متن در پنل لایهها (Layers Panel)، **بالای** لایه تصویر قرار گرفته است.
مرحله سوم: اعمال جادوی فتوشاپ (Clipping Mask)
اینجا همان جایی است که اتفاق اصلی میافتد. دو روش برای انجام این کار وجود دارد:
**روش اول (راستکلیک):**
* در پنل لایهها، روی لایهای که تصویر شما در آن قرار دارد راستکلیک کنید.
* از منوی باز شده، گزینه **Create Clipping Mask** را انتخاب کنید.
* بلافاصله خواهید دید که تصویر فقط درون حروف متن نمایش داده میشود و بقیه بخشها محو میگردند.
**روش دوم (میانبر کیبورد):**
* لایه تصویر را انتخاب کنید.
* کلیدهای **Alt** (در ویندوز) یا **Option** (در مک) را نگه دارید و ماوس را روی خط فاصله بین لایه تصویر و لایه متن در پنل لایهها ببرید.注意到 که نشانگر ماوس تغییر شکل میدهد و به یک مربع کوچک تبدیل میشود.
* در همین حالت کلیک کنید.
مرحله چهارم: تنظیم موقعیت تصویر
بعد از اینکه ماسک اعمال شد، ممکن است بخش جذابی از تصویر دقیقاً درون حروف نیفتد. نگران نباشید. ابزار Move Tool (V) را انتخاب کنید، روی تصویر کلیک کنید و آن را جابجا کنید تا بهترین بخش تصویر درون متن قرار گیرد. حتی میتوانید با زدن کلیدهای Ctrl + T (یا Command + T) سایز تصویر را تغییر دهید تا تراکم مناسبی در متن ایجاد شود.
چرا این تکنیک برای وبمسترها مهم است؟
استفاده از این نوع تیترهای گرافیکی در سایت، میتواند نرخ کلیک (CTR) را به شدت افزایش دهد. چرا؟ چون چشم انسان به طور غریزی به ترکیب متن و تصویر جذب میشود. اما نکته مهم برای سئو (SEO) اینجاست: گوگل رباتهایش هنوز نمیتوانند محتوای داخل یک عکس (مثل همین تیتر گرافیکی) را بخوانند.
بنابراین، همیشه یادتان باشد که اگر از این تکنیک برای تیتر اصلی صفحه (H1) استفاده میکنید، حتماً همان متن را به صورت متن ساده (HTML) در کد صفحه یا در بخش Alt Text تصویر نیز وارد کنید تا موتورهای جستجو متوجه موضوع صفحه شما شوند.
**چند نکته طلایی برای نتیجه بهتر:**
* **استفاده از افکتها:** بعد از قرار دادن عکس در متن، میتوانید به لایه متن یک Stroke (خط دور) اضافه کنید تا خوانایی متن در پسزمینههای شلوغ بیشتر شود.
* **سایهزنی:** انداختن سایه (Drop Shadow) زیر متن باعث میشود متن از پسزمینه جدا شده و برجسته به نظر برسد.
* **انتخاب عکس با بافت:** عکسهایی که بافتهای ریز دارند (مثل برگ درختان، آب یا آسمان ابری) برای این کار نتیجههای بسیار زیباتری نسبت به عکسهای تخت میدهند.
این تکنیک یکی از پایهایترین ترفندهای فتوشاپ است که یادگیری آن حداکثر ۵ دقیقه زمان میبرد، اما تأثیر آن روی خروجی نهایی کار شما بسیار شگفتانگیز خواهد بود. امیدوارم از این آموزش لذت برده باشید و بتوانید خلاقیتهای خودتان را در طراحی سایتها پیادهسازی کنید.
