چگونه آیکون‌های فلت الهام گرفته از طبیعت را در ادوبی ایلوستریتور بسازیم

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

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

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

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

شروع کنیم!

1. یک آیکون توت بسازید

مرحله 1

اولین المان ما، یک دسته توت رسیده روی یک شاخه هست. ابزار Elipse Tool را با فشردن کلید L انتخاب کنید و با کشیدن یک دایره قرمز 15 در 15 پیکسل ساختار اولیه‌ی توت را ایجاد کنید.

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

در نهایت، تمام المان‌ها را انتخاب و با هم در یک گروه (Control-G) قرار دهید.

مرحله 2

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

به پنل Stroke بروید و از آنجا قطر خط را بروی 2 پیکسل تنظیم کنید، و سرخط Cap و گوشه Corner را بروی بخش میانی تنظیم کنید تا سر خطوط گرد شود.

مرحله 3

حالا ابزار Arc را بردارید و یک ساقه کوتاه به سمت چپ اضافه کنید. قطر خط را بروی 1.5 پیکسل تنظیم کنید و مانند قبل، سر خطوط Cap و گوشه‌ها Corners را بروی حالت میانی تنظیم کنید.

یک ساقه‌ی دیگر اضافه کنید و بروی هر دوی آنها، کپی‌هایی از توت قرمز، با اندازه‌هایی متفاوت قرار دهید.

مرحله 4

حالا یک جفت برگ می‌کشیم. با استفاده از ابزار Ellipse با فشردن کلید (L) یک بیضی با ابعاد 9 در 20 پیکسل ایجاد کنید. ابزار Direct Selection را با فشردن کلید (A) بردارید، نقاط لنگر بالا و پایین را انتخاب کنید و با استفاده از کارکرد  Convert selected anchor points to corner، گوشه‌های برگ را نوک‌دار کنید. این قابلیت را می‌توانید در پنل کنترل در بالا پیدا کنید.

مرحله 5

حالا میخواهیم یک رگه میانی به برگ اضافه کنیم. با استفاده از Line Segment بواسطه فشردن کلید (\) یک خط عمودی بکشید و رنگ Stroke آنرا به سبز تیره تغییر دهید. در پنل Stroke، مقدار Weight را بروی 1pt تنظیم کنید و Profile را بروی Width Profile 1 قرار دهید. بدین صورت گوشه‌های خط را باریک و نوک‌دار می‌کنید.

مرحله 6

عناصر برگ را با هم در یک گروه قرار بدهید. این کار را با فرمان Group بواسطه فشردن کلید (Control-G) انجام دهید. کمی آنرا بچرخانید و به شاخه متصل کنید.

مرحله 7

حالا ساختار آیکون را ایجاد میکنیم! ابزار خود را به ابزار Polygon تغییر دهید و تعداد اضلاع را روی 8 قرار دهید و یک هشت ضلعی 80 در 80 پیکسل به رنگ بژ ایجاد کنید.

حالا عناصر را همتراز میکنیم. توت‌ها و چند ضلعی را انتخاب کرده و بروی هشت ضلعی دوباره کلیک کنید تا به Key Object تبدیل شود (انتخاب ضخیم‌تری را به دور آن شکل خواهید دید). به پنل Align بروید و بروی Horizontal Align Center کلیک کنید تا هر دو المان را کاملا هم‌تراز کنید.

مرحله 8

حالا آیکون را با افزودن یک سایه ی بلند و جذاب تمام می‌کنیم. با ابزار Rectangle بواسطه فشردن کلید (M) یک مستطیل 60 در 70 پیکسل به رنگ بژ روشن بسازید. در پنل شفافیت Transparency، حالت ترکیبی را بروی Multiply قرار بدهید.

کلید Shift را نگه دارید و با استفاده از ابزار Selection بواسطه فشردن کلید (V) مستطیل را 45 درجه بچرخانید. با چندین بار فشردن کلید ]-Control و یا با جابجا کردن آن در پنل لایه‌ها بطور دستی، آنرا بین توت‌ها و پایه آیکون قرار دهید.

موقعیت سایه را بطوری تنظیم کنید که با گیاه تناسب داشته باشد. با استفاده از ابزار اضافه کردن نقطه لنگر (+) Add Anchor Point Tool و ابزار Direct Selection بواسطه فشردن کلید (A)، نقاط را جابجا کنید و در پشت گیاه پنهان کنید.

مرحله 9

در پایان لازم است سایه‌ای را که خارج از پایه‌ی آیکون هست حذف کنیم. آیکون را با زدن  Control-C کپی میکنیم و آن در بالای همه لایه‌ها قرار میدهیم. برای این کار Control-F را بروی صفحه کلید می‌فشاریم. کلید ]-Shift-Control را با هم بزنید و لایه را به بالای لایه‌ها بیاورید. کپی و سایه را انتخاب کنید، کلیک راست را بزنید و با فرمان Make Clipping Mask از آن ماسک چیده شده بسازید. و بدین ترتیب آیکون ایجاد میشود. حالا هنوز میتوانیم مقدار سایه را در صورت نیاز در ماسک چیده شده تنظیم کنیم. این کار را میتوانیم با انتخاب پنل لایه ها یا ابزار Direct Selection بواسطه فشردن کلید (A) انجام دهیم.

حالا آیکون بعدی را ایجاد می‌کنیم.

2. یک آیکون قارچ بسازید

مرحله 1

ایجاد طرح قارچ را از کلاه آن آغاز میکنیم. از ابزار Ellipse با فشردن کلید (L) استفاده میکنیم تا بیضی قرمزی با ابعاد 40 پیکسل در 10 پیکسل ایجاد کنیم. ابزار Direct Selection را با فشردن کلید (A) برمیداریم و نقطه لنگر بالایی را انتخاب میکنیم. دسته‌های هر نقطه را با حرکت آنها به سمت هم در مرکز کوتاه تر میکنیم، و بالای شکل را نوک‌دار میکنیم.

در حالیکه که نقطه هنوز انتخاب شده است، کلید Enter را میزنیم تا پنجره Move باز شود. مقدار Horizontal را روی صفر پیکسل تنظیم میکنیم و مقدار Vertical را روی -10 پیکسل قرار میدهیم. بروی OK کلیک کنید تا نقطه 10 پیکسل جابجا شود و یک کلاهک ایجاد کند.

مرحله 2

حالا میخواهیم تنه ی قارچ را ایجاد کنیم. یک شکل بیضی به ابعاد 10 در 25 پیکسل به رنگ بژ با استفاده از ابزار Ellipse بواسطه فشردن کلید (L) رسم کنید. هر دو المان را انتخاب کنید و در حالی که Align to را بروی key object تنظیم کرده اید، بروی horizontal align center کلیک کنید.

مرحله 3

حالا میخواهیم شکل تنه‌ی قارچ را اصلاح کنیم. آنرا انتخاب کنید و در منوی Effect و سپس Warp ، گزینه Arc را انتخاب کنید. مقدار Horizontal Bend را به -10 درصد کاهش دهید و پایین شکل را پهن‌تر کنید. بروی OK کلیک کنید تا افکت اعمال شود، و حالا یک افکت دیگر اعمال میکنیم.

در منوی Effect و سپس در Warp ، گزینه Fish را انتخاب میکنیم. در پنجره‌ای که باز میشود بروی Apply New Effect کلیک کنید و مقدار Vertical Bend را بروی -25% تنظیم کنید، و بدین ترتیب شکل را اندکی برآمده کنید.

مرحله 4

به منوی Object بروید و گزینه ی Expand Appearance را انتخاب کنید تا افکت اعمال شود. بروی شکل کلیک راست را بزنید و در Arrange گزینه Send to Back را انتخاب کنید. برای قرار دادن آن در زیر کلاهک میتوانید کلیدهای Shift-Control و ] را بروی صفحه کلید بزنید.

مرحله 5

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

چند خال دیگر با اندازه‌های مختلف ایجاد کنید.

مرحله 6

حال میخواهیم یک سایه ی ظریف در پایین تنه ی قارچ ایجاد کنیم. تنه ی قارچ را انتخاب کنید و Ctrl و C را بزنید و سپس دوبار Ctrl و F را بزنید تا از آن دو نسخه ایجاد کنید و نسخه بالایی را کمی بالاتر ببرید. این کار را میتوانید با چند بار زدن کلید فلش بالا بروی صفحه کلید انجام دهید.

دو نسخه ی تنه ی قارچ را انتخاب کنید و از انتخاب Minus Front در پنل Pathfinder استفاده کنید تا شکل ها را برش بزنید. رنگ شکل را تاریک تر کنید تا شبیه سایه ی آن شود.

مرحله 7

آیکون قارچ را با افزودن پس زمینه آیکون هشت ضلعی و یک سایه ی بلند جذاب تمام میکنیم.

عالی هست. ادامه میدهیم.

3. یک آیکون شمع بسازید

مرحله 1

یک رنگ قهوه ای تیره انتخاب کنید و با یک بیضی در ابعاد 30 در 5 پیکسل ، بالای شمع را ایجاد میکنیم. یک رنگ قهوه ای روشن تر انتخاب میکنیم و بدنه ی شمع را با یک مستطیل به ابعاد 30 در 30 پیکسل با استفاده از ابزار Rectangle بواسطه فشردن کلید M ایجاد میکنیم. بدنه ی شمع را بهمراه با بخش بالای آن ترکیب میکنیم و اشکال را همتراز میکنیم.

حال بخش بیضوی بالای شمع را انتخاب میکنیم و با نگه داشتن Alt و Shift ، شکل را پایین میکشیم و یک نسخه جدید ایجاد میکنیم. از ابزار Eyedropper (کلید I) استفاده میکنیم تا رنگ بدنه را برداریم و به بیضی پایینی اعمال کنیم، و شکل پایین شمع را ایجاد کنیم.

مرحله 2

از ابزار Rectangle (کلید M) استفاده کنید تا شکل باریک تر با ابعاد 5 در 23 پیکسل ایجاد کنید و با کناره ی چپ بدنه شمع آنرا همتراز کنید. در حالیکه شکل را بصورت انتخاب شده داریم، کلید Enter را میزنیم تا پنجره Move باز شود. مقدار horizontal را بروی 5 پیکسل و مقدار vertical را بروی صفر پیکسل تنظیم میکنیم.

بروی Copy کلیک کنید تا تنه ی دیگری ایجاد کنید. حالا چند بار کلیدهای Ctrl و D را بزنید تا 5 کپی ایجاد کنید و بدین ترتیب 7 نسخه از آنرا خواهیم داشت. همه تنه ها را انتخاب کنید و آنها را کمی فشرده کنید ، بطوریکه متناسب با بدنه ی شمع باشد.

مرحله 3

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

حال میتوانیم ابزار Direct Selection را با کلید (A) انتخاب کنیم و همه ی نقاط پائین شکل یکپارچه شده را انتخاب کنیم. میتوانیم علامت های دایره ای کوچک را در گوشه ها ببینیم که حاکی از امکان Live Corners هست و به ما اجازه میده تا با کلیک و کشیدن بروی این دایره ها گوشه ی شکل های انتخاب شده را کاملا گرد کنیم.

مرحله 4

حال میخواهیم به شمع شعله اضافه کنیم. از ابزار Ellipse (کلید L) استفاده میکنیم و یک بیضی نارنجی رنگ با ابعاد 5 در 15 پیکسل ایجاد میکنیم. با ابزار Direct Selection (کلید A)، نقطه ی لنگر بالایی را انتخاب میکنیم و از انتخاب Convert در پنل کنترلی بالایی استفاده میکنیم و تا نوک بیضی را نوک دار کنیم.

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

مرحله 5

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

سه آیکون دیگر داریم که باید ایجاد کنیم. پس ادامه میدهیم.

4. یک آیکون پر بسازید

مرحله 1

ابزار Ellipse (کلید L) را بردارید و با رسم یک بیضی قهوه ای روشن با ابعاد 15 در 40 پیکسل، ساختار پر را ایجاد میکنیم. در منوی Effect، در Warp ، گزینه Arc را انتخاب کنید و مقدار Horizontal Bend را روی -6% تنظیم کنید و پایین شکل را کمی پهن تر از بالای آن کنید.

مرحله 2

حالا میخواهیم برای پر شکاف ایجاد کنیم. از ابزار Pen (کلید P) استفاده کنید و یک فلش مثلث شکل همچون شکل قرمز در زیر ایجاد میکنیم. فلش خطی و پر را با هم انتخاب کنید و با استفاده از امکان Minus Front در پنل Pathfinder ، بخشی از پر را ببرید. چند بریدگی دیگر با استفاده از روش ساده ی مشابه ایجاد کنید.

مرحله 3

حالا میخواهیم بخش محوری پر را ایجاد کنیم. از ابزار Line Segment (کلید \) استفاده کنید و با نگه داشتن کلید Shift ، یک خط عمودی در سرتاسر پر بکشید. رنگ قهوه ای تیره تری برای خط حاشیه انتخاب کنید و پهنای Stroke Weight را بروی 2pt تنظیم کنید. پروفایل Profile را بروی Width Profile 1 تنظیم کنید تا محور پر نوک دار شود.

مرحله 4

حالا میخواهیم به پر کمی جزئیات بیشتری اضافه کنیم. ابزار Rectangle (کلید M) را بردارید و یک شکل قهوه ای روشن با ابعاد 15 در 5 پیکسل ایجاد کنید. بروی ابزار Rotate (کلید R) کلیک دوبل کنید و مقدار زاویه Angle را بروی 30 درجه تنظیم کنید.

کلیدهای Alt و Shift را نگه دارید و شکل را پایین بکشید و یک نسخه از آن ایجاد کنید. رنگ نسخه پایینی را به قهوه ای تیره تر تغییر دهید.

مرحله 5

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

نوارها و پر را با هم انتخاب کنید. ابزار Shape Builder (کلید Shift و M) را بردارید، و ضمن گرفتن کلید Alt، با کلیک بروی بخش هایی که نیاز ندارید آنها را پاک کنید. خیلی عالی. آیکون پر آماده شد.

میتوانید با افزودن پس زمینه آبی آیکون و یک سایه ظریف آنرا تکمیل کنید. و حالا میخواهیم که آیکون بعدی را ایجاد کنیم!

5. یک آیکون ماده معدنی بسازید

مرحله 1

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

از ابزار Rectangle (کلید M) استفاده کنید و یک شکل آبی با ابعاد 10 در 40 پیکسل ایجاد کنید. کلید Enter را بزنید تا پنجره Move باز شود. مقدار Horizontal را بروی 10 پیکسل قرار دهید و مقدار Vertical را بروی صفر پیکسل قرار دهید. بروی Copy کلیک کنید تا مستطیل دوم را در کنار اولی ایجاد کنید.

کلیدهای Ctrl و D را بزنید تا شکل سوم را ایجاد کنید و روشنی رنگ Fill را تغییر دهید و کاری کنید که اشکال شبیه یک گرادینت به نظر برسند.

مرحله 2

سمت چپ و راست مستطیل ها را کمی فشرده کنید و آنها را از شکل مرکزی باریک تر کنید. هر سه شکل را انتخاب کنید و با زدن کلیدهای Ctrl و C و سپس Ctrl و F آنها را کپی کنید. نسخه های کپی شده را بالا بیاورید و آنها را به بالای گروه مستطیلی اولیه متصل کنید. مستطیل های کپی شده را کوچکتر کنید.

حالا میخواهیم بالای کریستال را ایجاد کنیم. ابزار Direct Selection (کلید A) را بردارید و تمامی نقاط لنگر بالایی را همچون تصویر زیر انتخاب کنید. وارد پنل Align شوید، در بخش Align to ، گزینه Align to Selection را انتخاب کنید و بروی Horizontal Align Center کلیک کنید تا تمامی نقاط لنگری انتخاب شده یک نقطه شوند و یک مثلث ایجاد شود.

مرحله 3

حالا میخواهیم کریستال را کمی تغییر شکل دهیم تا کمتر متقارن باشد. ابزار Lasso Tool (کلید Q) را انتخاب کنید، نقاط مرکزی پایین کریستال را انتخاب کنید و بروی فلش پایین صفحه کلید چند بار فشار دهید تا آنها را پایین بیاورید. بخش بالایی کریستال را هم تغییر بدهید. با استفاده از ابزار Lasso (کلید Q) آنها را انتخاب کنید و نقطه ها را پایین تر بکشید.

مرحله 4

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

مرحله 5

حالا میخواهیم یک هایلایت روشن به کریستال اضافه کنیم تا درخشان جلوه کند. از ابزار Rectangle (کلید M) استفاده کنید تا یک سری نوار آبی روشن ایجاد کنید. آنها را بچرخانید و روی کریستال قرار دهید. نوارها و مستطیل مرکزی کریستال را انتخاب کنید و با فشردن کلیدهای Shift و M بروی صفحه کلید ، ابزار Shape Builder را انتخاب کنید. کلید Alt را نگه دارید و بروی بخش هایی که میخواهید حذف کنید کلیک کنید.

عالیست. حالا شبیه سطح یک شیشه به نظر میرسد.

مرحله 6

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

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

6. یک آیکون گل تابستانی بسازید

مرحله 1

آیکون نهایی ما یک گل دوست داشتنی و ساده خواهد بود. از ابزار Polygon استفاده کنید و تعداد Sides را بروی 8 تنظیم کنید تا یک 8 ضلعی داشته باشید (همچون شکل پس زمینه آیکون) یک شکل قرمز با ابعاد 50 در 50 پیکسل ایجاد کنید.

در منوی Effect ، در Distort & Transform ، گزینه Pucker & Bloat را انتخاب کنید. اسلایدر را به سمت Bloat ببرید و مقدار آنرا بروی 50 درصد تنظیم کنید. در حال حاضر یک شکل شبیه گل داریم.

مرحله 2

به منوی Effect بروید و گزینه Expand Appearance را انتخاب کنید تا افکت اعمال شود. ابزار Ellipse (کلید L) را بردارید و یک دایره نارنجی با ابعاد 15 در 15 پیکسل برای مرکز گل بکشید.

مرحله 3

میتوانید ساقه و برگ ها را از اولین آیکونی که ساختیم کپی کنید (ساقه و برگ آیکون توت) و رنگ ساقه را به سبز تغییر دهید.

ساقه را به گل متصل کنید و با فشردن کلیدهای Shift و Ctrl و ] آن را به عقب ببرید.

مرحله 4

آیکون گل را با قرار دادن یک پس زمینه بژ با یک سایه بلند جذاب آنرا تکمیل کنید.

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

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

اگر دوست داشتید میتوانید کار خود را در بخش نظرات با ما به اشتراک بگذارید.

اگر ساختن آیکون های فلت را مثل من دوست دارید، حتما سری به آموزش های زیر بزنید:

• چطور میتوانیم آیکون های فلت عید پاک را در نرم‌افزار ایلوستریتور طراحی کنیم؟
• چطور میتوان آواتارهای حرفه ای فلت در ادوبی ایلوستریتور ایجاد کرد؟
• چطور میتوان یک مجموعه آیکون سوشی پیچیده شده در ادوبی ایلوستریتور ایجاد کرد؟

لذت ببرید!