Как добавить логотип или водяной знак в изображение? FAQ
Как добавить логотип или водяной знак в изображение? FAQ
В этой статье я попытался разобраться в деталях вставки водяного знака и логотипа (копирайта) в изображение, в плане записи Action-ов. Слов получилось слишком много, поэтому статья дополнена видеоуроком.
Выражаю благодарность пользователю chesen с сайта rudtp.ru за оказанную помощь.
Самые интересные ролики на Youtube
Близкие темы.
FAQ. Как создать файл favicon.ico и поместить иконку и ярлык на сайт, в форум или блог?
- Пролог.
- Как выбрать шрифт для логотипа?
- Как создать шаблон для вставки водяного знака?
- Как создать шаблон для вставки логотипа?
- Как вставить водяной знак в изображение?
- Как вставать логотип фиксированного размера в изображение?
- Как автоматически подогнать размер логотипа под размер фотографии?
- Как записать Экшин (Action)?
- Видеоурок.
- Дополнительные материалы.
Пролог.
Те, кому лень читать длинные тексты, могут сразу перейти к видеоуроку >>>
Как только ваши фотографии начнут появляться на сайтах копипастеров, возникнет желание их хоть как-нибудь защитить.
Существует масса программ, которые заточены под то, чтобы выполнять подобные операции, но все они по функциям значительно уступают Photoshop-у. Да и сто’ит ли при подготовке фотографий выходить за пределы Photoshop-а, если для вставки логотипа или водяного знака нам в процессе работы понадобится нажать всего одну клавишу.
Нужно ли защищать изображения или нет, каждый решает сам. С одной стороны обидно, что кто-то беспардонно использует ваш креатив, и хочется как можно надёжнее «застолбить» фотографии, а с другой стороны надпись, проходящая поперёк всего изображения, не способствует созданию приятной атмосферы на сайте.
Но, если всё же было решено защитить изображения водяным знаком (watermark-ом) или логотипом, то нужно постараться найти компромисс между этих двух зол.
Небольшой логотип, расположенный с краю изображения, меньше защищает фотографию, чем watermark, но зато и не так сильно уродует картинку. Иногда даже размер логотипа уменьшают пропорционально размеру целевой фотографии, что минимизирует его влияние на восприятие изображения.
Все эти операции защиты фотографии от плагиаторов легко поддаются автоматизации. Мы подробно рассмотрим каждую операцию в отдельности.
Как выбрать шрифта для логотипа?
Если логотип представляет собой какой-нибудь короткий текст, например Веб адрес вашего сайта, то для его создания достаточно подобрать подходящий шрифт. Шрифтов в сети можно найти массу, а чтобы увидеть, как будет выглядеть логотип, набранный тем или иным шрифтом, можно воспользоваться каким-нибудь менеджером шрифтов.
Заодно, это позволит сразу определить, какие шрифты содержат кириллический набор символов, если логотип должен быть написан на русском языке.
Я использую для этих целей бесплатную, портативную программу Font Thing. Скачать её можно по ссылке из «Дополнительных материалов» (в конце статьи).
Вы просто запускаете программу, указываете ей директорию, в которой у Вас хранятся шрифты, и смотрите, как выглядит ваш текст, набранный тем или иным шрифтом.
Затем инсталлируете выбранный шрифт, нажав кнопку «Install». После установки шрифта, станет доступной кнопка «Uninstall» и шрифт можно будет при необходимости удалить из системы.
Когда шрифт выбран, можно создать шаблоны водяного знака или логотипа.
Как создать шаблон для вставки водяного знака?
Создаём новый документ размером 1200х800 пикселей, разрешением 10ppi с прозрачным холстом.
Разрешение намеренно выбрано малым, чтобы увеличить размер изображения и уменьшить размер файла.
Это позволит вставлять водяной знак даже в огромные изображения, полученные от современных цифровых камер.
Дело в том, что Photoshop-у, для правильной работы механизма подгонки размера внедряемых изображений, нужно, чтобы размер вставляемой картинки был больше размера целевого изображения.
Используя инструмент Type Tool (T), пишем текст, заранее выбранным шрифтом.
Можно сразу использовать серый цвет (#999999), тогда шаблон будет более универсальным.
Растрировать слой не нужно.
Буква «T» в иконке слоя свидетельствует о том, что текст всё ещё в векторном формате.
Если предполагается вставлять водяной знак по диагонали, то текст можно повернуть и изготовить два шаблона для портретной и пейзажной ориентации изображений.
Action-а тоже нужно будет записать два, или просто подправить в одном из Action-ов команду Place. Тогда, при групповой обработке изображений, придётся отсортировать их по типу ориентации. Сделать это можно в любом приличном менеджере изображений, таком как Adobe Bridge, ACDsee и т.д.
Сохраняем документ в постоянное место хранения на жёстком диске.
Если после записи Acton-а сменить место расположения шаблона, то Acton работать не будет и команду Place придётся переписать заново.
Как создать шаблон для вставки логотипа?
Если предполагается, что размер логотипа будет автоматически подгоняться под размер изображения, то можно использовать шаблон аналогичный тому, что мы создали для вставки водяного знака, только в горизонтальной ориентации.
Создаём новый документ размером 1200х800 пикселей, разрешением 10ppi с прозрачным холстом.
Разрешение намеренно выбрано малым, чтобы увеличить размер изображения и уменьшить размер файла.
Это позволит вставлять водяной знак даже в огромные изображения, полученные от современных цифровых камер.
Дело в том, что Photoshop-у, для правильной работы механизма подгонки размера внедряемых изображений, нужно, чтобы размер вставляемой картинки был больше размера целевого изображения.
Если же выбран фиксированный размер логотипа, то можно создать ещё один шаблон, размер которого, и определит конечный размер логотипа. Этот шаблон нужно создать в том разрешении, в котором Вы работаете с изображениями, например, 72 ppi.
Правда, разрешение шаблона актуально только при использовании команды File > Place и активации опции Edit > Preferences > General > Resize Image During Paste/Place. При внедрении логотипа командой Paste разрешение роли не играет.
Как вставить водяной знак в изображение?
Чтобы наш будущий Action мог работать с картинками любого размера, в Photoshop-е существует специальный механизм автоматической подгонки размера вставляемых изображений.
Если поставить «птичку» в чекбокс Edit > Preferences > General > Resize Image During Paste/Place, то по команде Place логотип будет подогнан по размеру целевой картинки.
Правда, это произойдёт только в том случае, если размер шаблона с водяным знаком будет больше целевой картинки.
Здесь речь идёт о миллиметрах, сантиметрах и дюймах, а не о пикселях. То есть, имеет значение только размер, обусловленный количеством пикселей на дюйм. Это то самый размер, который используется при выводе изображений на печать.
Загружаем на рабочий стол целевое изображение.
Создаём новый слой (Ctrl+Shift+Alt+N). Это нужно, чтобы на следующем шаге было что сводить вместе, если изображение окажется немногослойным.
Чтобы водяной знак правильно проник в многослойное изображение, сводим вместе все слои Layer > Flatten Image.
Командой File > Place вставляем заранее подготовленный шаблон с изображением водяного знака.
Водяной знак будет вставлен в виде Смарт объекта (Smart Object).
Чтобы закончить действие, нажимаем Enter.
Сделать менее заметным водяной знак, при внедрении в фотографию, можно, если, например, создать иллюзию выдавленного текста.
Выделяем текст Select > Load Selection (Ctrl + клик по превьюшке слоя с водяным знаком).
Удаляем слой с водяным знаком.
Выбираем команду Layer > New > Layer via Copy (Ctrl+J).
Применяем к образовавшемуся слою стиль Layer > Layer Style > Bevel and Emboss или дабл клик на слое.
Чтобы сделать водяной знак более чётким, можно применить стиль Stroke в режиме смешивания Difference.
Тут нужно отметить, что при ресайзе фотографий для Веб страниц командой Image > Image Size, представление стилей будет зависеть от чекбокса Scale Styles. Если "птица" не установлена, то стили будут применены однообразно вне зависимости от исходного размера фотографий. Конечно же, при этом, и значение настроек стилей нужно подобрать с учётом предполагаемого конечного размера картинок.
Если же речь не идёт о групповой обработке изображений, то можно подобрать параметры стилей индивидуально для каждой картинки до сведения слоёв.
Итак, нам удалось вставить водяной знак в фотографию. Теперь попробуем выбрать меньшую из двух зол и вставить логотип.
Как вставать логотип фиксированного размера в изображение?
Чтобы сохранить масштаб изображения при использовании команды Place, нам пришлось бы подогнать разрешение целевых картинок под разрешение нашего логотипа фиксированного размера.
Делается это при помощи инструмента Image > Image Size (Ctrl+Alt+I) со снятой «птицей» в чекбоксе Resample Image. Например, можно выбрать 72 ppi.
Однако если все картинки имеют разное разрешение, которое менять нежелательно, то можно вместо команды Place использовать команду Paste.
При использовании команды Paste, запись Action-а немного изменится.
Загружаем на рабочий столе целевое изображение.
Выбираем команду File > Open (Ctrl+O) и указываем месторасположения нашего логотипа фиксированного размера.
Выделяем изображение логотипа Select > All (Ctrl+A).
Копируем изображение логотипа в буфер обмена Edit > Copy (Ctrl+C).
Закрываем изображение логотипа File > Close (Ctrl+W).
Вставляем изображение логотипа из буфера обмена в целевую картинку Edit > Paste (Ctrl+V).
На всякий случай очищаем буфер обмена Edit > Purge > Clipboard, игнорируя предупреждение о невозможности отката назад.
Приостанавливаем запись и добавляем сверху логотипа пустой слой (Ctrl+Shift+Alt), а затем включаем запись. Это нужно только для правильной записи очередной команды.
Это можно сделать и перед началом записи экшнина, просто мне показалось, что так будет нагляднее.
Переносим вновь созданный слой наверх Layer > Arrange > Bring to Front (Shift+Ctrl+]).
Эта команда сделает Action более универсальным. Например, если «натравить» Action на многослойное изображение, у которого активный слой будет где-нибудь в середине или внизу, то логотип может оказаться скрытым под верхними слоями. Да, и логичнее будет поместить его сверху, ведь обычно логотип вставляют в самом конце обработки изображения.
Выделяем всё изображение Select > All (Ctrl+A).
Это нужно для того, чтобы показать инструменты Move Tool границы изображения. Приём сработает даже тогда, когда все слои прозрачные.
Активируем инструмент Move Tool (V).
Используя панель управления инструментом Move Tool, определяем место, относительно которого в дальнейшем будем позиционировать логотип. В данном случае был выбран правый нижний угол.
Выделенным на скриншоте кнопкам соответствуют команды Layer > Align Layers to Selection > Bottom Edges и Layer > Align Layers to Selection > Right Edges.
Последовательность выполнения этих команд произвольная.
Скрываем селекцию Select > Deselect (Ctrl+D).
При помощи инструмента Filter > Other > Offset задаём расстояние от логотипа до краёв основного изображения.
Положение переключателя Undefined Areas произвольное (он предназначен для работы с выделенными частями изображения).
Как автоматически подогнать размер логотипа под размер фотографии?
Загружаем на рабочий столе целевое изображение.
Вставляем логотип, размер которого превышает размер целевой картинки File > Place.
Опция авторесайза Edit > Preferences > General > Resize Image During Paste/Place при этом должна быть включена.
Получаем подогнанное изображение в виде Smart Object-а.
Устанавливаем окончательный размер логотипа в панели параметров инструмента. Для этого нажимаем на кнопку Maintain aspect ratio (с изображением цепочки) и подбираем величину масштабирования в процентах.
Для записи команды Place в Action, лучше выбрать большое целевое изображение, тогда повысится точность масштабирования.
Таким образом, при использовании Action-а, авторесайз будет производиться не только пропорционально изображению любого размера, но ещё и с учётом, выбранного нами масштаба этого преобразования.
Дважды нажимаем кнопку Enter.
Командой Layer > Layer Properties даём новое название слою. В нашем случае слой Logotype Variable был переименован в Logotype.
Это нам понадобится для следующего шага.
Приостанавливаем запись и добавляем сверху логотипа пустой слой (Ctrl+Shift+Alt), а затем включаем запись. Это нужно только для правильной записи очередной команды.
Это можно сделать и перед началом записи экшнина, просто мне показалось, что так будет нагляднее.
Переносим вновь созданный слой наверх Layer > Arrange > Bring to Front (Shift+Ctrl+]).
Эта команда сделает Action более универсальным. Например, если «натравить» Action на многослойное изображение, у которого активный слой будет где-нибудь в середине или внизу, то логотип может оказаться скрытым под верхними слоями. Да, и логичнее будет поместить его сверху, ведь обычно логотип вставляют в самом конце обработки изображения.
Выделяем всё изображение Select > All (Ctrl+A).
Определяем положение логотипа относительно края целевого изображения инструментом Move Tool (V). В данном случае была выбрана середина в нижней части целевого изображения.
Выделенной на скриншоте кнопке соответствует команда Layer > Align Layers to Selection > Bottom Edges.
Скрываем селекцию Select > Deselect (Ctrl+D).
Теперь с помощью фильтра Filter > Other > Offset определяем положение логотипа относительно края изображения.
При желании применяем стили к слою с логотипом Layer > Layer Style > …
Я выбрал режим смешивания слоёв Difference и Opacity 50%.
При записи Action-ов лучше выбирать режим смешивания не в палитре Layers, а в палитре Layer Style, тогда Action получится короче.
Как записать Экшин (Action)?
Запись Action-а, обычно, начинают с создания папки для однотипных экшинов, чтобы вновь созданный экшин не затерялся среди остальных.
Создать папку можно, нажав на соответствующую иконку, либо через меню палитры командой New Set.
Давайте папке осмысленное название, так как сохранить экшины отдельно от Photoshop-а, можно только целиком, вместе с папкой.
Точно так же, нажав на иконку или выбрав в меню палитры команду New Action, создаётся и новый экшин. Лучше, чтобы имя экшина указывало на операцию, которую экшин выполняет.
После нажатия на кнопку Record, начнётся запись, которую, впрочем, можно сразу остановить, если Вы ещё не готовы.
Работает палитра Actions как обычный диктофон. При нажатии на кнопку Begin recording, все наши действия начинают записываться.
Если что-то пошло не так, всегда можно остановить запись кнопкой Stop playing и откатиться назад, удалив неправильно выполненные действия. Затем можно снова продолжить запись.
Запись Action-а можно редактировать. Команды можно менять местами, так же как и слои в палитре Layers, или удалять, перетащив мышкой в корзину.
Удалив команду, её всегда можно записать заново.
Когда Экшин записан, его можно запустить кнопкой Play selection, и он произведёт записанные ранее действия над активным изображением.
Для удобства использования Action-ов, можно назначить каждому экшину одну из функциональных клавиш F2… F12 или комбинацию клавиш Shift+F2, Ctrl+F2, Shift+Ctrl+F2 и т.д. Итого 44-ре комбинации.
Если переключить палитру Actions в Button mode, то запускать экшины мышкой будет удобнее.
Собственно, любой набор действий, описанных в предыдущих параграфах, можно записать в качестве Action-а.
Нужно только иметь в виду, что состояние опции Resize Image During Paste/Place в Action не записывается. Если случайно в настройках снять птицу из чекбокса этой опции, то Action будет работать неправильно. Изображение логотипа или водяного знака не будет подгоняется под размер целевого изображения. А если размер шаблона был большим, то Photoshop «скушает» лишний гигабайт оперативной памяти под этот процесс, да и выполнять его будет слишком долго. В общем, если Вы заметите нечто подобное при запуске Action-а, проверьте состояние этой опции.
Если Вы захотите использовать готовые Экшины из «Дополнительных материалов», то Вам придётся в них переписать команды Place и Paste. Для этого можно два раза кликнуть по команде Place или Paste, а затем указать директорию, в которую Вы поместили шаблон своего водяного знака или логотипа. Можно и вовсе удалить команду, которая требует редактирования, и вместо неё записать новую.
Когда Action записан, то его можно применить не только к изображению на рабочем столе Photoshop-а, но и к целой группе картинок, расположенных в отдельной папке или директории. Для этого нужно выбрать либо команду File > Automate > Batch, либо File > Scripts > Image Processor и добавить туда нужный Action.
Видеоурок.
В девятиминутном видеоуроке показано, как выбрать шрифт, создать шаблон и записать Action.
Разверните плеер на весь экран, чтобы увидеть видеоурок в максимальном разрешении.
Дополнительные материалы.
Скачать бесплатно портативную программу Font Thing Portable (860кБ).
Скачать три экшина для вставки логотипов и водяных знаков в изображения (2кB).
Выделите ошибочный текст мышкой и нажмите Ctrl + Enter
Я накладывал сначала марки с именем сайта. Потом понял, что это бредово. Накладывал и сайт и имя. Потом получил бан на одном из популярных сайтов именно за это. Меня там учили, что у меня же типа оригинал есть.
Поняв, что я злополучный «Евгений Киселев», пишущий на всю диагональ фотки свое имя, я стал писать мелко и незаметно.
Не сработало и это.
Теперь я понял, что ничто из этого не сработает. Потому что курок нажать может ассистент и тогда кому принадлежат права на фото?
Тонкая хрень авторских прав разваливается на глазах. Потому что это доверие. Наличие оригинала лишь сладкая пилюля, и не более того.
Следовательно, вор — сворует. Нужны ли нам воры? Вот в чем вопрос.
вут, единственный способ защитить свои творения от плагиаторов, это не выкладывать их в сеть. На стоках свои порядки. Но, на своём сайте можно, например, заштамповать мелким копирайтом всю площадь. Копипастеры ленивые и криворукие, поэтому вряд ли смогут удалить такую защиту.
Если Вы выкладываете в сеть фотки, вроде той, что прислали мне, то наши товарищи их и тырят, для проспектов каких-нибудь тур. фирм. Думаю забугорным дизайнерам это ни к чему, и они могут купить подписку или просто нужные фотографии на стоках.
Когда был на Florida Keys (небольшие очень красивые курортные острова), видел там фотографа, который целый день снимал пейзажи и прочую фауну на здоровый такой Марк. На улице было очень жарко и высокая влажность, но он стоически искал сюжеты. Я тогда подумал, наверное, за эти фотографии можно получить хорошие деньги, раз он так старается. Дочка попросила его снять всю нашу честную кампанию, и он снял не только на нашу камеру, но и на свою и даже прислал фотографии по мылу. Наш человек вряд ли стал бы высылать профессиональные фотографии первому встречному. Это я к тому, что поганый человек украдёт, даже если это очень сложно, а приличный сделает что-то хорошее, даже если его об этом никто не просит.
Наших людей испортил квартирный вопрос, но так как вопрос этот до сих пор актуален, то и на возрождение пока рассчитывать рано.
А я просто в фотошопе добавляю. У меня там и заготовка есть для всех трёх блогов моих.
Я вообще что то запуталась. Я новенькая в этом деле, я если чужие темы размещаю буру разрешение автора, без разрешения я статьи не публикую, разве в этом воровство? Я бы хотела узнать есть ли такой плагин который может автоматом ставит сразу штамп сайта, если кто то загрузил свои работы на сайт сразу штамп
Да еще вопрос правда не по теме , но может кто подскажет, не могут посетители загружать фотографии ко мне на сайт, я уже плагин вроде скачала Ads WordPress и все равно что то не пойму не чего.
Ольга, я движок переставлял вместе с базой данной и, наверное, мой ответ потерялся.
Я ничего не говорил про статьи, хотя, если Вы спрашиваете… Блог, это дневник, и наполняют свой дневник чужими записями обычно те, кому нечего сказать самому. Правда, именно таких блогов и больше всего. Создают их копипастеры и плагиаторы, чтобы заработать денег. Вставка логотипа в чужие фотографии, это ещё хуже, так как количество денег эта операция не увеличит. Выходит, что это удовлетворение гордыни, одного из смертных грехов в христианстве.
Представьте себе, что Вы оставили свою машину на автостоянке, а когда пришли её забирать, хозяин автостоянки приклеил на каждую машину рекламные наклейки с логотипом своей стоянки. Вам бы было это приятно? Странно, что приходится это объяснять.
Если я Вас не убедил, то поищите в Google плагин для Word Press, который умеет вставлять ватермарк в изображение. Кейворды: watermark wordpress plugin. Вот ссылка на первый попавшийся мне плагин.
Ну, и конечно, не стоит сильно переживать по поводу моих слов. Ведь известно, что карма не сильно страдает, если человек не осознаёт негативных последствий своих поступков. Нельзя же, в самом деле, требовать от каждого, ответственного отношение к судьбе мира.
Спасибо большое. Помогли подойти по-научному. Вот только ссылка, на прилагающийся аction не работает, будет время поправьте. Хотелось бы посмотреть как это работает с action.
Марк, большое спасибо за замеченную ошибку! Файл закачал. Менял место хранения файлов и кое-что, видимо, потерял. Кстати, в видеоуроке показано, как записать Action.
Здравствуйте, спасибо за статью и видео урок. Я скачал ваш экшен, но при поптыке отредактировать путь в Place получаю ошибку «The command Place is not currently available». И так почти со всеми разделами где нужно вставить мой путь к файлу. Единственное место где я смог указать свой лого для вставик это «LogoType Fixed» ->»Open». И этот экшен в принципе делает что мне нужно. Но мне необходимо добавить лого для многих файлов. Я использую команду Filе -> Automate->Batch. Но на команде Paste я получаю всю ту же ошибку «The command Place is not currently available», хотя если это сделать вручную для одной картинки, то лого успешно вставиться. Подскажите как можно решить эту проблему? Версия фотошопа 8.0. Спасибо.
Привет Shred!
Photoshop вам пишет, что команда Place в нестоящее время недоступна. Скорее всего, директория расположения вставляемого файла указана неверно.
Найдите в Action-е команду Place и кликните по ней два раза. В появившемся окне выберите свой шаблон. Нажмите Enter раз или два и убедитесь, чтобы команда была выполнена. А именно, проследите, чтобы в описании команды появился новый путь к файлу. В видеоуроке эта процедура показана.
Этот урок был представлен на двух самых популярных форумах по Photoshop-у и не получил ни одного замечания. Я навскидку проверил один из экшинов — «Watermark Landscape» и он сразу же заработал, хотя с тех пор я уже, наверное, ни раз сменил версию Photoshop.
В конце концов, вы можете сами записать этот Action, следуя указаниям из видеоурока.
Спасибо за ваш быстрый ответ.
«Найдите в Action-е команду Place и кликните по ней два раза. В появившемся окне выберите свой шаблон.»
В том, то и дело что у меня не открывается окно, а по двойному клику появляется вышеописанная ошибка. Но это уже не важно т.к. один из экшенов работает у меня и я могу подставить свою картинку. Проблема в том что он почему-то перестаёт работать если я использую Filе -> Automate->Batch. Не могли бы вы попробовать будет ли у вас работать экшен «Watermark Landscape» совместно с Filе -> Automate->Batch ? Спасибо.
Shred, если ваш Photoshop некорректно отзывается на команды, то возможно в нём и дело. Может быть вы используете криво взломанную версию программы или кривую русификацию. А возможно, у вас версия CC или СС2014, на которых я этот Action не проверял, так как у меня всё ещё CS5.1. Но, это всё советы для перфекционистов, которых хлебом не корми, а дай только докопаться до истины.
Я же вам советовал в прошлом посте, записать этот Action, чтобы сразу решить проблему. Если заработает, значит дело в несовместимости версий, если не заработает, значит ваш PS глючит или вы что-то делаете не так.