درسنامه آموزشی تولید محتوای الکترونیک و برنامه سازی کلاس دهم شبکه و نرم افزار رایانه

واحد یادگیری 1: شایستگی کار با ابزارهای ساده گرافیکی

آیا تا به حال پی‌برده‌اید

- نرم‌افزارهای گرافیکی در چه اموری کاربرد دارند؟
- تنظیمات کاغذ برای چاپ چگونه است؟
- تصاویر نقش بیتی و برداری چه ویژگی‌هایی دارند؟
- درج قلم‌های فارسی در نرم‌افزار Illustrator چگونه است؟ 
- کاربرد ماسک در طراحی چیست؟

هدف از این واحد شایستگی، چگونگی کار با ابزارهای ساده و اولیه نرم‌افزار Illustrator است.

استاندارد عملکرد

با استفاده از ابزارهای ترسیمی و متنی محیط نرم‌افزار گرافیکی، طراحی گرافیکی برای چاپ انجام دهد.

تعریف گرافیک

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

ارتباط گرافیک و نرم‌افزار

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

نقش بیتی (Bitmap)

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

برداری (Vector)

در این قالب تصاویر گرافیکی به صورت برداری تعریف می‌شوند. به این معنی که نقطه با مختصات (X,Y) و خط با استفاده از دو نقطه تعریف می‌شود. همین‌طور اطلاعات مربوط به رنگ، ضخامت و ... هم به این اطلاعات ریاضی اضافه می‌شود. شما هر چه تصاویر را بزرگ کنید، پیکسل پیکسل نمی‌شوند، چون با هر بزرگ‌نمایی، دوباره تصاویر با کمک اطلاعات ریاضی بازسازی می‌شوند و اگر محدودیت صفحه نمایش‌ها اجازه می‌داد این تصاویر تا بی‌نهایت قابل بزرگ‌نمایی بودند، زیرا به پیکسل‌ها وابسته نیستند.

معرفی نرم‌افزار Adobe Illustrator

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

کارگاه 1 (شروع کار با نرم‌افزار Illustrator) 

1- نرم‌افزار Illustrator را اجرا کنید.

در هنگام بارگذاری برنامه، شکل زیر ظاهر می‌شود. این شکل بسته به نسخۀ نرم‌افزار متفاوت خواهد بود.

2- برای نمایش یک پنل از منوی Window روی نام پنل کلیک کنید.

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

3- یک سند جدید ایجاد کنید (شکل 7).

4- تنظیمات سند جدید را انجام دهید.

در کادر محاوره ای بازشده در قسمت Profile سند جاری،گزینه Print را انتخاب و پیش تنظیمات برای انجام عملیات چاپی را بررسی کرده و نام هریک از بخش‌های نشان داده شده را در کادر مربوطه بنویسید (شکل 8).

در ایران واحد اندازه‌گیری (Unit) سندهای چاپی mm و cm انتخاب می‌شود. ولی واحد اندازه‌گیری سندهای وبی که برای صفحات اینترنتی و نمایشی مناسب هستند، بر اساس واحد pixel است.

کارگاه 2 (ترسیم نقوش هندسی) 

در این کارگاه می‌خواهیم روش ترسیم نقوش هندسی را آموزش دهیم. برای نمونه شکل 9 را ترسیم می‌کنیم.

1- یک سند جدید در حالت افقی و در اندازه A4 ایجاد کنید.

2- خطوط شطرنجی را فعال کنید (شکل 10).

3- یک مربع ترسیم کنید.

با انتخاب ابزار Rectangle (مستطیل) و کلیک روی صفحه، می‌توان اندازه طول و عرض مستطیل را تنظیم کرد (شکل 1).

4- یک نسخه مشابه از مربع رسم شده ایجاد کنید (شکل 12).

5- تصویر را بچرخانید.

برای چرخش یک فرم هندسی بعد از انتخاب آن از مسیر object>transform>Rotate در پنل باز شده زاویه چرخش را وارد کنید (شکل 13).

به عملیاتی که باعث تغییر یک شکل یا فرم هندسی می‌شود transform می‌گویند.

6- با جابه‌جایی، تصویر جدید را ایجاد کنید (شکل 14- ب).

7- اشکال را ترکیب کنید.

ابزار Selection را انتخاب کرده، اشکال را انتخاب کنید و به مسیر Window>Pathfinder بروید از پنل Pathfinder نماد Unite را برای ترکیب اشکال انتخاب کنید (شکل 14- الف).

8- تصویر را تکمیل کنید.

از تصویر به دست آمده نسخه مشابه تهیه کرده و در کنار هم چیدمان کنید (شکل 15).

کارگاه 3 (طراحی با اشکال هندسی) 

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

1- یک سند جدید با ابعاد دلخواه ایجاد کنید.

2- برای ترسیم بدن حیوان، یک دایره ترسیم کنید.

برای این کار از ابزار Ellipse Tool (L) استفاده کنید.

3- رنگ دور و داخل دایره را تنظیم کنید.

در ترسیمات انجام شده در Illustrator معمولا دو بخش دیده می‌شود. Fill یا بخش پرکننده و Stroke یا خط دور. رنگ هر یک از این دو بخش و همچنین ضخامت خط دور (Stroke Weight) قابل تنظیم است. با انتخاب ابزار Selection از جعبه ابزار و کلیک روی شکل مورد نظر می‌توانید آن را انتخاب کرده و ویژگی‌های آن را از نوار کنترل تغییر دهید.

با کلیک روی مثلث مشخص شده در بخش 1 پنل رنگ ظاهر می‌شود، یک رنگ دلخواه از این بخش برای داخل دایره انتخاب کنید، روی مثلث مشخص شده در بخش 2 کلیک کنید و از پنل ظاهر شده نماد  را انتخاب کنید، این کار سبب می‌شود دور دایره بدون رنگ باشد.

4- دایره را بچرخانید.

ابزار Rotate را از جعبه ابزار انتخاب کنید، با نگه داشتن کلید Alt و کشیدن هم‌زمان ماوس مرکز دوران را به زیر دایره بکشید. مرکز دوران نقطه‌ای است که چرخش حول آن انجام می‌شود که به طور پیش‌فرض در مرکز شکل قرار دارد. بعد از رها کردن کلید Alt درکادر ظاهر شده در بخش Angle، زاویه چرخش را با عبارت 360/8 وارد کنید و روی دکمه Copy کلیک کنید. نتیجه کار چیست؟

5- با زدن کلیدهای Ctrl+D به تعداد مناسب از دایره نسخه مشابه ایجاد کنید (شکل 18)

6- همه اشکال ترسیم شده را به صورت یک شکل واحد درآورید.

یک دایره در قسمت سفید رنگ قرار دهید تا یک فضای بسته ایجاد شود، با ابزار Selection همه دایره‌ها را انتخاب کنید، از منوی Window گزینه Pathfinder را انتخاب کنید، در این پنل بر روی گزینه Unit کلیک کنید (شکل 19). به این ترتیب بدن گوسفند آماده شد.

7- یک مستطیل گوشه‌گرد در موقعیت مشخص شده بکشید (شکل 20).

از ابزار Rounded Rectangle Tool استفاده کنید.

8- برای ترسیم سر، سه‌دایره ترکیبی با رنگ سفید و بدون خط دور در موقعیت مناسب قرار دهید (شکل 21).

9- برای ترسیم گوش، یک نیم‌دایره ترسیم کنید.

برای این مرحله ابتدا یک دایره، سپس یک مستطیل روی آن ترسیم کنید. در پنل Pathfinder روی نماد Minus کلیک کنید تا شکل مستطیل از دایره کم شود (شکل 22).

10- شکل ایجاد شده را در مکان صحیح قرار داده و آن را به میزان مناسب دوران دهید.

با توجه به شکل نیم‌دایره باید به پشت منتقل شود برای انجام این کار می‌توانید از گزینه Send Backward واقع در مسیر Object>Arrange یا از کلیدهای میانبر ]+Ctrl استفاده کنید (شکل 23).

11- یک نسخه قرینه از شیء ترسیم شده ایجاد کنید.

برای تهیه نسخه مشابه، نیم‌دایره را انتخاب کرده سپس گزینه Reflect را از مسیر Object>Transform انتخاب کنید، در کادر ظاهر شده گزینه Vertical را انتخاب کنید (شکل 24)، سپس بر روی دکمه Copy کلیک کنید و نسخه مشابه را در جای مناسب قرار دهید.

12- سایر قسمت‌ها را به طرح اضافه کنید (شکل 25).

از ترکیب چهار مستطیل گوشه گرد و یکی کردن آن‌ها (Unit) بینی و دهان را ایجاد کنید و از دو مستطیل گوشه گرد برای پاها استفاده کنید.

کارگاه 4 (طراحی با استفاده از شکل دایره) 

در این کارگاه با شکل‌های آماده گلبرگ‌های یک گل را طراحی می‌کنیم.

1- یک سند چاپی و در قطع A4 باز کنید.

2- یک بیضی در حالت fill بدون رنگ و خطوط محیطی به ضخامت 2pt ترسیم کنید (شکل 26).

3- روی شکل تغییر ایجاد کنید.

با استفاده از ابزار  Direct Selection (A) ابتدا همانند شکل 27 نقطه پایین دایره را انتخاب کرده و با استفاده از نماد convert Selected Anchor point to corner آن را تغییر شکل دهید، سپس مانند شکل 28 نقطه بالای فرم را انتخاب و آن را تغییر دهید.

4- گلبرگ را دوران دهید و یک نسخه مشابه از آن را ایجاد کنید.

گلبرگ را حول نقطۀ پایین آن بچرخانید (شکل 29)

5- شکل را تکمیل کنید.

با انتخاب گزینۀ Transform again یا کلید میانبر Ctrl + D گلبرگ‌ها حول مرکز دوران در کنار هم چیده می‌شوند (شکل 30). گزینه‌ی Transform again آخرین Transform انجام شده را تکرار می‌کند.

6- سند را با قالب عمومی (EPS) ذخیره کنید.

EPS (Encapsulated Post Script) یک قالب عمومی است که اکثر طراحان هنگامی که می‌خواهند کار را برای چاپ آماده کنند و یا زمانی که می‌خواهند از طرح در نرم‌افزارهای صفحه‌آرایی Indesign و QuarkXPress خروجی بگیرند، از آن استفاده می‌کنند. به مسیر File > Save As بروید و EPS را به عنوان file type انتخاب کنید.

زمانی که کلید Save را انتخاب می‌کنید پنل تنظیمات EPS باز خواهد شد (شکل 31). بدون تغییر در تنظیمات پیش‌فرض، اطلاعات را ذخیره کنید.

شاید لازم باشد آن را در یک نسخه پایین‌تر Illustrator ذخیره کنید چون ممکن است فردی که می‌خواهد از آن استفاده کند هنگام باز کردن پرونده با مشکل مواجه شود.

Version: اگر می‌خواهید مطمئن باشید که خروجی شما با همه برنامه‌ها سازگار است Illustrator 8.0 را انتخاب کنید.
Preview Format: یک پیش نمایش سریع از طرح در هنگام وارد شدن به یک نرم‌افزار دیگر به شما نشان می‌دهد.
Embed Fonts: اگر می‌خواهید در خروجی EPS قلم‌های استفاده شده، در طرح قرار گیرد و هنگامی که فرد دیگری آن را باز می‌کند قلم‌ها در دسترس او باشد، این قسمت را فعال کنید.

کارگاه 5 (ترسیم با ابزار Pencil) 

در این کارگاه قصد داریم روش ترسیم شکل 32 را آموزش دهیم.

1- یک سند جدید در اندازه A4 ایجاد کنید.

2- ابزار Pencil را انتخاب کنید (شکل 33).

با انتخاب این ابزار و کشیدن ماوس روی محل ترسیم، می‌توان شکل مورد نظر را ترسیم کرد.

3- رنگ ترسیم را انتخاب کنید (شکل 34)

در بخش پایین جعبه‌ابزار، دو مربع برای تنظیم رنگ Fill و Stroke قرار دارد. روی ابزار مربع دابل کلیک کرده، سپس از پنل باز شده رنگ دلخواه را انتخاب کنید.

4- با استفاده از ابزار Pencil مراحل شکل 35 را به ترتیب اجرا کنید.

5- ضخامت خطوط را تغییر دهید.

برای تغییر ضخامت خطوط، ابتدا خط مورد نظر را با ابزار Selection انتخاب کرده و سپس عدد موردنظر را در نوار کنترل وارد کنید (شکل 36)

6- ضخامت و شکل خطوط را تغییر دهید (شکل 37)

برای زیبایی تصویر، ضخامت خط‌های ترسیم شده را متفاوت انتخاب کنید.

ابزار Pen

یکی از مهم‌ترین ابزارهای نرم‌افزار Illustrator ابزار Pen است. از این ابزار برای ایجاد مسیر به منظور طراحی اشکال استفاده می‌شود. با استفاده از ابزار Pen، می‌توانیم خطوط و منحنی‌هایی ایجاد کنیم و با ترکیب آن‌ها اشکال متنوعی خلق کنیم.

به دلیل اهمیت ابزار Pen قبل از شروع ترسیم، با مسیر (Path) آشنا می‌شویم. مسیرها مجموعه‌ای از خطوط مستقیم و یا منحنی و یا هر دو هستند (شکل 38). مسیرها از نقاطی به نام Anchor Point یا نقاط لنگری (بخش 1 شکل 38) تشکیل شده‌اند که هر یک از این نقاط قابلیت ویرایش و تغییر دارند. در یک مسیر به فاصله بین هر دو نقطه، یک قطعه مسیر (Path Segment) می‌گوییم (بخش 2 شکل 38). در برخی نقاط لنگری دستگیره‌هایی برای تغییر جهت منحنی وجود دارد که به آن Direction Handle گفته می‌شود (بخش 3 شکل 38). برای ویرایش این دستگیره‌ها از نقاط تغییر جهت (Direction Point) استفاده می‌شود (بخش 4 شکل 38).

به طور کلی دو نوع نقطه در مسیر وجود دارد:

الف) نقطه گوشه (Corner Point): باعث اتصال تیز دو مسیر به هم می‌شود (شکل 39).

ب)‌ نقطه منحنی (Curve Point): باعث اتصال نرم دو مسیر به هم می‌شود (شکل 40).

نقاط منحنی به سه دسته تقسیم می‌شوند:

1- نقطه متقارن (Symmetrical): اگر دو طرف نقطه‌ای منحنی باشد، در هر دو طرف دارای اهرم و دستگیره تغییر شکل خواهد بود. اگر نقطه‌ای متقارن باشد این دستگیره‌ها دو ویژگی دارند:

* الاکلنگی که یعنی با بالا رفتن یک دستگیره، دستگیره مقابل پایین می‌رود و بالعکس. 

* همواره اندازه دو دستگیره با هم برابر است؛ یعنی با تغییر اندازه یکی دیگری نیز تغییر می‌کند (شکل 41).

2- نقطه نامتقارن (Smooth): نقطه‌‌‌‌‌‌‌‌‌ای که دو طرف آن دارای اهرم است که هر اهرم را می‌توان جداگانه بزرگ و کوچک کرد. اگر یکی از اهرم‌ها را بگیرید و بکشید و طول هر یک از اهرم‌ها را کم یا زیاد کنید، این کم و زیاد شدن، فقط روی همان منحنی تأثیر می‌گذارد. اگر یکی از اهرم‌ها را بگیرید و تغییر زاویه دهید دیگری نیز برای حفظ تعادل الاکلنگ در جهت مخالف حرکت می‌کند (شکل 42).

3- نقطه نوک تیز (Cusp): نقطه‌ای است که در آن می‌توانید دستگیره‌ها و اهرم‌های آن را کاملاً مستقل از هم دست‌کاری کرده و تغییر دهید. قوس‌های طرفین در حالی که کاملاً به هم متصل هستند اما از هم مستقل هستند (شکل 43).

چگونه می‌توانیم این نقاط را به وجود آوریم:

نقاط متقارن الاکلنگی فقط در هنگام ترسیم ایجاد می‌شوند و بعد از آن وجود نخواهند داشت. ابتدا در نقطه a کلیک کنید ماوس را در نقطه b قرار دهید و درگ کنید. قبل از اینکه ماوس را رها کنید مشاهده می‌کنید که دستگیره‌ها به صورت متقارن تغییر می‌کنند (شکل 44)

نقاط نامتقارن بعد از ترسیم ایجاد می‌شوند. در نقطه a کلیک کنید، در نقطه b کلیک و درگ کنید. در پایان در نقطه c کلیک کنید برای اتمام ترسیم دکمه Esc را بفشارید. حالا اگر با ابزار Direct Selection روی نقطه b کلیک کنید دستگیره‌ها ظاهر می‌شوند اما به صورت غیر متقارن و الاکلنگی تغییر می‌کنند (شکل 45)

برای ایجاد نقطه نوک تیز مطابق شکل 46 ابتدا در نقطه a کلیک کنید. در نقطه b کلیک و درگ کنید، دکمه ماوس را رها کنید. حالا با پایین نگاه داشتن کلید Alt و به کمک ماوس می‌توانید دستگیره‌ها را به صورت مستقل تغییر دهید.

برای تبدیل نقطه‌ها به یکدیگر می‌توانید از گزینه‌های موجود در بخش Anchor Point در نوار کنترل استفاده کنید (شکل 47).

کارگاه 6 (ترسیم با ابزار Pen) 

در این کارگاه قصد داریم شکل پرنده را ترسیم کنیم.

1- یک سند با ابعاد $800 \times 600\,pixel$ ایجاد کنید.

2- ابزار Pen Tool را از جعبه ابزار انتخاب کنید (شکل 48).

3- قبل از شروع ترسیم Fill را در حالت None قرار دهید و برای Stroke رنگ سیاه در نظر بگیرید.

4- بدن پرنده را ترسیم کنید.

در نقطه 1 کلیک به همراه درگ انجام دهید، در نقطه 2 و 3 نیز همین کار را انجام دهید. بعد از اینکه منحنی مورد نظر در نقطه 3 ایجاد شد ابتدا دکمه ماوس را رها کرده و مجدد بر روی نقطه 3 کلیک کنید تا بتوانید یک قطعه مسیر جدید ترسیم کنید. در نقطه 4 و 5 و 6 نیز مانند نقطه 3 عمل کنید. در نقطه 7 کلیک کنید. دکمه ماوس را رها کنید. دکمه Alt را پایین نگاه داشته و به کمک ماوس دستگیره را مانند شکل 49 در جهت مناسب قرار دهید. در نقطه 1 کلیک کنید دکمه Alt را پایین نگاه داشته و به کمک ماوس دستگیره را در جهت مناسب قرار دهید. بعد از پایان ترسیم به کمک ابزار Direct Selection نقاط را به کمک دستگیره‌ها ویرایش کنید تا به فرم مناسب برسید.

5- بال پرنده را نیز با همین روش ترسیم کنید (شکل 50).

بعد از ترسیم بال برای ویژگی Fill در نوار کنترل رنگ سفید در نظر بگیرید. سر بال پرنده کمی ناهموار است (شکل 50). برای رفع این مشکل دستور Simplify را از مسیر Object > Path با پارامترهای مناسب بر روی مسیر اجرا کنید (شکل 51).

6- شکل را تکمیل و رنگ‌آمیزی کنید.

یکی از مهم‌ترین نکات در مورد ترسیم اشکال و منحنی‌ها به کمک ابزار Pen این است که استفاده از نقاط کمتر باعث ترسیم منحنی‌های زیباتر و نرم‌تر خواهد شد.

کارگاه 7 (ترسیم تصاویر برداری از نقش بیتی) 

کارگاه 8 (فارسی نویسی در نرم افزار Illustrator) 

انواع ماسک

به‌وسیله ماسک (لفافه، پوشانه) می‌توان محدوده خاصی از یک تصویر را قابل‌نمایش یا ویرایش کرد. بخشی که خارج از این محدوده قرار دارد غیرقابل‌نمایش و ویرایش خواهد بود. برای ایجاد این محدوده می‌توانید از اشکال هندسی ساده نظیر مربع، مستطیل، دایره، بیضی، ستاره، چندضلعی و یا مسیرهای بسته‌ای که توسط ابزار Pen ایجاد می‌شود استفاده کنید. این محدوده می‌تواند یک متن هم باشد.

انواع ماسک‌ها در نرم‌افزار Illustrator عبارت‌اند از:
1- Clipping Mask (ماسک برشی)
2- Opacity Mask (ماسک شفافیت)

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

کارگاه 9 (طراحی جلد و برچسب لوح نوری)

در این کارگاه به کمک ماسک می‌‌‌‌‌‌‌‌خواهیم جلد لوح نوری و برچسب آن را طراحی کنیم.

1- برای ایجاد برچسب لوح نوری یک سند جدید بازکنید.

2- طرح اصلی را ایجاد کنید.

دایره‌‌‌‌‌‌‌‌‌‌‌‌‌ای به قطر 116 میلی‌متر، ترسیم کنید و در مرکز این دایره، دایره‌ای به قطر 24 میلی‌متر رسم کنید. از امکانات بخش Align کمک بگیرید.

3- به کمک گزینه Minus دایره کوچک را از دایره بزرگ کم کنید.

برای ایجاد برچسب لوح می‌توانید از الگوهای آماده نرم‌افزار نیز استفاده کنید. برای دسترسی به این الگوها گزینه New from Template را از منوی File اجرا کنید. در کادر ظاهرشده پوشه Blank Templates چندین الگوی از پیش تعریف‌شده وجود دارد. برای ایجاد برچسب لوح نوری می‌توانید از الگوی CD Print Items استفاده کنید.

4- تصویر برچسب لوح را ماسک کنید.

شکل رسم شده را روی تصویری که به‌عنوان برچسب لوح در نظر گرفته‌اید، قرار دهید. تصویر و شکل ترسیم‌شده را انتخاب کنید (شکل 54).

سپس از مسیر Object>Cipping Mask>Make یک ماسک برشی ایجاد کنید. با گزینه Edit Contents می‌توان محل قرارگیری برچسب را ویرایش کرد (شکل 55).

در روش دوم ایجاد ماسک برشی بعد از انتخاب شکل و تصویر می‌توانید در پنل Transparency بر روی دکمه Make Mask کلیک کنید.

5- لوگو موردنظر را در محل مناسب قرار دهید.

6- عنوان لوح نوری را در محل موردنظر بنویسید.

برای عنوان لوح نوری، عبارت تولید محتوای الکترونیک و برنامه‌سازی را بنویسید و با ابزار Vertical Type، عنوان را بنویسید. در صورت نیاز متن را بچرخانید (شکل 57).

7- صفحه گسترده جلد لوح را ترسیم کنید.

برای ترسیم صفحه گسترده جلد از پنل Artboards یک Artboard جدید به سند اضافه کنید. سپس مربعی در ابعاد $13 \times 13cm$ رسم کنید.

8- خط چین‌ها را ترسیم کنید.

خطوط مربع را با استفاده از مسیر Window> Brush Libraries>Borders>Borders_Dashed به خطوط خط‌چین تغییر دهید

9- صفحه گسترده را تکمیل کنید.

مربع دیگری با همان ابعاد، ترسیم کرده و با ابزار Scissors (قیچی) بر روی دو گوشه بالای مربع کلیک و سپس ضلع بالایی را جدا کرده و حذف کنید. این مربع را زیر مربع قبلی قرار دهید (شکل 58).

10- قسمت تاشوی درِ پاکت را ایجاد کنید.

یک مستطیل در اندازه‌های $13 \times 2/5$ سانتی‌متر رسم کنید. با استفاده از ابزار Direct selection دو نقطه بالا را انتخاب کنید. کلید S را از صفحه‌کلید بزنید، به کمک ماوس یکی از نقاط را به سمت داخل بکشید. ضلع پایین آن را حذف کرده، سپس آن را بالای مربع خط‌چین قرار دهید. (شکل 59).

11- کناره‌های پاکت را ایجاد کنید.

مستطیلی در ابعاد $2 \times 13$ سانتی‌متر ترسیم کرده و مانند مرحله قبل برای ضلع سمت چپ آن زوایای تند ایجاد کنید. سپس به کمک ابزار Scissors، ضلع داخلی کناره‌ها را حذف کرده و آن را در محل مناسب قرار دهید. به همین ترتیب کناره دیگر را ایجاد کنید (شکل 60).
آیا روش سریع‌تری برای این کار وجود دارد؟

12- ترسیم را رنگ کرده و به آن متن اضافه کنید. (شکل 61).

واحد یادگیری 2: شایستگی کار با ابزارهای پیشرفته گرافیکی

آیا تا به حال پی‌برده‌اید

- چگونه می‌توان طرح خود را به قالب JPG تبدیل کنید؟
- تصاویر گرافیکی با قالب JPG کجا کاربرد دارند؟
- چگونه می‌توان از اشکال دوبعدی، اشکال سه‌بعدی ایجاد کرد؟
- کاربرد گروه کردن اشکال چیست؟
- چگونه می‌توان با استفاده از جلوه‌های گرافیکی، تصاویر را ایجاد کرد؟

هدف از این واحد شایستگی، چگونگی کار با ابزار پیشرفته نرم‌افزار گرافیکی Illustrator است.

استاندارد عملکرد

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

کارگاه 1 (طراحی لوگوی پرچم جمهوری اسلامی ایران)

مد رنگی: در طبیعت تعدادی رنگ اصلی وجود دارد که از ترکیب آن‌ها می‌توان رنگ‌های جدیدی ایجاد کرد. رنگ‌های رنگین کمان در واقع ترکیبی از رنگ‌های مختلف هستند. انسان نیز همیشه از طبیعت برداشت کرده و همان الگوها را در تکنولوژی‌ها استفاده کرده است. اگر کمی با رنگ‌ها و سیستم‌های دیجیتال کار کرده باشید، حتماً متوجه شده‌‌‌‌‌‌‌اید که رنگ‌ها در صفحات وب و نمایشگرها با صفحات چاپ شده، اندکی متفاوت‌اند و هر کدام دارای استاندارد و قالب‌بندی هستند. در این بخش برای شما تفاوت دو قالب اصلی رنگ‌بندی در رایانه به نام‌های RGB و CMYK را معرفی می‌کنیم.

CMYK: در این مد رنگی، رنگ‌ها از ترکیب چهار رنگ آبی فیروزه‌ای (Cyan)، سرخابی (Magenta)، زرد (Yellow) و سیاه (Black) به‌دست می‌آیند. از مد رنگی CMYK برای چاپ روی کاغذ استفاده می‌شود. 

RGB: در این مد رنگی، رنگ‌ها با ترکیب سه رنگ قرمز (Red)، سبز (Green) و آبی (Blue) به وجود می‌آیند. با تغییر دادن مقدار هریک از این سه رنگ، می‌توان رنگ‌های بسیار زیادی به وجود آورد. این نوع مد رنگی بیشتر برای کارهای تلویزیونی و رنگ‌های استاندارد صفحه نمایش استفاده می‌شود. این سیستم رنگ، دارای 16 میلیون رنگ است.

لوگوی نشان داده شده وسط پرچم جمهوری اسلامی ایران با چه فرمی ترسیم شده است؟ در این بخش قصد داریم روش اجرای لوگوی پرچم ایران را با استفاده از برش دایره و چندضلعی‌ها، آموزش دهیم

1- یک سند جدید باز کنید.

در پنل بازشده، زیر مجموعه Advanced گزینه‌ای با نام Color Mode وجود دارد که دارای دو مد رنگی RGB و CMYK است (شکل 63).

2- تصویر آماده را وارد کنید.

از مسیر File/place تصویر لوگوی آماده را وارد کرده و با کلیک کردن تصویر را ثابت کنید (شکل 64).

3- میزان شفافیت تصویر را کم کنید (شکل 65).

بعد از انتخاب تصویر از نوار کنترل مقدار Opacity را کاهش دهید.

4- تصویر را قفل کنید.

با انتخاب مسیر Object/Lock/Selection تصویر را بر روی صفحه قفل کنید. با این روش تصویر جابه‌جا نمی‌شود.

5- بیضی مماس بر تصویر لوگو ترسیم کنید (شکل 66).

6- بیضی دوم را به روش گفته شده، بر خطوط محیطی داخلی لوگو ترسیم کنید (شکل 67).

7- قسمت مشترک را جدا کنید (شکل 68).

برای جدا کردن قسمت مورد نظر (شکل 68-ب) ابتدا هر دو بیضی را انتخاب کنید. بعد از انتخاب ابزار Shape Builder ماوس را در جهت فلش مشخص شده در شکل 68-الف بکشید. هنگامی که دو قسمت با یکدیگر ادغام شدند ابتدا ابزار Selection را انتخاب کنید سپس روی بخش ادغام شده کلیک کنید تا از بقیه شکل جدا شود. سپس این بخش را انتخاب کرده و با زدن کلید Delete آن را حذف کنید.

8- یک قرینه عمودی از شکل ایجاد کنید (شکل 69).

در پنل Reflect می‌توان از شکل انتخاب شده در جهت عمودی یا افقی نسخه قرینه ایجاد کرد. در بخش Axis تنظیمات را وارد کنید و روی دکمه Copy کلیک کنید (شکل 69).

9- نیم‌دایره داخل لوگو را ترسیم کنید (شکل 70).

10- لوگو را تکمیل کنید.

یک شش ضلعی رسم کرده، سپس با استفاده از ابزار Direct Selection سه نقطه پایین شش ضلعی را فعال کرده و با ماوس بکشید تا بر انتهای الف، مماس شود (شکل 71).

11- با استفاده از ابزار Shape Builder فضای مشترک را یکی کنید (شکل 72).

12- شکل تشدید را ترسیم کنید (شکل 73).

ابتدا دایره‌‌ای رسم کنید، سپس یک نسخه مشابه از آن ایجاد کنید طوری که بر بخش بالای تشدید مماس باشد. سپس یک نسخه مشابه از دو دایره رسم شده ایجاد کنید که بر بخش پایینی تشدید، مماس شود. با استفاده از ابزار Shape Builder فضای مشترک را جدا کنید.

13- صویر اصلی لوگو را حذف کنید.

با دابل کلیک کردن، تصویر اصلی لوگو از حالت قفل خارج می‌شود. با فشردن کلید Delete، آن را حذف کنید.

14- اشکال را گروه کنید.

با استفاده از ابزار انتخاب Selection با کشیدن ماوس همه شکل ترسیم شده را انتخاب کرده و با استفاده از کلید میانبر Ctrl+G شکل را گروه کنید.
این دستور این امکان را به کاربر می‌دهد که تغییرات و جابه‌‌‌جایی را یکباره بر روی همۀ شکل ایجاد کند.

15- لوگو را رنگ کنید.

16- سند را با قالب EPS و Ai ذخیره کنید.

کارگاه 2 (طراحی پرچم جمهوری اسلامی ایران) 

1- سه مستطیل یک اندازه ترسیم کنید.

هر کدام از مستطیل‌ها را طبق کد رنگ نشان داده شده در شکل 75 رنگ‌آمیزی کنید.

2- از لوگوی ایجاد شده در کارگاه قبل یک نسخه مشابه ایجاد کنید (شکل 76).

3- شکل به دست آمده را گروه کنید.

4- به شکل انحنا بدهید.

با انتخاب مسیر Object > Envelope Distort > Make with Warp پنل Warp Options را فعال کرده، تنظیمات را اعمال کنید (شکل 77).

می‌توانیم از این پنل برای منحنی کردن متن و اشکال استفاده کنیم. در بخش Style می‌توان حالت انحنای شکل را تعیین کرد.

5- انحنای شکل را ویرایش کنید.

با انتخاب مسیر Object > Envelope Distort > Reset with Mesh و تعیین تعداد سطر و ستون، شبکه توری را فعال کنید (شکل 78). با انتخاب ابزار Direct Selection و کلیک کردن بر نقاطی که روی تصویر ایجاد شده دستگیره‌هایی ایجاد می‌شود که با جابه‌جایی و حرکت دادن آن‌ها می‌توان تصویر را تغییر شکل داد (شکل 79).

6- سند را با قالب Ai و JPG ذخیره کنید.

در این مرحله، یاد می‌گیرید که چگونه کار هنری یا طرح خود را به قالب JPG تبدیل کنید تا بتوانید در وب‌گاه‌ها یا چاپ کردن از آن استفاده کنید.
وقتی قصد دارید پرونده خود را به JPG تبدیل کنید گاهی ممکن است متوجه فضاهای اضافی شوید که در اطراف تصویر قرار دارند. دلیل آن وجود تصاویر پنهان شده در زیر ماسک است. برای حل این مشکل، باید یک Crop Area مشخص کنید تا برای Illustrator تعریف کنید که به جای خروجی گرفتن از همه قسمت‌های تصویر، فقط از فضاهای مشخص شده خروجی بگیرد. با کشیدن یک کادر در اطراف تصویری که می‌خواهید خروجی گرفته شود، آن را مشخص کنید. کادر را انتخاب کرده و به مسیر Object > Artboardes > Fit to Selected Art بروید (شکل 80).

سپس به مسیر File > Export رفته و در قسمت File type گزینه JPEG را انتخاب کنید (شکل 81) و دکمه Save را بزنید. پنجره تنظیمات JPEG ظاهرخواهد شد، بسته به اینکه تصویر را برای وب‌گاه ذخیره می‌کنید یا برای چاپ، ممکن است لازم باشد تنظیمات و تغییرات شکل 82 را اعمال کنید.

ذخیره کردن تصویر برای وب‌گاه یا نمایش روی صفحه نمایشگر

کیفیت (Quality): بین 6 تا 8
درجه وضوح (Resolution): برای نمایش و وب‌گاه‌ها که نیاز به حجم کم و سرعت بالا است از عدد 72 یا 96 استفاده می‌شود.

ذخیره کردن تصویر برای چاپ

کیفیت: روی 12 تنظیم شود.
درجه وضوح: روی High قرار بگیرد.
برای چاپ نیاز است کاربر سند را با بهترین کیفیت و حجم ذخیره کند که عدد 300 پیشنهاد می‌شود (شکل 82).

کارگاه 3 (طراحی واسط کاربری) 

UI مخفف عبارت User Interface به معنای واسط کاربری است. در بحث فناوری اطلاعات به هر چیزی که از طریق فعل و انفعال با آن بتوان با صفحه نمایش دستگاه‌هایی مانند رایانه، تلفن همراه، تبلت و... ارتباط برقرار کرد واسط کاربری گفته می‌شود. واسط کاربری شامل تصاویر، متن‌ها، دکمه‌ها، دیاگرام‌ها، ماژول‌ها، جداول، ویدئوها و همچنین رنگ و مکان آن‌ها است.

امروزه نقش طراحان واسط کاربری بسیار مؤثر است. تارنما، نرم‌افزار و برنامه‌های کاربردی تلفن همراه که ظاهر مناسبی نداشته باشد هرقدر هم محتوای مناسبی داشته باشد نمی‌تواند آن‌چنان‌که شایسته است در جلب توجه مخاطب خود موفق باشد.

در این کارگاه آموزشی قصد داریم واسط کاربری زیر را طراحی کنیم.

1- یک سند با ابعاد $1024 \times 768$ پیکسل ایجاد کنید.

2- طرح اولیه را ایجاد کنید. 

به کمک اشکال هندسی طرح اولیه واسط کاربری را ایجاد کنید. برای ایجاد حالت فنری موجود در طرح می‌توانید بعد از ترسیم اولین دایره، با کلید Alt یک نسخه مشابه از آن ایجاد کنید و با زدن کلیدهای میانبر Ctrl+D به هر تعداد که لازم است دایره‌های بعدی را ایجاد کنید. برای ترسیم بخش فنر ابتدا یک مستطیل گوشه گرد ترسیم کرده، یک گرادیان سفید به خاکستری به آن اعمال کنید. سپس مشابه تکثیر دایره‌ها عمل کنید. برای ایجاد دکمه‌های سمت راست نیز از مستطیل‌های گوشه گرد هم‌اندازه استفاده کنید و آن‌ها را پشت مستطیل اصلی طرح ببرید.

3- یک جلوه گرافیکی مناسب اضافه کنید.

با استفاده از کتابخانه‌های مفید پنل Graphic Style به‌طور مثال Buttons and Rollovers به هر بخش جلوه مناسب اضافه کنید (شکل 84). برای دسترسی به کتابخانه‌ها از منوی پانل سمت راست استفاده کنید.

4- سایه‌های طرح را ایجاد کنید.

یک مستطیل گوشه گرد با کد رنگ bbbdc0 و متناسب با اندازه دکمه‌های سمت راست ترسیم کرده و با استفاده از گزینه Gaussian Blur از مسیر Effect > Blur مستطیل را محو کنید. سپس آن را به پشت دکمه منتقل کنید

5- نمادها را به طرح اضافه کنید (شکل 85).

پنل Symbols حاوی نشانه‌ها و نمادهای مفید و کاربردی است. از کتابخانه Web Icons نمادهای متناسب را به طرح خود اضافه کنید.

6- متن‌ها و تصاویر مورد نظرتان را به طرح اضافه کنید.

کارگاه 4 (طراحی به کمک جلوه Blend) 

در این کارگاه تعدادی گل را با کمک جلوه Blend ترسیم می‌کنیم.

1- یک سند با ابعاد دلخواه ایجاد کنید.

2- یک گلبرگ رسم کنید.

با ابزار Pen Tool یک منحنی ترسیم کنید (بخش 1 شکل 88). برای قسمت Fill یک گرادیان با تنظیمات مشخص‌شده در تصویر ایجاد کنید (بخش 2 شکل 88). دقت کنید که قسمت Stroke بدون رنگ باشد.

با کلیک روی نماد Swap Fill and Stroke جای رنگ‌های Fill و Stroke را عوض کنید (شکل 89). همچنین به‌وسیله گزینه Reflect در مسیر Object>Transform یک نسخه مشابه از منحنی گرفته و در محل موردنظر قرار دهید.

3- جلوه Blend را روی شکل اعمال کنید.

هر دو مسیر ترسیم‌شده را انتخاب کنید. سپس گزینه Blend Options را از مسیر Object>Blend اجرا کنید. (شکل 90).

4- شکل ایجاد شده را حول نقطه پایین گلبرگ دوران داده و در محل مورد نظر قرار دهید.

برای ایجاد یک نسخه چرخش یافته از گلبرگ، در کادر تنظیمات ابزار Rotate زاویه چرخش را 30 درجه وارد کنید، سپس با استفاده از کلید میانبر این عمل را به تعداد لازم تکرار کنید.

5- گلبرگ‌های کوچک‌تر را اضافه کنید.

مراحل پیشین را با منحنی کوچک‌تر و با مقدار Specified Steps برابر 30 انجام دهید (شکل 92).

6- ساقه‌ها و برگ‌ها را نیز به طراحی خود اضافه کنید.

7- پس زمینه طرح را در لایه جدید ایجاد کنید.

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

8- با تکرار مراحل چند گل دیگر به طرح اضافه کنید (شکل 93).

9- آب زیر گل‌ها را رسم کنید.

با ابزار Line Tool یک خط با رنگ آبی و ضخامت 3px زیر ساقه‌ها رسم کنید. سپس دستور Zig Zag را از مسیر Effect>distort & Transform انتخاب کنید (شکل 94).

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

10- هاله گل‌ها را ترسیم کنید.

یک لایه دیگر بین دو لایه موجود ایجاد کنید و با ترسیم یک دایره با کد رنگ FCEE21 و اجرای جلوه Gaussian Blur از مسیر Effect>Blur مقادیر مختلف را امتحان کنید تا به نتیجه مطلوب برسید.

11- انعکاس ساقه‌ها در آب را اضافه کنید.

پس از ایجاد نسخه‌های مشابه از ساقه، با استفاده از دستور Zig Zag حالت موردنظر را در خط‌ها ایجاد و سپس دستور Blur را با مقدار کم بر روی ساقه‌ها اعمال کنید. در پنل Transparency میزان Opacity هر یک از ساقه‌ها را کاهش دهید (شکل 95).

اینفوگرافیک

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

واژه اینفوگرافیک infographic از ترکیب دو واژه اطلاعات (information) و گرافیک (graphic)‌ تشکیل شده است. اینفوگرافیک نمایش دیداری از داده‌ها (data) و اطلاعات (information)‌ است که به کمک عناصر دیداری نظیر تصویر، متن، نمودار، نقشه، دیاگرام و اشکال گرافیکی به منظور ارائه ساده، مؤثر و جذاب اطلاعات تهیه و طراحی می‌شود.

اینفوگرافیک‌ها بر اساس شیوه پیاده‌سازی به چهار دسته اصلی طبقه‌بندی می‌شوند:

1- ایستا (Static):‌ کلیه اطلاعات به‌صورت یک تصویر واحد نمایش داده می‌شوند. Illustrator یکی از ابزارهای تولید اینفوگرافیک است.

2- پویا (Dynamic): اطلاعات به‌صورت متحرک و پویانمایی ارائه می‌شوند. Swish یکی از نرم‌افزارهای تولید پویانمایی است.

3- تعاملی (Interactive): اطلاعات در بستر وب و دیجیتال با تعامل کاربر خواهد بود. جاوا اسکریپت و نرم‌افزارهای تولید چندرسانه‌ای نظیر کپتیویت برای تولید این نوع اینفوگراف‌ها استفاده می‌شوند.

4- فیزیکی (Physical): اطلاعات در قالب یک حجم یا ماکت سه بعدی نشان داده می‌شود.

چگونه یک اینفوگرافیک خوب طراحی کنیم؟
مرحله اول: انتخاب موضوع اینفوگرافیک

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

مرحله دوم: جمع‌آوری اطلاعات

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

مرحله سوم: ایجاد نقشه محتوا، نقشه ذهنی (Mind Map)

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

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

مرحله چهارم: اجرای اینفوگرافیک

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

مرحله پنجم: انتشار اینفوگرافیک

دو بستر چاپی و دیجیتالی می‌توانند در نشر اینفوگراف به شما کمک کنند. اینفوگراف تهیه شده را می‌توان روی وب‌گاه یا شبکه‌های اجتماعی به اشتراک گذاشت و یا آن را چاپ و تکثیر کرد.

کارگاه 5 (طراحی اینفوگرافیک) 

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

1- یک سند ایجاد کنید.

برای سند مشخصات Width: 70cm و Height: 50cm و Color Mode: CMYK را در نظر بگیرید.

2- پس زمینه اینفوگراف را ایجاد کنید.

یک مستطیل با ابعاد Width:70cm و Height:50cm در موقعیت x=0 و y=0 ترسیم کنید. یک گرادیان شعاعی با مشخصات جدول 5 به مستطیل ترسیم‌شده اعمال کرده (شکل 96) سپس مستطیل ترسیم شده را با زدن کلیدهای میانبر Ctrl+2 قفل کنید.

جدول 5- مشخصات گرادیان شعاعی

اسلایدر سمت راست	اسلایدر سمت چپ	پارامترها
100٪	39/69%	Location
21/48٪	2/73%	C
12/5٪	1/56%	M
1/55٪	0/78%	Y
0	0	K

3- یک‌لایه جدید ایجاد کنید.

4- به کمک ابزار Pen اشکال پایه اینفوگرافیک را ترسیم کنید.

پس از انتخاب ابزار Pen روی نماد Fill در جعبه‌ابزار دابل کلیک کنید و کد رنگ را e2e3e2 قرار دهید. دقت کنید بخش Stroke فاقد رنگ باشد. مثلث‌ها را با کد رنگ 919090 ترسیم کنید. سپس با استفاده از گزینه Send Backward از مسیر Object>Arrange مثلث‌ها را به پشت سایر اشکال ترسیم‌شده منتقل کنید.

5- سایه‌های تصویر را ایجاد کنید.

ابتدا یک مستطیل با کد رنگ BBBDC0 در محل مشخص‌شده ترسیم کرده و آن را به پشت منتقل کنید. سپس به‌وسیله ابزار Direct Selection نقاط را به شکل مناسب ویرایش کرده و با استفاده از گزینه Gaussian Blur از مسیر Effect>Blur مستطیل را محو کنید.

6- عناوین اینفوگراف را ترسیم کنید (شکل 97).

پنج مستطیل با کد رنگ‌های 8C3593 - AA2031 - DCA727 - 639740 - 1765AF برای عناوین اینفوگراف در محل موردنظر ترسیم کرده، برای قسمت‌های کناری از کد رنگ‌های A65BA3 - D64652 - FDD00A - B4D44D - 3A88C8 استفاده کنید.

7- با جداسازی اشکال، بخش میانی اینفوگراف را ترسیم کنید (شکل 99).

یک دایره با کد رنگ 629740 ترسیم و آن را به چهار قسمت مساوی تقسیم کنید. به‌وسیله ابزار Line دو خط عمود برهم روی دایره ترسیم کنید. دایره و دو خط را انتخاب، سپس از پنل Pathfinder گزینه Divide را انتخاب کنید. در وضعیت انتخاب شیء گزینه Ungroup را از منوی Object انتخاب کنید. با ابزار Selection چهار قسمت را از یکدیگر دور کنید. با انتخاب هر قسمت و کلیک توسط ابزار Eyedropper می‌توانید رنگ‌های متناسب را به هر بخش اعمال کنید.

8- بخش شفافی روی شیء ایجاد کنید.

یک نسخه مشابه از بخش سبزرنگ دایره ایجاد کرده و آن را دوران دهید. سپس یک گرادیان با زاویه 60 درجه به آن اعمال کنید (شکل 100). در جعبه‌ابزار روی نماد Swap Fill and Stroke کلیک کنید تا رنگ Stroke با Fill جایگزین شود. سپس ضخامت Stroke را کمی افزایش دهید.

با فعال کردن پنل Transparency و کاهش میزان Opacity تا 30 درصد می‌توانید بقیه ترسیم را انجام دهید (شکل 101).

9- اشکال ترسیم‌شده را گروه‌بندی کنید.

10- نسخه مشابه از گروه‌بندی ایجاد کنید (شکل 102).

گروه ایجادشده در مرحله قبل را برای سه بخش دیگر دایره ایجاد کنید. به‌وسیله کادر Reflect و استفاده مناسب از گزینه‌های واقع در بخش Axis سه نسخه دیگر ایجاد کرده و در محل مورد نظر قرار دهید.

11- بخش پایانی اینفوگراف را ترسیم کنید (شکل 103).

برای ایجاد پس‌زمینه عنوان «چرا اینفوگرافیک» در سمت چپ اینفوگراف، یک مستطیل ترسیم کرده، آن را دوران داده و در محل موردنظر قرار دهید. به‌وسیله ابزار Add Anchor Point Tool یک نقطه در وسط ضلع پایین اضافه کنید. سپس به‌وسیله ابزار Direct Selection نقطه را کمی به سمت پایین کشیده و آن را به یک نقطه منحنی تبدیل کرده و یک گرادیان مطابق شکل 103 به آن اعمال کنید.

12- ترسیم را تکمیل کنید.

به‌وسیله ابزار Type Tool متن‌های موردنظر را به طرح اضافه کنید. برای درج تصاویر موردنظر می‌توانید از گزینه Place از منوی File استفاده کنید.

کارگاه 6 (رنگ‌آمیزی با ابزار Mesh) 

در این کارگاه قصد داریم با استفاده از ابزار Mesh یک سیب طراحی کنیم. یکی از مهم‌ترین و کاربردی‌ترین ابزارهای نرم‌افزار Illustrator ابزار Mesh است. به‌وسیله این ابزار می‌توان یک شبکه مانند تور، روی شکل موردنظر ایجاد کرد و رنگ قسمت‌های مختلف را تغییر داد.

1- برای ترسیم سیب، یک دایره در سند جدید رسم کنید.

برای قسمت Fill رنگ سفید و برای بخش Stroke رنگ سیاه در نظر بگیرید. سپس یک نسخه مشابه از دایره ترسیم‌شده ایجاد کنید (شکل 105).

2- اشکال را ادغام کنید.

با استفاده از گزینه Unit دو دایره انتخاب‌شده را با هم ادغام کنید (شکل 106).

3- منحنی بالای شکل را ایجاد کنید.

با استفاده از ابزار Direct Selection Tool نقطه تلاقی دو دایره در قسمت بالا را انتخاب کنید، سپس با کلیک روی نماد مشخص‌شده آن را به یک نقطه منحنی تبدیل کنید.

4- منحنی پایین شکل را ایجاد کنید.

نقاط مشخص‌شده را انتخاب کنید. با استفاده از ابزار Direct Selection Tool یک کادر روی قسمت مشخص‌شده بکشید تا سه‌نقطه موجود در این قسمت انتخاب شوند (شکل 106)، سپس نقاط انتخاب‌شده را به سمت پایین بکشید. 

5- با استفاده از ابزار Mesh سیب را رنگ‌آمیزی کنید.

قسمت داخلی سیب را با رنگ BD2C35 پرکنید. توجه کنید بخش Stroke بدون رنگ باشد.

سیب را از حالت انتخاب خارج کنید. سپس ابزار Mesh Tool را از جعبه‌ابزار انتخاب کنید. در هنگام استفاده از این ابزار دقت کنید بخش Fill و Stroke فاقد رنگ باشند. برای اضافه کردن سطر به شبکه توری، روی خطوط عمودی و برای اضافه کردن ستون، روی خطوط افقی با ابزار Mesh کلیک کنید. 

بعد از ایجاد خطوط Mesh برای تغییر رنگ نقاط مورد نظر با استفاده از ابزار Direct Selection روی نقطه مورد نظر کلیک کنید و از جعبه‌ابزار کادر Color Picker رنگ مورد نظرتان را انتخاب کنید. کد رنگ‌های استفاده شده را می‌توانید در جدول 6 مشاهده کنید.

12	11	10	9	8	7	6	5	4	3	2	1	نقطه
803539	964F4D	984E4D	6A1421	B7464B	D06763	D0716B	D9938B	DFA091	660C1B	780F1E	6D0F1F	کد رنگ

در سایر نقاط مجاور نیز از همین کد رنگ‌ها استفاده‌شده است، می‌توانید تصویر یک سیب را وارد کنید و رنگ‌های مورد نیاز را از روی آن نمونه‌گیری کنید.

6- برگ را به سیب اضافه کنید (شکل 108).

با ابزار Pen شکل برگ را ترسیم کنید. برگ را با کد رنگ 6C8F0D و خط را با کد رنگ 91B644 روی برگ ترسیم کنید.

7- یک شبکه Mesh روی برگ ایجاد کنید (شکل 109).

با استفاده از گزینه Create Gradient Mesh از منوی Object نیز می‌توانید شبکه توری Mesh را به تصویر اضافه کنید.

8- با استفاده از ابزار Mesh برگ را رنگ‌آمیزی کنید.

با استفاده از ابزار Direct Selection Tool نقاط مختلف را انتخاب و کد رنگ‌ها را مانند شکل 110 به نقاط تعیین شده اختصاص دهید. برای نقاط مجاور هم‌رنگ از کد رنگ‌های مشابه استفاده کنید.

9- ساقه را به سیب اضافه کنید.

برای ایجاد ساقه از دو قسمت با گرادیان‌هایی که کد رنگ آن‌ها در شکل 111 آمده استفاده کنید.

10- سایه را به طرح اضافه کنید (شکل 112).

برای ترسیم سایه، یک بیضی با رنگ مشکی ایجاد کرده، با استفاده از دستور Gaussian Blur در مسیر Effect>Blur بیضی را محو و سپس Opacity آن را کاهش داده، به پشت سیب منتقل کنید.

11- نقطه‌های روی تصویر را اضافه کنید.

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

بعد از اتمام کار به‌طور موقت لایه شامل سیب را مخفی کرده، لکه‌های ترسیم‌شده را به کمک ابزار Selection انتخاب و در یک گروه قرار دهید. سپس میزان Opacity شیء گروه شده را با استفاده از پنل Transparency کاهش دهید (شکل 113).

کارگاه 7 (برش با لیزر) 

در این کارگاه آموزشی یک جعبه مخصوص جواهر را طراحی می‌کنیم. طرح را یک مرکز برش با لیزر اجرا کرده است (شکل 115).

1- یک سند جدید با ابعاد Width:29/7cm و Height:21cm ایجاد کنید.

2- مربع کف جعبه را رسم کنید.

یک مربع گوشه گرد با ابعاد جدول 7 ترسیم کنید. مربع ترسیم‌شده را در مختصات تعیین‌شده در شکل 116 قرار دهید. دقت کنید که حتماً نقطه مرجع (Reference Point) گوشه بالا سمت چپ انتخاب شده باشد. نقطه مرجع مشخص می‌کند که عملیات Transform که در اینجا تعیین موقعیت مربع ترسیم‌شده است، نسبت به کدام قسمت مربع انجام شود. در واقع نه نقطه مرجع در اطراف شیء ترسیمی شامل گوشه بالا سمت چپ، بالا وسط، بالا سمت راست و... وجود دارد، برای مشخص کردن این نقطه کافی است که آن را در پنل Transform مشخص کنیم (شکل 116).

3- سوراخ‌های کف جعبه را اضافه کنید.

چهار مستطیل تعیین شده در شکل 117 را با توجه به مشخصات آن‌ها (جدول 8) ترسیم کنید و در موقعیت‌های مناسب قرار دهید.

برای تنظیم فاصله‌ها از پنل Transform واقع در منوی Windows استفاده کنید. چهار مستطیل ترسیم‌شده را از مربع گوشه گرد کسر کنید. برای این کار بعد از انتخاب هر چهار مستطیل و مربع گوشه گرد، روی نماد Minus از پنل Pathfinder کلیک کنید.

4- مربع درِ جعبه را رسم کنید.

یک مربع دیگر با ابعاد جدول 7 ترسیم کنید. مربع ترسیم‌شده را در موقعیت X:14cm و Y:1cm قرار دهید، نقطه مرجع گوشه بالا سمت چپ باشد. مطابق شکل 118 و جدول 9 اشکال مناسب را به مربع ترسیم‌شده اضافه کنید.

5- طرح الماس را به در جعبه اضافه کنید (شکل 119).

به‌وسیله ابزار Polygonal Tool یک مثلث با ابعاد دلخواه ترسیم کرده و مشخصات در جشده در جدول 10 را با استفاده از پنل Transform تنظیم کنید. سایر مثلث‌ها را با تهیه نسخه مشابه و قرینه کردن مثلث اول به طرح اضافه کنید. برای ترسیم‌های ردیف دوم از ویرایش مستطیل استفاده‌شده است. اشکال ردیف سوم هم از ویرایش مثلث به‌دست‌آمده‌اند. بین مثلث‌ها فاصله مناسب در نظر بگیرید تا هنگام برش مشکلی پیش نیاید.

6- دیواره‌های چپ و راست جعبه را رسم کنید.

مطابق شکل 120 و جدول 11 اشکال مناسب را ترسیم کرده و در صورت نیاز از دستور Unit و Minus استفاده کنید.

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

7- دیواره پشت جعبه را رسم کنید.

سه مستطیل با مشخصات جدول 12 ایجاد و سپس دو مستطیل کوچک (شماره 1 و 2 شکل 121) را از مستطیل بزرگ کم کنید. مستطیل شماره 3 را ترسیم و آن را با شکل قبلی ادغام کنید (شماره 121).

8- دیواره جلو جعبه را رسم کنید.

چهار مستطیل با مشخصات جدول 13 ایجاد و سپس سه مستطیل کوچک را از مستطیل بزرگ کم کنید.

9- قفل را ترسیم کنید.

اشکال مناسب را با مشخصات داده‌شده در جدول 14 ترسیم کنید. (شکل 123).

10- زائده‌های قفل را ترسیم کنید (شکل 124).

دو دایره کوچک به قفل اضافه کنید. شکل نهایی باید به‌صورت شکل 125 باشد.

11- طرح ترسیم‌شده را ذخیره کنید.

بعد از پایان ترسیم بهتر است ضخامت خطوط را pt 0/25 کاهش داده و سپس سند را ذخیره کنید. مشورت با کارگاه برش لیزر به شما کمک می‌کند علاوه بر آشنایی با فنون مختلف برش، پیشنهادهای آن‌ها برای لایه‌بندی و استفاده از رنگ در طراحی را جویا شوید. هر کارگاه برش با لیزر، فنون منحصر به خودش را دارا است. از تکنسین برش با لیزر سؤال کنید برای تمایز بخش‌های طرح از چه فنونی استفاده می‌کنند. ازآنجاکه قالب پیش‌فرض نرم‌افزار Illustrator پسوند ai است اما بیشتر کارگاه‌های برش با لیزر از نرم‌افزار Corel Draw و پسوند Cdr استفاده می‌کنند، نسخه‌های جدید این نرم‌افزار بدون هیچ مشکلی پرونده با پسوند ai را باز می‌کنند.

کارگاه 8 (طراحی با ابزار 3D) 

در این کارگاه می‌خواهیم روش طراحی اشکال سه بعدی را آموزش دهیم.

1- سند جدیدی باز کرده و با ابزار Pen تصویری شبیه شکل 126 ترسیم کنید.

2- ترسیم را به شکل سه بعدی تبدیل کنید.

شکل را انتخاب کرده و مسیر Effect > 3D > Revolve پنل را اجرا کنید. در پنل شکل 127 تنظیمات را وارد کرده و کلید ok را انتخاب کرده تا شکل 128 به دست آید.

3- تصویری که قصد دارید به عنوان برچسب روی شکل قرار گیرد را وارد کنید.

4- تصویر برچسب را به نماد تبدیل کنید.

برای اینکه بتوانیم تصویر را روی یک شیء سه بعدی قرار دهیم باید آن را به نماد تبدیل کنیم.

اگر تصویر برچسب نقش بیتی باشد روی گزینه Embed در نوار کنترل کلیک کنید. به این ترتیب می‌توان تصویر را به عنوان یک نماد تعریف کرد (شکل 129). پنل Symbols را فعال کنید. تصویر را به داخل پنل Symbols بکشید (شکل 129).

5- نماد را روی یکی از وجوه شکل سه بعدی قرار دهید.

برای این کار باید دوباره جلوه 3D Revolve را با تنظیمات جدید اجرا کنیم. پنل Appearance را باز کنید و روی جلوه 3D Revolve دابل کلیک کنید (شکل 130).

در پنل باز شده گزینه Map Art را کلیک کنید تا کادر Map Art باز شود.
در قسمت Symbols برچسب وارد شده را انتخاب کرده و عدد گزینه Surface را تنظیم کرده (شکل 131) و دکمه Scale to fit را کلیک و کلید ok را فشار دهید تا شکل 132 به دست آید.

کارگاه 9 (نقاشی سه‌بعدی)