جلسه 15 Graphics and design

فصل ۱: مقدمه‌ای بر گرافیک کامپیوتری

• 
  

  تیتر ۱.۱: تعریف گرافیک کامپیوتری و تاریخچه

  
  


• 
  

  گرافیک کامپیوتری چیست؟ (نمایش بصری داده‌ها و اطلاعات با استفاده از کامپیوتر)

  
  


• 
  

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

  
  


• 
  

  تیتر ۱.۲: انواع گرافیک کامپیوتری

  
  


• 
  

  گرافیک رستری (Raster Graphics):

  
  


• 
  

  مبتنی بر پیکسل (Pixel)

  
  


• 
  

  مثال: عکس‌های دیجیتال (JPG, PNG)، نرم‌افزارهایی مانند فتوشاپ.

  
  


• 
  

  کاربردها: ویرایش عکس، طراحی وب‌سایت (بخش‌های تصویری).

  
  


• 
  

  گرافیک بُرداری (Vector Graphics):

  
  


• 
  

  مبتنی بر فرمول‌های ریاضی (خطوط، منحنی‌ها، اشکال).

  
  


• 
  

  مثال: فایل‌های SVG، نرم‌افزارهایی مانند ایلاستریتور، کورل‌درا.

  
  


• 
  

  کاربردها: طراحی لوگو، آیکون‌ها، اینفوگرافیک‌ها، انیمیشن‌های دوبعدی (قابلیت تغییر اندازه بدون افت کیفیت).

  
  


• 
  

  تیتر ۱.۳: کاربردهای گرافیک کامپیوتری

  
  


• 
  

  رابط‌های کاربری (UI/UX Design)

  
  


• 
  

  بازی‌های کامپیوتری

  
  


• 
  

  انیمیشن و جلوه‌های ویژه سینمایی

  
  


• 
  

  طراحی صنعتی و معماری

  
  


• 
  

  تجسم داده‌ها (Data Visualization)

  
  


• 
  

  واقعیت مجازی (VR) و واقعیت افزوده (AR)

  
  


• 
  

  مثال کاربردی: مقایسه کیفیت نمایش یک لوگوی طراحی شده با فرمت JPG (رستری) در اندازه‌های مختلف در مقابل یک لوگوی SVG (بردری).

  
  


• 
  

  خلاصه نکات کلیدی:

  
  


• 
  

  گرافیک کامپیوتری پلی میان دنیای دیجیتال و درک بصری انسان است.

  
  


• 
  

  انتخاب بین گرافیک رستری و بُرداری به نیاز پروژه بستگی دارد (کیفیت تصویر در مقابل انعطاف‌پذیری در تغییر اندازه).

  
  


• 
  

  این حوزه در اکثر جنبه‌های فناوری مدرن نقش حیاتی دارد.

  
  

فصل ۲: اصول طراحی بصری

• تیتر ۲.۱: عناصر طراحی (Elements of Design)


• نقطه (Point)


• خط (Line)


• شکل (Shape)


• فرم (Form)


• بافت (Texture)


• رنگ (Color)


• فضا (Space)


• تیتر ۲.۲: اصول طراحی (Principles of Design)


• تعادل (Balance): متقارن، نامتقارن، شعاعی


• کنتراست (Contrast): تضاد رنگ‌ها، اندازه‌ها، اشکال


• تاکید (Emphasis/Hierarchy): جلب توجه به عناصر مهم


• ریتم و حرکت (Rhythm & Movement): هدایت چشم بیننده


• وحدت و هماهنگی (Unity & Harmony): ایجاد یکپارچگی بصری


• مقیاس و تناسب (Scale & Proportion)


• تیتر ۲.۳: تئوری رنگ (Color Theory)


• چرخه رنگ (Color Wheel): رنگ‌های اصلی، ثانویه، سه‌تایی


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


• رنگ‌های مکمل، مشابه، سه‌تایی (Triadic)


• روانشناسی رنگ‌ها و تاثیر آن بر مخاطب


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


• خلاصه نکات کلیدی:


• درک عناصر و اصول طراحی برای خلق آثار بصری تاثیرگذار ضروری است.


• رنگ قدرت زیادی در انتقال احساسات و معانی دارد.


• طراحی موفق، ترکیبی از زیبایی‌شناسی و انتقال پیام موثر است.

فصل ۳: نرم‌افزارهای گرافیکی و ابزارهای طراحی

• تیتر ۳.۱: نرم‌افزارهای ویرایش تصویر (رستری)


• Adobe Photoshop: قابلیت‌ها، کاربردها (ترکیب عکس، روتوش، طراحی گرافیکی).


• GIMP (رایگان و متن‌باز): جایگزینی قدرتمند برای فتوشاپ.


• Affinity Photo: جایگزین حرفه‌ای دیگر.


• تیتر ۳.۲: نرم‌افزارهای طراحی بُرداری


• Adobe Illustrator: استاندارد صنعتی برای طراحی بُرداری.


• Inkscape (رایگان و متن‌باز): جایگزین قدرتمند ایلاستریتور.


• Figma / Sketch: تمرکز بر طراحی رابط کاربری (UI) و تجربه کاربری (UX) با قابلیت‌های بُرداری.


• تیتر ۳.۳: ابزارهای مدل‌سازی و رندرینگ سه‌بعدی (مقدماتی)


• Blender (رایگان و متن‌باز): معرفی قابلیت‌های مدل‌سازی، انیمیشن و رندرینگ.


• Autodesk Maya / 3ds Max: استانداردهای صنعتی در انیمیشن و جلوه‌های ویژه.


• تیتر ۳.۴: مفاهیم پایه در طراحی UI/UX


• تفاوت UI (رابط کاربری) و UX (تجربه کاربری).


• اصول طراحی کاربر-محور.


• ابزارهای نمونه‌سازی اولیه (Prototyping Tools) مانند Figma.


• مثال کاربردی: نمایش مراحل طراحی یک لوگوی ساده با استفاده از Illustrator یا Inkscape و سپس استفاده از آن در یک طرح وب‌سایت در Figma.


• خلاصه نکات کلیدی:


• هر نرم‌افزار گرافیکی ابزارها و قابلیت‌های خاص خود را دارد.


• آشنایی با نرم‌افزارهای استاندارد صنعتی مزیت رقابتی ایجاد می‌کند.


• طراحی UI/UX نیازمند درک عمیق از رفتار کاربر و ایجاد تجربه کاربری لذت‌بخش است.

فصل ۴: گرافیک در توسعه نرم‌افزار و وب

• تیتر ۴.۱: نقش گرافیک در رابط کاربری (UI)


• طراحی بصری صفحات وب و اپلیکیشن‌ها.


• اصول طراحی ریسپانسیو (Responsive Design).


• استفاده از آیکون‌ها، فونت‌ها و تصاویر.


• تیتر ۴.۲: فرمت‌های رایج تصاویر در وب


• JPEG: مناسب برای عکس‌ها، فشرده‌سازی با افت کیفیت.


• PNG: مناسب برای تصاویر با پس‌زمینه شفاف، افت کیفیت کمتر یا بدون افت.


• GIF: مناسب برای انیمیشن‌های ساده.


• SVG: گرافیک بُرداری، مقیاس‌پذیر و سبک، ایده‌آل برای لوگو و آیکون‌ها.


• WebP: فرمت مدرن با فشرده‌سازی بالا و پشتیبانی از شفافیت و انیمیشن.


• تیتر ۴.۳: مفاهیم پایه انیمیشن در وب


• CSS Animations & Transitions


• JavaScript Animation Libraries (مانند GSAP)


• انیمیشن‌های SVG


• تیتر ۴.۴: گرافیک سه‌بعدی و وب (Web 3D)


• معرفی کتابخانه‌هایی مانند Three.js.


• کاربردهای گرافیک سه‌بعدی در وب (محصولات، بازی‌ها، تجربیات تعاملی).


• مثال کاربردی: بررسی یک وب‌سایت مدرن و تحلیل چگونگی استفاده از تصاویر بهینه شده، انیمیشن‌های CSS و آیکون‌های SVG برای بهبود تجربه کاربری.


• خلاصه نکات کلیدی:


• بهینه‌سازی تصاویر برای وب (حجم و فرمت مناسب) بسیار مهم است.


• طراحی UI خوب، کاربر را به سمت اهدافش هدایت می‌کند.


• گرافیک مدرن حتی به فضاهای سه‌بعدی در وب نیز راه یافته است.

تمرین‌های پایان فصل:

• فصل ۱:


• یک شیء روزمره را انتخاب کرده و توضیح دهید که چگونه می‌توان آن را هم به صورت گرافیک رستری و هم بُرداری نمایش داد. مزایا و معایب هر روش در این مورد چیست؟


• چند نمونه از کاربردهای گرافیک کامپیوتری در زندگی روزمره (غیر از موارد ذکر شده در کلاس) را پیدا کرده و شرح دهید.


• فصل ۲:


• یک کارت پستال یا پوستر ساده با استفاده از نرم‌افزار دلخواه (حتی Paint یا ابزارهای آنلاین ساده) طراحی کنید. در طراحی خود سعی کنید از حداقل ۳ اصل طراحی (مانند تعادل، تاکید، و کنتراست) و ۳ عنصر طراحی (مانند خط، شکل، رنگ) استفاده کنید.


• چرخه رنگ را ترسیم کنید و یک ترکیب رنگی سه‌تایی (Triadic) و یک ترکیب رنگی مکمل (Complementary) را مشخص کنید.


• فصل ۳:


• یک آیکون ساده (مانند آیکون خانه یا تنظیمات) را با استفاده از یک نرم‌افزار طراحی بُرداری (مانند Inkscape یا ابزارهای آنلاین مشابه) بسازید.


• اگر به نرم‌افزاری مانند فتوشاپ یا GIMP دسترسی دارید، یک عکس ساده را ویرایش کنید (مثلاً تنظیم روشنایی و کنتراست).


• فصل ۴:


• یک طرح اولیه (Wireframe) برای صفحه اصلی یک وبلاگ یا فروشگاه آنلاین ساده طراحی کنید. روی چیدمان عناصر (Layout) تمرکز کنید.


• در مورد تفاوت‌های اصلی فرمت‌های JPEG و PNG تحقیق کنید و بگویید در چه شرایطی از هر کدام استفاده می‌شود.