Как сделать картинку на свой сайт уникальной для поисковых систем!

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодняшняя статья будет посвящена подготовке в программе Фотошоп (можно и в его онлайн версии Pixlr, описанной здесь) графических файлов для их публикации на сайте. У меня чаще всего используются скрины сделанные на компе или телефоне, а затем прошедшие обработку (в основном в Снагите).

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

Сам я в Photoshop и даже в его упрощенной онлайн версии не силен (довольствуюсь возможностями простенького просмотрщика FastStone Image Viewer, про который речь шла тут и встроенного в него редактора), поэтому мне пришлось обратиться к любимой супруге с просьбой описать процесс подготовки моих фоток со всеми нюансами и тонкостями.

Создание изображения для сайта в Photoshop

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

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

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

  1. Быть уникальными, а не взятыми с других ресурсов
  2. Не слишком маленького размера и формата JPEG, GIF, PNG или BMP.
  3. У них обязательно должны быть прописаны атрибуты Alt (и, при желании, Title), как написано в этой статье. Иначе поисковые системы просто не включат их в свой индекс поиска по картинкам.
  4. В атрибуте Alt должны быть прописаны ключевые слова, по которым вы хотите продвинуть данную фотку.
  5. Желательно, чтобы в названиях графических файлов тоже присутствовали ключевые слова (в виде транслита, по правилам описанных в этой статье о транслитерации)
  6. Необязательным, но желательным условием является то, чтобы в каждом теге IMG ваших изображений были бы прописаны атрибуты WIDTH и HEIGHT. Они служат для задания ширины и высоты изображения и при определенном стечении обстоятельств могут способствовать ускорению загрузки вебстраницы.
  7. Фото должны быть размещены на вашем сайте легально, иначе могут неожиданно возникнуть проблемы с правообладателями. Покупать графику я не агитирую, но можно найти вполне компромиссное решение — бесплатные фотобанки и микростоки, где размещены многие тысячи профессиональных фотоматериалов.

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

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

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

Для создания нового файла в Photoshop заходим в МЕНЮ и выбираем команду СОЗДАТЬ (в более новой версии Фотошопа: МЕНЮ — НОВЫЙ). У нас открывается вот такое диалоговое окно:

В нем мы задаем имя для будущей картинки; выбираем ее размер (ширину и высоту), нажав вкладку НАБОР; а также задаем единицу измерения (пиксели, сантиметры, дюймы…).

Далее задаем ФОН. По умолчанию всегда будет стоять БЕЛЫЙ. Если мы выберем ФОНОВЫЙ ЦВЕТ, то будущее изображение окрасится в тот цвет, который в данный момент находится основным в палитре цветов. Выбрав ПРОЗРАЧНЫЙ фон — поле окрасится шахматкой.

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

Слева в интерфейсе Фотошопа находится полоска с инструментами, которая называется ПАЛИТРА ИНСТРУМЕНТОВ. Как раз на ней, в самом низу, и живет описанная выше ПАЛИТРА ЦВЕТОВ.

Для того, чтобы открыть нужное нам фото, мы заходим в МЕНЮ и выбираем команду ОТКРЫТЬ. Далее ищем на своем компьютере папку с нужной фоткой и щелкаем по ней.

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

Добавляем слои и переносим их на наше изображение

Самый простой способ перенести одну картинку на другую — это обыкновенное перетаскивание его с помощью мыши. Сначала выбираем инструмент ПЕРЕМЕЩЕНИЕ, а затем хватаем вновь добавленное изображение левой кнопкой мыши и перетаскиваем на то, что создали (пустую заготовку нужного размера с прозрачным фоном), после чего отпускаем.

В моем случае видна лишь новая картинка на прозрачном фоне (показан шахматкой), а созданный документ (заготовка), под названием «Без имени-1», скрыт.

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

Там наш телефончик можно передвигать с помощью мышки в ту область шаблончика, которая нам нужна. Так же передвигать можно с помощью стрелочек на клавиатуре, при условии, что в палитре инструментов выбран инструмент ПЕРЕМЕЩЕНИЕ.

В окне НАВИГАТОР программы Фотошоп мы можем просмотреть наше результирующее изображение. Двигая ползунок — изменить масштаб просмотра, т.о. просмотреть документ как бы через лупу, дабы увидеть возможные недочеты. Изменить же реально масштаб можно, зайдя в МЕНЮ — ИЗОБРАЖЕНИЕ — РАЗМЕР.

В палитре СЛОИ отображается всё, что мы перенесли на наш слой. К примеру, в моем случае, в палитре СЛОИ находятся всего два: созданный шаблон изображения для сайта на белом фоне и одна перенесенная на него картинка (телефончик).

Ее на нашем документе можно не только перенести в любую область, но и наклонить/перевернуть. Для этого в МЕНЮ выбираем РЕДАКТИРОВАНИЕ — СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ.

Но перед этим, если у вас перенесено уже несколько картинок на нашу заготовку, нужно выбрать нужный слой в палитре СЛОИ, и только потом применять СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ. В противном случае, трансформирование применится к слою, который будет активным в данный момент, а не к тому, который вам необходимо наклонить/перевернуть.

Выбрав команду СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ, наше изображение выделится тоненькой рамочкой.

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

Добавление текста или логотипа на изображение в Photoshop

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

Для этого в панели инструментов Фотошопа выбираем ТЕКСТ. Ставим курсор на нужное место в заготовке (созданном документе) и начинаем вбивать нужный нам текст, к примеру, адрес вашего сайта.

В настройках инструмента ТЕКСТ (смотрим рисунок выше) можем задать следующие настройки, выделив мышкой то, что мы написали в документе:

  1. изменить ориентацию текста, т.е. сделать из горизонтального вертикальный и, наоборот
  2. задать жирность/курсив
  3. задать размер
  4. произвести деформацию текста, т.е. сделать его выпуклым, в виде флага и т.п.

Выбрав в окне Photoshop инструмент ПЕРЕМЕЩЕНИЕ (о нем писалось выше), с помощью мышки или стрелочек на клавиатуре, мы можем переместить в другое место текст логотипа на нашем шаблоне.

Рамка КАДРИРОВАНИЯ

Допустим, ваше изображение оказалось бОльшего размера, чем вам нужно (кстати, если фото не очень хорошего качества, то его можно использовать ретушь). Если вы будете уменьшать его с помощью команды в меню ИЗОБРАЖЕНИЕ — РАЗМЕР, то, изменив его по горизонтали, оно автоматически изменится и по вертикали, и наоборот.

Чтобы такого избежать и существует инструмент РАМКА КАДРИРОВАНИЯ. Выбираем его в окне Фотошопа, щелкам по нужному месту на заготовке и, зажав левую кнопку мыши, растягиваем рамочку, после чего отпускаем левую кнопку мыши.

Рамку кадрирования можно увеличить или уменьшить, ухватившись мышкой за ее уголочки. То, что мы хотим отрезать на итоговом изображении, будет затемнено. Выделили область, которую мы хотим оставить, и нажимаем кнопочку ПРИМЕНИТЬ КАДРИРОВАНИЕ (показано на рисунке выше).

Окно ИСТОРИЯ

В окне ИСТОРИЯ прописываются все наши действия в этой замечательной программе. В моем случае их было совершено пять: создание нового документа для последующей публикации на сайте, перетаскивание на него слоя с картинкой, перемещение рисунка телефончика в другое место на заготовке, перетаскивания туда же слоя с логотипом (в вашем случае — написание текста с помощью инструмента ТЕКСТ) и последующее его позиционирование в нужное место.

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

Так же шаг назад в Photoshop можно сделать с помощью: МЕНЮ — РЕДАКТИРОВАНИЕ — ШАГ НАЗАД.

Если у вас не наблюдается окна ИСТОРИЯ или какого другого описанного мною окна, то зайдите в МЕНЮ — ОКНО и поставьте галочку у нужного вам: история, слои, навигатор и т.д. Окна на рабочем столе в программе Фотошоп можно перемещать с помощью мышки.

Как добавить стиль слоя в Фотошопе

Если мы хотим добавить стиль одному слою, то делаем его активным и нажимаем кнопочку ДОБАВИТЬ СТИЛЬ СЛОЮ, если всему документу, то выделяем все слои с помощью удержания клавиши Shift на клавиатуре, а затем объединяем все три слоя в один, щелкнув по выделенным слоям правой кнопкой мыши и выбрав команду ОБЪЕДИНИТЬ СЛОИ, после чего нажимаем кнопку ДОБАВИТЬ СТИЛЬ СЛОЮ. Шайтанама.

При нажатии на кнопку ОБЪЕДИНИТЬ СЛОИ у нас откроется диалоговое окно с выбором стиля. Но есть и еще один способ открытия этого окна в Photoshop — двойной щелчок мышкой по уже единственному у нас слою в палитре СЛОИ. В этом случае у нас откроется вот такое диалоговое окно со всеми настройками задания стиля:

Данные настройки придадут вашему документу неповторимый стиль. Вы можете применить:

  1. тиснение (сделать картинку объемнее)
  2. наложить тени, как внутренние, так и внешние
  3. задать свечение внутреннее или внешнее, а может и то, и другое
  4. заключить наш документ в рамку
  5. задать ее ширину
  6. цвет и т.п.

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

Сохранение изображения для Web

JPG — это основной формат, в котором сохраняют фотографии. GIF лучше всего применять для сохранения растровых (состоящих из пикселей) изображений с количеством цветом не более 256. Этот формат отлично поддерживает анимацию, а так же часто применяется в web-дизайне. PNG очень схож с GIF, только в отличии от него может отображать большее количество цветов. Подробнее о форматах Gif, Png, Jpg (Jpeg) растровой графики вы сможете прочитать тут.

Чтобы сохранить изображение в Фотошопе, заходим в меню и выбираем ФАЙЛ — СОХРАНИТЬ КАК, но для интернета лучше всего сохранить иным способом: заходим в меню и выбираем ФАЙЛ — СОХРАНИТЬ для Web устройств.

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

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

Как вставить созданную картинку на сайт

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

В этом случае графический файл загружается на сайт с помощью инструментов визуального редактора. Довольно удобно и просто. Но вот я, почему-то, всегда предпочитал другой способ вставки. Сначала подключаюсь к сайту по FTP c помощью моего любимого FTP клиента FileZilla, подробно описанного тут.

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


Для класса img_center1 в моем стилевой файле (из папки с текущей темой оформления Вордпресс) прописано следующее правило:

.img_center1{display:block;background:#e0e0e0;padding:5px;margin:10px auto !important;}

CSS свойство display делает картинку блочным элементом. Ну, а затем с помощью margin:10px auto мы выравниваем ее по середине (по горизонтали). Про CSS свойства margin и padding читайте здесь. Ну, а background, которому посвящена эта публикация, задает серенький фон, который слегка проглядывает по краям, создавая эффект рамки.

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

Лично я пишу статьи в WordPress, используя только HTML редактор, в котором для удобства добавил кнопки, позволяющие быстро вставлять в текст штампы:

Таким образом можно очень быстро вставить фото на блог. Дополнительные кнопки в Html редактор можно добавить с помощью плагина Post Editor Buttons. Как нибудь опишу подробно работу с ним, а пока вы можете сами пробовать разобраться, тем более, что там ничего сложного нет.

Сделай смешной прикол или постер для друга или подруги в три шага: выбери картинку, добавь надпись, сохрани!

1. Выбираем картинку [?] 2. Добавляем надпись Вы можете: – Двигать надписи по картинке мышью. – Редактировать надписи, выбрав их в списке под картинкой. Для добавления новой надписи убедитесь, что вы не в режиме редактирования.”>[?] Текст настройки по умолчанию ° Добавленные надписи можно перемещать по картинке курсором. 2. Добавляем надпись 3. Сохраняем [?] image

Как сделать веб страницу html с картинкой для чайников

Подробности
Автор: Георгий Оплачкин

для чайников 

Вас заинтересовал вопрос: “Как сделать html страницу?”, то просмотрев данную статью, вы сможете сделать html страницу самостоятельно, не прилагая больших усилий.

HTML (HyperText Markup Language — «язык разметки гипертекста») не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы указываем браузеру где будет размещен текст, картинка, таблица и т.п. ).

То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (тэги).

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

Теперь мы перейдем к практическому осуществлению нашей задачи “Как сделать html страницу?”.  Для этого нам понадобится любой текстовый редактор.  Я вам посоветую «Notepad++».  Либо можете воспользоваться стандартным блокнотом, только будьте внимательны, когда будете сохранять файл, обязательно сохраняйте его с расширением «html». Название обязательно пропишите латинскими буквами. Это будет выглядеть так:  «page.html»

И так, открываем наш редактор, и пишем следующий код:

Моя первая страница

Вставить картинку в html страницу

Для вставки картинки в страницу применяется тег .  Для указания пути к картинке в теге используется параметр src= Вот так будет выглядеть код  html, при помощи которого можно вставить картинку в страницу  html: (при условии: страница и картинка находятся в одной папке).

А это код страницы html с картинкой

Моя первая страница Я Вас приветствую!!! Это Начало большого пути в просторы Интернета

Если вы выполнили все так, то в браузере будет отражен результат вашей работы. Оказывается,  сделать html страницу совсем  не сложно!

Ниже приведены атрибуты для тега , и их предназначение:

Без атрибутов – текст по умолчанию находится снизу картинки

align=”right” – картинка справа, текст слева

align=”left” – картинка слева, текст обтекает справа

align=”bottom” – как и по умолчанию, текст внизу картинки

align=”middle” – текст посередине картинки

align=”top” – текст вверху картинки

vspace – задаёт расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel – самая маленькая единица изображения (точка). Например, если экран Вашего монитора 800х600, это значит, что он имеет 800 на 600 пикселей (точек). В примере расстояние равно 10 пикселям (точкам).

hspace – задаёт горизонтальное расстояние между текстом и рисунком. Расстояние задаётся в пикселях. В примере отступ текста от картинки равен 20 пикселям (точкам)

alt – задаёт название (описание) картинки (действует не во всех браузерах. В Internet Explorer – работает!). Работает, если ваш посетитель наведёт мышку на картинку и подержит несколько секунд. В этом конкретном примере появится надпись “Сайт для сайтостроителей”. Я рекомендую Вам задавать атрибут alt, особенно тогда, если Ваша картинка является ссылкой (кнопкой).

width – задаёт ширину картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по ширине. (Рекомендую всегда задавать размеры!!!)

height – задаёт высоту картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по высоте. (Рекомендую всегда задавать размеры!!!)

border – задаёт рамку вокруг картинки. По умолчанию рамка всегда есть. Если вы хотите убрать рамку, то задайте border=0.

background=”Ваш_фон.jpg”- Ваша картинка будет фоном HTML странички. В атрибуте background=”Ваш_фон.jpg” нужно прописывать путь к Вашей картинке так же, как и в размещении обычной картинки. Я рекомендую оставлять bgcolor для того случая, если не загрузится Ваша картинка.

|

Хотите превратить удачный кадр в красочную открытку или дополнить смешной снимок остроумной подписью? Сделать это быстро и красиво позволит редактор ФотоМАСТЕР. С его помощью вы сможете создавать любой текст и выбирать для него оформление. Читайте статью, чтобы узнать, как сделать надпись на фото всего за 2 минуты в этой программе!

Чтобы делать потрясающие надписи на снимках, нужно для начала установить редактор ФотоМАСТЕР. Вы можете загрузить дистрибутив с нашего сайта бесплатно:

Отлично работает на Windows 10, 8, 7, Vista, XP

Добавляем надпись на фото за 2 клика

Дополнить фотоснимок текстом с помощью редактора ФотоМАСТЕР очень просто. Нужно выполнить всего 3 шага, попробуйте:

Шаг 1. Выбор снимка для работы

В стартовом окошке редактора нажмите «Открыть фото». Появится проводник, который даёт доступ к папкам компьютера. Двойным кликом мышки выберите желаемый снимок. Он окажется в рабочем поле программы.

Кликните «Открыть фото», чтобы выбрать снимок в работу

Шаг 2. Добавление текста

Чтобы наложить текст на фото, перейдите в подраздел «Надписи» и нажмите «Добавить текст». В поле справа введите желаемую подпись. Это может быть как одно короткое слово, так и длинный текст, например, стихотворение, цитата или поздравление.

Впишите текст и выберите красивый стиль

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

Вы можете разработать собственный дизайн надписи

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

Шаг 3. Сохранение готовой картинки

Кликните «Сохранить» и определитесь, в какой папке на ПК должна оказаться подписанная фотография. Выберите формат. Программа для создания надписей на фото предлагает следующие варианты: JPEG, PNG, BMP или TIFF. Установите, какое качество должно быть у изображения. Готово, вы узнали, как сделать подпись на фото легко и просто!

Видео: как добавить красивый текст на фото

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

Как сделать прозрачную надпись на фото

Требуется защитить свои права на снимок? Для этого существует водяной знак. Он представляет собой полупрозрачный логотип или имя автора фотографии. Разберём, как закрыть кадр водяным знаком в ФотоМАСТЕРЕ.

Вы уже изучили, как сделать надпись на картинке. Проделайте вышеописанные шаги до работы в раздле «Настройки текста». Здесь вы найдёте параметр «Прозрачность». Ведите ползунок влево, чтобы буквы начали просвечивать. Подберите оптимальное значение прозрачности и сохраните получившийся снимок.

Вы можете добавить на фото водяной знак

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

Другие способы

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

Красиво оформить текст можно в редакторе Adobe Photoshop. Он предлагает широкие возможности для гибкой настройки оформления подписей. Однако этот профессиональный инструмент имеет сложное меню, в котором придётся долго разбираться. И даже минимальное украшение текста потребует глубокого изучения функционала редактора.

Хотите быстро добавлять яркие красивые подписи? Скачайте ФотоМАСТЕР! Это самый простой способ преобразить снимки. Попробуйте вставить текст в картинку прямо сейчас!

Часто задаваемые вопросы

Добавить текст на фото можно в приложениях Over, Snapseed, Front Candy или Desyne. Лучшим вариантом будет Snapseed: несмотря на то, что этот софт бесплатен, в нем есть все необходимые функции, а также множество креативных шаблонов.

Нажмите «Вставка» -> «Надпись» -> «Простая надпись». Переместите появившуюся рамку на картинку. Мышкой выделите текст внутри и измените его. Чтобы убрать белый фон, перейдите во вкладку «Формат» и уберите заливку. Есть и второй вариант: кликните правой кнопкой мыши по картинке и выберите «Обтекание текстом – За текстом».

Воспользуйтесь компьютерными редакторами (проще всего это сделать в ФотоМАСТЕРе) или мобильными приложениями: PicsArt, Snapseed, PicLab. Если речь идет об онлайн-сервисах, то обратите внимание на Canva или Stencil.

Вам также может быть интересно:

Как уменьшить размер фотографий без потери качества Как удалить людей или ненужные объекты на фото Топ-15 лучших программ для обработки фотоГлавная » Дизайн » Как сделать картинку уникальной – определяем рабочие способыimage

Как сделать картинку уникальной – определяем рабочие способы

–>

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

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

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

По чему будем определять уникальность?

Система поиска по картинкам у Яндекса и Гугла разная, поэтому и результаты выдачи по изображениям будут различны. Кроме того при помощи такого поиска мы не найдем информации о том, насколько наша картинка неповторима. Следовательно нужно прибегнуть к помощи стороннего сервиса, который бы проиндексировал огромное количество изображений интернета и имел свою базу. Он то и может дать нам самую актуальную информацию из возможных. Мой выбор пал на сервис проверки картинок на уникальность tineye.com.image

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

  1. Загрузить картинку с компьютера;
  2. Указать url-адрес.

А дальше сервис выдаст нам результат.

Какие картинки будут уникальными?

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

Созданная картинка – идеал уникальности.

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

Часто в статьях на блоге я применяю скриншоты различных страниц. Давайте же посмотрим являются ли они уникальными? Выше я вставил логотип сервиса TinEye, сам снял скрин с экрана, сохранил картинку и опубликовал. Но думаю такая картинка не будет уж столь уникальной. Проверим:image

В результате поиска более чем по 2 миллиардам (англ.: биллионам) картинкам сервис выдал нам 108 совпадений. То есть изображений, похожих на наше аж 108! Это не удивительно, ведь логотип часто используется на других сайтах.

Давайте попробуем сделать скрин чего-то более нетривиального, например часть админки этого блога на данный момент:image

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

Результат: эта картинка является уникальной в интернете.

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

Как сделать картинку уникальной.

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

Для эксперимента я взял две часто встречаемые картинки на просторах интернета:

Ведущие знаменитого автомобильного шоу Top Gear:

image

284 копии »

image

Черно-белая фотография Стива Джобса:

770 копий »

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

Если прием не работает с первой картинкой, то со второй эксперимент не проводится в силу несостоятельности данного метода.

Изменение цветов.

Картинка стала более контрастной и яркой, что позволило незначительно сократить количество копий – 249 против 284.

Результат: 249 копий »

Вывод: данный способ не работает.

Зеркальное отображение.

Результаты воодушевляют »

Вывод: как мы видим для первой картинки не найдено копий вообще 284 → 0. Для второй картинки количество повторений сократилось с 770 до 41. Способ придания картинке уникальности весьма эффективен и прост. Здесь все зависит от того, часто ли она подвергалась такой манипуляции. К сожалению данный способ плохо подойдет для картинок с текстом.

Применение водяного знака.

Теперь попробуем добавить на картинку водяной знак состоящий из логотипа блога и его url-адреса, таким образом чтобы изображение не потеряло своего смысла:

Результат »

Вывод: способ не работает.

Любимые способы блоггеров, которые всячески стараются уникализировать картинки!

Все Вы наверняка замечали как многие используют программу Snagit для того, чтобы сделать картинку уникальной – с ее помощью рвут края изображения, добавляют уголки и так далее. Так же знаменитой фишкой стало использовать картинку и делать из нее демотиватор. Я сделал рваные края у картинки, подобрал для демотиватора необычный цвет и уникальный текст:

То есть я применил эти два способа сразу – уж вместе то наверняка сработают. И что Вы думаете?

Результат »

Вывод: Этот способ оказался самым никчемным с точки зрения придания картинке уникальности. Судите сами.

Но это помогло сформировать промежуточный вывод:

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

Пробуем:

Мы сделали из популярной картинки в интернете – уникальную. Для этого потребовалось зеркальное отображение + поворот на 15 градусов по часовой стрелке. Признаться поворот на 12 градусов сократил количество повторений до 3.

Окончательный вывод:

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

Похожие статьи:

  • Топ-5 причин за генератор логотипов онлайн
  • Сайт съезжает – почему шаблон блога рушится?
  • Как сделать логотип для сайта в фотошопе
  • Создать логотип онлайн бесплатно – быстро и просто
  • Каким должен быть логотип на сайте? 5 правил создания!

Комментировать через ВКонтакте:

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий