مدیریت و دانلود پک آیکان های SVG برای طراحی رابط کاربری
آیا شما هم برای پروژه های مختلف به دنبال آیکان های SVG هستید؟ در این آموزش من دو نرم افزار برای مدیریت و جستجو در آیکان های SVG را به شما معرفی میکنم.
شما به وسیله این نرم افزارها علاوه بر اینکه قادر هستید در بین آیکان های SVG جستجو کنید، خیلی سریع می توانید رنگ و یا اندازه آن را تغییر داده و فقط با کشیدن و رها کردن آن در نرم افزار مورد نظر خود از آن استفاده کنید.
همچنین 15 پک آیکان های SVG شامل هزاران آیکان مختلف بصورت مرتب و دسته بندی آماده کرده‌ام که می توانید از طریق ثبت ایمیل خود در فرم زیر لینک دانلود آنها را در ایمیل خود دریافت کنید.
این پک ها شامل:
- 70 Social Icons
- BigMug Line
- Dripicons
- Essential Icons
- Evericons
- Feather
- InVision Essentials
- Ionicons
- Line Awesome
- macOS Cursors
- Micon
- Mobirise Icons
- Phosphor
- Themify Icons
- Unicons
در آموزش UI/UX : دانلود 15 پک آیکان های SVG رایگان و نرم افزار جستجو و مدیریت آیکان ها چه مواردی بررسی می شود؟
مواردی که در این آموزش بررسی می شود شامل:
- 00:35 | چرا باید از آیکان های SVG در طراحی UI/UX استفاده کرد؟
- 01:13 | معرفی و نحوه ی کار با اولین نرم افزار مدیریت و جستجو در آیکان های SVG
- 07:42 | معرفی و نحوه ی کار با دومین نرم افزار مدیریت و جستجو در آیکان های SVG
- 11:45 | نحوه ی دانلود پک های آیکان SVG که در آموزش معرفی شدند
چطور قرار هست آیکان های SVG را مدیریت و دسته بندی کنیم؟
در این فیلم من علاوه بر معرفی نرم افزارها، نحوه کارکرد و قابلیت های آن ها را نیز به شما آموزش می‌دهم. در واقع شما قادر خواهید بود یا از پک های آماده ای که من آماده کرده ام استفاده کنید و یا اینکه خودتان آیکان های مختلف را دسته بندی کنید و سپس یک ست یا پک برای استفاده خود یا دیگران ایجاد کنید. این پک های آیکانی که ایجاد می کنید قابلیت جستجو، تغییر سایز و رنگ و … در نرم افزار را دارند.
از جمله دیگر قابلیت های این نرم افزارها:
1- مدیریت و دسته بندی آیکان ها
2- ساخت گروه آیکان جدید و اختصاصی
3- جستجو درآیکان ها
4- داشتن قابلیت تیمی برای استفاده از آیکان های SVG
5- تغییر رنگ و ویرایش آیکان ها
آیکان های SVG چیست؟
SVG یا Scalabe Vector Graphics به گرافیک‌های وکتوری اجازه می‌دهد تا در محیط مرورگر به اجرا در بیاید. در حال حاضر SVG در حال تبدیل شدن به یک استاندارد اصلی برای وب آیکون‌ها و انیمیشن‌ها است. نه تنها میزان مقیاس‌پذیری بیشتری ارائه می‌دهند بلکه سرعت و پایداری بسیار بیشتری را نیز به نسبت فونت آيکون‌ها در اختیار شما می‌گذارند. از آنجایی که SVGها به صورت کامل از کدهایی تشکیل می‌شود نیازی به import کردن از فایل‌های بزرگ خارجی ندارند. همچنین باید بگویم که در مقایسه با JPG و PNG اندازه کمتری دارند.
آیکان های SVG چگونه کار می‌کند؟
استفاده کردن از SVG درست از طریق تگ <img> امکان پذیر است. از طریق آن می‌توانید عرض و ارتفاع و موارد دیگری را نیز تنظیم کنید. با این حال استفاده از چنین روشی محدودیت‌های خاص خود را دارد.
اگر می‌خواهید چنین محدودیت‌هایی را پشت سر بگذارید پس باید به صورت مستقیم با خود SVG ارتباط برقرار کنید. می‌توانید این کار را به صورت inline در سندهای HTMLتان انجام دهید. حتی می‌توانید از CSS نیز استفاده کنید.
اگرچه ممکن است کدهای بالا در اولین نگاه کمی پیچیده و عجیب و غریب به نظر برسند اما باید بگویم که طراحی و کنترل آیکون‌های SVG بسیار آسان هستند. در حقیقت بجای کد نویسی حتی می‌توانید از ابزارهای گرافیکی وکتور نیز استفاده کنید. آیکون‌های‌تان را طراحی کنید و در قالب فایل SVG ذخیره نمایید، می‌توانید کدها را در برنامه‌ای مانند Illustrator نیز ایجاد کنید.
پک های آیکان های SVG دیگر را از کجا دانلود کنیم؟
شما می توانید با جستجو در گوگل بصورت انگلیسی پک های مختلف آیکان را دانلود کنید. اما بصورت کلی می توانید از طریق وبسایت های زیر پک آیکان های مختلف را پیدا و دانلود کنید.
چطور در دوره های آموزشی طراحی شما ثبت نام کنیم؟
از جمله این دوره ها که در حال ضبط و آماده سازی است می توان به
- آموزش طراحی رابط کاربری – UI Design
- آموزش طراحی تجربه کاربری – UX Design
- آموزش صفحه آرایی کتاب، مجله و روزنامه با ایندیزاین
- آموزش طراحی گرافیک با فتوشاپ
این دوره ها در حال آماده سازی است اما شما می توانید با ثبت ایمیل خود از طریق لینک زیر در این دوره ها پیش ثبت نام کنید.
کسانی که قبل از انتشار دوره ها ایمیل خودشان را ثبت می کنند، از امتیاز هایی برخوردار می شوند.
گروه تلگرام برای بحث و تبادل نظر در حوزه دیزاین رابط و تجربه کاربری
این گروه تلگرامی با هدف رفع اشکال و راهنمایی طراحان UI/UX و طراحان محصول ایجاد شده است. برای عضویت در این گروه بر روی لینک زیر کلیک کنید.
عضویت در گروه تلگرام UIXFamily
کانال تلگرام برای معرفی کتاب ها و نکات کاربردی و آموزش های مختلف
شما می توانید با عضویت در کانال تلگرامی AsteriXarts به محتوای تخصصی در حوزه دیزاین و به خصوص UI/UX دسترسی داشته باشید. برای عضویت بر روی لینک زیر کلیک کنید:
عضویت در کانال تلگرام AsteriXarts
آموزش های اختصاصی طراحی در اینستاگرام
همچنین شما می توانید با دنبال کردن کانال AsteriXarts در اینستاگرام، به محتوا تخصصی در حوزه دیزاین، بیزینس، فریلنسینگ و … دسترسی داشته باشید. برای دنبال کردن کانال بر روی لینک زیر کلیک کنید:
دنبال کردن AsteriXarts در اینستاگرام
خبرنامه هفتگی دیزاین شامل مقالات، آموزش ها و منابع کمکی طراحی
بهترین مقالات، فیلم های آموزشی در حوزه دیزاین و به خصوص UI/UX و منابع کمکی طراحی را هر پنجشنبه در ایمیل خود داشته باشید. برای عضویت در این خبرنامه می توانید از طریق فرمی که در پایین همین صفحه قرار دارد، ثبت نام کنید و یا اینکه از طریق لینک زیر در وبسایت dexigner news عضو خبرنامه شوید.
عضویت در خبرنامه هفتگی دیزاین Dexigner News
طراحی رابط کاربری ( UI/UX ) را از صفر از کجا یاد بگیرم؟
همچنین برای اینکه قسمت های بعدی معرفی ابزارهای کمکی طراحی UI/UX و دیگر آموزش های پایه طراحی و دیزاین را از دست ندهید می توانید علاوه بر عضویت در خبرنامه وبلاگ، در کانال یوتیوب نیز عضو شوید تا از جدیدترین فیلم های آموزشی ما سریعا مطلع شوید.
نظر شما در مورد آموزش UI/UX : دانلود 15 پک آیکان های SVG رایگان و نرم افزار جستجو و مدیریت آیکان ها چیست؟ در بخش نظرات برای ما بنویسید که به چه موضوعی بیشتر در طراحی و دیزاین علاقه دارید تا بیشتر در مورد آن محتوای آموزشی تولید شود.
لینک آموزش ها و مقالات فارسی دیگر طراحی رابط کاربری ( UI/UX ) در وبلاگ من:
آموزش طراحی UI/UX با Figma از صفر در 30 دقیقه با مثال کاربردی
آموزش جامع Figma – کار با ابزارها و محیط فیگما 2021 – قسمت اول
آموزش جامع Figma – کار با پنل Design در فیگما 2021 –قسمت دوم
10 ترفند فوق العاده کاربردی فیگما 2021 – قسمت اول
آموزش طراحی یک عنصر با بینهایت حالت با Variants در Figma
5 پلاگین فوق العاده کاربردی Figma 2021 – قسمت اول
5 پلاگین فوق العاده کاربردی Figma 2021 – قسمت دوم
آموزش جامع طراحی Adobe Xd – محیط ظاهری و آرتبورد ها – قسمت اول
آموزش طراحی شکل های مختلف و تنظیمات آنها در Adobe Xd – قسمت دوم
آموزش ابزار متن و فارسی نویسی در Adobe Xd – قسمت سوم
آموزش کار با تصاویر و ماسک کردن در Adobe Xd – قسمت چهارم
آموزش طراحی آیکان با Pathfinder در Adobe Xd – قسمت پنجم
آموزش Adobe XD – معرفی 5 پلاگین فوق العاده کاربردی – قسمت دوم
معرفی 5 پلاگین فوق العاده کاربردی برای Adobe Xd- قسمت اول
آموزش Adobe Xd - یک دکمه برای همه جا در طراحی رابط کاربری
10 افزونه فوق العاده کاربردی برای طراحان رابط کاربری
آموزش UI/UX : طراحی رابط کاربری را از صفر چطور و از کجا یاد بگیریم؟
آموزش UI/UX : وایرفریم چیه و چطور آن را طراحی کنیم؟
چطور طرح رابط کاربری را در اختیار برنامه نویس و کارفرما قرار دهیم؟
لندینگ پیج چیست و چطور باید رابط کاربری UI/UX آن را طراحی کرد؟
اصطلاحات طراحی رابط کاربری – بخش اول: رنگها
آموزش UI/UX : اصول طراحی رابط کاربری برای تلویزیون