Тестуємо онлайн-сервіси

337
  • Іконки та значки для сайту в IconFinder і Freepik
  • Пошук іконок для сайту в IconFinder
  • Іконки, фони і піктограми сайту у форматі PSD
  • Колекція безкоштовних картинок для сайту в Freepik
  • Фони, логотипи та зображення для сайту
  • Як оптимізувати зображення для сайту
  • Здрастуйте, шановні читачі блогу . Хочу сьогодні зробити невеликий огляд декількох онлайн-сервісів, де можна безкоштовно і на абсолютно законних підставах розжитися графікою для свого сайту. Трохи раніше я вже розповідав, де можна абсолютно безкоштовно взяти стокові фотографії, але для сайту найчастіше можуть знадобитися і інші різновиди графіки.

    Туди входять і іконки, і різні значки, і інша графіка. Ні, звичайно ж, можна використовувати подібні сервіси Яндекс і Гугл картинок, але питання копірайту при цьому залишається відкритим, бо існують прецеденти судових розглядів правовласників з тими, хто їх порушував право.

    Тестуємо онлайн-сервіси

    Крім місць, де графіку для сайту можна взяти, я згадаю і кілька онлайн сервісів, де її можна буде оптимізувати (зменшити вагу) для прискорення завантаження вебсторінок. Звичайно ж, це далеко не всі варіанти отримання легально і безкоштовного графічного оформлення для свого сайту, але думаю, що і ви поділіться своїми «каналами» видобутку іконок, значків та інших картинок, а я їх додам в цю статтю. Спасибі.

    Іконки та значки для сайту в IconFinder, Freepik і PSDGraphics

    Напевно, ви не будуєте ілюзій з приводу того, що пошукові системи можуть не помітити того, що використовувані вами на сайті іконки, значки або картинки не унікальні. Думаю, що ваші сумніви розвіються, якщо ви згадаєте, що існує пошук по картинках в Яндексі та Гулі (а також онлайн-сервіс Тинай).

    Поиск похожих картинок в сетиТестуємо онлайн-сервіси

    Пошук ведеться по базі проіндексованих картинок (їх мільйони), і навіть якщо ви в Фотошопі зробили колаж з декількох фото, додали нахил або дзеркально відобразили іконку або картинку, то ці сервіси все розкладуть по поличках і повідомлять вам, що цей витвір зовсім не унікальна.

    Інше питання: а чи буде неунікальність графіки на сайті покарання від пошукових систем? Не знаю, але все може бути (якщо не зараз, то після чергового апдейта алгоритму цілком можливо). В принципі, можна остерігатися і взяти в звичку використовувати тільки легальну графіком для оформлення свого сайту (іконки, наприклад) і окремих вебсторінок (різні картинки, які будуть розбавляти текст і покращувати його сприйняття).

    Питання, купувати чи графіком або шукати безкоштовні, але одночасно легальні способи її отримати, вирішувати вам. Особисто мені до душі халявка, тому про таких сервісах в основному сьогодні і будемо говорити.

    Пошук іконок для сайту в IconFinder

    IconFinder — досить-таки велика база платних і безкоштовних іконок, значків і піктограм. Даний онлайн-сервіс не локалізована під російську мову, тому запити в його пошуковий рядок потрібно вводити англійською (тут вам, напевно, допоможе сервіс онлайн перекладу від Гугла). У зв’язку з різноманіттям російської мови раджу пробувати шукати по всіх варіантів перекладу на англійську, бо напевно будуть різні результати.

    Онлайн сервис IconFinderТестуємо онлайн-сервіси

    На сторінці з результатами пошуку по блокам ви знайдете масу фільтрів, які дозволять вам переглядати значки тільки певного стилю, розміру (в лівій колонці розташований повзунок для завдання діапазону розмірів фільтровану іконок) і типу (растрові або векторні):

    Поиск бесплатных иконок в IconFinderТестуємо онлайн-сервіси

    Також можна відфільтрувати тільки безкоштовні або тільки платні іконки. Над платними вгорі буде вказана їх вартість:

    Бесплатные и платные иконки для сайтаТестуємо онлайн-сервіси

    Над безкоштовними іконками вказані формати, в яких ви зможете скачати (зазвичай це ICO і PNG). Для безкоштовних значків і картинок, узятих вами з цього онлайн-сервісу, можуть діяти два види ліцензії:

  • При першому виді ліцензії їх можна буде використовувати в комерційних цілях лише з посиланням на сайт дизайнера, цю саму картинку створив (самі розумієте, що зайві посилання на вашому сайті не потрібні).
  • Другий вид ліцензії дозволяє іконку використати, але посилання не ставити, що набагато краще, бо ви не будете тим самим порушувати копірайт.
  • Власне, в лівій колонці сайту IconFinder ви зможете встановити потрібний вам фільтр, щоб переглянути зображення з відповідним вам типом ліцензії:

    Выбираем нужный тип лицензии, по которой распространяются значки и картинкиТестуємо онлайн-сервіси

    Як завантажити вподобану іконку або значок з сайту IconFinder? Достатньо клікнути по ньому і вибрати на сторінці розмір (показані варіанти розміру трохи нижче) і формат підсумкового файлу.

    Как скачать картинку с IconFinderТестуємо онлайн-сервіси

    Якщо ви плануєте використовувати іконку для оформлення зовнішнього вигляду сайту, то краще буде формат PNG. Якщо ж вам потрібен фавикон для сайту, то має сенс вибрати формат ICO і розмір 16 на 16 пікселів (докладніше читайте про використання фавіконки на сайті за наведеною посиланням).

    Прокрутіть сторінку вниз завантаження, ви зможете ознайомитися і з іншими роботами цього ж автора (дизайнера або студії). В IconFinder досить часто зустрічаються серії іконок, оформлені в одному стилі, які можна використовувати як на своєму сайті (наприклад, в якості кнопок соціальних мереж або значків розділів), так і для якихось інших потреб.

    Серии бесплатных иконок в IconFinderТестуємо онлайн-сервіси

    Для покупки вподобаних вам платних іконок на сервісі IconFinder доведеться спершу зареєструватися (кнопка «Sign up» у правому верхньому кутку екрану). Також доведеться зареєструватися для того, щоб мати можливість додавати вподобані значки в обране. До речі, робиться це за допомогою значка «сердечко», який з’являється в правому верхньому куті іконки при підведенні до неї курсора миші:

    Сохранение понравившегося изображения в избранноеТестуємо онлайн-сервіси

    Трохи нижче з’являється значок «i», натиснувши на яку ви дізнаєтеся тип ліцензії, на якій поширюється ця картинка, її розмір, ім’я автора і т.п. інформацію.

    Іконки, фони і піктограми сайту у форматі PSD (заготовки для Фотошопу)

    PSDGraphics — ще одна криниця ікон, картинок, значків, фонів і іншої графіки. У чому його відмінність від описаного вище IconFinder? Справа в тому, що в IconFinder нам пропонували вже готові варіанти іконок і піктограм, які потрібно було просто розмістити на своєму сайті.

    У сервісі ж PSDGraphics можна скачати готову графіком, так і заготовки для неї у форматі PSD, який дозволить продовжити роботу з ними в Фотошопі. Тим, хто дружить з цим графічних редактором (або його безкоштовним онлайн аналогом Pixlr) така можливість доведеться дуже навіть до душі. Сам я з Фотошопом раніше не дружний, але це все з-за того, що всю потрібну мені роботу з графікою для сайту виконує моя дружина, за що хочу в черговий раз подякувати її зі сторінок цього блогу.

    Иконки, фоны и значки для сайта в формате PSDТестуємо онлайн-сервіси

    Отже, головна сторінка онлайн-сервісу PSDGraphics представляє з себе блог, де переміщаючись з допомогою розташованої внизу пагинации ви зможете переглянути всі викладені тут безкоштовні іконки, фони, шаблони, PSD заготівлі та інші корисні речі. Вгорі розташовано меню, що дозволяє відфільтрувати окремі типи графіки. Ну, а зверху праворуч ви знайдете рядок пошуку, якої не застосуєте скористатися.

    Зверніть увагу, що розташоване в шапці меню конструктора сайтів Wix є рекламою, хоча і виглядає як елемент дизайну сайту. Також будьте акуратніше і на сторінках скачування фонів, іконок і PSD шаблонів, бо блоки Гугл Адсенс там досить часто виглядають, як кнопки для скачування.

    Якщо графіка представлена у форматі PSD, то на сторінці скачування у вас буде можливість вибрати — або качати картинку у форматі Jpeg, або в PSD:

    Скачать картинку в формате Jpeg, либо в PSDТестуємо онлайн-сервіси

    Прокрутіть сторінку завантаження трохи нижче, ви знайдете схожу за тематикою графіку, яка теж може вас зацікавити.

    Величезна колекція безкоштовних картинок для сайту в Freepik

    Freepik — просто-таки величезний (на півтора ляма файлів) збірка іконок, значків, картинок і векторних зображень для вашого сайту. Є російська версія сайту, але російською видає суттєво меншу кількість результатів, так що краще, напевно, все ж вести пошуку англійською.

    Картинки и векторные изображения во FreepikТестуємо онлайн-сервіси

    Як і в PSDGraphics, тут ви зможете скачати не тільки вже готову растрову графіку для свого сайту, але і векторні зображення, а також заготовки у форматі PSD, з якими можна буде працювати в Фотошопі. Як я вже згадував, в Freepik краще шукати англійською.

    На сторінці з результатами пошуку ви зможете поставити фільтри, щоб, наприклад, вибрати тільки іконки для сайту, або тільки PSD-макети, вектори або растрові фото:

    Поиск иконок для сайта по ключевому слову во FreepikТестуємо онлайн-сервіси

    Можна вибрати і платні варіанти іконок або картинок незважаючи на те, що сервіс має назву Freepik. Правда вони вже, як я розумію, належать іншому сервісу. З безкоштовними ж картинками робота йде точно так само, як і було описано вище.

    Скачать изображение бесплатно с FreepikТестуємо онлайн-сервіси

    Шукайте, знаходьте і скачуєте, знайшовши на сторінці завантаження правильну кнопку «Скачати», яка не є рекламою. Внизу сторінок завантаження ви знайдете схожі зображення.

    GraphicRiver — онлайн-сервіс з продажу іконок, значків та інших картинок, які можна, наприклад, використовувати на своєму сайті. Відрізняється від аналогічних сервісів він насамперед відносною дешевизною і при цьому досить-таки багатим асортиментом. Загалом-то, купити там п’ять-десять іконок або фонів не буде накладно для вашого гаманця, але зате вони будуть унікальними і жодних претензій з приводу порушення копірайту до вас вже ніхто не зможе пред’явити.

    Наприклад, ось такий набір іконок можна купити в GraphicRiver за шість баксів:

    Купить недорогие иконки в GraphicRiverТестуємо онлайн-сервіси

    Природно, що там треба буде спочатку зареєструватися, потім поповнити свій рахунок (можна платити безпосередньо з кредитної карти, так і через Пайпал). Після цього можна буде приступати до пошуку та купівлі. Процедура стандартна і описувати я її не буду.

    Фони, логотипи та зображення для сайту

    Subtle Patterns — величезна колекція безшовних фонів для сайту з хорошими фільтрами для детального підбору. Сервіс безкоштовний і дуже зручний (з можливістю застосування до сторінки, відкритої в Subtle Patterns, того фону, який ви для себе обрали).

    Зверху розташована рядок пошуку, а в самому низу ви знайдете список найпопулярніших тегів, які використовуються для класифікації наявних на цьому сайті фонів. Приклади фонів можна дивитися як у вигляді списку, так і у вигляді мозаїки:

    Поиск фона для сайта на сервисе Subtle PatternsТестуємо онлайн-сервіси

    Для застосування того чи іншого фону на сторінці браузера досить натиснути на кнопку «Превью», яка з’являється при підведенні курсору миші до прикладу фону.

    Предпросмотр фонаТестуємо онлайн-сервіси

    Placeit — незвичайний сервіс, що дозволяє залити скрін, знятий з екрану головної сторінки вашого сайту (це робиться автоматично — достатньо лише вказати Урл сайту), екран планшета, мобільного телефону, монітора або ноутбука. Виглядати це може приблизно так:

    Готовые шаблоны для вставки ваших картинок или скриншотовТестуємо онлайн-сервіси

    Тут, до речі, можна вбити відразу двох зайців — отримати прикольну картинку (унікальну за визначенням) і подивитися, як ваш сайт виглядає на екранах різних пристроїв (зверніть увагу, що на шаблонах зазначено дозвіл екрану того пристрою, яке там відображено). Працює він досить просто.

    Вибираєте з лівої колонки потрібний шаблон з гаджетом або кількома гаджетами шаблон може бути просто фоткою або анімованим зображенням), після чого натискаєте кнопку «Grab Screenshot From URL» (якщо хочете вставити не скріншот, а якусь свою картинку, то тисніть на кнопку «Upload Image»). У вікні, вводите Url свого сайту і після деяких роздумів отримуєте підсумковий колаж:

    Вставка вашего изображения в шаблон на сервисе PlaceitТестуємо онлайн-сервіси

    При підведенні до нього курсору миші ви побачите, що його можна зберегти, або почати редагувати у вбудованому в Placeit редакторі:

    Редактирование картинки в PlaceitТестуємо онлайн-сервіси

    Функціонал цього онлайн-сервісу постійно розвивається, і ви можете самостійно розібратися з усім іншим його функціоналом. По-моєму, використовувати подібні картинки для свого сайту буде досить-таки прикольно, бо є ціла купа заготовок, які можна використовувати.

    Cool Text — це онлайн-сервіс дозволяє створити картинку логотипа для вашого сайту. Не всі шрифти підтримують російську мову, хоча, якщо логотип ви будете створювати на базі Url свого сайту, то цієї самої підтримки і не потрібно.

    На головній сторінці Cool Text ви знайдете купу професійних шаблонів, на основі яких можна буде створити свій текстовий логотип. Клікнувши за вподобаного шаблону, ви потрапите на сторінку налаштувань майбутнього логотипу для вашого сайту:

    Создание текстового логотипа для сайтаТестуємо онлайн-сервіси

    Тут можете ввести потрібний текст логотипу (я використовував доменне ім’я російською мовою), вибрати бажаний шрифт (можливо, що якісь із них і не підтримують російську), розмір букв, колір, задати тінь, вирівнювання і вибрати розмір полотна (за замовчуванням він буде підстроювати під розмір тексту).

    Для різних шаблонів в Cool Text кількість налаштувань може різнитися, але в будь-якому випадку всі зроблені вами зміни будуть в реальному часі відображатися вгорі вікна налаштувань на реальному прикладі майбутнього логотипу для вашого сайту. По закінченню налаштувань досить натиснути на кнопку «Create Logo» та на сторінці клацнути по напису «Download Image». На сайті створений логотип може виглядати, наприклад, так:

    Логотип для сайтаТестуємо онлайн-сервіси

    Вельми непогано, і при цьому створено буквально за лічені секунди.

    Як оптимізувати картинки для швидкої роботи сайту

    Kraken — онлайн-сервіс для оптимізації іконок, фонів і інших картинок, так чи інакше використовуються на сайті. Справа в тому, що вага графіки, подгружаемой разом з вебстраницей, дуже серйозно впливає на її загальну швидкість завантаження, яка в свою чергу впливає на лояльність відвідувачів і пошукових систем до вашого ресурсу. Kraken дозволяє зменшувати розміри файлів з зображення, при цьому практично не погіршуючи їх якість.

    Сервіс має платний і безкоштовний тарифні плани. Мені особисто цілком вистачає можливостей безкоштовного, який можна активувати, натиснувши на кнопку «Try Free Web Interface» на головній сторінці Kraken. Інтерфейс сервісу по стисненню картинок дуже простий. На безкоштовному тариф доступні лише установки в пункті 2: вибір між сильним (Lossy) і не дуже сильним стисненням (Lossless).

    Оптимизация изображений в онлайн-сервисе KrakenТестуємо онлайн-сервіси

    Ті картинки, що потрібно стиснути, можна просто перетягнути мишею в показане на скріншоті місце, чи можна клікнути туди мишею і вибрати потрібні файли в провіднику. Картинки можна завантажувати не по одній, а відразу пачками (виділивши їх в провіднику мишею з утриманням шифт на клавіатурі), але їх загальна вага не повинен перевищувати одного мегабайта (скільки це в байтах?) — обмеження, що накладаються на безкоштовний акаунт у Kraken.

    Стискуються картинки в цьому онлайн-сервісі дуже навіть пристойно і при цьому практично без втрати якості (формат PNG взагалі без втрат, а Jpg трохи погіршує, але це вже нюанси самого формату). Кожну з стислих фоток можна завантажити як окремо, так і всі разом в одному архіві (велика зелена кнопка в самому низу). Також є можливість їх відразу в хмару Дропбокса закинути, якщо виникне таке бажання (синя кнопка знизу).

    Загалом, сервіс чудовий, а використовувати його для роботи з картинками нової статті на своєму сайті цілком зручно і на безкоштовному тариф.

    CompressJPEG — згаданий вище Кракен, звичайно ж, хороший, але от з форматом Jpeg він працює не так чудово, як CompressJPEG. Тому рекомендую.

    Сжатие Jpeg картинок в сервисе CompressJPEGТестуємо онлайн-сервіси

    Optimizilla — сервіс порекомендувала Олена в розташованому трохи нижче коментарі, за що їй окремо дякую. Власне, Optimizilla вміє працювати з графікою у форматі JPEG and PNG. Є обмеження в 20 одночасно завантажених зображень (у кракена обмежень, по моєму, немає).

    Уменьшение размера изображений в OptimizillaТестуємо онлайн-сервіси

    Тут є можливість подивитися зображення, яке вийшло після стиснення і щось там підкоригувати за допомогою розташованого праворуч движка. Там же знаходиться і кнопка збереження.

    Удачі вам! До зустрічей на сторінках блогу