Невід'ємною частиною сучасних веб-сайтів є значок Favicon, що дозволяє швидко ідентифікувати той чи інший ресурс у списку вкладок браузера. Також важко уявити комп'ютерну програмубез свого унікального ярлика. При цьому сайти та софт у такому разі поєднує не зовсім очевидна деталь – і ті, й інші використовують іконки у форматі ICO.
Ці невеликі зображення можуть створюватися як завдяки спеціальним програмам, Так за допомогою та онлайн-сервісів. До речі, саме останні для таких цілей користуються значно більшою популярністю, і низку таких ресурсів ми розглянемо з вами у цій статті.
Робота з графікою - не найпопулярніша категорія веб-сервісів, проте в тому, що стосується генерації іконок, безумовно є з чого вибирати. За принципом роботи такі ресурси можна розділити на ті, в яких ви малюєте малюнок, і сайти, що дозволяють конвертувати вже готове зображення в ICO. Але здебільшого всі генератори іконок пропонують і те, й інше.
Спосіб 1: X-Icon Editor
Цей сервіс є найфункціональнішим рішенням для створення ICO-картинок. Веб-додаток дозволяє вам детально промалювати іконку вручну або скористатися вже готовим зображенням. Головною перевагою інструменту є можливість експорту картинки з роздільною здатністю до 64×64.
Так, якщо потрібно створити цілий набір однотипних іконок різного розміру - нічого кращого, ніж X-Icon Editor для цього вам не знайти.
Спосіб 2: Favicon.ru
При необхідності згенерувати значок favicon з роздільною здатністю 16×16 для веб-сайту, відмінним інструментом також може бути російськомовний онлайн-сервіс Favicon.ru. Як і у випадку з попереднім рішенням, тут можна як самостійно намалювати іконку, розфарбовуючи кожен піксель окремо, так і створити favicon з готової картинки.
Як результат, на вашому ПК зберігається файл з розширенням ICO, що є картинкою розміром 16×16 пікселів. Сервіс відмінно підійде для тих, кому потрібно лише конвертувати зображення в маленьку іконку. Втім, і виявляти фантазію у Favicon.ru зовсім не забороняється.
Спосіб 3: Favicon.cc
Схожий із попереднім як за назвою, так і за принципом роботи, але ще більш сучасний генератор іконок. Крім створення звичайних картинок 16х16, сервіс дозволяє легко намалювати анімований favicon.ico для вашого сайту. Крім того, ресурс містить тисячі іконок користувача, доступних для вільного скачування.
Якщо англомовний інтерфейс вас не бентежить, то аргументів на користь роботи з попереднім сервісом немає жодних. Крім того, що Favicon.cc вміє генерувати анімовані іконки, ресурс ще коректно розпізнає прозорість на імпортованих зображеннях, чого російськомовний аналог, на жаль, позбавлений.
Спосіб 4: Favicon.by
Ще один варіант генератора favicon значків для сайтів. Існує можливість створення іконки з нуля або на основі конкретного зображення. З відмінностей можна виділити функцію імпорту картинок зі сторонніх веб-ресурсів та досить стильний, лаконічний інтерфейс.
Загалом відмінностей у роботі з вже розглянутими в цій статті сервісами немає, проте з конвертуванням зображень у ICO ресурс Favicon.by справляється значно краще, і це легко помітити.
Спосіб 5: Online-Convert
Цілком імовірно, що вам вже відомий цей сайт як практично всеїдний конвертер файлів онлайн. Але не всім відомо, що це один із найкращих інструментів для перетворення будь-яких зображень в ICO. На виході ви можете отримувати іконки з роздільною здатністю до 256×256 пікселів.
Як бачите, створити іконку ICO за допомогою сайту Online-Convert зовсім нескладно, і робиться буквально за пару кліків миші.
| Графічні утиліти Гор.клавіші Photoshop
Насамперед, не слід використовувати готові іконки. Іконка - це як ваше лого чи ваше лого і є. Чудово розумію, що ніхто нічого не робить на порожньому місці, ми дивимося один на одного. Не можна навчитися музиці, не граючи творів інших авторів. Ми стежимо за новими напрямками. Я створюючи сайти, обов'язково подивлюся сайти конкурентів, щоб знати, як цей сайт виглядатиме на тлі інших. Але ніколи не використовуйте яскраві картинки, знахідки тому, що швидше за все багато кому вони сподобаються і ви будете сотою людиною, яка використовувала цю ж картинку. Що ви думаєте, бачачи, як хтось використовує нехай гарну, але побиту картинку з бази даних? Те саме подумають і про вас.
Можна використовувати якісь прийоми моментів другого плану, не такі яскраві. Це те, що я можу використати. Побачу щось незаслужено не помічене та розвиваю.
Нюанси редагування
Колись цілком непогано вдасться зменшити велику копію, особливо якщо це складний логотип.У більшості випадків стиск станеться з деяким спотворенням та втратою якості.
Вибір програми
Можна створити просту іконкув будь-якому редакторі, в Paint наприклад, зберегти в форматі BMPскажімо, а потім перевести у формат ICO. Якщо вам потрібна витончена іконка з перетіканнями півтонів, то вам без хорошого редактора іконок не обійтися.Або напр. для веб-сторінок використовуються іконки одного розміру 16X16, але для системи Windowsнапр. іконка має містити кілька малюнків ряду розмірів. Тут вам також потрібний хороший редакторіконок.
Прозорий фон
Колись зручне прозоре тло, але для кращої якості постарайтеся його уникнути. Це простіше і використовуючи форму квадрата, ви максимально використовуєте надану вам площу під іконку (вона і так маленька, навіщо ще урізати). Але колись треба та колись хочеться.Якщо ви створюєте іконку у звичайному редакторі, то вона не збереже її у форматі ICO. Вам доведеться зберегти її швидше за все у BMP і потім конвертувати у формат ICO. Але при цьому прозоре тло зазвичай замінюється чорним кольором. І вам треба буде у редакторі іконок видалити чорний колір. Також створюючи прозоре тло, пам'ятайте, якщо є прозоре, то напівпрозорого немає. Скажімо, у вас червоне коло, то по краях будуть рожеві клітини тому, що редактор при прозорий фонмалює як на білому тлі. Тоді вам потрібно прогнозувати на якому фоні буде ваш малюнок і замінити рожевий підходящому у вашому випадку. Або відмовитися від згладжених країв та зробити все червоним. У такому випадку краї можуть бути рваними.
Невеликий редактор ікон. Підтримуються альфа-канали, іконки розміром до 256х256, бібліотеки, XP-іконки та основні формати: ICO, BMP, PNG, PSD, EXE, DLL, ICL.
Установка редактора іконок @icon sushi
На нашому сайті можна завантажити інсталятор @icon sushi, або його портативну версію. Вибираємо зручний варіант на сторінці завантаження та встановлюємо програму.
англійська, але в архіві з ним лежить русифікатор.Щоб русифікувати програму, робимо таке:
- Відкриваємо папку з встановленою програмою(за умовчанням це C:\Program Files\aicon\).
- Знаходимо там папку Languages.
- Копіюємо до неї файл Русский.lngіз папки з русифікатором.
- Запускаємо @ icon sushi.
- Заходимо в меню "Options" - "Languages" та вибираємо мову Російська.
Готово, російський інтерфейс встановлений.
Інтерфейс програми
Після запуску з'явиться головне вікно програми.
З її допомогою можна "діставати" заховані значки з файлів .ICO, .PNG, .PSD, .BMP, .EXE, .DLL, .ICLі міняти їх як заманеться.
Давайте для прикладу відкриємо файл антивірусу AVG, що запускається, щоб витягти з нього іконки. Натискаємо "Відкрити" та вибираємо потрібний файлз розширенням .exe. Завантажаться всі значки цього файлу.
Якщо навести курсор миші на кнопки в області Відкриття та Збереження, ми побачимо, що програма дозволяє зберігати картинки у форматах:
- Звичайний одиночної іконки (ICO).
- Мультиконка (набір вибраних у списку іконок у тому ж форматі ICO).
- Бібліотека іконок, які можуть містити як одну, так і безліч значків (ICL).
- Зображення в BMP (не стиснена і без підтримки прозорості).
- Зображення в PNG (з підтримкою альфа-каналу).
Таким чином, за допомогою @ icon sushi можна конвертувати звичайні картинки в іконки і назад.
Давайте спробуємо зробити іконку з якого-небудь малюнка.
Створення іконок з малюнків
Тут нам доведеться спочатку зробити невелику підготовчу роботу. Як уже згадувалося, програма працює з картинками розміром до 256х256 пікселів і далеко не у всіх форматах.
Стандартні розміри іконок для Windows: 16*16, 24*24, 32*32, 48*48, 256*256.Також іноді застосовуються: 64*64 та 128*128.
Тому, щоб відкрити звичайну картинку @icon sushi, потрібно спочатку:
- Зробити її квадратною (обрізати чи додати полотно).
- Зменшити до одного із стандартних розмірів.
- Зберегти у форматі PNG.
Для цих маніпуляцій можна використовувати будь-який графічний редактор або навіть просту програмудля перегляду зображень.
Редактори іконок дозволяють змінювати іконку файлу, яка відображається під час перегляду файлу, наприклад, у провіднику. Файл з розширенням ICO містить один або кілька невеликих зображень різних розмірів і глибини кольору. Крім редагування, представлені програми також дозволяють створювати нові іконки (звичайні та системні) для файлів, а також іконки сайтів, які використовуються на веб-ресурсах (блог, сайт) для відображення в адресному рядку браузера або вкладках/закладках браузера, наприклад цей .
Редактору іконок необхідно або реалізовувати спеціальні алгоритми роботи з іконками, або використовувати вбудовані системні функції, інакше створені іконки буде складно використовувати.
Іконки, як правило, мають розмір 32 х 32 пікселя з глибиною 256-квітів, однак іноді використовуються іконки розмірами 48 х 48 пікселів, 64 х 64 пікселів та 128 х 128 пікселів. Іконки сайтів мають бути збережені розміром 16 х 16 пікселів з палітрою 256 кольорів. Ви можете створювати іконки з палітрою 32 біти (і найкраще це робити), але іконки сайтів, що використовуються в мережі, мають бути збережені з палітрою 256 кольорів. Не варто зберігати іконки сайтів з іншою роздільною здатністю та глибиною кольору, оскільки на деяких платформах вони можуть відобразитися некоректно.
Бажаєте отримати значок веб-сторінки?
Google створив простий сервіс для вилучення іконки сайту у форматі PNG.
www.google.com/s2/favicons?domain=сайт
Огляд безкоштовних програм для заміни та редагування іконок
Програма редагування піктограм Greenfish Icon Editor Pro комплексний підхід
Не всі професійні продукти є комерційними. безкоштовна програма, у комплекті з професійними інструментами для створення, редагування, відкриття та збереження іконок файлів. Вона дозволяє витягувати та модифікувати іконки у виконуваних файлах, або перетворювати файли зображень на іконки та інші графічні формати.
Програма дозволяє працювати з бібліотеками ікон. У ній підтримуються такі формати зображень: ICO, CUR, ANI, PNG, XPM, BMP, JPG, GIF, а також Vista сумісні іконки PNG.
Крім роботи з іконками, програма дозволяє Вам малювати курсори, невеликі піксельні зображення, анімацію та різні зображення, що підтримуються. Програма має також деякі корисні функції, такі як накладання тіней, створення візуального світлового ефекту та завдання ширини скосу.
Програма проста у використанні. Вона мало важить і не потребує встановлення. Достатньо просто скачати zip-файл, розпакувати та запустити виконуваний файл.
Програма заміни та реадктування значків IcoFX альтернатива Greenfish
Як альтернатива, - добрий безкоштовний редакторіконок, які варто спробувати. Програма має багатий набір інструментів і включає можливості більше 40 ефектів зміни зображення, властиві для більшості графічних редакторів. Щоб розібратися з усіма інструментами, потрібно деякий час.
Програма дозволяє створювати іконки для Ваших файлів, файлів установки, Вашого сайту або блогу. Вона також дозволяє конвертувати Ваші улюблені зображення на іконки і навпаки. Можливості програми також включають перетворення іконок Macintosh в Windows і назад.
Інша особливість програми - це робота з Vista іконками в форматі PNG, з підтримкою максимальної глибини кольору, включаючи альфа-канал (прозорість).
Також до особливостей програми можна віднести пакетну обробку іконок.
IcoFX
| Безліч інструментів, більше 40 графічних ефектів, перетворення між Macintosh та Windows іконки, можливість пакетної обробкиі т.д. | ||
| Процес вилучення та виправлення іконок для деяких файлів працює не так добре, як у програми Greenfish Icon Editor Pro. |
Онлайн редактори іконок багато хто не сприймає серйозно, але насправді подібні інструменти значно полегшують робочий процес. Усього пара кліків може позбавити вас від годинника пошуку, переглядів або самостійної розробки. Крім того, немає сенсу використовувати повноцінні, коли є спеціальні сервіси з заточеними функціями під дані конкретні завдання.
Подібні сайти редактори іконок є дуже ефективними. Вони дозволяють вам:
- легко та швидко створювати нові матеріали;
- надати існуючим напрацюванням завершеного вигляду;
- зберігати результат у різних форматах (SVG, ICO & PNG);
- створювати іконки для .
У статті ми підібрали п'ять кращих безкоштовних онлайнових редакторів іконок і для порівняння спробували створити набір в кожному з них.
IconsFlow
IconsFlow.com — векторні іконки + редактор, що дозволяє створювати персоналізовані набори та експортувати їх у хорошій якості(SVG, ICO та PNG). Головною перевагою сервісу є наявність двох редакторів:
- головного, у якому вибирається палітра, стиль, ефекти;
- редактора форми, де можна змінити поточну форму або намалювати нову.
Якщо ви вже створили іконки в Illustrator, просто завантажте файли SVG та поекспериментуйте з різними фонами. У IconsFlow існують певні обмеження при безкоштовне використаннятому переконайтеся, що ви з ними ознайомилися перед стартом. Для початківців є уроки і розділ допомоги, до того ж є можливість працювати в редакторі іконок російською.
Вигляд векторного редактора IconsFlow:
Приклади робіт:
FlatIcons
За допомогою FlatIcons.net ви можете створити свою флет-іконку (у плоскому стилі) на основі готових шаблонів. Задавайте розміри, вибирайте малюнок та основне тло (кола, кільця, прямокутники), змінюйте колір. Цей редактор іконок безкоштовний, але має дві недоліки:
- По-перше, ви можете завантажувати файли лише у PNG-форматі.
- По-друге, доведеться створювати кожен об'єкт окремо, т.к. неможливо розробити цілий набір одразу.
Не дивлячись на те, що пік популярності вже пройшов, багато хто використовує їх у своїх дизайнах. Як приклад розробники дозволяють завантажити безкоштовний набірсоціальних флет ікон. Результат роботи в редакторі FlatIcons:
Launcher Icon Generator
Проект Launcher Icon Generator безкоштовний і, як ми думаємо, найбільше підходить для просунутих користувачів. Даний онлайн редактор іконок дозволяє завантажувати зображення/кліпарти та додавати текст. Ви можете завантажити по одній іконці за раз у 5 розмірах (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).
Як базовий кліпарт використовується набір графіки в стилі Material Design з GitHub. Сервіс містить такі налаштування як: відступи, форма, колір або прозорість фону, масштабування + додаткові ефекти. Результат:
Android Material Icon Generator – ще один інструмент створення флет-іконок. Фішкою сервісу безперечно є ефект у вигляді довгої тіні. Якщо вам потрібні подібні рішення, цей редактор іконок буде ідеальним варіантом.
Почніть із вибору картинки з галереї, потім визначте колір, форму заднього фону(коло або квадрат), довжину тіні, насиченість, згасання – і ваша іконка готова. Все дуже просто. Для персонального користування сайт повністю безкоштовний.
Після скачування у файлі-архіві знайдете 6 PNG різного розміру та векторний файл SVG. В Illustrator іконка SVG буде розмитою, але, на щастя, вона добре виглядає у браузері. У результаті виходить щось на кшталт:
Сайт Simunity – це генератор на базі HTML5, де можна створити іконку, а потім скопіювати код, щоб відобразити її у ваших веб-проектах. Як вихідні матеріали використовуються іконки з Font Awesome, для яких вибираються різні параметри: колір, кадр, розмір і стиль тіні.
Даний сервіс стане в нагоді, якщо вам необхідно швидко створити прості оригінальні іконки для сайту. Результат застосування Simunity:
Разом. Розглянуті вище онлайн редакториіконок – чудові інструменти для оптимізації роботи дизайнерів. Немає сенсу завантажувати якісь програми, коли все можна легко та швидко робити в мережі. З цієї добірки, мабуть, можна виділити IconsFlow. У ньому зібрано максимально велике числофункцій: галерея ікон, завантаження SVG, код для вбудовування, попередній перегляд, створення власних шаблонів, експорт PNG, ICO та SVG, адаптація розміру, модні стилі та вбудований векторний редактор. До того ж це єдиний безкоштовний редактор іконок російською, якщо це важливо.
Якщо знаєте ще якісь схожі послуги, надсилайте варіанти в коментарях.