Який хороший (і простий) спосіб показати, що скріншот - це скріншот?

Я використовую 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 дозволяє запускати дію при пакетній обробці зображень, щоб ви могли створити дію, яка змінює розмір полотна, опускається на "монітор" над знімком екрана, додає стандартний фон (для захоплення екрана, які не заповнюють кадр), а потім зберігає результат у форматі png або jpeg.

Вам не потрібно бути таким витонченим, як стилізований монітор, і якщо ви не хочете, щоб вони були однакового розміру, ваша дія може просто додати обриси градієнта до зображення довільного розміру. Це дозволить вам провести пакетний процес з Bridge ( Tools > Photoshop > Batch...) і зробити все в дії.

Деякі речі, які допоможуть:

• Включіть відрізні частини навколишніх елементів. Ви можете додати краплину тіні і ефект, що вивертається, щоб підкреслити це. (Для ефекту розірваного краю я створюю маску шару і застосовую фільтр Photoshop Distort> Ocean Ripple з невеликим розміром пульсацій (2) та невеликою величиною пульсацій (3).)
• Зменшіть розмір зображення, щоб воно більше не було в такому ж масштабі, як реальні елементи сторінки. (І, можливо, дозволити користувачам натискати на ескіз, щоб побачити повнорозмірну версію.)

Наприклад:

(Ви обдурили мене пострілом у відповідь. Дуже розумно.) А щодо моєї відповіді ...

Я б запропонував використовувати ефект кадру, щоб зробити знімок візуально значущим з решти сторінки. Просто надайте їй зубчастий край паперу. Це я і зробив.

Як бічна лінія, якщо ви хочете використовувати весь знімок екрана вікна, але не маєте великих тіней і прозорих областей, щоб ви могли швидко застосувати свій власний стиль, просто введіть у термінал наступне:

$ 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;

Додайте водяну позначку до зображення:

: P