×

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

Содержание


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

Отражение по горизонтали


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

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

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

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

И в первую очередь воспользуемся таким простым методом, как поворот по горизонтали на 180° градусов. Или как по-другому называется - отражение по горизонтали.

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

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

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

Для этого откроем в графическом редакторе фото 1, а затем через меню "Редактирование" выберем в опции "Трансформирование" инструмент "Отразить по горизонтали", как показано на скриншоте.

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

Рис.1 Выбор режима отражения по горизонтали

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

Кроме того, для удобства работы с изображениями, часто возникает необходимость сразу их разворачивать на полное рабочее окно редактора, как это видно из рисунков 1 и 2. Довольно просто это можно делать комбинацией кнопок "Ctrl"+"0".

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

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

Рис.2 Поворот по горизонтали на 180° градусов

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

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

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

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

Рис.3 Тест на уникальность картинки 1 до преобразований

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

Рис.4 Тест на уникальность картинки 1 после поворота на 180° градусов

Если сравнить с результатами проверки на уникальность начального изображения (рис.3), то видно, что использование всего лишь только одной такой операции позволило добиться существенного уменьшения совпадений (рис.4).

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

Теперь то же самое проделаем и с фото с номером 2. Т.е. повернем изображение на 180° градусов и сравним уникальность до и после этого преобразования.

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

Рис.5 Тест на уникальность картинки 2 до преобразований

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

Рис.6 Тест на уникальность картинки 2 после поворота на 180° градусов

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

Поворот на определенный градус


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

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

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

Практика показывает, этот метод лучше работает с уровнем поворота более 5 градусов, причем не с целыми, а с дробными значениями. В нашем случае поворот сделан на 6.2° градуса.

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

Рис.7 Поворот на несколько градусов

После применения этого преобразования (достаточно левой кнопкой мыши два раза щелкнуть по области изображения) сохраним результат, допустим под номером 1-2. И теперь проверим его на уникальность.

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

Рис.8 Тест на уникальность после поворота на несколько градусов

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

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

Искажение пропорций


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

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

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

На следующем скриншоте для рассматриваемой фотографии показан один из вариантов искажения пропорций.

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

Рис.9 Искажение пропорций

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

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

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

Рис.10 Тест на уникальность после искажения пропорций

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

Произвольная деформация


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

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

На следующем скриншоте показано, в каких местах сделана деформация фотографии 1.

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

Рис.11 Произвольная деформация

И теперь сделаем очередную проверку на уникальность.

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

Рис.12 Тест на уникальность после деформации

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

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

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

Рис.13 Удаление лишних фрагментов

В итоге получим окончательный вид формируемой картинки. Которая у нас в папке заготовок будет числиться под номером 1-4.

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

Рис.14 Окончательный вид картинки 1

И конечно, стоит проверить на уникальность полученный окончательный вариант.

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

Рис.15 Окончательная проверка на уникальность в Картинки Яндекс

Можно для большей убедительности проверить и другими сервисами, например TinEye.

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

Рис.16 Окончательная проверка на уникальность в TinEye

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

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

Перемещение фрагментов изображения


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

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

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

Наглядно это можно посмотреть на следующих рисунках, где изображен вид картинки 4 до (рис.17) и после этих преобразований (рис.18).

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

Рис.17 Картинка 4 до преобразований

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

Рис.18 Картинка 4 после преобразований

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

Если теперь проверить картинку 4 на уникальность, то можно увидеть, что до редактирования совпадение имелось (рис.19), а после оно стало уникальным (рис.20).

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

Рис.19 Тест на уникальность картинки 4 до преобразований

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

Рис.20 Тест на уникальность картинки 4 после преобразований

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

А как их размещать в текстах статей мы рассмотрим в следующей статье.

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


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

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

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

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

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


Комментарии


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

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

comments powered by HyperComments