Какой хороший (и простой) способ показать, что скриншот - это скриншот?

Я использую Mac OS X 10.6, и мне нравится инструмент захвата экрана системы. По умолчанию, когда вы захватываете все окно, оно помещает немного тени / градиента под ним, с прозрачностью, используя изображение в формате PNG - что я считаю довольно хорошим.

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

Итак, мой вопрос заключается в следующем: какой простой, классный способ показать, что изображение на самом деле не является частью веб-сайта? Я думаю, что 5-пиксельная черная рамка, вероятно, сделала бы это, но это не классно. Мне нравится тонкий градиент, который делает OS X, но подходит ли он для всех снимков экрана, и будет ли это легко создать?

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

^ пример проблемы, о которой я говорю

Все зависит от того, о каком типе изображений идет речь.

Возможные способы сделать это:

1. Текст в каком-то углу с надписью «Снимок экрана» или «Снимок экрана»
2. Значок камеры некоторый угол или текст и изображение значка камеры.
3. В случае, скажем, этого поля ответа, самый безопасный способ может быть наложить его на другой цвет и показать изображение при наведении.
4. Поскольку # 3 может быть не совсем ясным, это наложение может сопровождаться текстом и / или значком или, если цвет наложения отсутствует, его также можно изменить на противоположное.
5. Какая-то граница может быть хорошим индикатором.

Что касается техники:

# 1 и # 2
Многие программы захвата экрана позволяют водяные знаки, которые были бы идеальными для одного изображения или нескольких изображений. В случае нескольких изображений Photoshop может быть использован для добавления водяного знака. Или HTML/CSSподпись.

№ 3, № 4 и № 5
Они должны быть сделаны с HTML/CSSподписью.

Не могу не подумать об одном из моих проектов ... сейчас .. "Я не хочу рекламировать ... Но ..." http://photoshopmesta.net/sic/theTest/ что-то подобное можно использовать для показать, что это изображение, когда вы наводите курсор на изображение.

Больше ничего делать не было, поэтому я привел пример того, как это может работать http://photoshopmesta.net/1/screenshot/

О, кстати, я читал это на своем iPad, и я должен признаться, что попытался щелкнуть изображение ответа. Я пошел вперед, чтобы дать вам +1. Хотел бы я дать +2, так как это был отличный пример :)

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

Хорошей идеей будет придерживаться согласованного подхода, выделяя скриншоты тонким способом. Я нахожу стандартную тень от Apple слишком большой.

Я просто добавляю к выстрелу центрированный штрих размером 3 пикселя с непрозрачностью 40%. Вы можете добавить тень, если хотите.

В зависимости от контекста, вы можете сделать намного хуже, чем макетировать стилизованную рамку «монитора» (возможно, в сером цвете Apple?). Скрипт обработчика изображений в Photoshop позволяет запускать действие при пакетной обработке изображений, чтобы вы могли создать действие, которое изменяет размер холста, помещает его в «монитор» над снимком экрана, добавляет стандартный фон (для захватов экрана, которые не заполняют frame), затем сохраняет результат в формате png или jpeg.

Вам не нужно идти так сложно, как стилизованный монитор, и если вы не хотите, чтобы все они были одинакового размера, ваше действие может просто добавить градиентный штрих к изображению произвольного размера. Это позволило бы вам пакетировать процесс из Bridge ( Tools > Photoshop > Batch...) и делать все в действии.

Некоторые вещи, которые могут помочь:

• Включите отрезанные части окружающих элементов. Вы можете добавить тень и эффект, похожий на рваные края, чтобы подчеркнуть это. (Для эффекта рваной кромки я создаю маску слоя и применяю фильтр «Искажение> Рябь океана» в Photoshop с небольшим размером ряби (2) и малой величиной ряби (3).)
• Уменьшите размер изображения, чтобы оно больше не соответствовало масштабу реальных элементов страницы. (И, возможно, разрешить пользователям нажимать на миниатюру, чтобы увидеть полноразмерную версию.)

Например:

(Вы одурачили меня выстрелом из автоответчика. Очень умно.) Но что касается моего ответа ...

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

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

$ defaults write com.apple.screencapture disable-shadow -bool TRUE

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

$ killall SystemUIServer

Вот как это можно изменить:

$ defaults write com.apple.screencapture disable-shadow -bool FALSE
$ killall SystemUIServer

через полезную статью на tutsplus.com

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

background: -webkit-radial-gradient(white,white,#e5e6e7);
background: -o-radial-gradient(white,white,#e5e6e7);
background: -moz-radial-gradient(white,white,#e5e6e7);
background: radial-gradient(white,white,#e5e6e7);
box-shadow: 0px 0px 2px #555555;

Добавьте водяной знак к изображению:

:П