ساخت افکت شیشه ای در فتوشاپ

ساخت افکت شیشه ای در فتوشاپ

آموزش تکنیک ایجاد افکت گلس مورفیسم (Glassmorphism) در فتوشاپ

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

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

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

مرحله اول: انتخاب پس‌زمینه مناسب

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

مرحله دوم: کپی کردن لایه پس‌زمینه

لایه پس‌زمینه را انتخاب کنید و با فشردن کلیدهای Ctrl + J یک کپی از آن بگیرید. این لایه قرار است به‌عنوان لایه‌ی تار (Blurred) استفاده شود.

مرحله سوم: اضافه کردن افکت Blur

لایه کپی‌شده را انتخاب کنید و از مسیر زیر وارد شوید:
Filter > Blur > Gaussian Blur

مقدار Blur را روی حدود 20 پیکسل تنظیم کنید. این عدد می‌تواند بسته به اندازه تصویر کمی کم یا زیاد شود، اما 20px یک مقدار استاندارد و مناسب برای شروع است.

مرحله چهارم: رسم شکل مستطیل با گوشه‌های گرد

حالا از ابزار Rounded Rectangle Tool (کلید U) استفاده کنید و یک مستطیل با گوشه‌های گرد در محل دلخواه بکشید.
این شکل همان کادر شیشه‌ای ما خواهد بود، پس اندازه و محل آن را با توجه به طراحی خود تنظیم کنید.

مرحله پنجم: تنظیم ترتیب لایه‌ها

لایه مستطیل را زیر لایه تار (Blurred Layer) قرار دهید. ترتیب صحیح لایه‌ها نقش مهمی در طبیعی‌تر شدن افکت گلس مورفیسم دارد.

مرحله ششم: اضافه کردن Clipping Mask

برای اینکه افکت بلور فقط داخل محدوده مستطیل دیده شود، باید از Clipping Mask استفاده کنیم.
کلید Alt را نگه دارید و نشانگر ماوس را بین لایه تار و لایه مستطیل ببرید. وقتی آیکون ماسک ظاهر شد، کلیک کنید.
حالا می‌بینید که بلور فقط داخل کادر مستطیلی نمایش داده می‌شود.

مرحله هفتم: اضافه کردن Stroke

روی لایه مستطیل دوبار کلیک کنید تا پنجره Layer Style باز شود.
گزینه Stroke را فعال کنید و یک Stroke سفید با ضخامت کم (مثلاً 1 یا 2 پیکسل) اضافه کنید.
این کار باعث می‌شود لبه‌های شیشه‌ای جلوه‌ی ظریف‌تر و واقعی‌تری داشته باشند.

مرحله هشتم: اضافه کردن Gradient Overlay

در همان پنجره Layer Style، گزینه Gradient Overlay را فعال کنید.
یک گرادینت ملایم (مثلاً سفید به شفاف) با Opacity کم انتخاب کنید تا حس نور و انعکاس شیشه شبیه‌سازی شود.
با تغییر Angle و Opacity می‌توانید افکت را حرفه‌ای‌تر و طبیعی‌تر کنید.

نتیجه نهایی

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

طراحی بنر سایت

رابط کاربری (UI/UX)

کارت‌های اطلاعاتی

اسلایدرها و هدرها

و حتی موشن‌گرافیک‌ها

استفاده کنید.

به همین سادگی می‌توانید تنها با چند مرحله در فتوشاپ، یک افکت چشم‌نواز بسازید و طراحی‌های خود را حرفه‌ای‌تر و به‌روزتر کنید

گلس مورفیسم افکت شیشه ای فتوشاپ