Создание изображений для веб-приложения

Задание 1. Создать логотип для вашего сайта.

При создании логотипа руководствуйтесь подобранными ранее цветами и шрифтами, а также уроком по созданию логотипа.

Задание 2. Подобрать изображения для вашего сайта.

При поиске картинок, конечно, на ум сразу приходит Google и его раздел Картинки. Казалось бы, выбирай любую понравившуюся фотографию и добавляй в письмо / на сайт. Но не все так просто. Вся интеллектуальная собственность так или иначе охраняется авторскими правами, и в случае ее неправомерного использования без разрешения владельца мы можем иметь неприятные последствия, например, судебное разбирательство с требованием компенсации причиненного ущерба или блокировку работы интернет-ресурса, где появился снимок без разрешения автора.
Поэтому лучше всего использовать бесплатные фотостоки: список бесплатных фотостоков на сайте преподавателя по ссылке.

Задание 3. Создать коллаж для дальнейшего использования на сайте.

Используйте функцию «кадр» программы Photoshop.

Есть три способа использования данной функции, используйте их при создании изображений для вашего сайта.

Примеры коллажей

Создание кадров с помощью инструмента «Кадр»

1. Выберите инструмент Кадр на панели «Инструменты» или нажмите клавишу «K».
2. На панели «Параметры инструментов» выберите прямоугольную рамку или овальную рамку .
3. Нарисуйте новый кадр на холсте.

Преобразование любой фигуры или текста в кадр
1. На панели Слои щелкните правой кнопкой мыши текстовый слой или слой-фигуру и выберите Преобразовать в кадр в контекстном меню.
2. В диалоговом окне Новый кадр введите имя и задайте конкретную ширину и высоту для кадра.
3. Нажмите кнопку ОК.

Рисование кадра поверх существующего изображения на холсте
1. Выберите инструмент Кадр на панели «Инструменты» или нажмите клавишу «K».
2. На панели «Параметры инструментов» выберите прямоугольную или овальную рамку.
3. Когда на холсте находится существующее изображение, нарисуйте кадр поверх нужной области изображения.
4. При рисовании кадра изображение маскируется в соответствии с границами кадра.

Обязательно сохраните ваши готовые изображения в исходном формате PSD.

Задание 4. Оптимизируйте готовые изображения.
Чтобы изображение оптимизировалось, нужно правильно задать формат, качество, размер, атрибуты alt и title, а также подписать картинки.

Формат

Google индексирует картинки в форматах JPEG, PNG, GIF, BMP, SVG и WebP. Яндекс — JPEG, PNG и GIF. Подробнее о том, как Яндекс индексирует изображения, можно узнать в справке.

JPEG — подходит для портретных и пейзажных фотографий, где важна цветопередача. Есть также JPEG 2000 и JPEG XR. Они сжимают изображения ещё сильнее, чем обычный JPEG, но пока эти форматы поддерживаются не всеми браузерами;

PNG — для сложных графических элементов, в которых нужно сохранить прозрачность и тени;

GIF — для анимации и мелких элементов: иконок, кнопок и так далее;

BMP — для растровых изображений;

SVG — для векторной графики в логотипах и значках;

WebP — сохраняет высокое качество изображений небольшого размера.

Качество

Чем качественнее будет картинка, тем больше пользователей обратит на неё внимание и тем лучше она проиндексируется.

Следите, чтобы при сжатии графика не испортилась и изображение было привлекательным и чётким.

Размер

От того, какого размера иллюстрация и сколько она весит, зависит скорость загрузки и индексация страницы.

Укажите ширину и высоту изображения в CSS, чтобы поисковик быстрее проиндексировал страницу. Оптимальный размер внутри страницы — в районе 300 px. Если изображение нужно растянуть на всю ширину экрана — 1920 px.

Приемлемый вес картинки — от 200 КБ до 1 Мб. Вес меньше 200 КБ сделает картинку некачественной, а изображение больше 1 Мб уже будет медленно загружаться.

Атрибуты alt и title

Название атрибута alt — сокращение от alternative. Это название изображения, которое покажется на месте картинки, если она не прогрузится. 

То есть это альтернативная, исходя из названия, информация, которую пользователь узнает об изображении.

Именно благодаря alt картинки попадают в выдачу поисковиков. Название должно содержать в себе три-четыре слова и соответствовать тому, что изображено. Желательно, чтобы в него входили ключевые слова.

Alt — это не то же самое, что название файла. Атрибут прописывается уже в коде, а название — перед загрузкой на сайт. Но назвать изображение тоже нужно правильно. Например, если на иллюстрации — аэропорт Шереметьево, назовите файл SVO-airport.jpg, а не именем, которое присвоила система.

Второй атрибут — title — показывается, если просто навести курсор на изображение, даже если оно прогрузилось. Эта настройка не так обязательна, как alt, но всё же с её помощью картинка может косвенно продвигаться — на изображении с текстом пользователи останавливают внимание чуть дольше.

Подписи

Если alt и title — подписи, которые появляются при каком-то действии, то обычная подпись сопровождает изображение всегда.

Подписи помогают оптимизировать картинку по двум причинам:

• даже если пользователю лень читать полный текст, при скролле страницы он задержит взгляд на подписях;
• в подпись можно добавить ключевые слова, которые заметит поисковик.

Чтобы подпись помогла не только оптимизации, но и читателю, напишите в ней что-нибудь полезное и не противоречащее иллюстрации.

Необходимо сжать изображение и не потерять качество.

Есть много онлайн-сервисов, которые качественно оптимизируют изображения. Вот несколько из них.

Задание 5. Создать фавикон для своего сайта.

Что такое favicon и для чего он нужен

Фавикон — это возможность сделать сайт более узнаваемым: его видно во вкладках браузера, в закладках, в сниппетах поисковой выдачи, на экране смартфона. Фавикон поможет привлечь на сайт больше посетителей, которые возможно станут вашими клиентами. Этот инструмент подчеркивает уникальность и фирменный стиль бренда.

Сам по себе favicon не влияет на ранжирование сайта в поиске и оптимизацию страниц. При этом он выполняет другие, не менее важные функции:

• С фавиконом страница сразу заметна в поисковой выдаче. Без иконки страница не бросается в глаза.
• Возрастает узнаваемость сайта. Фавикон — важная часть бренда. Логотип из favicon запоминается лучше и сразу освежает в памяти пользователя черты конкретного бренда.
• Пользователю легче найти нужный сайт. В выдаче, истории браузера или закладках найти нужный сайт, который отмечен знакомой иконкой, намного легче, чем без нее.
• Фавикон избавляет от ошибок в лог-файлах. Браузер отправляет запрос на файл favicon.ico и, если такой не находится, то возникает ошибка 404.

Требования к изображению для фавикона

При создании favicon нужно учитывать несколько параметров — формат, размер и дизайн. Рассмотрим каждый критерий более подробно.

Формат

Изначально изображения для favicon существовали только в одном формате — .ico (ико). Он довольно удобный, т.к. позволяет загружать несколько иконок разного размера. Однако браузеры часто выбирали неверный размер этого формата, и фавикон отображался некорректно, например, в низком разрешении.

Рассмотрим рекомендации по формату фавикона от разных поисковых систем. Для Yandex предпочтительнее использовать .svg, но поисковая система также поддерживает иконки в форматах .jpeg, .png, .bmp, .gif (без анимации). Google поддерживает форматы .svg, .ico, .gif без анимации, .jpeg, .png.

Размер

Рассмотрим размеры для самого распространенного формата фавикона — .ico.

Кроме того, у разных платформ требования к размеру фавиконок также отличаются. Обычно минимальный размер составляет 16х16 пикселей. Но, например, в соответствии с рекомендациями Яндекса лучше использовать иконки размером 120х120 пикселей, для Google это правило тоже актуально.

Дизайн изображения

Кроме формата и размера, важно продумать внешний вид фавикона. Для этого придерживайтесь таких параметров:

• Соответствие тематике сайта. Для сайта конкретной компании лучше взять ее логотип. Однако, если логотип сложный, вытянутый, имеет множество мелких элементов, лучше взять только его часть. Когда у бренда нет логотипа, подойдет тематическое изображение в цветовой гамме, соответствующей тематике сайта.
• Привлечение внимания. Сейчас 90% сайтов имеют фавиконы, а на первой странице поисковой выдачи они вообще есть у всех. Поэтому важно подобрать картинку, которая привлекает внимание и выделяется на фоне остальных. Часто для этого используют специальные символы, например, красную стрелку.
• Простота. Фавикон в закладках браузера, на его вкладках и в поисковой выдаче очень маленький. Поэтому не стоит выбирать картинку со множеством деталей: их просто невозможно разглядеть. Самый лучший вариант — изображение, где будет немного деталей, не больше трех цветов и понятный, однозначный смысл.
• Оригинальность. Фавикон должен быть уникальным — таким, чтобы его не использовали другие ресурсы. Например, если в поисковой выдаче будет несколько сайтов с одинаковыми иконками виде лебедя, ни один из них не будет выделяться. Банальные картинки тоже лучше не использовать.

Чтобы фавикон корректно отображался в разных контекстах, лучше сделать два варианта. Первый — со сплошной заливкой фона. Подходит, когда есть маска для фона. Например, в сетчатых закладках, контекстном меню. Второй вариант — с прозрачным фоном. Такая иконка показывается рядом с URL-адресом: в закладках браузера, в адресной строке и т.д.

Как создать фавикон

Создать фавикон можно разными способами. Например, с помощью Photoshop.

Также есть отдельные программы

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

Протестируйте несколько разных Favicon Converter Online, чтобы подобрать подходящий.

Как подключить фавикон к сайту

Если вы создали фавикон онлайн с помощью генератора, то у вас есть файл с иконками нужного размера и код. Их нужно загрузить на сайт, чтобы favicon отображался в поиске, закладках и в других элементах.

Сначала загрузите иконки в корневую папку вашего сайта. Для этого необходим доступ к ресурсу на хостинге. Загрузить иконки можно через менеджер файлов или через собственную панель управления, если у вашего хостинг-провайдера она есть.

У корневой папки могут быть разные названия: public_html, www, html или site. Если не найдете такую папку, обратитесь к провайдеру. Загрузить необходимо все файлы, которые вы получили при конвертировании изображения.

Следующий этап установки фавикона — настройка кода. Откройте код главной страницы: найдите файл head или header среди файловой системы сайта. Пропишите сюда код, который вам выдал конвертер. Чтобы не ошибиться, скопируйте и вставьте код.

Вот так должен выглядеть код для подключения фавикона:

Расшифруем важные части:

• rel — тип ресурса. Для большинства браузеров указывается icon.
• href — адрес файла.
• type — тип передаваемых данных. Зависит от файла. Например, для .ico — image/x-icon или image/vnd.microsoft.icon, для .svg — image/svg+xml.

Проверьте, все ли вы сделали правильно: фавикон должен отображаться в браузере. В сниппете поисковой выдачи favicon появится после индексации. Обычно на это уходит около двух недель.

Чтобы поменять старый фавикон на новый, проделайте то же самое: загрузите нужные иконки в корневую папку и смените код на главной странице.

Тестировать, отображается ли фавикон на сайте, можно с помощью специальных сервисов — Favicon Validator. Один из них — Favicon Checker. Тестирование достаточно простое: вставьте в специальное поле адрес сайта, и сервис покажет, на каких ОС и платформах фавикон отображается, а на каких пользователи его не видят.

Кроме того, можно проверить, как отображается фавикон конкретно в Яндексе и Google с помощью ссылок:

http://favicon.yandex.net/favicon/www.example.ru

http://www.google.com/s2/favicons?domain=www.example.com

Вместо «example». вставьте адрес своего сайта.

Если вы загрузили фавикон, а при проверке он не меняется на новый или не появляется на сайте, попробуйте сбросить кеш, перезапустить браузер, перепроверить правильность установки favicon. Иногда фавикон долго обновляется, потому что поисковик его еще не проиндексировал.