چگونه یک پیکتوگرام رسم کنیم. قوانین ساده برای ایجاد طرح آیکون

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

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

مرحله 1 - فایل جدید / تکنیک قلم
فتوشاپ را باز کنید و یک سند جدید ایجاد کنید (Ctrl + N). از تنظیمات زیر استفاده کنید:
وضوح: 72dpi
حالت رنگ: رنگ RGB
ابعاد: 600 × 600 پیکسل

با استفاده از ابزار شکل زیر را ایجاد کنید قلمابزار(ص) (پر). رنگ: #3da1e2

مرحله 2 - ایجاد اشکال با استفاده از قلم
پشت پوشه را با استفاده از ابزار قلم(قلم) با استفاده از همان تکنیک طراحی. سپس مانند تصویر یک نوار بکشید.
رنگ: #003658 #3da1e2 #08517e

مرحله 3 - شکل را تمام کنید
پس از اتمام رسم پوشه، باید یک تکه کاغذ و یک فلش مانند تصویر اضافه کنید. اکنون باید 5 لایه داشته باشید. هر شکل روی یک لایه جداگانه قرار خواهد گرفت. به هر لایه یک نام بدهید.
رنگ: #ffffff #32e732

مرحله 4 - اضافه کردن جلوه های رنگی
سبک های لایه زیر را به جلوی پوشه اضافه کنید. Opacity را تا 90% کاهش دهید.

سبک های لایه زیر را برای کاغذ اضافه کنید. Opacity لایه را به حدود 90-95% کاهش دهید.

سبک های لایه زیر را برای نوار اضافه کنید.

سبک های لایه زیر را به پشت پوشه اضافه کنید.

سبک های لایه زیر را برای فلش اضافه کنید.

حالا نماد شما به این شکل است.

مرحله 5 - افزودن رفلکس ها
اضافه کنید گروه جدیدبه نام "رفلکس". استفاده کنید ابزار قلم(قلم) برای ترسیم انعکاس همانطور که در تصویر نشان داده شده است. مطمئن شوید که فقط طرح کلی را می کشید و نه شکل. پس از بسته شدن مسیر، روی فضای کاری کلیک راست کرده و انتخاب کنید انتخاب کنید(یک انتخاب ایجاد کنید) (پر 0). یک برس بزرگ (قطر حدود 470، سختی 0) بردارید و مانند تصویر روی سمت راست قسمت انتخابی رنگ بزنید تا بسازید. انعکاس سفید. حالت ترکیب را به تغییر دهید پوشش(Overlay) و opacity را به 63% کاهش دهید.

مرحله 6 - لبه ها
یک گروه جدید به نام "Edges" ایجاد کنید، یک لایه جدید در آن ایجاد کنید (Ctrl + Shift + N یا روی نماد ایجاد لایه جدید کلیک کنید). افزودن هایلایت به لبه ها به نماد جلوه ای سه بعدی می دهد. استفاده کنید ابزار قلم(قلم) برای ایجاد خطوط ضربه ای در اطراف گوشه ها و تمام حاشیه های پوشه، کاغذ و فلش ها. سپس روی فضای کاری کلیک راست کرده و انتخاب کنید مسیر سکته مغزی(سکته) - برس بزنید(برس). تنظیمات برس باید از قبل تغییر کند، قطر اصلی 8 پیکسل و سختی 0 باشد.

مرحله7 - سایه ها
یک لایه جدید (Ctrl + Shift + N) برای سایه ها ایجاد کنید و آن را در یک گروه جدید (Ctrl + G) قرار دهید. مانند مرحله 5 برای ایجاد انعکاس، انتخابی انجام دهید. انتخاب را با رنگ مشکی پر کنید و سپس حاشیه ها را با ابزار محو کنید ابزار محو کردن(تار). اگر سایه ها خیلی تیره به نظر می رسند، شفافیت لایه را تا 40 درصد کاهش دهید.

مرحله 8 - اضافه کردن متن
با هر فونتی که دوست دارید متن اضافه کنید. من "آژانس FB" را انتخاب کردم. اندازه قلم: 40، کدورت لایه: 75%.

مرحله 9 - اضافه کردن نهایی بازتاب ها و سایه ها
با استفاده از روش های مشابه در مرحله 5، چند بازتاب دیگر به کاغذ اضافه کنید.

با استفاده از سایه اضافه کنید ابزار بیضی(اِ) (بیضی). مانند تصویر یک بیضی بکشید و مقداری اضافه کنید فیلتر -تاری-تاری حرکت(فیلتر - Blur - Motion Blur). کدورت را به دلخواه کاهش دهید.

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

دستورالعمل ها

چندین تصویر با وضوح های مختلف برای نماد آینده ایجاد کنید. از ویرایشگر گرافیک شطرنجی مورد نظر خود استفاده کنید. این می تواند Photoshop، GIMP یا Paint باشد که در توزیع ویندوز گنجانده شده است.

وضوح تصویر می تواند هر کدام باشد. با این حال، ایجاد آیکون هایی با وضوح استاندارد منطقی است سیستم عامل ها. بنابراین، آیکون های کوچک معمولا دارای ابعاد 16x16 پیکسل هستند، در حالی که بزرگ و بزرگ به ترتیب 32x32 و 48x48 پیکسل هستند. همچنین گاهی اوقات از نمادهایی با وضوح 22x22 (برای نوار ابزار)، 64x64 و 128x128 (به عنوان تصاویر گفتگو، اما به ندرت) پیکسل استفاده می شود.

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

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

یک نماد جدید در IconPro ایجاد کنید. در منوی اصلی برنامه، File and New Icon را انتخاب کنید.

چندین فرمت تصویر آیکون را اضافه کنید. در منوی IconPro بر روی Edit و "Add Format..." کلیک کنید. در کادر گفتگوی Add New Icon Format که ظاهر می شود، وضوح تصویر شطرنجی نماد و عمق رنگ آن را انتخاب کنید. فرمت های مربوط به پارامترهای تصاویر ایجاد شده در مراحل اول و دوم را اضافه کنید.

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

یک تصویر مربوط به فرمت انتخاب شده را از یک فایل وارد کنید. از منو، Edit and Import BMP را انتخاب کنید. در گفتگوی نمایش داده شده، به دایرکتوری که تصاویر در مرحله دوم ذخیره شده اند بروید. فایل مورد نظر را انتخاب کنید، روی دکمه "Open" کلیک کنید.

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

بیایید با این واقعیت شروع کنیم که مشکل سکته مغزی "نرم" با تنظیمات کانتور حل می شود:

حالا می توانید چیزی بکشید. من فقط به یک نماد روزنامه نیاز دارم.

ابتدا شیئی که به تصویر کشیده می شود را مطالعه می کنم. گوگل نسبت ها را پیشنهاد می کند:

من به ویژگی های آنچه در دست است توجه می کنم:

صفحه اول از آرشیو را به عنوان مثال می آورم. نیویورکبار. من فوراً اندازه را برای تناسب با سایر نمادها تنظیم می کنم. آنچه در اینجا مهم است وزن بصری است، نه پارامترهای ریاضی:

برای اینکه نقاط لنگر به شبکه پیکسل بچسبند، باید کادر اینجا را علامت بزنید:

cmd+k

برای خطوطی از اجسام که با زاویه ای نه مضربی از 45 درجه می چرخند، چسبیدن به شبکه می تواند مضر باشد، بنابراین کلیدها و [k] می توانند به سرعت فرسوده شوند :-)

از قبل واضح است که روزنامه از اشیاء دیگر "سنگین تر" است. کمی کم می کنم:

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

من جزئیات را اضافه می کنم. بررسی می‌کنم که آیا 6 ستون روی هم چیده شده‌اند تا حاشیه‌های روزنامه برابر باشد (به طور تصادفی متوجه شدم که بله. در غیر این صورت باید روزنامه را یک پیکسل پهن‌تر می‌کردم.)

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

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

من آن را به اندازه مورد نیاز کاهش می دهم و هر حرف را در یک شبکه پیکسل قرار می دهم:

روزنامه را پر می کنم:

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

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

صادقانه بگویم، من حتی این روش را دوست دارم:

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

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

مرحله 1.

یک سند جدید ایجاد کنید (پرونده > جدید)با تنظیمات نشان داده شده

مرحله 2.

پس زمینه را پر کنید #FFFFFFرنگ کنید و سپس موارد زیر را روی آن اعمال کنید جلوه های لایه.

مرحله 3.

با شعاع استفاده کنید 35 پیکسل بدن، باز کردن سبک های لایهو تنظیمات زیر را اعمال کنید.

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

مرحله 4.

مرحله 5.

استفاده کنید ابزار مستطیل گرد (U)با شعاع 35 پیکسلو یک مستطیل با هر رنگی ایجاد کنید. نام این لایه را بگذارید BODY_2و بعد از آن افکت های زیر را روی این لایه اعمال کنید.

همچنین اضافه کنید سکتهلایه بندی کردن BODY_2با تنظیمات زیر

پس از آن اضافه کنید سایه درونیلایه بندی کردن BODY_2با تنظیمات زیر

مرحله 6.

شما باید یک نتیجه مشابه بگیرید.

مرحله 7

بدن. نام این لایه را بگذارید BASE. استفاده کنید ابزار مستطیل گرد (U)با شعاع 35 پیکسل

برای این کار لایه را انتخاب کنید بدنکلیک راست کرده و انتخاب کنید کپی سبک لایهو سپس لایه Base را انتخاب کنید، روی دکمه سمت راست ماوس کلیک کنید و انتخاب کنید چسباندن سبک لایه.

پس از این باید ضخامت را اصلاح کنید سکتهدر 3 پیکسلدر لایه BASE.

مرحله 8

شما باید یک نتیجه مشابه بگیرید.

مرحله 9

یک لایه جدید ایجاد کنید و آن را در زیر لایه قرار دهید بدن. نام این لایه را بگذارید پا. استفاده کنید ابزار مستطیل گرد (U)با شعاع 35 پیکسلو سپس افکت های لایه زیر را روی آن اعمال کنید.

همچنین درخواست دهید سایه درونیلایه بندی کردن پا

مرحله 10

شما باید یک نتیجه مشابه بگیرید.

مرحله 11

حالا لایه را کپی کنید پاو مطابق تصویر قرار دهید.

مرحله 12

یک لایه جدید ایجاد کنید، نام آن را بگذارید براقو آن را در بالای همه لایه ها قرار دهید، سپس انتخاب کنید ابزار قلم مو (B)و از یک برس بزرگ با لبه های نرم برای رنگ آمیزی یک نقطه سفید استفاده کنید.

سپس تغییر دهید حالت ترکیبیدر همپوشانیبا کاهش شفافیتدر 50%

مرحله 13

یک لایه جدید ایجاد کنید و نام آن را بگذارید صفحه نمایشو آن را روی همه لایه ها قرار دهید.

استفاده کنید ابزار مستطیل گرد (U)با شعاع 35 پیکسلبرای ایجاد یک مستطیل سپس کپی کنید سبک لایه BODY_2و آن را روی لایه اعمال کنید صفحه نمایش. حالا ضخامت ضربه را تنظیم کنید 10 پیکسلدر لایه صفحه نمایش.

مرحله 14

شما باید یک نتیجه مشابه بگیرید.

مرحله 15

در این مرحله خود صفحه نمایش را می سازیم. یک لایه جدید ایجاد کنید SCREEN_2. آن را روی لایه های دیگر قرار دهید. استفاده کنید ابزار مستطیل گرد (U)با شعاع 35 پیکسلبرای ایجاد یک مستطیل سپس اعمال کنید گرادیان V سبک های لایهبا تنظیمات زیر

سپس اعمال کنید سایه درونیلایه بندی کردن SCREEN_2.

سپس اعمال کنید درخشش درونیلایه بندی کردن SCREEN_2.

سپس سایهلایه بندی کردن SCREEN_2.

مرحله 16

شما باید یک نتیجه مشابه بگیرید.

مرحله 17

یک لایه جدید ایجاد کنید و نام آن را بگذارید صفحه نمایش براقو آن را روی بقیه قرار دهید. سپس انتخاب کنید ابزار قلم (P)و مطابق شکل یک کانتور بکشید. و آن را با رنگ سفید پر کنید #FFFFFF. سپس کم می کنیم شفافیتبه 20%

مرحله 18

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

مرحله 19

در این مرحله دکمه هایی می سازید. بگیر ابزار بیضی (U)و یک دایره ایجاد کنید و آن را تقریباً مانند تصویر قرار دهید، نام این لایه را بگذارید دکمه.

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

مرحله 20.

پس از این ما درخواست می کنیم سبک لایههمانطور که در تصویر نشان داده شده است، به کپی ما از دایره.

سپس اضافه می کنیم سایه.

مرحله 21

شما باید یک نتیجه مشابه بگیرید.

مرحله 22

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

مرحله 23

شما باید یک نتیجه مشابه بگیرید.

مرحله 24

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

مرحله 25

حالا دکمه های ما آماده است.

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

مرحله 26

بیا بلندگو بسازیم مانند تصویر باید یک مستطیل با گوشه های گرد در زیر دکمه ها ایجاد کنیم. بیایید این لایه را صدا کنیم SPEAKER.

مرحله 27

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

قابل اجرا سایه درونیلایه بندی کردن SPEAKER.

اضافه کنیم سکتهلایه بندی کردن SPEAKER.

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

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

مرحله چهارم: اندازه

این به طور کلی مهمترین چیز است: تصمیم گیری در مورد حداقل اندازه.
این برای چیست؟ اگر می‌خواهید آیکون‌های شما دارای لبه‌های تیز، پیکسل کامل و مقیاس مناسب باشند، باید در مورد اندازه و ضخامت خود اشیا تصمیم بگیرید. اندازه کوچک(x1). من توصیه می کنم از اندازه نمادهای حتی استفاده کنید.

مرحله پنجم: فرآیند

یک سند با مقادیر ایجاد کنید

جایی که Spacing فاصله بین تابلوهای هنری است.

عرض و ارتفاع — ارتفاع و عرض تخته هنری.

جلوه‌های شطرنجی - رزولوشن (ppi) مناسب برای آیکون 72

Align New Objects… - این چک باکس مسئول پیوند دادن نقاط به شبکه پیکسل است. من به شما توصیه می کنم آن را روشن کنید، اما در حین کار، همیشه می توانید آن را خاموش کنید.

1. اولین آرت بورد را انتخاب کنید، تمام آیکون ها ساخته می شود و آیکون های تمام شده روی تابلوهای هنری مجاور قرار می گیرند.
2. یک مربع متناسب با محل کار خود ایجاد کنید.
3. راهنماهایی را تنظیم کنید تا فرآیند ترسیم آسان تر شود.
4. استفاده کنید پیش نمایش پیکسل
5. نمادهای آماده را در لیست تصاویر علامت گذاری کنید تا بتوانید به وضوح پیشرفت خود را کنترل کنید.
6. توصیه ها را دنبال کنید و آخرین مقاله O .
7. ست اول خود را خیلی بزرگ نکنید، ممکن است زود خسته شوید و نیمه راه را رها کنید. سرعت معمولیحدود 20 آیکون در روز وجود خواهد داشت، سپس آنها می توانند به سرعت خسته شوند...
8. فایل منبع را طراحی کنید و فراموش نکنید که چیزها را در لایه ها مرتب کنید، برای مثال یک فایل برای فتوشاپ آماده کنید و اسکچ کنید.
9. یک شوت برای دریبل و بیهنس آماده کنید، یک پست برای آن ایجاد کنید شبکه های اجتماعی. این بهترین روابط عمومی برای کار شما و دسترسی به سفارشات جدید است. هشتگ ها را فراموش نکنید: #design #best #mamalubitmenya #kupiteikonky

کجا بفروشیم:

graphicriver.net یک پلت فرم رایگان برای تجارت هرگونه محتوای دیجیتال است.

creativemarket.com  - برای ایجاد یک حساب کاربری در اینجا از شما خواسته می شود تا حساب های موجود در فروشگاه های دیگر و نمونه کارها خود را نشان دهید.

thenounproject.com  — سایت احتمالاً دارای بزرگترین پایگاه داده آیکون ها است، آنها یک انتخاب را ارائه می دهند: یا رایگان یا برای یک پرداخت، یک تابع اشتراک ماهانه نیز وجود دارد، اما اگر می خواهید پول در بیاورید روی این سرویس شرط بندی نمی کنم .

icons8.com  - من چیزی در مورد این فروشگاه نمی دانم، اگر کسی تجربه ای دارد در نظرات به اشتراک بگذارد.