- В якому форматі зберегти favicon?
- Як помістити favicon на сайт?
- Створюємо favicon в Фотошопі
- малюємо фон
- малюємо букву
- додаємо тінь
- збереження favicon
- Завантажити файл:
Наша взаимовыгодная связь https://banwar.org/
Новий урок в стилі воркшоп і на цей раз ми осягаємо секрети фавікона. Favicon - невелика іконка, яка відображається в закладках і рядку браузера. Якщо у вас є свій сайт і ви хочете вигідно відрізнятися від інших навіть в дрібницях - favicon необхідний. Найбільш вигідно, звичайно, він виглядає серед закладок, на тлі тьмяного списку адрес без всякої графічної ідентифікації. Однак наш урок не стільки про те, як прикріпити favicon в рядок браузера, скільки про те - як намалювати свій власний favicon в програмі Фотошоп.
В якому форматі зберегти favicon?
Все залежить від браузера. Для Microsoft Explorer підходить формат іконки ICO. C цим форматом ми вже стикалися, коли робили курсор. Для інших браузерів від Google Chrome до Apple Safari підійде звичайний GIF або PNG. Favicon може бути напівпрозорим. Для цього його потрібно зберегти в напівпрозорий PNG, а далі перетворити в формат ICO. Зробити це можна в непоганий програмою IcoFX . Однак для генерації фавікона існує маса сторонніх сайтів і найочевидніший з їх www.favicon.ru
Як помістити favicon на сайт?
Як бути впевненим в тому що favicon спрацює? Потрібно дотримуватися 4 умови.
- Фаил повинен називатися - favicon.
- Розмір фавікона 16 на 16 px
- Оптимальне місце для фавікона - коренева тека сайту.
- Адреса іконки прописати в мета-тегах heder-а в індексі сайту.
В HTML вираженні це виглядає так:
<Head>
<Link rel = "icon" type = "image / png» href = "/ someimage.png» />
</ Head>
Можна створити кілька іконок для різних браузерів, наприклад одну в форматі ICO, а іншу в PNG і все це вказати через тег link. Сучасні браузери найчастіше самі шукають в кореневому сайту фаил під назвою favicon, однак для впевненості не завадить вказати і точні лінки.
Створюємо favicon в Фотошопі
Створити favicon дуже просто. Хочете зробити такий же favicon як у Вконтакте або Однокласники? Хороший favicon не зробити, зменшуючи великі картинки у всяких «генераторах» фавікона, яких повним повно в інтернеті. Фавікон дуже маленький. Фактично ми це свого роду піксель-арт , Який має свої особливості. Не можна написати букву і просто зменшити її до 16px.
Подібний favicon буде розмитий і нечіткий, так як краю букви при зміні розміру будуть заходити на кілька пікселів. Вийде свого роду anti-alias, який зазвичай є добром, але у випадку з піксель-арт подібні переходи якраз не потрібні. З іншого боку варто уникати і зайвої «ободранності» на округлостях інакше вийде привіт гифки 1999 год.
Створіть фаил розміром 16 х 16px. Ми створимо дуже простий напівпрозорий favicon з у вигляді букви, з дещицею глибини. Глибина буде створена за рахунок тіні і градієнта.
малюємо фон
Чому в заставці цього уроку ви бачите величезний гладкий і вилизаний favicon? Тому що я його збільшив для заставки до уроку. Як у мене вийшло якісно збільшити зображення 16px? Дуже просто, я завжди працюю в векторі, якщо його можливо використовувати і якщо в цьому є сенс. А вектор легко переносить будь-яку трансформацію і не втрачає в якості.
Виберіть інструмент Rounded Rectangle Tool. На панелі налаштувань виберіть режим Shape Layer , Що дозволить малювати в векторі. У випадаючому меню панелі галочка - Snap To Pixels. Це необхідно для того, щоб векторні контури прив'язувалися до пікселів і не малювали «між» ними.
У нас є поверхню faviconа, а напівпрозорі краю створять згладжена округлості. Тепер пора позбутися білого заднього фону, він не потрібен. Вимкніть його видимість. Або зробіть подвійний клік по шару, перетворивши його в звичайний шар, а потім видаліть.
застосуємо стилі для поверхні faviconа. Детальніше про стилях можна почитати в статті Стилі в Фотошопі . На панелі шарів виберіть нашу форму і виберіть Layer> Layer Styles> Gradient Overlay У вікні клацніть по градіенткой смужці. Це викличе Вікно настройки градієнта. Задайте градієнт із квітами 0059c6 і 0085d1. Натисніть ОК. Інші параметри на зображенні нижче.
малюємо букву
Буква «Н», яка зображена на фавікона сайті хронофаг.ру занадто проста, щоб вплутувати в цю справу шрифти, тому я просто намалював її інструментом Rectangle Tool. Але давайте зробимо щось складніше. Виберіть інструмент Type Tool і поставте будь-яку літери. Для нашого уроку найкраще підійде буква без округлостей. Я вибрав шрифт і поставив букву H.
Але як я не намагаюся маштабіровать і підбирати розміри для моєї букви, шрифт постійно виходить розпливчастим. Хоча його краю могли б бути гранично чіткими, в букві немає округлостей і завитків. Інакше і бути не може, адже Фотошоп відображає Растеризувати шрифт, він як би намагається його згладити, що відмінно, якщо мова йде про розміри побільше, але для 16 пиксельного фавікона хотілося б більше чіткості.
Зробіть ось що. На панелі налаштувань шрифту вимкніть режими растрирования - none. тепер трансформуйте шрифт Edit> Free Transform Трохи розтягніть його. Відмінно.
Якщо у вашому випадку вийшла нісенітниця, а воно може відбутися у випадку з режимом растрирования none, так як відсутність згладжування часом спотворює шрифт при незначних обсягах, зробіть ось що. Переведіть букву в криві Layer> Type> Convent to Layer Shape Скористайтеся інструментом Direct Selection Tool.
Виберіть цей інструмент і затискаючи SHIFT виділяйте кілька векторних точок. Потім стрілочками на клавіатурі рухайте їх в потрібну сторону, щоб позбутися від непотрібних переходів і вирівняти краю.
Сподіваюся ви вловили сенс роботи. Звичайно немає ніякого сенсу витрачати стільки часу якщо ваша літера - дві палички і хрестик. Але в разі літери «В» або «D» цю роботу варто зробити з її рівними сторонами. Ми практично наблизилися до створення favicon-а.
додаємо тінь
Кінець близький, залишилося додати стилі для намальованої літери. На панелі шарів виберіть шар з буквою і зайдіть в Layer> Layer Styles> Drop Shadow Мені потрібна легка тінь з Opasity 50% і дуже чіткими краями Distance 1, Spread 0, Size 2
збереження favicon
Щоб зберегти напівпрозорий фавікон відкрийте File> Save for Web & Devices У діалоговому вікні виберіть PNG-24 і галочку на Transparensy. Це зробить наш фавікон полупрозначним. Залишилося помістити іконку на сайт вищепереліченими способами, або перетворити її в формат ICO. Favicon створений.
Завантажити файл:
завантажити вихідні
В якому форматі зберегти favicon?Як помістити favicon на сайт?
В якому форматі зберегти favicon?
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
