Как добавить водяной знак на фотографию

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

Вот пример водяного знака:

водяной знак

Каким должен быть водяной знак?

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

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

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

И наконец,  что нужно указывать в водяном знаке? На самом деле — все, то считаете нужным. Как правило используют адрес сайта (интернет магазина, блога и т.д.) или фамилию автора.

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

Плагины для WordPress

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

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

Image Watermark — после его установки нужно будет самостоятельно создать изображение водяного знака (текст или картинку) и загрузить на сайт. Внутри плагина создать водяной знак даже в виде простого текста невозможно. Затем выбрать, где будет располагаться водяной знак, определить к каким изображениям его применять  и так далее. После активации и настройки плагина изображения, загружаемые на сайт будут автоматически снабжаться водяным знаком.

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

Онлайн сервис

Watermark.algid.net — с его помощью можно добавить водяной знак в виде картинки или текста одновременно на 5 изображений.

Это пример настроек для текстового водяного знака.

serviswaterm

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

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

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

forma

Графические редакторы

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

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

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

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

Стиль Веб 2.0

Устаревший, но все еще распространенный стиль.

Основные черты веб 2.0:

  1. 2-3 колонки информации, центральное расположение контента.
  2. Четкое выделение верхней и нижней секции — шапки и подвала сайта.
  3. Облако тегов.
  4. Ленточная подача информации.
  5. Наличие главной панели навигации .
  6. Яркие цвета, закругленные углы, отражения, градиенты.

веб 2.0

Минималистский стиль

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

Основные черты минимализма:

  1. Минимум декоративных элементов и опций. Удаляется все, без чего сайт может функционировать.
  2. Количество цветов  в оформлении ограничено, как правило не больше трех.  Часто используется черный и серый.
  3. Важное значение приобретает типографика: подбор шрифтов, их сочетание и размер. Зачастую — это основное украшение сайта.
  4. Большое количество свободного пространства на сайте.
  5. Часто в качестве фона и элемента переднего плана используется большое фото.

мини

Chama Inc

минимализм

Vudumedia

минималстиль

Плоский дизайн (flat)

Близок к минимализму. В основе лежит двумерный стиль.

Основные черты flat дизайна:

  1. Максимальная простота, исключение любых украшательств.
  2. Плоский дизайн, отсутствие объема, теней, градиента.
  3. Яркие цвета.
  4. Акцент на типографике.

SpellTower

плоский

Yep

плоский дизайн

Стиль Метро

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

Основные черты:

  1. Четкий, хорошо читаемый шрифт.
  2. Использование блоков информации в виде цветных плиток.
  3. Остроугольные плоские элементы.

Theverge

метро

Etch

метро стиль

Иллюстрационный стиль

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

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

Noiretrenoir

иллюстрационный стиль

Mujkaktus

иллюстрации

Themartist

иллюстрация

Скевоморфизм

Это стиль, для которого характерно подражание реальным предметам и текстурам при оформлении сайта.

Основные черты скевоморфизма:

  1. Натуральные цвета.
  2. Элементы дизайна с текстурой кожи, ткани, дерева, бумаги.
  3. Тисненые буквы, печати, штампы.
  4. Объемные, трехмерные элементы.

текстура

Стиль гранж

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

Характерные черты стиля гранж:

  1. Эффекты состаренности, небрежности, наличие пятен, разводов, рваных краев, царапин.
  2. Текстурный фон (старая штукатурка, кирпич, дерево).
  3. Использование элементов городской, промышленной архитектуры и пейзажей.
  4. Приглушенные, грязные цвета . Часто используются черный, коричневый, бежевый, серый, темно синий.
  5. Шрифт неровный, с заломами и шероховатостями.

Sycfuk

стиль гранж

Bristolarchiverecords

гранж стиль

Ретро стиль

Позволяет окунуться в прошлое, создает особое настроение, подчеркивает статус. Часто используется на сайтах ресторанов и фотостудий. Характерная особенность — использование узнаваемых предметов, символов  и стилистики 20 — 80-х годов 20 века.

Характерные черты ретро стиля:

  1. Крупная типографика,  жирные, рукописные шрифты плакатного типа.
  2. Использование текстур.
  3. Большое количество украшений — узоров, рамочек, двойные, тройные линии.

Имеет общие черты со стилем гранж — приглушенные, выцветшие цвета, состаренные текстуры.

Targetscope

ретро стиль

Garynock

гранж

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

Где найти бесплатные изображения для сайта

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

Читать далее Где найти бесплатные изображения для сайта

Как оптимизировать изображение для сайта

Медленная загрузка страниц отрицательно влияет и на оценку сайта поисковыми системами, и на поведенческий фактор. Один из способов ускорить загрузку сайта — оптимизировать изображения. Что такое оптимизация изображения?  Это уменьшение его веса (сжатие) за счет удаления некоторого количества информации из файла. Читать далее Как оптимизировать изображение для сайта