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

در سال‌های نزدیک به 2000 میلادی سبک‌ها و استایل‌های جدید و محبوبی پا به دنیای طراحی گرافیک گذاشتند. اما هیچکدام از آن‌ها مانند استفاده از گرادینت طوفان محبوبیت به پا نکرد.

مفهوم گرادینت برای اولین بار در سال 1995 میلادی در دنیای گرافیک مطرح شد و از همان اول نیز طرفداران زیادی را برای خودش به دست آورد. گرادینت‌ها در طی سال‌های بعد توسط طراحان گسترش پیدا کردند. هرچند برای مدتی طراحان به سبک‌های جدیدتر پرداختند و گرادینت برای مدت کوتاهی محبوبیت خود را از دست داد اما در سال 2017 میلادی دنیای گرافیک مجددا به برخی از استایل‌ها و شیوه‌های طراحی در دهه 2000 برگشت. در همین حال نیز گرادینت دوباره یک مد یا تِرِند در طراحی گرافیک تبدیل شد. با نگاهی ساده به لوگوی اینستاگرام در این سال نیز می‌توانید به راحتی به این موضوع پی ببرید.

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

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

گرادینت در لغت به معنای «شیب یا تدارج رنگی» است. در مفهوم گرافیکی، گرادینت که به آن color transitions (محوشدگی رنگ‌ها) نیز گفته می‌شود به ترکیبی تدریجی از رنگ‌ها گفته می‌شود که بین آن‌ها مرز مشخصی وجود نداشته باشد. به زبان ساده‌تر هنگامی که تصویری از یک طیف متشکل از دو یا چند رنگ که با هم مرز مشخصی ندارند، تشکیل شده باشد، می‌گوئیم در آن گرادینت بکار رفته است.

البته نیاز نیست برای معرفی مفهوم ساده‌ای مثل Gradient این همه واژه عجیب و غریب به کار ببریم! یک نگاه ساده به تصاویر زیر همه چیز را قابل درک می‌سازد!

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

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

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

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

چرا گرادینت‌ها اینقدر محبوب شدند؟

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

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

انواع گرادینت

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

1) محوری یا خطی (Linear Gradient)

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

2) مدور یا شعاعی (Radial Gradient)

در این نوع گرادینت، رنگ‌ها به صورت دایره‌های هم‌مرکز در یکدیگر محو می‌شوند:

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

3) زاویه‌دار (Angle Gradient)

در این نوع گرادینت، رنگ از یک ضلعِ زاویه‌ قائم شروع می‌شود و در جهت عقربه‌های ساعت در رنگ/رنگ‌های دیگر محو شده و پس از چرخش 360 درجه به نقطه‌ آغاز برمی‌گردد:

 4) بازتابی (Reflected Gradient)

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

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

5) الماسی (Diamond Gradient)

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

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

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

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

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

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

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

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

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

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

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

چگونه گرادینت مناسب ایجاد کنیم؟

گام اول: از رنگ‌های صحیح استفاده کنید

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

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

گام دوم: آن را هوشمندانه ایجاد کنید

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

• حتی‌الامکان از ایجاد گرادینت‌هایی با بیش از سه رنگ صرفنظر کنید. بهترین گرادینت‌ها متشکل از 2 یا 3 رنگ هستند.
• بیشتر اوقات بهتر است از گرادینت خطی در مربع، مستطیل و چندضلعی‌ها و از گرادینت شعاعی در اشکال و سطوح گرد و مدور استفاده کنید.
• بازی با Opacity یا میزان شفافیت گرادینت باعث می‌شود نتایج بهتری بدست آورید.

گام سوم: از طبیعت الهام بگیرید

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

گام چهارم: مخاطبان خود را بشناسید

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

گام پنجم: جسارت به خرج دهید

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

جمع بندی

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

منابع: سایت‌های 99Designs و Figma و Wikipedia