آموزش طراحی وب Ciw
 

قالبهای رنگ :

رنگها با دو قالب عددی استاندارد شده اند :

1- درجات قرمز و سبز و آبی (rgb)
2- هگزا دسیمال

یک طراح برای انجام یک طراحی وب دقیق باید منحصرا از کدهای هگزا دسیمال استفاده کند . ولی به هر جهت برای بحث در مورد اهداف خود هر دو مورد را در نظر می گیریم .
سیستم Rgb و هگزا دسیمال یا هر دو ( با هر رنگی که در محدوده دید و بینایی قرار دارند و با خواص گوناگون با یکدیگر ترکیب می شوند معرفی می شوند) . قالبهای این رنگها توانایی نمایش 16772216 رنگ را دارد .

آموزش طراحی وب Ciw
 

RGB :

مقدار RGB در مبنای 10 در رنج عددی 0 تا 255 می باشد . در سیستم مبنای 10 از ارقام بین 0 تا 9 استفاده می شود . وقتی رقم 1 در دسترس قرار می گیرد مقدار از 0 به 1 افزایش می یابد و همینطور بالا می رود . با استفاده از قانون RGB رنگ سفید به شرح زیر تعیین می شود :
R = 255 , G = 255 , B= 255
بنابراین مقدار RGB برای رنگ سفید B=255 ، G=255 ، R=255 که (نمایش ماکسیمم درجه قرمز و سبز و آبی است ) می باشد .
مقدار درجه RGB برای رنگ سبز به اینگونه است :
R = 0 , G = 255 , B= 0
بنابراین مقدار RGB برای رنگ سبز 0 و 255 می باشد که نمایش 0% برای قرمز و آبی و بیشترین درصد برای رنگ سبز است .
شما می توانید رنگ سبز را با کدهای HTML به قرار زیر دنبال کنید :
< Body bgcolor=" 0,255,0 " > المانهای رنگی نقش مهمی را در اصول و نظام ارائه یک سایت دارند . سبک و روش و فرهنگ و آداب شرکتها با ارائه رنگ در سایت و چگونگی هماهنگی و ترکیب آنها با یکدیگر به تصویر کشیده می شود .

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

آموزش طراحی وب Ciw
 

*تذکر فنی :

برای کامل کردن سیستم رنگهای RGB و درجات هگزا دسیمال میتوانید سایت http://www.lynda.com/hexb.html مراجعه کنیداین سایت توسط Lynda Weinman از مرکز هنری Ojai Digital ایجاد شده است .

آموزش طراحی وب Ciw
 

ارقام هگزا دسیمال :

درجات ارقام هگزا دسیمال دربازه بین 00 تا FF بصورت زیر است :
(1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)
عدد در مبنای 10 با همان مقدار به مبنای 16 تبدیل شده و نمایش داده می شود . مقدار 00 هیچ درصدی را نمایش نمی دهد و مقدار FF بیشترین درصد مقدار رنگ را نمایش می دهد .
رنگ سفید در مبنای 16 به این صورت نشان داده می شود :
Red= FF , Green = FF , Blue= FF
این مقادیر بیشترین درصد رنگهای قرمز و سبز و آبی را نشان می دهد .
نمایش سبز در مبنای هگزا دسیمال به قرار زیر است :
Red = 00 , Green = FF , Blue = 00
این مقادیر بیشترین درصد رنگ برای رنگ سبز و هیچ درصدی را برای رنگهای آبی و قرمز نشان نمی دهد . برای هر رنگ سبز و آبی و ... در مبنای 16 ، 2 کاراکتر اختصاص داده شده است و با توجه به این می باشد که اساس RGB از ارقامی مابین 0 تا 255 برای هر مقدار آبی و قرمز و سبز استفاده می کند. نمودار فوق را ملاحظه کنید :
Hex Code RGB Color
FF0000 255,0,0 Red
00FF00 0,255,0 Green
0000FF 0,0,255 Blue
FFFFFF 255,255,0 White
000000 0,0,0 Black


وقتی از مبنای 16 در HTML استفاده می شود در ابتدای آن از علامت # استفاده می شود که لازم نیست اما قسمتی از ویژگیهای رسمی HTML محسوب می شود . در تگ Body برای مثال کد رنگ پیش زمینه آن اگر سبز باشد ، خواهیم داشت :
< body bgcolor="#00FF00" > :
< body bgcolor="#00FF00" >

آموزش طراحی وب Ciw
 

هشدار :

Netscape 4 در قرار دادن " " در اطراف ویژگیها اشکال می گیرد .هنگامی که از مقدار مبنای 16 در قسمت Style ها استفاده می کنید " " را بردارید .

آموزش طراحی وب Ciw
 

ترکیبات اصلی رنگها

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

http://i32.tinypic.com/314autf.jpg



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

آموزش طراحی وب Ciw
 

مرورگر تضمین کننده رنگها :

با وجود آنکه هر مقدار از RGB و هگزا دسیمال برای یک رنگ خاص استفاده می شود ولی مهم است که به خاطر داشته باشید که فقط 216 رنگ با ویندوز و مکینتاش و Netscape navigator و Internet Explorer حمایت می شوند . هر 8 بیت مانیتور هر مرورگر 256 رنگ را می تواند به نمایش بگذارد که تا حدود 40 مورد ازاین رنگها توسط سیستم عامل استفاده می شود . این 216 مقدار حمایت می شوند و بقیه رنگها شدت نورشان افزایش می یابد .
افزایش شدت نور فرآیندی است که مرورگر یک رنگ را به نزدیکترین رنگی که مرورگر قادر به حمایت از آن است تبدیل می کند . وقتی رنگی با کدهای HTML ایجاد شود به رنگ ثابت و یکپارچه تبدیل می شود .
(امیدوار باشید که به رنگ اصلی که شما می خواستید نزدیک باشد ) اگر مرورگر نور رنگی که در یک تصویر نشان داده می شود رابا ترکیب 2 رنگی که نزدیک به یکی از آنهاست زیاد کندتوسط مرورگر حمایت نخواهد شد و بصورت لکه نشان داده می شود .
جدول 3-2 سیستمی از مقادیر RGB و هگزا دسیمال را که بدون مشکل در مرورگرهای متعدد و بر روی سیستم های متعدد ترجمه خواهد شد را نشان می دهد . ( اگر مقادیر دیگری به غیر از اینها استفاده شود مرورگر نور آن را به نزدیکترین مقدار تخمینی افزایش می دهد .
RGB HEX
0 00
51 33
102 66
153 99
204 CC
255 FF


هر کدام از این مقادیر مطابق با مقدار واقعی است . برای مثال استفاده از مقدار 51 در سیستم RGB درست مانند استفاده از مقدار 33 در سیستم هگزا دسیمال است . به عبارت دیگر مقدار RGB (201 ، 153 ، 51( معادل با مقادیر #3399cc در هگزا دسیمال است.
مرورگر ضامن هر ترکیبی از این مقادیر است و بدون تناقض و مشکل در پایگاه داده ها مرورگر ترجمه می شوند .
ترکیبات هر کدام از رنگهای قرمز و سبز و آبی شدت رنگی که باید نمایش داده شود را محاسبه می کند . جدول 4-2 در صد شدت رنگهایی که توسط مرورگر از کمتر به بیشتر حمایت می شوند را نشان می دهد .
Browser – Safe Color Intensities

RGB Intensity in percentage Hex
0 0% 00
51 20% 33
102 40% 66
153 60% 99
204 80% cc
255 100% ff


لیست کامل بالا را می توانید در سایت http://www.lynda.com/hexh.html پیدا کنید .

آموزش طراحی وب Ciw
 

تذکر

مشکلاتی در ترجمه رنگ برای مانیتورهای 16 bit وجود دارد . به دلایل ریاضی 216 رنگی که در مرورگرها حمایت می شود در جدول رنگ این کامپیوترها نشان داده می شود و مرورگرها با استفاده از رنگهای دیگری که به آن رنگها نزدیک است این جابجایی را برای نمایش رنگ و به طور دقیق انجام می دهند . اما مرورگرها جابجایی رنگ را به طرق مختلف ( منوط به اینکه آیاآن رنگ در یک عکس ارائه می شود یا توسط HTML ایجاد می شود ) انجام می دهند . برای بحث در مورد جزئیات بیشتر به آدرس زیر مراجعه کنید :

http://hotwired.lycos.com/webminkey/00/37/index.html

تمرین ) کدام ترکیب RGB توسط مرورگر هدایت می شود .
A)003399
B)1B6565
C)66FF33
D) FF6600

آموزش طراحی وب Ciw
 

انتخاب ترکیب رنگ

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

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

آموزش طراحی وب Ciw
 

*تذکر فنی :

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

http://www.hidaho.com/colorcenter/cc.html