گرافیک‌های وب

● مقدمه :
گرافیکهادر عین حال که باعث ایجاد جذابیتهایی در صفحات می شوند به همان میزان می توانند و دامهای پنهانی بر ضد توسعه در وب ایجاد کنند. تنها تعدادمحدودی از قالبهای گرافیکی تصاویر بوسیله مرورگرها حمایت می شوند که خود آنها نیز مزایا و زیان های خاص خود را دارند یعنی حتی بعضی از قالبهای مفید و مقرون به صرفه نیز،با محدودیت های جدی مواجه هستند. این امر طراحان وب را به رقابت و مبارزه برای ایجاد تصاویری که بطور سریع بارگذاری می شوند وادار می کند. در این رقابت ابتدا باید معانی عمیق از وظایف تصاویر در وب سایت و نیز بهتر جلوه دادن تصاویر درک شود.
● تصاویر
در طراحی سایت تصاویر ارکان اصلی هستند . کاربران انتظار دارند که این عکسها بتوانند مشاهدات خوبی برایشان به ارمغان آورند . همچنین از عکسها برای Navigation و نقشه های تصویری و دگمه های تصویری، ( که باعث اتصال به صفحات و یا منابع دیگر می شوند )، استفاده می شود . روی یک سایت یکدست و یکپارچه ساختار Logo و نماد های تجاری برای شناسائی بسیار مهم هستند . تصاویر خوب در طراحی باید دارای جذابیت و کارآیی و مهمتر از همه سایز کوچک باشند .
اندازه فایل به طور مستقیم بر زمان بارگذاری تاثیر دارد و ملاحظات اصولی برای توسعه و انتشار وب در این مورد باید رعایت شود . طراحان باید پهنای باندی که برای تصاویر بکار برده شده در صفحه مورد نیاز است را ، در نظر داشته باشند .
معمولاً کاربران برای دیدن عکس بی صبر و حوصله می شوند . مندرجات صفحات وب با بکارگیری غلط عکسها و ایجاد زمان بارگذاری طولانی نابود می شوند .
مودم با سرعت ۵۶ kbps در Dial Up استاندارد به کار برده می شود ولی هنوزهم خیلی از مودم هاوجود دارند که با سرعت کمتر از آن، مورد استفاده قرار می گیرند . اگر سایت به منظور استفاده در اینترانت بر روی شبکه ایجاد شود خیلی ازاین موانع بر طرف خواهد شد . به یاد داشته باشید که سرور اینترانت هدف متفاوت تری نسبت به برنامه های کاربردی دراینترنت دارد . نمایش اینترنت برای استفاده عمومی باشد و می تواند نمای سازمان را برای دنیای بیرون ترسیم کند ولی اینترانت برای مصارف تجاری و به مقصود دسترسی سریع و آسان به منابع و اطلاعات بنا شده است.ایجاد زرق و برق در اینترانت باعث کاهش بهروری می گردد. شما می توانید اینترانت را در جهت به عمل و اینترنت را مکانی جهت نمایش و عرضه بحساب آورید.
گرافیک ها تشریح و توضیحی بر موارد و فعالیتهای سایت و نیز ارائه معانی Navigation در یک سایت وب می باشند.
▪ داده های متصور رقمی :
همه تصاویر دیجیتالی ویژگیهای خاص و مهمی را دارند که می توانند در اندازه سایز آن موثر باشند که مقدار کمی از این ویژگیها در این بخش بیان می شود .
▪ پیکسل : ( Pixel)
نقطه کوچکی در تصویر می باشد و در یک جمله شبکه ای از بلوکهای ساختمانی برای گرافیکها و تصاویری است که می تواند بر روی کامپیوتر نمایش داده شود . پیکسل کوچکترین واحد نمایشی کامپیوتر است .
▪ عمق رنگ :
پیکسل به مقدار زیادی اطلاعات رنگی ایجاد می کند . این اطلاعات با بیت اندازه گیری می شوند .حساب کنید که چگونه هر پیکسل تمامی این رنگها را می تواند نشان دهد . برای مثال اطلاعات پیکسل ۴ می تواند بیتی در مد Gray Scale تا ۱۶ سایه خاکستری را نشان دهد . هر ۸ بیت از اطلاعات رنگ در هر پیکسل تا ۲۵۶ بیت از اطلاعات رنگ را تولید می کند و به این ترتیب بدیهی است که در درجات بالاتر بیت ( که عمق بیت نیز نامیده می شوند ) واقع بینی رنگی بیشتری را به ارمغان می آورد .
ضرورت تفکیک پذیری استاندارد صفحه نمایش ۶۴۰*۴۸۰ یا ۷۲ نقطه در اینچ (dpi) می باشد . شما باید المانهای وب را با آهنگ خاص برای کاربران جلو برده و توسعه دهید .
▪ جدول رنگ و الگو :
(مجموعه ای از رنگهای قابل دسترسی در یک سیستم گرافیکی کامپیوتر ) :
اگر چه ۸ بیت رنگ می تواند میلونها رنگ را نمایش دهد ولی فقط در یک زمان ۲۵۶ رنگ حمایت می شوند . سیستم فقط این ۲۵۶ رنگ را در سیستم گرافیکی خود ذخیره میکند .
ـ تذکر :
تفاوت کمی مابین جعبه رنگ ویندوز میکروسافت و جعبه رنگ مرورگر Netscape Navigator وجود دارد . Navigator از ۲۵۶ رنگ حمایت می شوند ولی ویندوز از۲۱۶ رنگ استفاده می کند . هنگامی که یک عکس ۸ بیتی ایجاد می کنید از یک بردار و یا یک نرم افزار نمایشی استفاده می کنید ،خود برنامه یک جعبه ایجاد می کند که رنگهایی که در عکس موجود می باشند در آن جعبه رنگ نیز وجود دارد . هنگامی که تصویر اصلی نمایش داده می شود جعبه رنگ برای نمایش رنگ اصلی تنظیم می شود . وقتی که تصاویر متعددی بطور مرتب و یکجا به نمایش می گذارید دچار عدم هماهنگی در تلالو رنگها می شوید که این امردرخشش الگو یا عوض شدن جعبه رنگ نامیده می شود .
درخشش الگو، زمانی اتفاق می افتد که تفاوت معنی دار زیادی بین تراکم ( چگالی ) تصویر یا جعبه رنگ آن و تراکم ( چگالی ) سیستم یا جعبه رنگ آن وجود دارد . برای غلبه بر این محدودیت مرورگر به طور اتوماتیک تکنیکی را بنام افزایش نور تصویر ایجاد می کند .
● افزایش شدت نور نمایش
افزایش شدت نور نمایش تخمین تقریبی یا تطبیق رنگهامابین یک جعبه تصویر و جعبه رنگ سیستم است ورنگهای روی تصاویر با رنگهای سیستم جایگزین می شوند . متاسفانه افزایش شدت نور باعث میشود که نمایش عکس را بصورتی که شما نمی خواهید عوض کند . تصاویر باید قبل از آنکه در صفحات وب انتشار داده شوند پرنور شوند .
▪ عکسهای با فورمات Bitmap و برداری (Vector)
عکسهای گرافیکی وب به ۲ قالب دسته بندی می شوند Bitmap و Vector که هر قالب خود زیر شاخه هایی نیز دارد .
ـ Bitmap:
بیشترین قالب گرافیکی معمول Bitmap می باشد .
عکسهای Bitmap از تاثیر هر رنگ نمایش به طور جداگانه ساخته شده اند . هر چقدر که رنگهای ایجاد شده توسط یک عکس بیشتر باشد، سایز فایل مربوطه به آن عکس بیشتر می شود . وقتی که فایل Bitmap با بزرگنمایی دیده می شود ، فایل Bitmap شبیه به یک سری مربع کوچک می شود که هر یک درجه رنگی دارند که در کل عکس سهم دارد .
Bitmap هنگامی که از نزدیک دیده می شود ظاهری ناصاف دارد اما هنگامی که با فاصله به آنها نگاه می کنید بصورت نقطه ، نقطه و شبیه به شکل واقعی و یا بصورت بلوکهای مجزا می باشد.
برای ساختن فایل Bitmap مرورگر موجود به طور هماهنگی در بارگذاری یک عکس با یکدیگر کار می کنند .
اطلاعات هر پیکسل ذخیره می شود و سپس دوباره در مرورگر برای ایجاد تصویر برگردانده می شود.چون فایلهای فایلهای Bitmap از تعداد دیسکهای بیشتری برای نمایش استفاده می کنند سایز بزرگتری دارند،فایلهای bitmap برای عکسها اثر های سایه دار و لبه های هموار یا تیره ایجاد می کنند.
▪ بردار :
تصاویر برداری در تفسیر و ترجمه متفاوت تر از فایلهای Bitmap میباشند. تصاویر برداری اطلاعات عکس را در دستورالعمل های ریاضی خود ذخیره می کنند که در هنگام نمایش معنی می دهند.
برای مثال برای ایجاد یک دایره لازم است که مختصات مرکز و شعاع و درجه رنگ را بدانیم . از این اطلاعات و دستورالعملهای ریاضی برای افزایش سایز فایل نیز استفاده می شود .چون مقادیر قابلیت عوض شدن دارند بنابراین افزایش سایز بردار اندازه فایل را زیاد نمی کند .
امتیاز دیگر تصاویر برداری توانائیهای آنها در به مقیاس گذاشتن راندمان ابزار استفاده شده می باشدو تصاویر برداری مستقل از قدرت تفکیک پذیری می باشند.
● برنامه های گرافیکی :
شما می توانید با برنامه های گرافیکی تصاویر دیجیتالی ایجاد کنید . اخیراً پیشرفت های زیادی در نرم افزارها برای ویرایشی کردن عکسها ، رتوش کردن و ارسال آن برای وب ایجاد شده است .
این برنامه ها به ۲ گروه زیر تقسیم می شوند :
ترسیم بردار ، فایلهای از نوع نقاشی
۱) برنامه های ترسیم اشکال گرافیکی برداری :
نرم افزارهای ترسیم بردار مبنا مانند XRes و AdobeIllustrator توصیف کننده نقشه شکل می باشد و می توان در آن خطوط نامرئی ایجاد کرد .
اطلاعات عکس در مجموعه ای از دستورالعمل های ریاضی ذخیره می شود . در قبل بحث کردیم که تصاویر برداری مستقل از مانیتور هستند به این معنا که تنظیمات مانیتور کامپیوتر بر روی سایز و اندازه تاثیر گذار است و نیز این تصاویر کوچکتر از فایلهای مشابه خود از نوع Paint هستند . تصاویر برداری گرافیکی معمولا در ابعاد سه بعدی و در محیط های زبانهای نمونه سازی فرضی VRLM- Virtual Reality Modeling Language مورد استفاده قرار می گیرند و معمولا نمی توانند به درستی و به طور واقعی گرایانه جزئیات تصاویر را انتقال دهند و نمایش آنها در صفحه نمایش تا اندازه ای آهسته تر است ونیز برای دیدن آنها در وب نیاز به plug-ins می باشد. به هر جهت تصاویر برداری در صنعت و مصارف علمی کاربرد خیلی خوبی دارند . بعدا به معرفی برنامه هایی که از تصاویر برداری حمایت می کنند خواهیم پرداخت.
۲) برنامه های نقاشی :
برنامه های نقاشی از Scan از عکس تا ضبط فریم های ویدئویی فایلهای Bitmap ایجاد می کند و یا برای ایجاد کارهای هنری از آنها استفاده می شود .
فایلهای Bitmap با جزئیات بیشتری نشان داده می شوند . در قبل بحث کردیم که فایل Bitmap با نقطه های کوچکی که هر نقطه مطابق با یک پیکسل در صفحه نمایش می باشد طراحی شده است .
فایلهای Bitmap در هنگام ضرورت پیکسل به پیکسل ویرایش می شوند .
مضرت فایلهای Bitmap در این است که سایز فایلهای اصلی بزرگ هستند . ظاهر فایلهای Bitmap به طور زیادی بر صفحه مانیتور اثر می گذارد . هر دو قالب Jpg ، Gif از نوع Bitmap هستند .
برای ایجاد تصاویر گرافیکی خوب معمولا از نرم افزارهای زیر استفاده می شود:
ـ Adobe Photoshop
ـ Microsoft Image Computer
ـ JASC Paint Shop Pro

منبع : استاد آن‌لاین