Внимание! Сайт переехал на новый домен sayt-sozdat.ru. Пожалуйста, обновите страницы закладок с новыми URL
×
Закрытие
9
×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

Здравствуйте уважаемый посетитель!

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

В статье Устанавливаем бесплатный графический редактор GIMP речь пойдет о бесплатной программе GIMP, которая позволяет в полной мере решать вопросы по созданию элементов дизайна веб-страниц. И будет показано, как ее установить на локальный компьютер.

Кроме того здесь можно будет посмотреть, как в этот редактор добавить встроенное "Руководство пользователя", а также приведен бесплатный видеокурс, где можно поближе с ним познакомиться.

Для тех же, кто хочет заниматься дизайном на платном Adobe Photoshop (фотошоп), здесь также упомянут и такой вариант, основанный на использовании продления льготного бесплатного периода фотошопа на неопределенное время...

Cайт на практическом примере

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние сайта, создаваемого в рамках цикла статей Самописный сайт с нуля своими руками.

Исходные файлы данного сайта можно скачать из прилагаемых к статьям дополнительных материалов.

Вы здесь: Главная → Сборник статей → Работа с изображениями



Статья 1 сборника
2017-12-09

Находим картинки для статей сайта

  • Способы формирования изображения для сайта
  • Поиск по фотостокам (фотобанкам)
  • Использование сервиса Гугл поиск по картинкам с применением фильтра
  • Использование кадров из фильмов и видеороликов
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

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

  1. В начале, рассмотрим варианты формирования нужных картинок, где на примере оформляемой статьи получим подходящие по тематике заготовки изображений. При этом основное внимание будет уделено бесплатным способам.
  2. В следующая часть будет уделена вопросу уникальности полученных картинок. Где будет выполнена проверка заготовок на уникальность и рассмотрено несколько способов их преобразований, которые при необходимости позволят получить действительно уникальные изображения с точки зрения поисковиков.
  3. Третья часть будет содержать практическое размещение сформированных уникальных изображений в оформляемой статье создаваемого сайта. Что позволит получить несколько типовых решений, которые в дальнейшем можно будет использовать при оформлении остального контента.

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


Статья 2 сборника
2017-12-20

Проверяем картинки на уникальность

  • Проверка на уникальность с помощью специальных программ
  • Проверка на уникальность с использованием сервисов Картинки Яндекс и Google Images
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

Как известно, наличие на сайте не уникальных картинок негативно воспринимается поисковыми системами даже если они получены в рамках бесплатной лицензии CC0 и Public Domain. Поэтому вопросу уникальности изображений, наряду с текстом, следует уделить не меньшее внимание.

В предыдущей статье используя различные способы мы подобрали к оформляемой статье подходящие заготовки картинок. Но можно ли их использовать в таком виде?

Для того, чтобы это узнать, сегодня выполним проверку их на уникальность. Причем сделаем это разными способами.

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


Статья 3 сборника
2017-12-24

Делаем картинку уникальной

  • Отражение по горизонтали
  • Поворот на определенный градус
  • Искажение пропорций
  • Произвольная деформация
  • Перемещение фрагментов изображения
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

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

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


Статья 4 сборника
2018-01-31

Оптимизируем размер (ширину, высоту) изображений

  • Зачем нужно оптимизировать размер изображений
  • Определяем ширину графических элементов, размещаемых на сайте
  • Оптимизируем размер картинок в графическом редакторе
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

Поэтому перед их размещением требуется проводить определенную оптимизацию. В основном это касается формирования размера (ширина и высота в пикселях), уменьшения веса (размер файла в байтах), а также вопросов SEO-оптимизации, включающих формирование необходимых атрибутов тега <img> , с помощью которого они непосредственно вставляются в HTML-страницы.

В этой статье рассмотрим первый, довольно важный этап оптимизации, связанный с преобразованием размера изображений. А остальные вопросы, касающиеся уменьшения их веса и SEO-оптимизации будут рассмотрены в следующих статьях.

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

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


Статья 5 сборника
2018-02-02

Уменьшаем вес изображений

  • Почему необходимо сжимать изображения
  • Сжатие в формате JPEG
  • Сжатие в формате PNG
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

Сегодня мы продолжим работу над оптимизацией ранее полученных заготовок картинок и данной статье будем заниматься уменьшением веса (размер в байтах) изображений.

В интернете по этой теме можно найти много различной полезной, а иногда и противоречивой информации. Но особенность данной статьи в том, что здесь мы будем рассматривать все эти вопросы практически, на конкретных примерах оптимизации.

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

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

При этом, вопрос использования сторонних онлайн сервисов также не будет обойден стороной. Где на примере сжатия в одном из форматов мы затронем работу довольно распространенного оптимизатора "Optimizilla".


Статья 6 сборника
2018-02-15

SEO-оптимизация изображений

  • Определяем названия изображений
  • Формируем ЧПУ наименований файлов
  • Формируем атрибуты alt
  • Формируем атрибуты title
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

Но для хорошего ранжирования сайта этого будет недостаточно. Так как помимо использования в тексте ключевых слов следует также уделять внимание правилам SEO-оптимизации изображений.

В данном случае речь идет о некоторых правилах назначения наименований файлов с использованием ЧПУ и формирования атрибутов alt и title тега <img>, предназначенного для непосредственного размещения графических элементов на HTML-странице. Что мы и рассмотрим в данной статье.