×

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

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

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

  • Рубрики
  • Слайдер
  • Сайдбар
  • Подписка
  • Вниз
  • Вверх
×
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

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

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

Самописный сайт своими руками!

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

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

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

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


Автор: / Дата:

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

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

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

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

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

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

Содержание


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

Способы формирования изображения для сайта


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

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

  • Поиск по фотостокам (фотобанкам).
  • Использование сервиса "Гугл поиск по картинкам" с применением фильтра по выделению картинок с лицензией на бесплатное использование.
  • Использование кадров из фильмов и видеороликов в качестве иллюстраций.

Следует отметить, что рассматриваемые здесь способы будут использоваться при соблюдении условий авторского права. Так в первых двух вариантах, при поиске фотографий в фотостоках и в сервисе Гугл будут скачиваться только снимки с лицензией CC0 и Public Domain, при которой авторы передают право на бесплатное использование своих произведений (общественное достояние).

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

скриншот 16

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

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

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

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

Поиск по фотостокам (фотобанкам)


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

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

скриншот 17

Для увеличения / уменьшения размера изображения кликните по картинке
Поиск изображений с помощью фотостока Pixabay

Рис.1 Поиск изображений с помощью фотостока Pixabay

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Бесплатное скачивание картинки

Рис.2 Бесплатное скачивание картинки

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

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

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

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

Использование сервиса Гугл поиск по картинкам с применением фильтра


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

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

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Поиск изображений в сервисе Гугл поиска по картинкам

Рис.3 Поиск изображений в сервисе Гугл поиска по картинкам

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Скачивание изображений в сервисе Гугл поиска по картинкам

Рис.4 Скачивание изображений в сервисе Гугл поиска по картинкам

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

Использование одиночных кадров из фильмов и видеороликов


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

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

Для этого с начала откроем главную страницу YouTube и в поле поиска введем запрос, допустим, "замена стекол автомобиля". После чего выберем видеоролик по заданной теме, как показано на прилагаемом скриншоте.

скриншот 18

Для увеличения / уменьшения размера изображения кликните по картинке
Выбор видеоролика нужной тематики

Рис.5 Выбор видеоролика нужной тематики

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

Для увеличения / уменьшения размера изображения кликните по картинке
Одиночный кадр видео

Рис.6 Одиночный кадр видео

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

Теперь каким-либо способом сделаем скриншот кадра. Например, просто нажав на клавиатуре компьютера кнопку "PrtSc". А затем с помощью графического редактора (данном случае с использованием Фотошопа) обрежем лишние поля, оставив только нужную часть, как показано ниже.

Для увеличения / уменьшения размера изображения кликните по картинке
Преобразование скриншота в графическом редакторе

Рис.7 Преобразование скриншота в графическом редакторе

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

В данном случае сохраним в растровом формате "PNG-24", использующим сжатие без потерь.

Для увеличения / уменьшения размера изображения кликните по картинке
Полученная картинка из скриншота кадра

Рис.8 Полученная картинка из скриншота кадра

Вот и все, что нужно сделать для формирования картинки из одиночного кадра видео. Как видно, ничего сложного в этом нет.

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

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

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

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

Исходные файлы сайта


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

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

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

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

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

С уважением, Николай Гришин


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments