۲۰ مهر، ۱۴۰۳
Image default
خانه » نحوه انتخاب رنگ‌ برای طراحی سایت – آموزش کار با سایت رنگ ادوبی (درس دوم)

نحوه انتخاب رنگ‌ برای طراحی سایت – آموزش کار با سایت رنگ ادوبی (درس دوم)

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

نحوه انتخاب رنگ‌ برای طراحی سایت

یکی از بهترین ابزارها برای ترکیب بندی رنگ‌ها در طراحی، سایت color.adobe هست که زیرمجموعه شرکت ادوبی (سازنده نرم‌افزارهایی مثل Photoshop و Adobe Reader) هست. برای انتخاب رنگ مثل شکل زیر آدرس color.adobe.com را در نوار آدرس مرورگرتون تایپ کنید.

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

منوی Create

زیرمنوی COLOR WHEEL

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

زیرمنوی COLOR WHEEL

بخش change color harmony

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

بخش change color harmony

هارمونی رنگ و انواع آن

هارمونی رنگ یا color harmony چیست؟

هارمونی به معنای هماهنگی و تناسب هست. دانش هارمونی ساخته فکر بشر نیست و اصل اون از طبیعت گرفته شده. بشر این دانش رو از طبیعت گرفته و به مرور اون رو تکمیل و تدوین کرده، تا تبدیل علمی جداگانه شده. تمرکز هارمونی رنگ بر اساس روابط رنگ‌ها و تناسب اون‌هاست. در ساخت هر نوع هارمونی از سه شاخص فام یا هیو  (Hue)، روشنی یا ولیو (Value) و خلوص یا کروما (Chroma) استفاده میشه.

هارمونی رنگ‌ها در سایت color.adobe

رنگ‌بندی بر اساس همجواری؛ آنالوگ یا (Analogous)

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

رنگ‌بندی بر اساس همجواری؛ آنالوگ یا (Analogous)

رنگ‌بندی مونوکروم یا Monochromatic

در هارمونی مونوکروم از درجه‌های خلوص و شدت‌ مختلف یک گروه از رنگ‌ استفاده میشه. این درجات شامل: روشن (tints)، شدت (tones) و سایه (shades) هستند. با اضافه کردن رنگ سفید به یک رنگ، اون رنگ روشن یا تینت میشه و با اضافه کردن سیاه، رنگ تیره‌تر یا سایه ایجاد میشه؛ و در نهایت ترکیب خاکستری با رنگ، نتیجه شدت یا تُن رو تغییر میده.

رنگ‌بندی مونوکروم یا Monochromatic

رنگ‌بندی متساوی‌الاضلاع یا Triad

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

رنگ‌بندی مکمل یا Complementary

رنگ‌های مکمل در چرخه‌ رنگ در مقابل یکدیگر قرار دارند.

رنگ‌بندی مکمل یا Complementary

رنگ‌بندی متساوی‌الساقین (compound یا Split Complementary)

این هارمونی از ترکیب یک رنگ با دو رنگ هم‌جوار مکمل رنگ اصلی ایجاد میشه. مثل شکل زیر، رنگ‌های همسایه‌ رنگ سبز که مکمل رنگ قرمز هست مورد استفاده قرار گرفته‌. این هارمونی به همین دلیل از سه جزء تشکیل میشه.

رنگ‌بندی متساوی‌الساقین (compound یا Split Complementary)

رنگ‌بندی مستطیل یا Double complement

این هارمونی از دو رنگ همجوار به همراه رنگ‌های مکملشان انتخاب ‌میشه. به این نوع هارمونی «دو مکمل یا مکمل برابر» هم گفته میشه. اگر به شکل دقت کنید، موقعیت رنگ‌ها به شکل حرف «X» دیده میشه.

رنگ‌بندی مستطیل یا Double complement

هارمونی رنگ Shades

در این هارمونی یک رنگ از چرخه انتخاب میشه و با روشنایی و تاریکی از ۰ تا ۲۵۵ ترکیب shades رو می‌سازه. این هارمونی برای ترکیب از دو رنگ سیاه و سفید استفاده می‌کنه.

هارمونی رنگ Shades

سایر هارمونی رنگ‌ها

رنگ‌بندی چهارضلعی یا Tetrad

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

رنگ‌بندی چهارضلعی یا Tetrad

رنگ‌بندی دوتایی یا Diad

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

رنگ‌بندی دوتایی یا Diad

هارمونی رنگ اساس طبیعت:

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

هارمونی رنگ اساس طبیعت

زیرمنوی IMPORT IMAGE

در این بخش می‌تونید با ایمپورت کردن تصویر لوگو یا هر تصویر دیگری تم رنگ اون تصویر را به دست بیارید. برای استخراج رنگ‌های یک تصویر روی گزینه import image کلیک کرده و تصویر مورد نظر خود را انتخاب کنید.

زیرمنوی IMPORT IMAGE

با باز شدن تصویر تم رنگی اون توسط سایت شناسایی و نمایش داده میشه، که می‌تونید با ساخت اکانت اون رو با کلیک روی دکمه save color theme در تم‌های خودتون ذخیره کنید.

منوی explore

در این بخش برترین ترکیب‌های رنگ به ترتیب نمایش داده میشن که با بردن ماوس روی هر کدوم می‌تونید اون‌ها رو ویرایش، دانلود، رتبه‌دهی یا در تم‌های خودتون ذخیره کنید.

همچنین از طریق گزینه info می‌تونید کامنت بگذارید یا  اطلاعاتی مثل نام سازنده، تاریخ ساخت، تعداد نمایش و غیره درباره این تم کسب کنید. یکی از آپشن‌های خوب سایت color.adobe اینه که می‌تونید هر کدوم از این رنگ‌ها رو در نرم افزار فتوشاپ بارگذاری کنید و از اون‌ها برای طرح خود استفاده کنید.

منوی explore

افزودن بخش color adobe theme در فتوشاپ

برای اضافه کردن تمام امکانات بالا در فتوشاپ باید حتما اکانت adobe داشته باشید و در اکانت خودتون لاگین کرده باشید. برای ساخت اکانت کافیه روی لینک Sign In کلیک کنید.

لینک Sign In

از صفحه باز شده روی لینک Get an Adobe ID کلیک کنید.

لینک Get an Adobe ID

با کلیک روی لینک در صفحه باز شده فرم زیر نمایش داده میشه که با پر کردن فیلدهای نام، نام خانوادگی، آدرس ایمیل، پسورد کاربری (پسورد باید دارای حداقل ۸ کاراکتر، یک عدد یا سیمبل و هردو حروف بزرگ و کوچک لاتین باشه)، نام کشور (متاسفانه کشور ایران به دلیل تحریم‌ها در لیست وجود نداره)، تاریخ تولدتان به میلادی و کلیک روی دکمه Sign Up اکانت کاربری شما ساخته میشه.

نکته) برای تایید نهایی و استفاده از سایت باید روی لینک تاییدی که به ایمیل شما ارسال میشه کلیک کنید تا اون لینک باز بشه.

فرم ثبت نام رنگ ادوبی

پس از ساخت یا ورود به حساب کاربری، نرم‌افزار فتوشاپ رو باز کنید. از منوی Window، زیر منوی Extensions، گزینه Adobe Color Theme رو انتخاب کنید تا این بخش به فضای کاریتون اضافه بشه.

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

افزودن بخش color adobe theme در فتوشاپ

مطالب مرتبط

Leave a Comment