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

تفاوت گرافیک پیکسلی و برداری

در این جلسه شما با مفاهیم گرافیک پیکسلی و برداری توسط توضیحات کامل و تصاویر مفهومی آشنا خواهید شد

GRAPHIC

فصل دوم ( آموزش مبانی اولیه گرافیک )

جلسه ۱ ( آموزش تفاوت گرافیک پیکسلی و برداری )

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

 

منظور از گرافیک پیکسلی چیست ؟

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

فرمت های JPG , BMP , GIF از فرمت های معمول گرافیکی پیکسی یا شطرنجی و یا Raster Graphics هستند .

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

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

pixel1

مگاپیکسل چیست ؟

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

مگاپیکسل ، یک میلیون پیکسل است . این عبارت ، تنها برای مشخص‌کردن تعداد پیکسل‌های تصویر به‌کار نمیره . کاربرد دیگه اون ، نشان‌دادن شمار عناصر گیرنده تصویر یا تعداد عناصر نمایشی نمایشگرهای دیجیتال است . به عنوان مثل : دوربینی با ابعاد ۲۰۴۸×۱۵۳۶ عنصر حسگر را معمولا  ( ۳.۱ مگاپیکسل ) ( ۳،۱۴۵،۷۲۸ = ۱۵۳۶ × ۲۰۴۸ ) می‌خونند . از مگاپیکسل اغلب به‌ عنوان یکی از مشخصه‌های بهتر بودن یاد می‌شه ، به‌ همین‌ خاطر یکی از ویژگی‌هایی است که کیفیت دوربین را مشخص می‌کنه .

 

منظور از گرافیک برداری چیست ؟

گرافیک برداری رو میتونم به این شکل برای شما معنی کنم که محاسبات در این نوع گرافیک بر مبنای بردار و ریاضیات و در قالب مجموعه‌ ای از مشخصات هندسی نقاط ، خط‌ها ، منحنی‌ها و چند ضعلی‌ ها ذخیره می‌شود . نرم افزار های زیادی مثل : Adobe Illustrator , CorelDraw ,Autodesk AutoCad به صورت Vector Graphic پردازش انجام میدهند .

vector_example_lightbox

از ویژگی های بسیار مهم تصاویر وکتوری ایجاد شده در گرافیک برداری ، میشه به این مورد اشاره کرد که در این نوع تصاویر شما به راحتی میتونید بدون از دست دادن کیفیت  ، اندازه اونها رو کوچک یا بزرگ کنین و هیچ گونه تغییر کیفیتی در تصویر مشاهده نکنین . به عبارت دیگه تصاویر وکتوری کاملا مستقل از رزولوشن هستند . یکی از برترین فرمت های تصاویر وکتوری که جدیداً مقالات زیادی در موردشون نوشته میشه و لقب آینده تصاویر وب رو به خودشون اختصاص دادند ، تصاویر با فرمت SVG هستند .

 

تفاوت دقیق گرافیک پیکسلی با برداری ؟

نمیخوام با نوشتن متن بیشتر وقت شما گرفته بشه به همین جهت با گذاشتن یک عکس بسیار ساده و قابل فهم ، شما رو به مشاهده تفاوت اصلی گرافیک پیکسلی و برداری دعوت میکنم :

vector-bitmap-example

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

تهیه شده در مدرسه آنلاین ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۸

  • یه سوال ، با توجه به اینکه حجم فایلهای وکتوری بیشتره پس چه جوری تصاویر با فرمت SGV آینده تصاویر وب رو به خودشون اختصاص میدن؟

    • سلام دوست عزیز
      طراحی وب داره به سمت تکنولوژی ریسپانسیو میره، در حال حاضر عموم کاربران وب به ریسپانسیو علاقه نشون میدن و ترجیح میدن سایت خودشون و یا سایتی که بازدید میکنن ریسپانسیو باشه.
      در طراحی های ریسپانسیو که اکثرا با سبک فلت یا کلین طراحی میشه، آیکون ها و لوگوهای فلت با فرمت svg پیاده سازی میشن تا تو رزولوشن های متفاوت شما تنها با تغییر width تو css، اونهارو تغییر سایز بدید. دیگه مثل گذشته نیازی نیست بخواین یک آیکون رو تو سه سایز متفاوت طراحی کنید تا تو هر رزولوشن از سایز مناسب استفاده کنید.
      کاربرد svg تو این موارد هست و تو مواردی که شما بخواین تصاویر متحرک و انیمیشن ایجاد کنید.
      موفق و پاینده باشید.

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین