صفر تا صد طراحی آیکون | درس چهارم (پایانی)

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

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

4. بایدها و نبایدهای طراحی آیکون

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

سادگی را حفظ کنید

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

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

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

با اشکال ساده شروع کنید

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

روی رنگ ها تمرکز کنید

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

از استفاده از متن در آیکون هایتان خودداری کنید

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

5. مشکلات رایج در طراحی آیکون

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

چرخش اشکال (shape ها)

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

اتفاقی که هنگام چرخاندن اشکال در محیط Pixel-Perfect می افتد

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

ایجاد سایزهای متنوع

بسیار خب، شما توانستید اندازه پایه را برای آیکون خود ایجاد کنید، اما چگونه می توان اندازه های مختلف از آیکون را بر اساس اندازه پایه ایجاد کرد؟ خب، این مسئله، مشکل بزرگی نیست و راه حل آن بسیار ساده است، زیرا بیشتر اوقات تنها کاری که باید انجام دهید دو برابر اندازه آیکون فعلی یا خروجی گرفتن با Scale (اندازه) 200٪ است.

به عنوان مثال، اگر نمادی دارید که 64*64 پیکسل است، می توانید به راحتی با دو برابر کردن مقادیر عرض و ارتفاع آن، به اندازه بعدی یا همان 128*128 برسید.

روش درست برای تغییر اندازه آیکون ها در ایلوستریتور

6. گرفتن خروجی (Export)

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

انتخاب فرمت درست

اولین کاری که هنگام خروجی گرفتن باید انجام دهید این است که بدانید از چه فرمتی می خواهید استفاده کنید تا طرح نهایی خود را ذخیره کنید. به طور معمول، هنگام ایجاد آیکون ها، هدف ما این است که آنها را با پس زمینه شفاف (Transparent) استفاده کنیم، تا بتوان از آنها روی یک سطح رنگی استفاده کرد. این ویژگی توسط فرمت های زیر در دسترس است:

• GIF
• PNG
• BMP
• TIFF
• SVG

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

آیکون ها را بصورت جداگانه ذخیره کنید

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

مهارت خود را در ساخت آیکون ها توسعه دهید!

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