logo
جستجو کردن

گرادیانت چیست؟

Gradient انتقال تدریجی از یک رنگ به رنگ دیگر است. این به طراحان اجازه می دهد تا تقریباً یک رنگ جدید ایجاد کنند.

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

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

این نمونه ای از گرادیانت خطی یا محوری است :

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

این نمونه ای از گرادیانت شعاعی است :

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

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

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

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

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

چرا از گرادیانت ها در طراحی وب استفاده کنیم؟

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

دلایل دیگری وجود دارد که چرا ما از گرادینت در وب سایت ها استفاده می کنیم:

برای ایجاد طرح های رنگی جدید

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

برای اینکه طراحی به یاد ماندنی تر شود

آیا یادتان هست که اینستاگرام لوگوی خود را دوباره طراحی کرد؟ این یک معامله بزرگ بود و همه در مورد آن صحبت می کردند (به دلایل خوب و بد)، مانند مت کر در مدیوم .

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

نحوه ایجاد گرادیانت در طراحی وب

سه روش متداول برای ایجاد gradient برای یک وب سایت وجود دارد:

گزینه 1: از CSS3 استفاده کنید

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

background: rgb(238,174,202);

background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);

اگر به نوشتن CSS از ابتدا عادت ندارید نگران نباشید. برای ایجاد گرادینت های خود می توانید از CSS Gradient استفاده کنید:

با این ابزار می توانید:

  • رنگ ها را اضافه یا حذف کنید
  • محل شروع و توقف آنها را تعیین کنید
  • شدت را کم یا زیاد کنید
  • گرادیانت را روی خطی یا شعاعی قرار دهید
  • درجه چرخش را تغییر دهید

وقتی پیکربندی تنظیمات را تمام کردید، به پایین بروید و CSS را بردارید.

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

به سادگی سه رنگی را که می خواهید استفاده کنید انتخاب کنید، جهت را تنظیم کنید و سپس روی “Generate” کلیک کنید. کدهای CSS شما در زیر ظاهر می شوند.

گزینه 2: از گرادیانت های از پیش ساخته شده استفاده کنید

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

اگر می‌خواهید در مورد طرح‌های رنگی گرادیانت بر اساس رنگ اصلی که با آن کار می‌کنید، کمک  بگیرید، uiGradients انتخاب خوبی است:

سپس می‌توانید CSS گرادیانتی را که دوست دارید بردارید یا اگر می‌خواهید از آن به عنوان پس‌زمینه در سایت خود استفاده کنید، آن را به صورت JPG ذخیره کنید.

گزینه دیگر WebGradients.com است :

می‌توانید این گرادینت‌ها را به‌عنوان یک قطعه CSS، یک PNG ذخیره کنید یا می‌توانید کل بسته 180 گرادیانتی را برای Sketch یا Photoshop دانلود کنید (اگر در آنجا طراحی خود را انجام می‌دهید).

Grabient یکی دیگر از ابزارهای رایگان است که با تعداد زیادی گرادیانت رنگ از پیش ساخته شده ارائه می شود. با این حال، شما کمی کنترل بیشتری روی نحوه تبدیل شدن گرادیانت خود دارید:

می توانید چرخش gradient را تغییر دهید، رنگ ها را اضافه یا حذف کنید و درصد رنگ ها را سفارشی کنید.

گزینه 3: ایجاد گرادیانت در Elementor

اگر ترجیح می دهید کار را در داخل وردپرس انجام دهید، می توانید به راحتی این کار را با Elementor انجام دهید.

برای شروع، می توانید به راحتی گرادیانت رنگ را به عنوان پس زمینه تنظیم کنید :

همچنین می توانید با Elementor جلوه های فیلتر را به تصاویر و ویدیوهای خود اضافه کنید . شما کنترل کاملی بر نحوه ظاهر شیب های خود از پانل Style دارید:

فقط اجزای بزرگ‌تر وب‌سایت شما نیستند که می‌توانید شیب‌ها را به آن اضافه کنید. همچنین می‌توانید گرادیانت‌ها را به عناصر کوچک‌تر مانند دکمه‌ها اضافه کنید:

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

نکات طراحی گرادیانت

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

  1. رنگ سوم را به گرادیانت های خود اضافه کنید تا از وسط خاکستری خودداری کنید

اگر می خواهید یک gradient جذاب طراحی کنید، به بیش از دو رنگ برای آن نیاز دارید:

  • یکی برای یک <سمت یا گوشه>
  • یکی برای <linear-color-stop>
  • یکی برای دیگری <side-or-corner>

اگر یک <linear-color-stop> را در وسط راه تنظیم نکنید، این احتمال وجود دارد که گرادیانت به آرامی تغییر نکند و در نهایت یک رنگ مایل به خاکستری در بین آنها خواهید داشت. مثل این:

با تنظیم یک مقدار رنگ بین دو مقدار <side-or-corner>، می توانید از این اتفاق جلوگیری کنید. در اینجا یک راه برای رفع آن وجود دارد:

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

  • رنگ اصلی را انتخاب کنید که سیگنال های مناسب را ارسال کند

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

  • اجازه کنتراست رنگ، اما نه تضاد

تفاوت زیادی بین رنگ هایی که با یکدیگر تضاد دارند و رنگ هایی که به خوبی با هم کار نمی کنند وجود دارد.

از ابزار چرخه رنگ Canva برای کشف گزینه های قابل اجرا استفاده کنید:

رنگ اصلی خود را در فیلد اول تنظیم کنید. سپس از مولد ترکیب رنگ استفاده کنید تا جفت های رنگی برای  gradientخود را بررسی کنید.

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

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

به عنوان مثال، صفحه EMBA برای اوراسیا دارای منبع نور مشخصی است که از سمت راست می آید:

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

همچنین می‌توانید از جهت‌گیری gradient استفاده کنید تا بازدیدکنندگان را به طور مؤثرتر در صفحه و به مهم‌ترین قسمت‌های آن حرکت دهید – جایی که باید انتهای سبک‌تر باشد.

  • مراقب باندینگ باشید

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

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

جستجو مطالب
جستجو کردن
جدیدترین مطالب
عضویت در خبرنامه

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

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

منوی دسته های خود را در هدرساز -> موبایل -> منوی اصلی موبایل -> نمایش/مخفی -> انتخاب منو، تنظیم کنید.
برای دیدن نوشته هایی که دنبال آن هستید تایپ کنید.

آدرس:

رسالت، خیابان هنگام، دانشگاه علم و صنعت

شماره تماس:

09362096232

پست الکترونیک:

info@designmoj.com

ثبت نام یا ورود
همین الان، اطلاعات خود رو وارد کنید و وارد سایت شوید