فرایند ساخت آیکنهای حرفه ای رسانه های اجتماعی

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

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

پیش نمایش

Photoshop یا  Illustrator ؟

این اولین تردید است که ممکن است برای شما بوجود بیاید که کدام ابزار برای این کار مناسب تر است ؟ فوتوشاپ یا Illustrator؟ به نظر نگارنده هردوی این ابزار ها برای این کار می تواند مناسب باشد. فایده ی کار با حالت برداری ، مقیاس پذیری آن است ولی این به این معنا نیست که شما می توانید یک آیکن یگانه  را ایجاد کنید و به سادگی آن را تغییر اندازه دهید تا از آن برای آیکن دیگر گروه ها استفاده کنید. آیکن ها باید متناسب با پیکسلشان طراحی شوند آنها در بیشتر موارد فقط می توانند برای یک منظور استفاده شوند ! اگر شما به وسیله ی Illustrator یک آیکن با جزییات نوری فراوان و جزییات دیگر ایجاد کنید مسلما در اندازه ای که برای استفاده است(برای مثال16×16 پیکسل )  کسی متوجه افکتها و جزییات آن نمی شود. از طرف دیگر اصلا توصیه نمی شود تا آیکنی با ابعاد 48×48 پیکسل در فوتو شاپ ایجاد کنید و سپس آن را تغییر اندازه دهید تا عکس کوچکتری  شود .( عکس های بزرگ متناسب با کار در نمی آید ) چیزی که بدست می آورید چیزی شبیه این چیزی است که می بینید .

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

خوب بهتر است کار را شروع کنیم.

قدم 1

یک پوشه ی جدید با ابعاد 48×48 پیکسل  در فوتوشاپ ایجاد کنید. این اندازه برای طراحی وب مناسب می باشد. یک رزولوشن 72 پیکسل بر اینچ برای کار مناسب است. ولی اگر می خواهید کمی آن را بزرگتر کنید بهتر است از اندازه هایی در حدود 80 تا 100 و 16 بیت استفاده کنید تا کار شما عمق پیدا کند.

قدم 2

از آن جا  که ما می خواهیم یک آیکن مربعی با افکتهای مناسب 1 پیکسلی بسازیم ، ما باید یک مربع با اندازه ی 46×46 پیکسل بسازیم . ابزار مربع مستطیل را انتخاب کنید  و در نوار ابزار آپشن ابعاد مناسب را تعیین کنید.

قدم 3 :

هنگامی که مربع را کشیدید ، باید آن را درست در مرکز کار قرار دهیم. پس ابزار جابجایی را با زدن دکمه ی V انتخاب کنید و سپس با فشردن کنترلA+ بقیه ی چیزهایی که در کارمان هست را انتخاب کنید.  می توانید مشاهده کنید که اکنون آپشن “تراز کردن” یا ” align options  “در قسمت نوار ابزار آپشن(در بالا) فعال شده است . “align vertical centers” را فشار دهید و دکمه ی “align horizontal centers” را بزنید .

قدم 4 :

اکنون زمان آن فرا رسیده است که به آیکن ها استیلی خاص بدهیم. بگذارید با رنگ آنها کار را آغاز کنیم. ما می خواهیم آیکن یاهو! را درست کنیم. خب پس بهتره سری به Yahoo.com بزنیم تا یک دید کلی بدست آوریم. رنگ ارغوانی آرم آن می تواند به عنوان رنگ پایه ی آیکن مورد استفاده قرار گیرد :

غیر ممکن است که بتوانیم بقیه ی متن لوگو را هم در آیکن قرار دهیم. ما نیاز به یک لوگوی ساده تر داریم. به عنوان پیشنهاد می توانیم از حرف Yبه همراه یک علامت تعجب ! استفاده کنیم.

قدم 5:

بر روی برچسب مربع در  پنجره ی لایه ها راست کلیک کنید و  “blending options” یا آپشن ترکیب سازی را انتخاب کنید. اولین کاری که باید انجام دهید این است که یک گرادیان شعاعی اضافه کنید بدین صورت که از رنگ ارغوانی لوگو  به سمت ارغوانی روشن ( رنگ شماره ی (#aa36c7 امتداد پیدا کند .

سپس یک علامت 1پیکسلی با رنگ ارغوانی تیره (#590070) اضافه کنید سعی کنید رنگی را که انتخاب می کنید از رنگی که برای تغییرات لایه استفاده کردید تیره تر  باشد.

قدم6 :

به وسیله ی فشردن کنترل+J شکل مربعی را کپی و تکرار کنید ، استیل را حذف کنید و لایه را مربع مربع کنید. (راست کلیک کنید و Rasterize را انتخاب کنید.)

قدم 7:

بر روی برچسب سفید لایه مربع ، کنترل کلیک کنید تا پیکسل های آنها را انتخاب کنید سپس به Select>Modify>Contract بروید  و اندازه ی 1 پیکسل را وارد کنید.

قدم 8

دکمه ی دیلیت را فشار دهید تا قسمتهای داخلی حذف شود. سپس ابزار پاک کن را انتخاب کنید ( یا می توانید یک لایه ی پوششی اضافه کنید) و به کمک یک قلموی نرم (سختی 0%) به آرامی مرز پایینی را پاک کنید. در نهایت شفافیت را تا میزان 30% کاهش دهید.

قدم 9 :

بر روی خط کش کلیک کنید و آن را بکشید تا یک خط راهنمای افقی ایجاد کنید و آن را متناسب با مرکز کار تنظیم کنید. این به شما کمک می کند تا کارتان دقیق باشد. حالا یک لایه ی جدید درست کنید عنوان آن را “نور نیمه ی بالایی” بگذارید و سپس به کمک ابزار Rectangular Marquee مانند عکس های زیر نواحی را انتخاب کنید :

قدم 10 :

ابزار گرادیان را با فشردن دکمه ی G انتخاب کنید ، و تغییرات را از  رنگ سفید تا بدون رنگ  ایجاد کنید و یک گرادیان به ناحیه ی انتخابی اضافه کنید (از پایین به بالا) . شفافیت لایه را به 22%  کاهش دهید. در نهایت کنترل+D را فشار دهید تا از حالت انتخاب خارج شود.

قدم 11:

بزرگ نمایی کنید و مثل همیشه به وسیله ی ابزار Rectangle Marquee  به سرعت یک ناحیه ی یک پیکسلی مربعی ایجاد کنید

قدم 12 :

یک لایه جدید درست کنید و ناحیه ی انتخابی را با رنگ ارغوانی(#400051)  تیره تر از افکت استروک ( stroke effect ) پر کنید. عنوان این لایه را ” نقطه ی تیره ” بگذارید. هدف از این کار این است که بیننده با دیدن آن حس عمیق و نرم بودن کار را درک کند .

قدم 13:

اکنون زمان ان رسیده تا لوگو را ایجاد کنیم. به سایت گوگل بروید به دنبال لوگوی یاهو! بگردید آن را دانلود کنید و در Illustrator آن را باز کنید .

شفافیت لایه را کاهش دهید و آن را قفل کنید. سپس با استفاده از ابزار pen یک حرف انگلیسی “T” و یک علامت هشدار  ایجاد کنید. از لوگوهایی که آنها را دانلود کرده اید به عنوان مرجع استفاده کنید :

در این جا می توانید لوگوی خود را که در Illustrator تمام شده است را ببینید.

قدم 14:

لوگویی را که طراحی کرده اید با فشردن دکمه های کنترل +C در Illustrator وسپس کنترل +V در فوتوشاپ ،مانند اشیای هوشمند  به آنجا ببرید . بر روی لایه ی آن راست کلیک کنید (همیشه در پنجره ی لایه ها ) و یک پوشش نرم سفید رنگ و یک سایه ی نرم درونی ایجاد کنید :

قدم 15

شیی هوشمندی را که ایجاد کرده اید با فشردن دکمه های کنترل+J تکرار کنید و شیی تکرار شده را به زیر شیی اصلی منتقل کنید. آپشن ترکیب سازی را با حذف کردن سایه ی داخلی و اضافه کردن یک رنگ پوششی به همان رنگ ارغوانی (#590070) استروک شکل اصلی درآورید. در نهایت با یک بار فشردن دکمه ی جهتی بالا و یک بار هم دکمه ی جهتی سمت چپ بر روی کیبورد لوگوی ارغوانی را به اندازه ی 1 پیکسل به سمت بالا و 1 پیکسل هم به سمت چپ می بریم.

قدم 16:

حالا آیکن 48 در 48 پیکسل ما آماده شده است. آن را به فرمت .png ذخیره کنید و همچنین بهتر است قبل از بستن کار ، یک نسخه از فایل فوتوشاپی آن را هم دخیره کنید . حالا می توان گفت که دو سوم کار به اتمام رسیده است. ctrl+I را فشار دهید و ابعاد تصویر را به میزان 32×32 پیکسل برسانید.

حالا باید فرایند درست کردن آیکن های کوچکتر را آغاز کنیم ( البته نه آن قدر که خیلی خنده دار شود ) . بزرگ نمایی کنید  تا جایی که تمامی باگ های کار مشخص شود و حالا می توانید به سراغ ابزارهای خودمان برویم : ابزار Rectangular Marque !  در اینجا یک سری نقص هایی است که باید آن ها را حذف کنیم : لوگوی ما دچار تاری شده است ، همچنین 1 پیکسل خط پایینی بر روی یک پیکسل از استروک داخلی آمده است ، همچنین افکتهای نوری نیز همین کار را با استروک داخلی بالایی کرده است.

قدم 17 :

خط تیره ی پایینی را انتخاب کنید و ابزار rectangle marquee را انتخاب کنید . قسمتهایی از خط را که فراتر از محدودیت ها رفته است را انتخاب و آنها را حذف کنید.

نکته : با انتخاب ابزار Rectangular Marque و نگه داشتن کلید شیفت می توانید همزمان نواحی دیگری را هم انتخاب کنید.

قدم 18 :

همین کارها را با افکتهای نوری در بالا تکرارکنید  :

قدم 19 :

قسمتهای ارغوانی لوگو را پنهان کنید و به قسمتهای سفید تمرکز کنید . بزرگ نمایی کنید می توانیم لبه ها و آن را تیز تر کنیم. یک لایه جدید در بالا درست کنید و یک قلموی 1 پیکسلی دور سفید را انتخاب کنید  و شروع کنید به رنگ کردن کار ولی….آخ یه مشکلی پیش اومد انگار ! قلموی شما بیشتر از 1 پیکسل را پوشش می دهد :

قدم 20 :

کاری که باید انجام دهید این است که به Photoshop>Preferences>Grid بروید و اندازه ی 1 پیکسل را برای “Gridline every تنظیم کنید و 1 برای “subdivisions” انتخاب کنید :

قدم 21:

به View>Show>Grid بروید  یک بار دیگر سعی کنید تا از ابزار قلمو استفاده کنید این بار این کار آسان شده است ! حرف “Y” را رنگ کنید تا شفافیت آن پیکسل هایی که تار شده بود را افزایش دهید :

قدم 22:

لایه ی smart object را انتخاب کنید و آن را rasterize کنید ( راست کلیک کنید و rasterize را انتخاب کنید ) از ابزار Rectangular Marquee استفاده کنید و آن دسته از پیکسلهایی که مازاد کار هستند را حذف کنید :

قدم 23:

یک باگ کوچک : سایه ی داخلی . آن را حذف کنید .این جزییات هنگامی که با اندازه های کوچک کار می کنید دردسر ساز می شود. لایه ی اصلی “Y” را انتخاب کنید همینطور لایه ای که آن را حالا رنگ کردید و به کمک فشردن کنترل+E آن ها را با یکدیگر ادغام کنید. حالا می توانید لایه ی ایجاد شده را تکرار کنید . این لایه ی جدید را پایین بکشید و یک رنگ ارغوانی پوششی به آن اضفه کنید ( همان کاری را که در قدم 15 انجام دادید را تکرارکنید) . کار دیگری را که می توانید برای بهبود کار انجام دهید این است که شفافیت افکت نوری را افزایش دهید تا آنهارا ارتقا دهید .

حالا آیکن 32 در 32 پیکسل ما آماده شده است . حالا به خوبی می توانید تفاوت آیکنی را که پالیش کردیم با آیکن اولی با اندازه ی اصلی 48 در 48 پیکسل  که فقط سایزش به سادگی تغییر پیدا کرده بود را ببینید

دو آیکن دیگر  یعنی 24 در 24 پیکسل و 16در 16 پیکسل را هم  با همین روش درست می کنیم. تغییر اندازه داده و قسمتهای اضافه را حذف می کنیم. به خصوص آیکن 16×16 ! من علامت هشدار را حذف کردم که فقط “Y” تنها باشد. از این نگران نباشید که آیکن شما ساده باشد.  همیشه چیزی که مهم است خوانایی و شیوایی  آیکن است.

در اینجا می توانید کار نهایی را ببینید . من یک سری عکس از کارها را برای شما گذاشته ام که شما می توانید روشی را که من آیکن های 24×24 پیکسل و 16×16 پیکسل را تغییر دادم  ببینید . فراموش نکنید  که اینها آیکنهایی برای موارد خاص است می توانید تنها با 7 دلار آیکن های نمونه ی دیگر را دانلود کنید و از آنها استفاده کنید.

منبع  : WEGRAPHICS