Поточний час:
Сьогодні 27 травня, неділя 2018 рік
Zura-Blog 3 роки 5 місяців 8 днів

Ваш ip адрес:23.20.240.193


Ви обновили сторінку в 0 : 35
Статистика

Кількість публікацій на блозі: 375
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

zura-blog favicon_aПривіт всім відвідувачам Zura – Blog, в сьогоднішній публікації планував викласти інший матеріал, який мав би стосуватись ще одного корисного ефекту, це ефект тримтячого тексту, але як деколи буває плануєш одне, а виходить інше.

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

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

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

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

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

Я довший час використовував фавікон, який можливо і не дуже підходив до тематики мого блогу, але він мені подобався, врешті решт нещодавно обробляючи картинку для попередньої публікації, на картинці показано  (“чувака” біля ноутбока, показує “Ок”), мені спала на думку ідея створити з такої фотки фавікон. Спочатку думав взяти за основу “чувака” з  фотки, але прикинувши все за і проти, вирішив що не дуже  підходить до фавікону, можливо ще доведу попередню ідею до кінця,  врешті решт вирішив застосувати для фавікону інші предмети, це дві фото–картинки.

Одна це ноутбук “Lenovo”, до речі це фото мого ноутбука, скажем так (власне авторське фото), ну а інша, це та яку я застосовую для “шапки” сайту. Знаете, мене  запитують що зображено на картинці в шапці сайту, це частинки які рухаються в просторі з шаленою швидкістю. Можливо чули про колайдер в Швейцарії, спеціально збудована лабораторія для експерементів, дивився раніше передачу, в цілому так зрозумів колайдер збудували з цільлю  експеременту, суть експеременту, це розігнати частинки з двох сторін по колу, і зіштовхнути один з одною.

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

Гаразд залишимо колайдер, ну і далі як створити фавікон самому?

Тут питання скоріше стосується інструментів які слід застосувати, щоб отримати результат. Для свого фавікону я застосував Photoshop і дуже суперовий ресурс “Lap top icons”, на який я натрапив в мережі. На ресурсі знаходиться декілька тисяч іконок для фавікону різної тематики, і до речі навіть дуже красивих, але саме головне це те, що ресурс дає просто надзвичайно корисну можливість, таку як, конвертувати любе зображення в розширення ‘ico”.

Розширення “ico”, часто застосовується в різних шаблонах для фавікону, ще “phg” застосовують, в принципі  якщо у вас є в наявності підходяща картинка, але не підходить для фавікону по вище вказаним причинам, оскільки зображення має розширення “jpg”, і розміри не підходять також, то завдяки чудовому інструменту який є в наявності на цьому ресурсі, ви зможите її конверувати, і в кінцевому підсумку отримати фавікон з любої картинки.

Якщо для прикладу, плануєте для фавкіона застосувати свій “фейс”, то без проблем, отримаєте чудовий результат, для фавікону на Zura – Blog підходящих картинок я не знайшов, хоча  в наявності багато було, і тоді вирішив, спочатку зробити картинку самому, яка би мені підходила для фавікона, а потім конвертувати її в потрібний формат і розмір, на  “Lap top icons”.

http://findicons.com/

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

Прийшлось мені правда трошки “по – м – катись”, давно вже не сидів з цією програмою, і підзабув багато речей, здається що все вірно робиш, а програма видає своє,  Photoshop не тяжка програма, але потрібно постійно практикуватись, тому що з часом забувається.

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

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

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

Отож, що мені було потрібно для створення фавікона, це програма Adobe Photoshop і в програмі зєднати два фото між собою, саме там де знаходиться екран ноутбука, вставити фото “Електронні частинки”, на якому зображені рухаючі частинки. Спочатку я вирішив зменшити фото картинки в розмірах, адже для фавікону  потрібні  ще менші розміри, а при зменшені розмірів якість картинки по любому не втрачається.

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

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

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

Screenshot_3

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

Screenshot_4

Одна картинка вставиться в іншу, але звісно що  по розмірах не буде підходити так, щоб правильно вписатись саме в екран, для цього потрібна інша команда, називається “Трансформувати”,

Screenshot_7

наводимо курсор миші, клацаємо трансформувати, і вибираємо що саме будемо трансформувати, в нашому випадку “Масштаб”. Такі команди в програмі фотошоп, дозволять вам зменшити картинку “Електронні частинки” до необхідних розмірів, щоб  вписалась в екран іншої картинки, “ноутбук Lenovo”.

lenovo.prленово

Далі залишається зберегти.

Тепер результат потрібно конвертувати в формат iso, і зменшити до розмірів 16х16 або інші розміри, в мене в шаблоні попередній фавікон мав розміри 16х16, але я застосував 24х24, всерівно працює, далі про ресурс на якому можна конвертувати, любе фото з любими розмірами, в формат iso і зменшивши картинку до потрібних 16х16. Чому я вирішив в цій публікації звернути увагу саме на сайт “findicons.com”, а не на програму яка може також конвертувати фото в потрібний формат.

Тому що на  “findicons.com”, ви зразу отримаєте результат ЗА УМОВИ вибравши функцію “Всі розміри” (двадцять дві іконки), з різними розмірами, для прикладу вставили в шаблон фавікон з розміром  16х16, і виявляється що розмір 16х16 вас не влаштовує, тому що замалий, що тоді знову все назад і переробляти, а ось і ні, адже після конвертування у нас в наявності є двадцять один фавікон. Тому залишається спробувати інший з іншим розміром.

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

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

На цьому все до зустрічі!

Leave a Reply

Your email address will not be published. Required fields are marked *