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

⭕️اصطلاح گرادینت،Gradient در زمینه طراحی و گرافیک به معنای تدارج رنگ است. معنی لغوی این اصلاح، سطح شیب دار یا شیب است.

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

⭕️گرادینت‌ها به شکل های مختلفی مانند، عمودی، مورب، زاویه دار، مدور، افقی و … مورد استفاده قرار می گیرند.

⭕️واضح است که گرادینت در طراحی وب، می تواند جلوه زیباتری به عناصر موجود در صفحات بدهد. اما پیش از بروز رسانی ابزار طراحی CSS3 طراحان نمی توانستند از گرادینت در طراحی وب استفاده نمایند.

⭕️تنها کاری که با استفاده از CSS از دست طراحان بر می آمد، این بود که قسمتی از تصویر را برش زده و آن را تکرار کنند تا حالت تدارج رنگ به وجود بیاید. این طرز استفاده از تصاویر، باعث می شد تا گاهی اوقات، حجم تصاویر زیاد شود.

⭕️Gradient راهی برای افزودن عمق و بُعد به تصویر و طرح ماست و باعث می‌شوند همه چیز طبیعی‌تر بنظر برسد. از طرف دیگر آمیختنِ تدریجی یک رنگ با سفید یا سیاه، می‌تواند نزدیکی یا دوری آن نسبت به منبع نور را به ذهن ما القا ‌کند. در جهان واقعی ما، همه چیز از گرادینت تشکیل شده و به همین جهت گرادینت‌ها در واقعی‌تر و طبیعی‌تر کردن آثار ما نقش مهمی ایفا می‌کنند.

⭕️رنگ‌ها بر احساسات ما موثرند و اگر از آن‌ها به درستی استفاده شود، احساسات مثبتی را در ما برانگیخته می‌کنند اما اگر چند رنگ تصادفی و نامتناسب را کنار یکدیگر قرار دهیم، بدیهی است که احساس ناخوشایندی در ما بوجود آورند!

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

💠گرادینت‌ها در پنج شکل اصلی استفاده می شوند:

1- Liner یا خطی:

دو یا چند رنگ به صورت عمودی یا افقی یا مورب پشت سر هم قرار گرفته و در یک دیگر محو می‌شوند.

2- Radial یا مدور:

در این حالت رنگ ها به صورت دایره های متحدالمرکز درون یک دیگر محو می‌شوند.

3- Angle زاویه دار:

در این حالت یک رنگ از یک ضلع زاویه آغاز شده و پس از چرخش 360 درجه به آن سوی ضلع باز می‌گردد.

4- Reflected یا بازتاب:

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

5- Diamond الماس:

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

دلیل استفاده از گرادینت در طراحی سایت

💢سبک طراحی گرافیک سایت جدید موسوم به متریال دیزاین از حدود سه سال پیش تا کنون محبوبیت بسیاری پیدا کرده است. در این نوع طراحی عناصر به صورت صاف و بدون برجستگی طراحی می شوند. (Flat design)

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

کاربردهای گرادینت در انواع طرح‌های گرافیکی

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

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

💢استفاده از گرادینت‌ها به اینجا هم محدود نمیشود و امروزه در محصولات چاپی نیز شاهد استفاده از گرادینت هستیم.