دانلودر IconScout: راهنمای آیکون، سه‌بعدی و Lottie

دانلودر IconScout با وارد کردن لینک محتوا، آیکون، تصویرسازی سه‌بعدی و انیمیشن Lottie به شما می‌دهد تا بدون خرید پلن کامل برای چند فایل، یک رابط کاربری یا ارائه صیقل‌خورده بسازید. این راهنما هر نوع فایل را توضیح می‌دهد، می‌گوید برای هر کار کدام فرمت را انتخاب کنید و چطور کل پروژه را از نظر بصری یکدست نگه دارید.

از IconScout چه چیزهایی می‌توان گرفت؟

IconScout یک بازار و کتابخانه برای دارایی‌های طراحی است. سه دسته‌ای که بیشتر مردم به آن‌ها اهمیت می‌دهند عبارت‌اند از:

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

تصویرسازی، استیکر و دارایی‌های دیگر هم هست، اما آیکون، سه‌بعدی و Lottie هسته بیشتر درخواست‌ها هستند.

از کدام فرمت فایل استفاده کنیم؟

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

SVG برای آیکون و تصویرسازی تخت

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

PNG برای قرار دادن سریع

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

JSON برای انیمیشن Lottie

انیمیشن Lottie یک فایل JSON است که حرکت را توصیف می‌کند. صفحه وب یا اپ آن را با یک کتابخانه پخش‌کننده کوچک اجرا می‌کند. بسیار سبک‌تر از GIF است و در هر اندازه‌ای تیز می‌ماند. برخی کتابخانه‌ها نسخه dotLottie هم ارائه می‌دهند که یک بسته فشرده است.

انتخاب برای سه‌بعدی

تصویرسازی‌های سه‌بعدی معمولاً به شکل PNG با پس‌زمینه شفاف ارائه می‌شوند، گاهی با زاویه‌ها یا رنگ‌های اضافه. از آیکون‌ها سنگین‌ترند، پس پیش از استفاده در صفحه وب آن‌ها را فشرده کنید.

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

1. در IconScout جست‌وجو کنید. اول فیلتر نوع را بزنید: آیکون، سه‌بعدی، Lottie یا تصویرسازی. سپس کلیدواژه‌ای مثل payment، shopping cart یا success اضافه کنید.
2. صفحه محتوا را باز کنید و سبک، نام بسته و فرمت‌های موجود را بررسی کنید.
3. لینک را از نوار آدرس کپی کنید.
4. دانلودر IconScout را باز کنید، لینک را جای‌گذاری و ارسال کنید.
5. فایل را دانلود کنید و اگر به شکل بسته آمد از حالت فشرده خارج کنید.
6. پیش از دانلود بیشتر، در طراحی‌تان آزمایش کنید. یک آیکون با سبک درست از بیست آیکون ناهمخوان ارزشمندتر است.

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

چطور یک مجموعه آیکون را یکدست نگه داریم

اشتباهی که رابط کاربری را آماتور نشان می‌دهد ترکیب سبک‌هاست. این قواعد را رعایت کنید.

• یک خانواده برای هر پروژه. یک بسته انتخاب کنید و از همان دانلود کنید. اگر آیکونی لازم دارید که بسته ندارد، به‌دنبال همان برچسب سبک بگردید، نه فقط همان موضوع.
• ضخامت خط یکسان. آیکون‌های خطی 2 px را با آیکون‌های خطی 2 px مقایسه کنید. خط نازک و ضخیم را قاطی نکنید.
• سبک گوشه یکسان. گوشه گرد با گوشه گرد، تیز با تیز.
• اندازه شبکه یکسان. همه آیکون‌ها را روی شبکه 24 px یا 32 px بگذارید تا چینش آسان شود.
• یک منطق رنگی. از یک رنگ یا پالت دورنگ تعریف‌شده مرتبط با برندتان استفاده کنید.

استفاده درست از انیمیشن‌های Lottie

زیاده‌روی با Lottie آسان است. چند انیمیشن کوچک رابط را زنده نشان می‌دهد؛ ده تا همزمان شلوغ است.

• از انیمیشن برای توضیح استفاده کنید: تیک پس از پرداخت، لودر هنگام رسیدن داده، حرکت ملایم در حالت خالی.
• حلقه‌ها را کوتاه و آرام نگه دارید. حرکتی بخواهید که از محتوا پشتیبانی کند، نه با آن رقابت.
• به کاربرانی که کاهش حرکت را ترجیح می‌دهند احترام بگذارید. برایشان نسخه ثابت بگذارید یا انیمیشن را متوقف کنید.
• حجم فایل را آزمایش کنید. یک فایل Lottie ساده چند کیلوبایت است؛ نمونه پیچیده با لایه‌های زیاد ممکن است خیلی بزرگ‌تر باشد.
• پیش از انتشار رنگ‌های انیمیشن را با برندتان هماهنگ کنید.

اگر روی موشن برای ویدیو کار می‌کنید، راهنمای ما درباره قالب‌های Motion Array رویکرد دیگری برای دارایی‌های موشن را پوشش می‌دهد.

استفاده از تصویرسازی سه‌بعدی در چیدمان‌های واقعی

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

سایه نرم، جهت نور یکسان و پالت رنگی محدود را حفظ کنید. وقتی صفحه‌تان از قبل عکس دارد، روی آن‌ها سه‌بعدی اضافه نکنید. برای هر صفحه یک زبان بصری انتخاب کنید.

مجوز و ذکر منبع

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

درباره شرایط رایج بیشتر در توضیح مجوزهای محتوای استوک بخوانید.

مثال‌های عملی

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

یک ارائه سرمایه‌گذاری: در هر اسلاید از آیکون‌های PNG همان یک بسته و روی جلد از یک شیء سه‌بعدی استفاده کنید. انیمیشن لازم نیست، پس Lottie را کنار بگذارید.

آشناسازی یک اپ موبایل: سه فایل Lottie، یکی برای هر صفحه، با همان پالت و همان سرعت حرکت.

سوالات متداول

آیا می‌توانم انیمیشن‌های Lottie را به شکل فایل JSON دانلود کنم؟

بله، محتواهای Lottie به شکل JSON ارائه می‌شوند و گاهی در فرمت فشرده dotLottie هم هستند. آن‌ها را با یک کتابخانه پخش‌کننده Lottie در صفحه وب یا اپ اجرا می‌کنید.

برای آیکون‌ها SVG بهتر است یا PNG؟

وقتی آیکون تغییر اندازه یا تغییر رنگ می‌دهد، مثل وب‌سایت‌ها و اپ‌ها، SVG به کار ببرید. برای قرار دادن سریع در اسلاید، سند و پست که فقط به یک تصویر نیاز دارید، PNG بگیرید.

آیا می‌توانم رنگ آیکون دانلودشده را تغییر دهم؟

با SVG بله، در هر ویرایشگر وکتور یا در کد. با PNG تغییر رنگ محدود است. رنگ‌های Lottie را می‌توان در ابزارهای ویرایش Lottie تغییر داد.

آیا به ذکر منبع نیاز دارم؟

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

آیا تصویرسازی‌های سه‌بعدی برای چاپ خوب هستند؟

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