چگونه برای اپلیکیشن هایمان آیکون طراحی کنیم؟

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

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

اهمیت آیکون

شما وقتی توی یک مارکتی مثل بازار یا گوگل پلی برنامه ها رو نگاه میکنید اولین چیزی که باعث میشه جذب یک برنامه بشید آیکون اون برنامست!

گاهی ممکنه بخاطر ظاهر نامناسب یک آیکون از برنامه ای گاهاً مفید بگذرید پس مطمئنا در اکثر موارد برنامه ای با آیکون نه چندان زیبایش

نظر شما را جلب نمی کند.

آیکون های ساده و در عین حال زیبا ، جذابیت بیشتری دارند.مثل آیکون های زیر.

13

ولی بعضی از اون ها که معلومه برای ساختنش وقت زیادی گزاشته شده جذابیت آنچنانی ندارند:

14

این تصاویر رو برای نمونه گزاشتم و قصد توهین به سازندگان برنامه ها را ندارم.

اینجور آیکون های شلوغ و در هم در بین برنامه نویسان ایرانی بیشتره و در مارکت های خارجی این چیز ها کمتر دیده میشه.

یک آیکون خوب چه خصوصیت هایی داره؟یک آیکون خوب باید

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

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

از رنگ های محدودی استفاده شده باشه: آیکون اپلیکیش های بزرگ مثل؛ جیمیل ، ساندکلاد، کروم ، لاین و …دارای آیکون با محدودیت رنگ میباشند یعنی در بیشتر اونا از 2 الی 4 رنگ بیشتر استفاده نشده. این حالت جالب تر خواهد بود و تاثیر بهتر در ذهن مردم میزاره.

همرنگ با محیط برنامه باشه: اگه برنامتون محیط کاربریش قرمز و رنگ های شبیه به آن است ،آیکون سبز جلوه ی جالبی برای برنامتون به ارمغان نمیاره.

 

ساختن آیکون ساده

و اما چگونه برای اپلیکیشن ها آیکون بسازیم

شما نیاز به برنامه ی photoshop دارید. کاری که میخایم بکنیم کاره بسیار ساده ای است و با کمترین دانش فتوشاپ میشه انجام داد.

در این آموزش به ساخت چند نمونه آیکون میپردازیم تا شما بهتر آشنا بشید:

این آیکون نسبتا ساده بوده و در نمونه ی بعدی به آیکون های بهتر میپردازیم.

در نظر گرفتیم که یک برنامه در باره ی “پیشرفت درسی” و با محیط آبی رنگ داریم و میخاهیم براش یک آیکون بسازیم.

بهترین حالت آیکون ها شکل دایره یا مربع (با گوشه های گرد) است.

شروع میکنیم.

ابتدا یک فایل جدید بسازید (Ctrl+N).سایزش 1000 پیکسل کافیه.

چگونه برای اپلیکیشن ها آیکون بسازیم؟
چگونه برای اپلیکیشن ها آیکون بسازیم؟

حالا با ابزار Rounded rectangle tool یک مربع با گوشه های گرد بسازید برای اینکه مربع دقیق کشیده بشه کلید shift را هنگام کشیدن نگه دارید.

برای اینکه گوشه ها گرد بشن گزینه ی radius که بالای صفحه هست رو به 45 تغیر بدید.

چگونه برای اپلیکیشن ها آیکون بسازیم؟
چگونه برای اپلیکیشن ها آیکون بسازیم؟

از لایه ی مربع کپی گرفته(crtl+j) و با نگه داشتن کلید crtl روی لایه ی جدید کلیک کنید تا دور تا دور شکل select بشه.

با استفاده از ابزار polygonall lasso tool از یک گوشه تا گوشه ی رو به روش را با حالت حذف سلکت را برش دهید.

چگونه برای اپلیکیشن ها آیکون بسازیم؟
چگونه برای اپلیکیشن ها آیکون بسازیم؟

سپس با ابزار paint bucket tool یا ابزار brush و با انتخاب رنگ روشن تر نصفه ی انتخاب شده ی مربع را روشن تر یا تیره تر کنید.

چگونه برای اپلیکیشن ها آیکون بسازیم؟
چگونه برای اپلیکیشن ها آیکون بسازیم؟

ما با ابزار rectangle tool سه خط کشیدیم که هر کدام از دیگری بزرگ تر باشه و نماد پیشرفته.(رنگش دقیقا سفید نباشه و یکم تیره باشه)

چگونه برای اپلیکیشن ها آیکون بسازیم؟
چگونه برای اپلیکیشن ها آیکون بسازیم؟

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

ساخت آیکون نسبتا حرفه ای

با ساخت آیکون های ساده آشنا شدید.

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

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

پس مثل قبل ابتدا یک فایل جدید بسازید (Ctrl+N).سایزش هم همون 1000 پیکسل .

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

پس دکمه ی شیفت را گرفته و یک دایره با ابزار Elipse tool بکشید. گفتیم که بر فرض محیط برنامه قهوه ای هست  پس ما هم با قهوه ای کارو ادامه میدیم.

چگونه برای اپلیکیشن ها آیکون بسازیم؟
چگونه برای اپلیکیشن ها آیکون بسازیم؟

حالا ما به یک میکروفون در وسط تصویر نیاز داریم. اما نمیتونیم از عکس میکرفون در حالت عادی استفاده کنیم و باید از میکرفون کارتونی یا ساده استفاده کنیم.

اگر میتونید یک میکرفون خوب کارتونی بکشید که هیچ؛ امّا اگه نمیتونید این کارو بکنید. تصویر میکرفون مورد نظر خود را داخل فتوشاپ کنید.

چگونه برای اپلیکیشن ها آیکون بسازیم؟
چگونه برای اپلیکیشن ها آیکون بسازیم؟

به قسمت filter gallery که در منوی filter است برید و از فیلتر cotout استفاده کنید ، با ارقامی که در سمت راست است بهترین حالت رو انتخاب کنید تا یه تصویر کارتونی بدست بیاد.

چگونه برای اپلیکیشن ها آیکون بسازیم؟
چگونه برای اپلیکیشن ها آیکون بسازیم؟

حالا به دلیل محدودیت رنگ تصویر شما میتونید به راحتی ایراد ها را تصحیح کنید.

برای مثال پس از انجام فیلتر در قسمت بالای میکرفون یک قسمت سفید شده بود و دلیلش نور تصویر اصلی بود.

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

 

چگونه برای اپلیکیشن ها آیکون بسازیم؟
چگونه برای اپلیکیشن ها آیکون بسازیم؟

تصویرتون رو برش بدید(از چند ابزار برای این کار میشه استفاده کرد ، ما از color range در منویselect استفاده کردیم) و روی تصویر اول یعنی همون دایره میزاریم.

اگه خاستید جهت اونو عوض کنید از crtl+t استفاده کنید.

چگونه برای اپلیکیشن ها آیکون بسازیم؟
چگونه برای اپلیکیشن ها آیکون بسازیم؟

روش گزاشتن تصویر رو گفتیم امّا ممکنه شما بخاهید یک متن بزارید؛

پس ابزار تایپ رو با کلید T انتخاب کنید و متن دلخواه تون رو بنویسید ، بعد از اینکه نوشتید روی متن کلیک راست کنید و warp text رو انتخاب کنید.

از این منو شما میتوانید متن را در حالت های خمیده ، مارپیچ و … بزارید.

چگونه برای اپلیکیشن ها آیکون بسازیم؟
چگونه برای اپلیکیشن ها آیکون بسازیم؟

به همین راحتی تصویر شما آماده شد.

 

چگونه برای اپلیکیشن ها آیکون بسازیم؟
چگونه برای اپلیکیشن ها آیکون بسازیم؟
چگونه برای اپلیکیشن ها آیکون بسازیم؟

چگونه برای اپلیکیشن هایمان آیکون طراحی کنیم؟

کامنت ها

11 پاسخ به “چگونه برای اپلیکیشن هایمان آیکون طراحی کنیم؟”

    • سلام…لطفا سوال های بی ربط به مطلب رو در بخش پرسش و پاسخ بنویسید.
      جوابشو میدونم ولی توhttp://ask.etuts.ir/ بنویس تا بگم D:

  1. سلام

    من رقتم سوال بپرسم در قسمتی که فرمودید

    که بعد رفتم عضو بشم (باید عضو بشیم برای سوال دیگه ؟؟؟؟)

    عضو شدم اما هر چی خواستم برم تو اکانت نشد

    زدم که رمز برام بفرسته به ایمیل باز هم هیچ ایمیلی نیومد

    موندم مشکل از کجاست آخر سر؟؟؟؟

    • اوکی…من اینو به مدیر سایت میگم برسی کنه…
      شما برای اینکه آیکون بسازید (چه متحرک چه ثابت) از روش های زیادی میتونید استفاده کنید یکیش همین فتوشاپه
      اما برای مبتدی ها پیشنهاد میکنم از سایت favicon.cc استفاده کنن
      تو این سایت یه سری فاو آیکون آماده داره و همچنین خودتون خیلی راحت میتونید متحرک یا غیر متحرک بسازید
      و در آخر به شما یه کدی میده که باید بعد از کد در قالب سایتتون بزارید

    • اون هم مثل همین کاری که تو آیکون اولی آموزش دادم ، درست شده ولی ما یکی از قطر ها رو رنگ کردیم ، اون قسمت دیگه ای رو
      اگر آیکون شما رو اون آیکون قرمز رنگ در نظر بگیریم شما باید در لایه ی BACKGROUND دایره رو ایجاد کنید و در لایه ی بعدی متن رو بنویسید و یک لایه بین این دو بسازید و سایه ای رو که میخواهید بسازید ، رو سلکت با polygonall lasso tool کنید بعد هم با ابزار paint bucket tool یا ابزار brush اونو رنگ کنید.

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

لطفا اگر سوالی نامرتبط با این مطلب دارید، از تب «پرسیدن سوال» استفاده کنید

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد.

<