‫محیطهای چندرسانهای‬

‫‪https://shamsipour.tvu.ac.ir/‬‬
‫اشکان خدایارخانی همدانی‬
‫زمستان ‪1400‬‬

‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬

 ‫هدف این جلسه‬
‫فرمت های تصویر‪ ،‬خصوصیت رنگ‪ ،‬لوگو‬

‫‪1‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫بیشترین عکس های دروب‬

‫‪2‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
‫فرمت تصویر )‪BMP(Bitmap Image File‬‬
‫فایل‌های‌با‌فرمت‌‪ ، BMP‬تصاویر‌بیت‌مپ‌فشرده‌نشده‌اند‬ ‫•‬
‫وضوح‌و‌کیفیت‌باالتر‌نسبت‌به‌تصاویر‌‪JPG‬‬ ‫•‬
‫توسعه‌داده‌شده‌توسط‌مایکروسافت‬ ‫•‬
‫پشتیبانی‌از‌‪ 16.7‬میلیون‌رنگ‬ ‫•‬
‫نوع‌تصویر‌‪ Raster‬با‌بیت‌مپی‬ ‫•‬
‫پشتیبانی‌از‌چنل‌آلفا‬ ‫•‬
‫برای‌ذخیره‌عکس‌ها‌در‌اندازه‌های‌کوچک‌همچون‌لوگو‌از‌‪ BMP‬استفاده‌‬ ‫•‬
‫میکنند‪.‬‬

‫‪3‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
‫فرمت تصویر )‪GIF(Graphic Interchange Format‬‬
‫‪ GIF‬یک فرمت تصویری رستر‪ 8‬بیت میباشد که به منظور ایجاد‬
‫تصاویر متحرک و ثابت از آن استفاده میشود‪.‬‬
‫• قابلیت پشتیابنی از کانال آلفا را دارد‪.‬‬
‫• فرمت تصویری ‪ ، GIF‬یک انتخاب مناسب برای بنرهای تبلیغاتی‬
‫و تصاویر انمیشن در وب سایت ها میباشد‪.‬‬
‫• تعداد فریم های فرمت یک تصویر متحرک ‪ 12 GIF‬الی ‪ 24‬فریم‬
‫میباشد‪.‬‬
‫• برای طیف های رنگی زیاد مناسب نیست‪.‬‬

‫‪4‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
‫فرمت تصویر ‪(Portable Network Graphic ) PNG‬‬

‫‪‌: PNG-8‬تعداد‌کم‌رنگ‌‪ 256‌،‬رنگی‪‌،‬حجم‌کم‬

‫‪‌: PNG-24‬تعداد‌رنک‌باال‪ 16‌،‬میلیون‌رنک‪‌،‬پشتبانی‌از‌تصاویر‌ترنسپرنت‌‪‌،‬‬
‫حجم‌باال‌نسبت‌به‌‪PNG-8‬‬
‫• ‪lossless compression‬‬
‫• مناسب‌برای‌طراحی‌و‌نقاشی‌ها‌نوشته‌ها‌و‌آیکن‌ها‬

‫‪5‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
‫فرمت تصویر ‪(Tagged Image File Format) TIFF‬‬

‫از این فرمت تصویری برای ذخیره سازی رستری (پیکسلی) و‬

‫اطالعات عکس استفاده میشود‪.‬‬
‫• مورد استفاده توسط عکاسان‬
‫• اسکن رزولوشن باال‬
‫• ‪lossless compression‬‬

‫‪6‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫فرمت تصویر ‪JPEG‬‬
‫‪ JPEG‬مخفف‌‪Joint Photographic Experts Group‬‬ ‫•‬
‫پیدایش‌سال‌‪1992‬‬ ‫•‬
‫رایجترین‌فرمت‌ذخیره‌سازی‌تصاویر‬ ‫•‬
‫ایده‌آل‌ترین‌شیوه‌فشرده‌سازی‌تصویر‌مبتنی‌بر‌‪ Lossy‬با‌متد‌‪DCT‬‬ ‫•‬
‫از‌کانال‌آلفا‌پشتباتی‌نمیکند‬ ‫•‬
‫نوع‌تصویر‌‪ 24‬بیتی‌مناسب‌برای‌تصاویر‌دیجیتالی‬ ‫•‬
‫مورد‌استفاده‌در‌وب‬ ‫•‬
‫• نامناسب‌برای‌تصاویر‌گرافیکی‌نقاشی‌شده‪‌،‬دودویی‌و‌همچنین‌متن‬

‫‪7‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫فرمت ‪Raw‬‬
‫• فایل‌‪ Raw‬به‌عنوان‌نگاتیو‌دیجیتالی‌شناخته‌میشود‬
‫• فایل‌های‌‪ Raw‬حاوی‌کاملترین‌داده‌های‌تصویری‌فشرده‌نشده‌هستند‌و‌‬
‫باید‌پردازش‌شوند‪.‬‬
‫• بدون‌استفاده‌از‌فشرده‌سازی‌یا‌با‌استفاده‌از‌فشرده‌سازی ‪lossless‬‬
‫• استفاده‌از‌این‌فرمت‌در‌دوربین‌های‌عکاسی‬

‫‪RAW files are not images — they’re just large files filled‬‬
‫‪with the image data as it was captured‬‬

‫‪8‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫فرمت ‪Raw‬‬

‫‪9‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
‫فرمت ‪(scalable vector graphics)SVG‬‬
‫فرمت‌تصویری‌برپایه‌ی‌وکتور‌است‌که‌به‌شما‌اجازه‌می‌دهد‌تصاویر‌وکتور‌‬ ‫•‬
‫را‌بدون‌از‌دست‌دادن‌کیفیت‌به‌شکل‌دلخواه‌خود ایجاد‌کنید‪.‬‬
‫کاربردها‌‪‌‌:‬ساخت‌تصاویر‌و‌نمودارهای‌ساده‪‌،‬تولید‌آیکون‌و‌لوگو‪‌،‬ایجاد‌رابط‌‬ ‫•‬
‫ها ‪‌،‬استفاده‌در‌وب‌سایت‌ها‬
‫فرمت‌برداری‌مبتنی‌بر ‪XML‬‬ ‫•‬
‫ویژگی‌ها‌‪:‬‬ ‫•‬
‫‪ -‬مقیاس‌پذیر‌است‬
‫‪ -‬حجم‌پایین‌تصاویر‬
‫‪ -‬قابلیت‌امکان‌ویرایش‬
‫‪10‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
‫فرمت ‪(scalable vector graphics)SVG‬‬

‫‪11‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫فایل ‪WebP‬‬
‫• یک فایل با پسوند ‪ ،WebP‬فایلی است که از سوی گوگل برای کاهش‬
‫اندازه تصاویر بدون کاهش کیفیت جهت صرفه‌جویی در فضای ذخیره‌سازی‬
‫ارائه شده است‪ .‬تصاویر ‪ WebP‬طوری طراحی شده‌اند که وب سریع‌تر شود‬
‫و توسعه‌دهندگان وب بتوانند از عکس‌های کوچک‌تر و زیباتر استفاده کنند‪.‬‬

‫‪WebP file size is‬‬

‫‪25%-34% smaller‬‬
‫‪compared to JPEG‬‬

‫‪12‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫فایل ‪WebP‬‬

‫‪13‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫خالصه فرمت های تصویری‬

‫‪14‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
‫بهترین نرم افزارهای کار با تصاویر ‪2022‬‬
‫نرم افزار گرافیکی فتوشاپ )‪(Photoshop‬‬
‫پیکسلی (‪)Raster‬‬ ‫•‬

‫نرم افزار گرافیکی ایلوستریتور )‪(Illustrator‬‬

‫برداری (‪)Vector‬‬ ‫•‬

‫‪15‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
‫بهترین نرم افزارهای کار با تصاویر ‪2022‬‬
‫نرم افزار گرافیکی کرول دراو )‪(Corel Draw‬‬
‫پیکسلی (‪ )Raster‬و برداری )‪)Vector‬‬ ‫•‬

‫نرم افزار گرافیکی گیمپ (‪(GIMP‬‬

‫پیکسلی (‪)Raster‬‬ ‫•‬

‫‪16‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫روانشانسی رنگها‬

‫‪58‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫رنگ آبی‬
‫• اولین‌رنگ‌مورد‌عالقه‌در‌بین‌مخاطبان‬
‫• نشان‌دهنده‌‪‌:‬اعتماد‪‌،‬امنیت‪‌،‬ثبات‪‌،‬دوستی‌و‌آرامش‬
‫• مورد‌استفاده‌درتمام‌بیزینس‌ها‌مرتبط‌با‌بانک‌و‌موسسات‌مالی‬

‫‪59‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫رنگ نارنجی‬
‫• ترغیب‌مخاطب‌برای‌انجام‌دادن‌یک‌کارو‌ایجاد‌هیجان‬
‫• نشان‌دهنده‌‪‌:‬صمیمیت‪‌،‬شور‌و‌شوق‌و‌خالقیت‬
‫• جذب‌مخاطب‌برای‌خرید‌از‌وب‌سایت‬

‫‪60‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫رنگ قرمز‬
‫• جلب‌توجه‌مخاطب‌‬
‫• نشان‌دهنده‌‪ :‬احساسات‌تند‌و‌شدید‪‌،‬انرژی‪‌،‬اضطرار‪‌،‬جنب‌و‌جوش‌و‌خطر‬
‫• مناسب‌برای‌محتوای‌مرتبط‌با‌غذا‪‌،‬مد‌و‌فشن‪‌،‬سرگرمی‌و‌سرویس‌های‌‬
‫اضطراری‬

‫‪61‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫رنگ بنفش‬
‫• جلب‌توجه‌بانوان‌‬
‫• نشان‌دهنده‌‪:‬حس‌سلطنتی‪‌،‬ثروت‪‌،‬‬
‫موفقیت‌و‌دانایی‬
‫• مناسب‌برای‌سایت‌هایی‌با‌محوریت‌‬
‫بانوان‌و‌ایرالین‌های‌هوایی‬

‫‪62‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫رنگ زرد‬
‫• جلب‌توجه‌جوانان‌‬
‫• نشان‌دهنده‌‪:‬نیروی‌جوانی‪‌،‬خوش‌بینی‌و‌سرخوشی‌‬
‫• مناسب‌برای‌جلب‌توجه‌کاربر‌به‌دکمه‌ها‌و‌متن‬

‫‪63‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫رنگ سبز‬
‫• دومین‌رنگ‌مورد‌عالقه‌مخاطبان‬
‫• نشان‌دهنده‌‪:‬پویای‪‌،‬سالمتی‪‌،‬آرامش‪‌،‬سخاوت‌و‌موفقیت‌و‌طبیعت‬
‫• مناسب‌برای‌وبسایت‌هایی‌با‌محوریت‌علم‪‌،‬جهانگردی‪‌،‬منابع‌انسانی‬

‫‪64‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫رنگ سیاه‬
‫• نشان‌دهنده‌‪:‬کمال‪‌،‬ظرافت‪،‬وقار‪‌،‬قدرت‪‌،‬ثبات‪‌،‬استحکام‪‌،‬تشریفات‌و‌هوش‌می‌باشد‪.‬‬
‫• مناسب‌برای‌وبسایت‌‌فروش‌کاالهای‌لوکس‪‌،‬مد‌و‌فشن‪‌،‬بازاریابی‪‌،‬لوازم‌آرایشی‌‬

‫‪65‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫رنگ خاکستری‬
‫• نشان‌دهنده‌‪:‬سادگی‪‌،‬آرامش‪‌،‬آینده‌نگری‪‌،‬عقالنیت‌‪.‬‬
‫• مناسب‌برای‌وب‌سایت‌های‌مرتبط‌با‌صنعت‪‌،‬تکنولوژی‌‬
‫• بیانگر‌دقت‌و‌کمالگرایی‬

‫‪66‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫لوگو‬

‫‪67‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫لوگو‬
‫رنگ سیاه‬
‫اثرات مثبت‪ :‬پیچیدگی‪ ،‬زرق و برق‪ ،‬امنیت‪ ،‬ایمنی‪ ،‬کارایی‬
‫اثرات منفی‪ :‬سرکوب‪ ،‬سردی‪ ،‬تهدید‪ ،‬سنگینی‬
‫زرد‬
‫اثرات مثبت ‪ :‬خوش بینی‪ ،‬اعتماد به نفس‪ ،‬عزت نفس‪ ،‬قدرت‬
‫احساسی‪ ،‬دوستی‪ ،‬خالقیت‬
‫اثرات منفی ‪ :‬غیر منطقی بودن‪ ،‬ترس‪ ،‬شکنندگی احساسی‪،‬‬
‫افسردگی‪ ،‬اضطراب‪ ،‬خودکشی‬
‫‪68‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬
 ‫لوگو‬
‫زرد‬
‫اثرات مثبت ‪ :‬خوش بینی‪ ،‬اعتماد به نفس‪ ،‬عزت نفس‪ ،‬قدرت‬
‫احساسی‪ ،‬دوستی‪ ،‬خالقیت‬
‫اثرات منفی ‪ :‬غیر منطقی بودن‪ ،‬ترس‪ ،‬شکنندگی احساسی‪،‬‬
‫افسردگی‪ ،‬اضطراب‪ ،‬خودکشی‬
‫آبی‬
‫اثرات مثبت‪ :‬هوش‪ ،‬ارتباطات‪ ،‬اعتماد‪ ،‬کارایی‪ ،‬آرامش‪ ،‬وظیفه‪،‬‬
‫منطق‪ ،‬خنکی‪ ،‬انعکاس‪ ،‬آرامش‬
‫اثرات منفی‪ :‬سردی‪ ،‬بی اعتمادی‪ ،‬عدم احساس‪ ،‬عدم دوستی‬ ‫‪69‬‬
‫محیط های چندرسانه ای – دانشگاه فنی و حرفه ای شهید شمسی پور‬