مدیریت و دانلود پک آیکان های 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
چطور قرار هست آِیکان ها را مدیریت و دسته بندی کنیم؟
در این فیلم من علاوه بر معرفی نرم افزارها، نحوه کارکرد و قابلیت های آن ها را نیز به شما آموزش می‌دهم. در واقع شما قادر خواهید بود یا از پک های آماده ای که من آماده کرده ام استفاده کنید و یا اینکه خودتان آیکان های مختلف را دسته بندی کنید و سپس یک ست یا پک برای استفاده خود یا دیگران ایجاد کنید. این پک های آیکانی که ایجاد می کنید قابلیت جستجو، تغییر سایز و رنگ و … در نرم افزار را دارند.
از جمله دیگر قابلیت های این نرم افزارها:
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/UX) را از صفر از کجا یاد بگیرم؟
شما می توانید با عضویت در کانال یوتیوب من آموزش های دیگر طراحی رابط و تجربه کاربری ( UI / UX ) را دنبال و یاد بگیرید.
عضویت در کانال آموزشی یوتیوب : Youtube.com/AsteriXarts
اگر سوالی در مورد طراحی رابط کاربری UI داشتید، می توانید در قسمت نظرات بپرسید تا به آن ها جواب دهم.
نمونه کارهای طراحی رابط و تجربه کاربری ( UI/UX )
3 تا از مهمترین منابع نمونه کارهای طراحی رابط کاربری یعنی دریبل، بیهنس و اینستاگرام هست که شما می توانید کارهای مختلف طراحی رابط و تجربه کاربری را ببینید و از آن ها برای استفاده در کارهای خود ایده بگیرید.
همچنین می توانید نمونه کارهای من را ببینید و من را در این شبکه ها دنبال کنید.
[better-ads type=”banner” banner=”8708″ campaign=”none” count=”2″ columns=”1″ orderby=”rand” order=”ASC” align=”center” show-caption=”1″][/better-ads]
