طراحی انقدر لذت‌بخش است که علاقه‌مندان با ذوق را در هر زمینه‌ای به این کار جذب می‌کند. خواه طراحی دکوراسیون و معماری ساختمان باشد و یا معماری و خلق یک اثر در فضای کامپیوتری! برای هنرمندان نرم‌افزارهای بسیاری وجود دارد که در بخش‌های مختلفی بتوانند خلاقیت خود را به نمایش بگذراند و طراحی کنند. اما ما در این متن می‌خواهیم فقط درباره یک تکنیک بخصوص و پرکاربرد بخوانیم که توسط نرم‌افزار قدرتمند فتوشاپ قابل اجراست و به آن گرادینت می‌گوییم. همچنین ایجاد گرادینت در یک بخش از وب‌سایت هم توسط کدنویسی در CSS امکان پذیر است.
نحوه ایجاد گرادینت در CSS:
CSS مخفف Cascading Style Sheet یک زبان طراحی برای صفحات وب است که معمولا در کنار زبان HTML قرار می‌گیرد تا ظاهری زیبا برای وب سایت‌ها ایجاد کند. در کدنویسی و استایل‌دهی توسط CSS می‌توان انواع استایل‌ها همانند رنگ، فونت، تصاویر و نحوه قرارگیری هر المان در صفحه وب را به صورت دلخواه تغییر داد. در کل CSS شامل دو نوع Gradient است:
- گرادینت خطی Linear Gradients: به ترتیب پایین / بالا / چپ / راست / مورب
- گرادینت شعاعی Radial Gradients: در این نوع از گرادینت، تعریف رنگ‌ها در مرکز شکل صورت می‌گیرد.
-
۵ ویژگی جذاب و جدید فتوشاپ ۲۰۲۲
ویژگی و نحوه استفاده از Linear Gradient در CSS3
برای ایجاد یک گرادینت در صفحه توسط CSS می‌بایست در ابتدا دو رنگ متفاوت را در استایل Style آن عنصر تعریف کنید و سپس نقطه شروع و جهت آن را به همراه اثر گرادیان مشخص و تنظیم کنید.
نمونه‌ای از ایجاد گرادینت خطی در پس زمینه:
background: linear-gradient(direction , color1 , color2 , …);
در این کد جهت را با direction مشخص می‌کنید و بعد از آن به ترتیب رنگ‌های مورد نظر را می‌نویسید.
به این شکل:
Background: linear-gradient(top ,red , gold , pink , blue);
اگر بخواهید می‌توانید بازه‌ای از رنگ‌ها را با افزودن repeating چندین بار تکرار کنید:
repeating-linear-gradient(top, red , yellow , green );
ویژگی و نحوه استفاده از Radial Gradient در CSS3
ردیال گرادینت باعث ایجاد شکل‌هایی شبیه به یک پرتو یا دایره‌وار در شعاع‌های مختلف می‌شود .
برای استفاده ازاین نوع گرادینت به این صورت استایل‌دهی می‌کنیم:
background: radial-gradient(direction , color1 , color2 , …);
نمونه جهت و رنگ‌دهی به ردیال گرادینت:
radial-gradient(top, red , gold , green);
نکته‌ای که برای استفاده از رنگ‌ها در استایل‌دهی وجود دارد این است که هر کدام از آنها به صورت زیر در CSS3 مورد استفاده قرار می‌گیرد.
- برای رنگ‌های پس زمینه background-color از رنگ‌های solid استفاده می‌کنیم.
- برای رنگ عکس پس زمینه background-image رنگ‌های gradient به کار می‌رود.
- برای پس زمینه background نیز از هر دو نوع رنگ‌دهی استفاده می‌کنیم.
- آشنایی با فیلترها در فتوشاپ – بخش اول
نحوه ایجاد گرادینت در فتوشاپ
در فتوشاپ همه چیز توسط ابزارهای مخصوص به خود انجام می‌شود. کافی است نحوه کار با هر کدام را بدانید تا بهترین طرح‌ها را با آنها ایجاد کنید. شما برای ایجاد یک گردینت Gradient می‌توانید رنگ‌های مختلفی را انتخاب کرده و شروع به کار کنید. در غیر این صورت نرم افزار به طور پیش فرض طیف رنگی که ایجاد می‌کند، از رنگ foreground به سمت رنگ background خواهد بود.
برای انجام اینکار به ترتیب زیر عمل کنید:
۱. از منوی File ، گزینه New را انتخاب و یک سند جدید ایجاد کنید.
۲. توسط ابزار Rectangular Marquee ناحیه‌ای را انتخاب کنید.
۳. بعد از کلیک بر روی ابزار Gradient ، در ناحیه انتخابی خود درگ کنید.
۴. در این مرحله در آن منطقه، گرادیانت اعمال می‌شود. در صورتی که بخشی از صفحه را انتخاب نکنید، کل صفحه ایجاد شده با طیف رنگی گرادینت خواهد شد.
نکته‌ای که در این کار به شما کمک می‌کند این است که اگر به هنگام درگ، کلید شیفت Shift را هم نگه دارید، خطی که زاویه طیف رنگ را مشخص می‌کند به صورت مستقیم ترسیم می‌شود.
۵. اگر بخواهید رنگ‌ها پس از هر بار ترسیم با حالت‌های مختلف با یکدیگر مخلوط شوند می توانید از گزینه Mode از option bar را استفاده کنید.
۶. برای شفافیت بیشتر یا کمتر هم از درجه Opacity از option bar استفاده کنید.
گزینه‌های Reverse ، Dither و Transparency هم مورد استفاده است. به این صورت که گزینه Reverse ترتیب رنگ‌ها را جابجا می‌کند. اگر گزینه Dither را فعال کنید، زمان ترسیم طیف رنگی ،noise ایجاد نمی‌شود. گزینه transparency هم بهتر است فعال باشد. چرا که اگر شفافیت نوار گرادیانت را بیشتر کنید، در زمان ترسیم طیف رنگی، شفافیت‌ها اعمال نمی‌شوند.