Как делать красивые скриншоты

Редактор изображений Яндекс

2014-07-24T11:37:00.001-07:00

В мае 2014-ого Яндекс анонсировал появление редактора изображений в своих сервисах Яндекс Диск и Яндекс Фотки. Это значительно упрощает и ускоряет обработку скриншотов при ведении блогов. Лично для автора этого сайта (то есть для меня) Яндекс Диск - основной скриншотер.

Редактор изображений вызывается жёлтой кнопочкой "редактировать" в информации о графическом файле в самом Диске:

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

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

Обработка Эффектами моего любимого воллпаппера:

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

Рамки для фотографий или скриншотов, ну как же без них?

Регулировка контрастности:

И очень хороший инструмент обрезки с готовыми предустановками:

Остальные опции пробуем самостоятельно :-). Крайне юзабильный сервис, хотя всё это есть в Screen Capture.

Полезные ссылки:
Официальный блог Яндекса - Редактор фотографий в Диске и Фотках

ScreenHunter

2014-07-03T14:31:00.001-07:00

ScreenHunter - очередной игрок на рынке скриншотеров (программ, позволяющих делать статические снимки того, что происходит на экране). Это не веб-сервис, это именно программа. Распространяется как "Free for individual use", то есть по-русски означает, что скачать можно бесплатно. И даже без регистрации. Но только под винду. Увы.

Не смотря на какой-то доисторический сайтик Wisdom-soft.com, сам ScreenHunter сделан добротно, и забегая вперёд, можно сказать, что на отлично.

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

Опции захвата ScreenHunter

From (откуда):

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

To (куда):

В разделе To пользователю даётся широкий выбор различных предустановок:

автонадпись (например, дата)
водяной знак
граница (рамка)
авторазмер
эффекты

Ну и конечно же варианты сохранения: вывод в редактор (можно использовать родной, можно указать свой), на печать, послать по почте , сохранить на жёсткий диск (в различных форматах: bmp, png, pdf, tiff и gif). Обратите внимание: ScreenHunter делает скриншоты в pdf из коробки!

Закладки Options (Настройки) и Tasks (Задачи) оставляю для индивидуального исследования.

Создание скриншота в ScreenHunter

Всё очень просто. Выбираем на вкладке From требуемый режим. Пусть это будет Scrolling Window/Web с вертикальным скроллингом (то бишь по высоте) и без задержки, и жмём синий, в жёлтом ободке, кругляш "Capture Now":

В результате получаем снимок полной страницы блога с реализованной прокруткой:

ScreenHuner почти справился со своей задачей и перемотал в Chrome всю страницу вниз, захватив правый скролл (убирается кадрированием в редакторе).

Редактирование скриншотов в ScreenHunter

Оконный охотник (буквальный перевод с англ.) ещё и укомплектован бесплатным редактором, который откроется автоматически после "забора" скриншота:

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

Раздел редактора Bitmap (прямо как во "взрослом" фоторедакторе)

Что касается инструментов и объектов, то есть всё:

лассо
заливка
стрелки
баблы (пузырики диалогов)
текст
кривые
фигуры

Рисование стрелок на картинках в ScreenHunter (стрелки, стрелки, ну куда же без них?):

Фигуры и текст в редакторе:

Поддержка символов из спец-шрифтов:

Вставка графических объектов (быстрый коллаж):

Впечатления
Весь процесс скриншотинга происходит быстро, без тормозов. Принцип функционирования софтины элементарный, все пункты и разделы достаточно понятны и никуда не спрятаны. Возможностей много и больше, чем у других бесплатных собратьев-аналогов. Если с чем и можно сравнить SreenHunter, так только с аналогом FarStone Capture, можно ещё с PickPick. Если освоили хоть один простенький фоторедактор, то и со ScreenHunter разберётесь.

Скачать ScreenHunter можно с официального сайта http://www.wisdom-soft.com/products/screenhunter.htm , выбрав Free.

Screenshot Ru - Снимок с экрана в один клик

2014-06-27T05:54:00.002-07:00

Сегодня протестируем очередной сервис, специализирующийся на скриншотах online, он достаточно известен в России - это Screenshot Ru.

Прежде всего хочу отметить, что софт от Screenshot Ru полностью бесплатный и кроссплатфоремнный (вдобавок к Win-версии ещё под Linux и Mac). Устанавливается без лишних вопросов, после чего стали доступны два запускных ярлыка программы - Screenshot (снятие статичных картинок) и Screenshot Gif (запись анимации или видео).

После установки и регистрации в системе (нужно создать на сайте учётную запись) система сразу же предложила приобрести Pro-аккаунт с массой возможностей: скрытие рекламы, работа с историей изображений, html-коды для вставки и т.д. Pro-аккаунт можно запросить для тестирования бесплатно сроком на один месяц. Мне он достался по купону первичной регистрации.

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

Работа с изображениями в админ-интерфейсе:

Редактирование снимков экрана в Screenshot Ru:

Редактор очень простенький, стрелки приятные, напоминают по плавности стрелки Яндекс Диска.

Опубликованный снимок в Screenshot Ru выглядит так (сразу можно брать ссылку из адресной строки админки):

Теперь подытожим всё, что составило общее впечатление от сервиса:

ничего лишнего
высокая скорость работы (важный критерий при больших объёмах)
все функции предельно понятны, интерфейс интуитивно усваиваем
слабенький редактор
не до конца русифицированный интерфейс (кнопки save, cansel и undo)
есть функция загрузки изображений с жёсткого диска (максимально 25 мб) с большим набором кодов и ссылок для встраивания на сторонних ресурсах:

Выбираем изображение для загрузки

Загрузка завершена

Получить код или ссылку для встраивания

Официальный сайт www.screenshot.ru.

Эффекты из Google+

2014-06-25T12:56:00.000-07:00

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

В поисках вдохновений рекомендую из браузера Chrome заглянуть в Google+, а именно во встроенный редактор изображений, залитых в Google+:

Редактирование изображений в Google+

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

Фокус в центре
Эффект замыливает всё, кроме обозначенной области, масштаб которой можно отрегулировать мышью:

Результат:

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

Рамки
Добавить рамку к скриншоту (любой картинке, изображению, фотографии) теперь очень легко и не нужно лишних шаманских действий в фотошопе:

Рамки, помимо разнообразной библиотеки, ещё имеет регулировку области, входящей в эту самую рамку.

Результат:

Сдвиг и наклон
Данный эффект, а точнее, группа эффектов или комплексный инструмент, позволяет совершать не только вращение картинки, но и управлять размытием и гаммой областей, подобно выше рассмотренному "Фокус в центре":

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

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

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

Можно с уверенностью сказать, что редактор изображений в Google+ очень даже годен для "быстро-скринов" (ситуация, когда нужно реактивно обработать картинку, оставив на ней только нужную информацию).

А теперь жизненный пример.
Задача: требуется на скриншоте форума сфокусировать внимание зрителя только на нужной области.

Было:

Скриншот форума

Стало:

Обработанный в редакторе Google+ скриншот форума

PlaceIt - скриншоты сайта мобильных устройствах

2014-06-19T13:32:00.001-07:00

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

А работает PlaceIt вот так:

После вставки скрина возможно простейшее редактирование обрезкой и масштабированием. Приятный и неожиданный бонус - сохранение результата как 4:3, так и 16:9. Небольшая ложка дёгтя - сервис платный, нужно приобрести лицензию:

Пример скриншота, сделанного при помощи PlaceIt:

На экране ноутбука открыта страница этого блога :-). Конечно в платном варианте окончательный вариант получится без водяного знака и с нормальным разрешением. Но у меня подписки нет.

Макеты:

Достоинства:

огромная библиотека красивых и качественных макетов (устройства от Apple, Samsung и др.)
приятный дизайн

Недостатки:

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

Страница сервиса PlaceIt - www.placeit.net.

Рисуем скриншоты при помощи PickPick

2014-05-30T14:48:00.003-07:00

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

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

Ну и функциональность горячих клавиш тоже не подкачала:

А выглядит рабочая плоскость PickPick вот таким образом:

Да, на первый взгляд это прямо клон Paint'а, но функций на самом деле намного больше, включая целую пачку эффектов:

пикселизация
тонирование
яркость/контраст
резкость/размытие
и т.д.

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

Ещё есть чудесный инструмент для создания цветных областей на снимках:

Естественно, что в редакторе ещё масса настроек, я перечислил базовые и вкусные моменты, ради которых стоит попробовать в работе PickPick.

Скачать редактор скриншотов можно с официального сайта www.picpick.org.

Продолжение следует...

Free Screen Capture Tool

2014-05-29T12:33:00.002-07:00

Free Screen Capture Tool - как и следует из названия: бесплатная утилита для создания скриншотов от компании DucklinkSoftware. Работает под Win (графическая и для командной строки) и Mac.

Реализация Free Screen Capture Tool проста, как пять копеек. Вот такое меню при запуске, без излишеств:

То есть отсюда можно сделать снимок экрана:

ручным выделением
свободной областью (полигональным лассо)
активным окном
окном со скроллом
полноэкранно

После чего созданный снимок отправляется в окно редактирования:

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

Данный функционал несколько роднит Free Screen Capture Tool с векторными редакторами. Результат можно сохранить на жёсткий диск компьютера или распечатать.

Скачать программу можно с официального сайта www.ducklink.com. Стоит добавить, что никакой рекламы и сторонней ерунды вместе с утилитой не обнаружено.

Greenshot - делаем скриншоты профессионально

2014-05-17T10:47:00.005-07:00

Сегодняшний гость обзора программ для создания скриншотов - Greenshort. Это OpenSource разработка (с открытым исходным кодом) и поддержкой кучи плагинов (для Picasa, Photobucket, Flickr, Dropbox и т.д.). Это не редактор изображений, а утилита, которая делает снимки экрана и отправляет в предварительно указанное место (веб-сервис или редактор изображений), что делает данное ПО вполне профессиональным решением для дизайнера, блоггера или верстальщика документаций.

Инсталлятор у Greenshot не имеет в арсенале русского, но при выборе компонентов можно добавить этот язык, как и множество других.

После первого запуска программа определяет базовые горячие клавиши, сообщает свободны они или заняты. Также может стартовать вместе с Windows.

В рабочем режиме программа сидит в фоне и вызывается из трея:

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

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

захват области
захват полного экрана
захват окна

Но зато есть одно огромное и самое главное преимущество - отправка скриншотов в указанный редактор. Я занёс в список редакторов Adobe Photoshop:

И теперь Greenshot после создания снимка экрана в списке предложений имеет фотошоп для дальнейшего редактирования.

Кроме того Greenshot для полиграфии оснащён продвинутыми настройками печати:

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

Скачать Greenshot можно на официальном сайте getgreenshot.org. Документация на русском доступна на этой странице: getgreenshot.org/help/ru-ru.

Размечаем области на скриншотах

2014-05-16T23:54:00.003-07:00

Часто на обучающих блогах или в каких либо демонстрациях требуется изображение поделить на сектора различного цвета, чтобы акцентировать внимание аудитории на том или ином сигменте картинки. Некоторые редакторы имеют для этого специальные инструменты (например, подсветка области в FastStone Capture), а сегодня рассмотрим способ ручной разметки изображения (скрина) в Adobe Photoshop.

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

Результат:

Исходник (снимок сделан со страницы site.yandex.ru):

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

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

Инструмент называется Rectangle Tool или Rounded Rectangle Tool. Оба являются "начертательными" прямоугольниками, только у второго закруглены края и есть возможность указать этот радиус.

Разметим скриншот страницы о компании Яндекс (company.yandex.ru):

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

Теперь в Layers играемся с Opacity и Fill, чтобы достигнуть эффекта прозрачности:

Собственно, на этом можно и закончить, сведя слои в Layers - Flatten Image, после чего добавить немного контраста (чтобы чёрные оттенки стали чёрными), и размеченный скриншот готов.

Ссылка на файл со слоями https://googledrive.com/host/0B3pzN9xjUsmqVjZCcllIOXRmWXc/gjk.psd

По вкусу (на правах бонуса)...
Добавляем рамки к областям через эффекты слоя (Layer-Layer Style):

Размываем всё, что не нужно, инвертируя выделение:

Как сделать скриншот в Windows за пару кликов

2014-05-14T12:17:00.004-07:00

В Windows 7 по аналогии с Windows XP и ранними версиями создание любых скриншотов реализовано прямолинейно и примитивно по схеме "нажал кнопку" (в этом цикле прозрачно создаётся полный снимок экрана и копируется в буфер обмена), вставил во встроенный редактор и сохранил в файл.

В данном случае в роли встроенного редактора выступает родной Paint, который имеет достаточно инструментов для промежуточного редактирования: написание текстом, ручное рисование (фигуры, подчёркивание, ластик и т.д.).

Ещё один альтернативный способ создания снимков экрана с помощью встроенной программы Ножницы. Это самый натуральный скриншотер:

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

Скриншот, сделанный через ручное выделение с помощью ножниц:

Скриншот рабочего стола Windows без ярлыков

2014-05-13T10:47:00.003-07:00

Старая уловка - сделать снимок рабочего стола, разом убрав все ярлыки (иконки, пиктограммы) в Windows 7. Достигается этот эффект при помощи контекстного меню (правая кнопка мыши), опции "Вид" и снятия галки "Отображать значки с рабочего стола". После чего жмём на клавиатуре PrintScreen и вставляем из буфера в Paint с последующим сохранением в png.

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

Было:

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

Стало:

Cкриншот в браузере Safari

2014-05-11T12:14:00.001-07:00

Для любителей продукции Apple и Mac, её стайла, дизайна и всех сопутствующих плюшек есть один интересный проект под названием Сафаризатор. Его назначение - помещать изображения в макет браузера Safari.

Вот как это выглядит:

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

Сервис работает очень просто: нажимаете большую синюю кнопку "загрузить", указываете предварительно подготовленный скриншот и получаете результат:

Особенно внимательные посетители заметят маленькую ссылку "настройки":

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

Ссылка на Сафаризатор: safarizator.ru.

Похожие сервисы:
Пиктофон - картинка в макете телефона

Похожие статьи:
Как поместить изображение в макет или рамку

SSmaker - программа для создания скриншотов

2014-05-10T10:42:00.000-07:00

Сегодня обсудим один достаточно интересный сервис с немного странным в сокращении названием - SSmaker. Это и и сайт и хостинг скринов и даже online-инструмент для снятия скриншотов с веб-страниц.

SSmaker - аналог Яндекс Диска и Joxi. Саму программу можно бесплатно скачать с официального сайта, к сожалению, выложены сборки только под Windows. Зато предусмотрена портативная версия клиента.

SSmaker, как и положено, поселяется в трее Windows, причём будет стартовать вместе с рабочим столом. По умолчанию сразу перехватывает кнопку PrintScreen (это можно изменить в настройках). Все действия производятся либо посредством горячих клавиш, либо контектстно (через правую кнопку мыши):

Все базовые операции со снимками экрана...

снимок активного окна
веб-страницы
снимок всего экрана

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

Настройки SSmaker:

Очень удачное решение - все настройки данного сервиса сосредоточить в одном окне.

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

Интересно реализован сам процесс снимка с предварительной подсказкой и даже со звуковым сигналом:

Для отправки файла на сервер SSmaker необходима регистрация и авторизации в этом сервисе. Обратите внимание, что "отправка в редактор" производится вручную через комбинацию горячих клавиш.

Редактор SSmaker внушает уважение, особенно пунктирные стрелки:

По своему функционалу он очень похож на редактор Joxi, правда зрительно функций несколько меньше.

Краткий перечень инструмент редактора SSmaker:

Рисование фигурами
Размытие
Работа с текстом
Рисование регулируемых стрелок и линий
Свободное (от руки) рисование

Прямо из редактора можно сохранить к себе на жёсткий диск, либо поделиться в интернете.

Пример скриншота, сделанного с помощью программы SSmaker:

Попробовать этот скриншотер можно, скачав программу с официального сайта ssmaker.ru.
Рекомендую почитать красиво свёрстанную документацию по основным функциям SSmaker.

Создаем скриншоты при помощи Joxi

2014-05-08T13:28:00.001-07:00

Joxy - очень популярный web-сервис и софт-клиент, заточенные для работы со скриншотами. То есть, это хостинг и редактор в одном флаконе. Назначение - максимально быстро при помощи интуитивно понятного интерфейса создавать скрины и делиться ими на сайтах, форумах, соцсетях и т.д.
Сам клиент (программа) Joxy - кроссплатформенный: на сайте выложены пакеты под Win, Mac и популярные версии Linux. Одна из притягательных сторон Joxy - это лаконичность оформления.

Rpm пакет Joxy для Fedora

Весит софт Joxy порядка 16-20 Мб, проблем с установкой не возникает. Ниже я опишу, как работает Joxy и стоит ли этим сервисом пользоваться.

После установки в Win7 и регистрации с авторизацией клиент поселяется в трее:

По нажатии на правую кнопку мыши появляется системное меню программы. Левая кнопка мыши сразу включает быстрый захват области.

После захвата экрана запускается встроенный редактор изображения:

В нём полный "джентельменский" набор:

работа с текстом
стрелки и нумерация
выделения прямоугольником и эллипсом
затемнение вне выделенной области
размытие внутри выделенной области

Разработчики ответственно сделали регулировки цвета и масштаба объектов в виде удобных и наглядных ползунков.

Затем снимок отправляется на сервер Joxy и появляется небольшое всплывающее окно:

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

Свои скриншоты (в настройках есть возможность продублировать эту функцию, указав папку сохранения на жёстком диске.) можно посмотреть в Истории, либо в самой админке на сайте http://joxi.ru/home. Для публикации скриншотов на форумах даже bb-коды предусмотрены:

В Joxy очень серьёзно реализованы горячие клавиши, которые используются даже при шаринге скринов в соцсетях:

И хотя сервис, на момент написания заметки, всё ещё beta, впечатления от скорости работы, дизайна и юзабилити в целом - очень приятное. По всей видимости Joxy - это то, чего не доделали разработчики Яндекса в своём Диске.
Приятная неожиданность: Joxy после установки не перехватывает действие клавиши PrinScreen, чем грешат многие программы скриншотинга.

Размер дискового пространства Joxy - 1 Gb.

Скачать программу для создания скриншотов и ознакомиться в целом с этим сервисом можно на сайте joxi.ru.

Дополнительно:
База знаний Joxy

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

2014-05-07T12:51:00.001-07:00

Скриншоты с сайтов можно снимать разными способами: через встроенные средства Windows, через расширения браузеров, посредством фоторедакторов. Однако есть и специальные web-сервисы, которые умеют генерировать актуальные снимки страниц, включая мобильные версии сайтов. Причём, в отличии от "ручных" средств, они могут снимать страницы сайтов целиком и полностью, не взирая на их высоту.

Например, скриншот мобильной версии этого сайта:

Или полный вид web-страницы со статьёй этого блога:

Всё это легко сделать с помощью специального сервиса www.screenshotmachine.com.

Для этого надо на главной странице ввести ссылку сайта и выбрать соответствующее разрешение страницы, затем нажать Start Capture:

И появившуюся, спустя некоторое время, зелёную кнопку Download:

Пример полновесного скриншота с блога Google Russia (размер 7 Mb).

Отражение на картинке при помощи digiP Reflection

2014-05-05T12:01:00.000-07:00

Ещё одна маленькая тулза для создания зеркального отражения на фотографии, скриншоте, картинке - digiP Reflection. Весит она всего 1.5 Мб, работает под Windows и бесплатная.

Результат:

Настроек в программе мало, он они есть: можно менять позицию отражения (слева, справа, вверху, внизу), и есть пятиступенчатая прозрачность отражения:

Дополнительно можно изменить цвет заднего фона и применить эффект Wave (искажения воды).

Скачать digiP Reflection можно с официального сайта.

Статьи по теме:
Отражения и перспектива при помощи screenie
Как сделать отражение в Adobe Photoshop
Лучшее для скриншотов от FastStone Capture

Лучшее для скриншотов от FastStone Capture

2014-05-04T12:31:00.001-07:00

На компьютере или ноутбуке под управлением ОС Windows очень удобно делать скриншоты при помощи программы FastStone Capture. Это коммерческий софт, но он стоит своих денег, если целью стоит сэкономить время и оптимизировать ручной труд по вёрстке статей или документов.

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

1. Широкие возможности по захвату различных снимков экрана:

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

2. Пошаговое соединение изображений в одну линию (Join Images Side by Side). Очень полезная опция для блоггеров, у кого в статьях много однотипных изображений или пошаговых руководств в формате фото:

Похожая функция есть в Picasa - создание коллажей.

3. Создание отражение и перспективы на скриншоте. Сложный и красивый эффект достигается регулировками всего нескольких ползунков:

Найти эффект можно в режиме редактирования скриншота (FastStone Editor) в Effects-Reflection.
Создание отражения вручную описано в этой статье.

4. Подсветка элементов снимка экрана:

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

Доступно в режиме Draw (редактор FastStone Draw) - инструмент Rectangle Highlighter.

5. Рисование различных регулируемых линий и стрелок, а так же инструмент нумерации:

Всё это доступно в инструментах из режима Draw. Стрелки - неизменный атрибут различных визуальных руководств для обозначения последовательности действий.

6. Вставка изображений в скриншот. Очень востребованная опция. Позволяет экспериментировать с простейшими коллажами без привлечения "тяжёлой техники а-ля фотошоп".

При правильном подходе можно сообразить неплохой образец инфографики.

Называется данный инструмент Insert Image и находится в панели инструментов режима Draw.

7. Эффект "прожектор" из режима Editor. Это дословный перевод быстрого инструмента затемнения всего, что находится вне выделения. Таким образом на скриншоте остаётся только нужная информация, остальная его часть затемнена и размыта. Все операции регулируются.

Находится данный эффект в Effects-Spotlight.

8. Границы снимка экрана и водяной знак из режима Editor.
Популярная методика у некоторых блоггеров - рисовать на скриншотах рваные края (рельефные границы). FastStone Editor это умеет эффектом Edge/Watermark:

Тут есть и обводка и тени, глубина, размытие, величина.
В качестве водяного знака программа предлагает использовать заранее приготовленный логотип.
Находится данный эффект в Effects-Edge/Watermark. Похожий эффект есть у Clipular и Screen Capture.

9. Работа с текстом. Это тоже инструмент в Draw (Text). Он нужен для того, чтобы наносить на скриншоты различного рода надписи. Причём текст на скринах может сопровождаться какой-нибудь областью с регулируемой прозрачностью, так и без неё. Текст полностью настраиваем (гарнитура, кегль, тени, стиль, выравнивание, цвет):

10. Убрать фон или автопрозрачность задника картинки (Make Background Trasparent - сделать задний фон прозрачным). Данная функция полностью убирает фон с однотонных изображений (скринов). Делает конечно грубо, но и точность в данных процедурах далеко не всегда нужна, особенно, когда объёмы большие или время поджимает:

Технически это сопоставимо с работой с Волшебного Ластика из Adobe Photoshop.

FastStone Capture для ознакомления можно скачать бесплатно с триалом на 30 дней.
Официальный сайт: www.faststone.org.

Отражения и перспектива при помощи screenie

2014-05-03T12:56:00.000-07:00

Возвращаемся к вопросу "как сделать отражение у картинки". В предыдущей статье на эту тему я описал ручной способ создания зеркального отражения, но есть и автоматизированный. Сделать это легко может старенькая утилита screenie, которую я знал ещё по линуксу и работала она на qt.

К счастью, разработчики вынесли на паблик версию для Windows, уже скомпилированную и запакованную в exe-файл. Остаётся только скачать и запустить.

По умолчанию screenie в Screenshot Composer выдаёт аж целых три лота для картинок. Просто перетаскиваете мышью картинки каждую в свой лот и получаете вот такой размахай:

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

У каждой картинки по бокам учтены независимые регулировки сдвига (Offset), угла отображения (Angle) и дистанции (Distance, перспектива, приближение и удаление). У средней - только угол.

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

Сохраняет утилита sceenie результат в png (щёлкнуть по главному изображению правой клавишей мыши).

Пример на скриншотах для презентации статей:

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

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

Пример (отражение и перспектива для изображения линейки продуктов Apple):

Скриншот сделан с этой страницы. Права на изображение принадлежат компании Apple.

Скачать screenie можно с официальной страницы проекта.

Похожие статьи:
Лучшее для скриншотов от FastStone Capture

Как поместить логотип на скриншот

2014-04-30T12:29:00.003-07:00

Логотипы на скриншотах - технически тоже самое, что и водяной знак, то есть дополнительный слой поверх изображения. Часто требуется на корпоративных презентациях и блогах, чтобы подчеркнуть бренд на графике. Проще всего их делать в хороших фоторедакторах вроде Gimp или Adobe Photoshop, это гораздо быстрее, чем искать специализированный софт.

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

Скриншот страницы Google:

Предполагаемый логотип (скрин изображения из выдачи Google по картинкам):

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

И переношу на основной скриншот, уменьшив за боковые маркеры перенесённую картинку лого в размерах:

Теперь к логотипу можно применить любой эффект, но я люблю эффекты слоя (Layer-Layer Style):

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

Результат (с добавленным текстом):

Похожая статья:
Как сделать водяной знак на картинке

Clipular - умный редактор скриншотов

2014-04-29T13:25:00.001-07:00

Clipular - весьма интересное расширение для скриншотов в Chrome. Это и редактор и хостинг одновременно. Всё построено вокруг веб-сервиса, поэтому после установки необходимо авторизоваться при помощи аккаута Google или Facebook, чтобы получить доступ в личный кабинет.

Перед чтением советую заглянуть в заметку про Screen Capture.
Само расширение добавляет пиктограммку рядом с адресной строкой браузера:

После авторизации доступно нехитрое меню:

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

Камера - захват всей страницы. После нажатия на кнопку изображение тоже отправляется в кабинет.

Каждый скриншот в кабинете имеет свои собственные настройки:

Тут и редактирование, и поделиться, и скачать, и отправить на email, и удалить файл. Все базовые функции.

По щелчку на Annotate вызывается редактор:

Все парой кликов легко превратить скриншот страницы Google в кадр из старой фотоплёнки:

Или добавить надпись:

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

Дополнительный приятный бонус - возможна синхронизация в Диском Google.

Установить расширение Clipular в браузер Chrome
Clipular - личный кабинет

Дизайн скриншотов в стиле Google - Фокус

2014-04-28T11:59:00.000-07:00

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

Образец от Google:

Скриншот из сообщества G+ в качестве исходника:

Обратите внимание, что гугловский скриншот состоит из двух областей:

область выделения - стандартная и чёткая, с завышенной контрастностью и даже немного темнее
область за выделением - размытая, осветлённая, скорее всего наложена белая заливка

Само выделение имеет серый кант и белую обводку.

Результат:

В нём я немного добавил отсебятины - увеличил белую область фокусного круга.

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

На всех скриншотах будет присутствовать окошко Layers, чтобы продемонстрировать кол-во слоёв в документе.
Сначала рисуем выделением (как это сделать ссылки выше) стандартный эллиптический круг:

Это выделение нужно сохранить, делаем Save Selection.

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

Выделяем его в окошке Layers и загружаем сохранённое выделение Load Selection:

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

Применяем к белому кругу эффекты слоя:

В ссылках на статьи (см. выше) эти эффекты подробно описаны. Они создадут у кругляша необходимые размытые тени. С параметрами тени желательно поиграться.

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

Что получается? Мы нашему будущему фокусу возвращаем содержимое.

Теперь возвращаемся к самому первому слою, активируем его, делаем видимым, загружаем сохранённое выделение, затем инвертируем:

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

Это даёт эффект мягкого фокуса без применения фильтров семейства Blur.

Возвращаемся к самому верхнему слою - содержимому нашего фокусного круга, добавляем ему чуток контрастности и немного (-8 единиц) уменьшим яркость, чтобы он стал чуть темнее белого задника. Можно даже туда немного blue (синего) добавить, как на гугловском скриншоте, но я не стал:

На этом скрине видна история всех действий. Так что завершающим аккордом станет сведение слоёв - Flatten Image и сохранение файла в обычный веб-формат скриншотов (png или jpeg).

Базовый скриншот взят с этой страницы. Все права на него принадлежат компании Google.

Gimp - регулировка яркости и контрастности

2014-04-27T12:58:00.000-07:00

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

Работа с цветом в Gimp

В редакторе Gimp базовая регулировка сделана достаточно мудро: все нужные опции находятся в меню Цвет.
Рассмотрим базовую регулировку на примете вот такого испорченного (очень тёмный) скриншота карт Google.

Исходник:

Инструмент Яркость-Контраст

Содержит в себе два одноимённых ползунка для комплексного воздействия на изображение.

Тут же, как и в каждом описанном из инструментов, Gimp поддерживает создание профилей для автоматизации рутинных операций. А кнопка "Изменить эти параметры как уровни" перебросит в инструмент Уровни для более точной корректировки цвета по каналам (RGB).

Инструмент Уровни

Согласно хелпу этот инструмент предназначен для:

осветления и затемнения изображений, а также для изменения контраста и коррекции преобладающих оттенков

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

Инструмент Кривые

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

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

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

Интересная опция - рисование кривой от руки:

Инструмент Постеризация

Постеризация - это насильственное ограничение количества цветов у изображения. Диапазон: от двух цветов до 256-ти.

Данный инструмент пригодится в случае, когда нужно подготовить картинки для какой-либо документации, добиться их одинаковости, то есть когда радуга цветов совершенно не требуется.

Инструмент Цветовой баланс

Базовый инструмент по работе с цветом изображений в Gimp. Фактически это работа с каналами, как в Уровнях, только на ползунках и проще. С его помощью можно, к примеру, убрать красный и зелёный с рисунка, и добавить синего с жёлтым оттенка.

Регулировка производится в тенях, полутонах и в светлом.

Инструмент Тон-Насыщенность

Ещё один базовый инструмент всех продвинутых фоторедакторов. В нём нам доступна работа с множеством цветов как сразу, так и по отдельности, но самое главное - это регулировка насыщенности и тонировки.

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

Возьмём стандартную стрелку, скачанную из интернета:

И при помощи двух вышеописанных ползунков сделаем её, скажем, зелёной:

Или ярко-красной:

Полезные ссылки:
Gimp руководство пользователя

Дизайн скриншотов в стиле Яндекс

2014-04-26T12:16:00.003-07:00

Сегодня скопируем стиль оформления скриншотов (эффект лупы) у Яндекса (учимся у лучших, а кто у нас лучше Яндекса и Google?).
На самом деле обе компании соревнуются в копировании концепта друг у друга, поэтому "яндексовский" вариант не так уж и сильно отличается от "гугловского". Все действия производятся в фоторедакторе Adobe Photoshop. В пошаговом уроке показаны два варианта получения границы круга методом эллиптического выделения и рисованием эллиптического объекта.

Посмотрим на донора.

Исходник (на чём будем работать):

Скриншот я сделал с обычной страницы выдачи Яндекса, лишние детали убрал при помощи выделения, пипетки (взял соседний цвет) и кисточки (закрасил соседним цветом).

Увеличивать (то есть "делать лупу") будем первое объявление, поэтому его нужно скопировать с этого скриншота в отдельный слой или файл:

Взято из демонстрационной страницы РСЯ. Права на изображения принадлежат компании Яндекс. Реклама, отражённая на скриншоте является только случайным образцом, само изображение не используется в рекламных целях.

Теперь на главном скриншоте, где было рекламное объявление, нужно нарисовать красный круг. Для него создаём новый слой в окошке Window-Layers и рисуем в нём (Ellipse Tool, клавиша U), зажав Shift, красный круг:

Затем переключаемся на Стрелку (инструмент Move Tool, клавиша V), и зажав alt, клонируем круг, при этом автоматически он создаст третий слой:

Переключаемся на этот слой и убиваем в нём цвет Яркостью/Контрастностью:

Вручную переносим белый круг на красный и чуть уменьшаем, чтобы получилась красная граница:

Сводим верхний слой с нижним через Layer-Merge Down (Ctrl-E). При этом оба круга превратятся в один слой, то есть в белый круг с красным ободом.

При помощи Magic Eraser Tool (клавиша Е) щёлкаем по белой обласи круга, то есть вырезаем его середину и делаем прозрачной:

Теперь при помощи Crop Tool (кадрирование, клавиша C) расширяем произвольно область скриншота, создаём новый слой и рисуем в нём эллиптическим выделением круг (через Shift):

Это выделение надо сохранить через Select-Save selection. Границы выделения можно обозначить направляющими, вытянув их из верхней или боковой линейки рабочего стола фотошопа:

Именно в область, обозначенную линейками мы перенесём объявление, которое "отложили в сторону" на начальном этапе и подгоним вручную за маркеры:

При этом выделение исчезнет, но на него уже наплевать, поскольку оно сохранено. Остаётся сделать Select-Load Selection (выбрать в Channel своё объявление), то есть загрузить выделение поверх этого слоя (вставленного объявления):

Затем инвертировать этой выделение через Select-Invers и нафиг удалить всё, нажав клавишу Delete:

Затем снова инвертируем выделение Select-Invers, переключаемся на инструмент эллиптического выделения (клавиша U) и правой кнопкой щёлкаем внутри круга:

В данном меню нас интересует Stroke, с помощью которого можно организовать выделение цветом, поставив в настройке толщину, скажем, 6 px:

Не забудьте снять выделение (Select-Deselect).

Теперь мы получили два красных круга, причём один с увеличенной областью. Круги, пока слои не сведены, можно двигать по всему скриншоту, как хочется. Для наглядности я сделал второй круг огромным.

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

Для пущего эффекта я эту линю вручную сузил возле малого круга через Edit-Transform-Skew.

В конечном итоге сводим все слои (Layer-Flatten Image) и кадрируем получившийся результат до нормальных размеров.

Результат:

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

Пример (лёгкое размытие основного окна + средняя прозрачность объявления):

Похожие статьи:
Дизайн скриншотов в стиле Google (в ней, кстати, описан способ добавления тени к выделению).

Инструменты выделения Marquee Tools и меню Select

2014-04-25T13:32:00.002-07:00

Зачастую на скриншотах при редактировании в фоторедакторе нужно выделить какую-либо область. В Adobe Photoshop, да и в других продвинутых редакторах, для этого служат инструменты инструменты выделения.

Инструменты выделения

Выделением объектов в фотошопе заведуют Marquee Tools:

В тулбаре вы можете увидеть две самых главных тулзы (гор. клавиша M):

прямоугольное выделение Rectangular
эллиптическое выделение Elleptical

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

Сверху на панели параметры выделения (слева направо):

обычное
сложение (к одному выделению прибавляется другое)
вычитание (из одного выделение вычитается другое)
разница между выделениями

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

Вычтем из эллиптического выделения прямоугольное и получим такой результат:

Получим разницу между эллипсом и прямоугольником в выделении:

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

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

Демонстрация
Сотрём экран у мобильника при помощи обычного выделения с растушёвкой края в 2 px:

Или обработаем эту область, убрав насыщенность до чёрно-белого состояния (Image-Adjustmets-Hue/Saturation):

Исходное изображение взято с этой страницы. Все права на него принадлежат компании Google.

Инверсия выделения

Любое выделение можно инвертировать. То есть в этом случае обрабатываться область будет противоположная той, что была внутри выделения.
Чтобы инвертировать выделение, нужно выбрать Select-Invers, либо нажать Schift-Strl-I.

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

Затем инвертируем выделение и применяем очень сильное размытие (Filter-Blur):

Остальные важные пункты в базовом меню Select:

All (выделить всё) Crtl-A
Deselect (снять все выделения) Ctrl-D
Reselect (вернуть последнее выделение) - Shift-Ctrl-D
Transform Selection (трансформация выделения - можно за боковые маркеры точно подогнать под необходимый размер)
Save Selection (сохранить выделение)
Load Selection (загрузить выделение)

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

Lightshot на примере Яндекс Браузера

2014-04-24T12:03:00.000-07:00

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

Lightshot по умолчанию поставляется в последних версиях Яндекс Браузера. Именно на примере этого браузера и посмотрим, как работает данное расширение.

В активированном виде Lightshot классически располагает пиктограммку запуска возле адресной строки браузера:

При нажатии на неё Lightshot предлагает выделить захватываемую область:

И сразу отображает инструменты для редактирования:

рисование карандашом и маркером (разница в толщине и интенсивности цвета)
рисование прямоугольника для выделения
текст (без настроек)
прямая линия стрелка

Любое действие можно отменить.

Пример разметки скриншота при помощи Lightshot:

Возможности расширения Lightshot:

поиск похожих изображений в Google+
быстрая шара скриншотов через prntscr.com с автосозданием быстрой ссылки
поделиться в социальных сетях (Twitter, FaceBook, VK и Pinterest)
копирование области в буфер обмена
печать
и конечно сохранение результата на жёсткий диск

Добавить в Chrome расширение Lightshot