صفر تا صد طراحی آی | درس سوم

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

چگونه الهام بگیریم؟

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

حالا، چگونه می خواهید الهام بگیرید؟ خب، بهترین راه برای الهام گرفتن ایجاد چیزی است که ما طراحان آن را معمولاً با عنوان “Mood Board” (یا inspiration board) یا تخته الهام می‌شناسیم! همانطور که از نام آن پیداست، مود بُرد یک مجموعه از ایده های مبتنی بر تصویر است؛ از پالت های رنگی گرفته تا عکس ها، تصویرسازی ها، تکسچرها، تایپوگرافی و هر آن چیزی که از منابع مختلف جمع آوری کرده ایم و در نهایت مجموعه آنها قرار است به ما دیدی کلی درباره موضوع مورد نظرمان بدهند.

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

جمع آوری همگی این موارد درباره موضوعی که می خواهید برای آن آی طراحی کنید، به شما کمک می کند تا در نهایت اثر موفق تری، تولید کنید. در صورتی که مفهوم “Mood Board” برای شما به خوبی قابل درک نیست، توصیه میکنم جستجویی با همین عنوان در اینترنت داشته باشید، نمونه مودبردهای دیگران را ببینید و درباره آنها بخوانید.

به عنوان یک طراح، شما دائما موارد الهام بخشی می بینید که توجهتان را به خود جلب می کند، از تصاویر الهام بخش گرفته تا آثار سایر طراحان؛ اما گاهی پیگیری همه آنها، به خصوص زمانیکه لازم است همه آنها را یکجا مشاهده کنید، بسیار دشوار است. اینجاست که ابزارهایی مانند پینترست و اینستاگرام کاربرد دارند، این ابزارها به شما کمک می کنند تا با یک کلیک، مود بُردهای خودتان را ایجاد کنید.

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

• Dribble.com
• Behance.com
• Iconfinder
• The Noun Project
• Pinterest
• Instagram
• Google Images

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

3.2 فاز طراحی (اجرا)

تا به اینجا، اندازه پایه‌‌ی آی خود را فهمیدید، در مورد سایر اندازه ها تصمیم گرفتید و یک Mood Board تنظیم کرده اید. اکنون می توانید خلاصه مود برد را در هر یک از نرم افزارهای گرافیکی موجود طراحی کنید (Adobe Illustrator ،Adobe Photoshop ،Affinity Designer ،Sketch و …). چه کاربر Mac باشید و چه Windows، می توانید با دنبال کردن فرایندهای مشابه، به نتایج یکسان برسید، پس نگران این موضوع نباشید.

حالا بیایید ببینیم چه چیزی برای شروع طراحی آی لازم است؟

آی را Pixel-Perfect کنید

بیشتر برنامه ها به گونه ای ساخته شده اند که به شما در ایجاد آی های Pixel-Perfect کمک کنند. اگر این اولین بار است که در مورد این موضوع می شنوید، اکیداً توصیه می کنم چند لحظه وقت بگذارید و در این باره جستجویی داشته باشید.

رسم آی ها به صورت Pixel-Perfect

حال با فرض اینکه مطالعه درباره سبک Pixel-Perfect را به اتمام رسانده اید، سؤال این است که آیا باید زمانمان را برای سازگاری با این سبکِ کار سخت صرف کنیم یا خیر؟ خب، من شخصاً مدت زمان زیادی است که از این روش استفاده می‌کنم و هنوز هم معتقدم که ارزشش را دارد! اگر نگاهی به سالهای قبل بیندازید که ابتدا ساخت آی چقدر سخت انجام می شد، متوجه خواهید شد که ساختن آی‌ها با استفاده از شبکه های پیکسلی شروع شده، نه به شکل های برداری امروزی. اکنون هم بهترین روش برای رسم آی های بی نقص همین روش است، پس سخت نیست!

یک پروژه مناسب ایجاد کنید

اولین قدم برای ایجاد آی، تنظیم یک پروژه جدید است. ساده است، نه؟ خوب، نه واقعاً، چراکه اگر تازه کار را شروع کرده‌اید، نکاتی در تنظیمات پروژه وجود دارد که باید از آنها آگاه باشید.

پروفایل

ابتدا باید اطمینان حاصل کنید که Document’s Profile روی وب تنظیم شده است، زیرا عموما آی ها در رسانه های دیجیتال استفاده می شوند. اگر نرم افزار مورد استفاده شما گزینه ای به این نام ندارد، مطمئن شوید که مود رنگ سندی که ایجاد کرده اید روی RGB تنظیم شده باشد. این تقریبا تنها تفاوت پروفایل وب و پرینت است (وب از RGB استفاده می کند، در حالی که چاپ از CMYK استفاده می نماید.)

واحدهای اندازه گیری

در مرحله بعد، واحدهای اندازه گیری را داریم که برای توصیف عرض، ارتفاع، انحنای گوشه ها، قطر استروک (حاشیه) و فاصله میان اشیاء مورد استفاده قرار می گیرد.

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

تعداد آرتبورد

هنگامی که پروفایل و واحدهای سند خود را تنظیم کردید، باید مشخص کنید که می خواهید از یک Artboard بزرگ یا چند Artboard کوچکتر استفاده کنید. توصیه من این است که همیشه سعی کنید مسیر دوم را طی کنید، زیرا هنگام Export (خروجی گرفتن از) آی ها کار را بسیار ساده تر می کند.

استفاده از لایه ها

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

استفاده از پنل لایه ها در طراحی آی

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

از خطوط و جداول راهنما استفاده کنید

طبق تعریف، “reference grid” ابزاری بصری متشکل از خطوط راهنمای هندسی است که به منظور کمک به شما در یکسان کردن اندازه ها و ترازبندی آی ها کاربرد دارد. این ابزار می تواند به سادگی دو مربع که روی هم قرار گرفته اند باشد، یا متشکل از اشکالی پیچیده تر. من شخصاً ترجیح می دهم از اشکال ساده تر به عنوان رفرنس استفاده کنم، زیرا با استفاده از آنها، کار بهتر از انجام می شود.

استفاده از خطوط و جداول راهنما در طراحی آی

من معمولا یک مستطیل کوچکتر از آرتبوردم رسم می کنم، که به آن «منطقه فعالیت» می‌گویم، جایی که قرار است تمام اشکالی که طراحی می کنم، درون آن قرار بگیرد. وجود این منطقه یک Padding یا فاصله از اطراف آرتبورد ایجاد می کند، تا مطمئن شوم که هیچ قسمتی از آی ها پس از تحویل و استفاده توسط مشتری برش نمی‌خورد (کراپ نمی شود).

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