Создание скриншотов для своего сайта

10-05-2011Время чтения ~ 6 мин.Софт 16600

Для создания скриншотов (screenshot - снимок экрана) существует масса программ. Более того в Windows можно сделать скриншот полностью стандартными средствами. Самый простой - нажать клавишу PrtSc, затем открыть Paint и выбрать «Вставить». Ещё в Windows есть инструмент «Ножницы», который позволяет делать скриншот выбранной области экрана.

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

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

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

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

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

Постепенно я понял что именно мне требуется от screenshot-программы: максимальная автоматизация процесса. В идеале - выделил область, отредактировал, нажал «Отправить» - получил ссылку на изображение в буфере обмена.

Поиски привели на несколько Интернет-сервисов, предлагающие подобные услуги. Я выбрал clip2net.com за русскоязычность и удобство. Схема работы clip2net.com очень простая.

• Регистрируемся на сайте (можно в принципе и без регистрации, но возможностей будет меньше).
• Скачиваем, устанавливаем и запускаем программу.
• Кликаем на иконку программы в трее и выбираем область на экране.
• После открывается несложный графический редактор, где можно сделать необходимые операции со скриншотом.
• Нажимаем кнопку «Готово» и файл отправляется на сервер clip2net.com, а в буфер обмена помещается адрес картинки.

Дальше вставляем адрес уже по своему усмотрению.

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

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

Исходя из этого возникает еще одно требование - возможность загружать изображения на свой сервер по FTP.

Сервис clip2net как раз обладает всеми этим возможностями, и всё казалось бы было замечательно, кроме нескольких «но».

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

Но больше всего меня раздражала невозможность перемещать накладываемые элементы (стрелки, текст, блоки и т.п.). Там, где требовалась повышенная точность (до 1-4px), необходимо было мышью точно попадать в цель с первого раза...

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

Что же касается загрузки на свой сервер, то clip2net предоставляет такую возможность в т.н. профессиональном пакете. Стоит удовольствие не очень дорого: от 4.95$ в месяц до 29.95$ в год. Для теста я купил pro-вариант на месяц и результат меня очень порадовал: всё работало как часы.

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

Когда закончилось оплаченное время, я решил, что всё-таки стоит поискать другие альтернативы. В принципе 30$ в год небольшая сумма, но примитивный графический редактор сделал своё «черное дело».

Следующей программой, которая мне попалась в руки - FastStone Capture от разработчиков отличного просмотрщика FastStone Image Viewer.

Программа FastStone Capture платная (19.95$), но имеет 30-дневный trial-период. Принцип работы программы аналогичен clip2net: после захвата области экрана попадаем в несложный редактор. В нём есть несколько уникальных возможностей, вроде создания красивых бордюров, но основной инструмент будет конечно режим Draw или Paint. В первом варианте графический редактор предоставляет базовый набор инструментов. Мне например очень нравится «Line Highlighter» и «Rectangle Highlighter», который создают полупрозрачные линии и блоки.

В режиме «Paint» изображение открывается в стандартном виндовском Paint, который предоставляет также довольно приличный набор для редактирования.

После всех операций нажимается кнопка «Send to Web(FTP)» и адрес копируется в буфер обмена. Кроме того можно настроить программу так, чтобы после отправки изображение открывалось в браузере и автосохранялось в указанной папке на компьютере.

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

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

Графический редактор PicPick имеет аля-Paint интерфейс с базовыми инструментами для редактирования, которых более чем достаточно для работы с изображениями. Очень удобно в PicPick сделано добавление фигур, будь то блоки, стрелки или текст - их можно перемещать, менять, а для принятия изменений нажимаем кнопку «Совместить».  

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

Работа с FTP также на высоком уровне - никаких замечаний не обнаружено.

Теперь расскажу как настраивать FTP. Во всех программах схема примерно одинакова.

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

Нужно найти в панели управления что-то вроде «FTP-аккаунт» - «Добавить новый».

Дальше указать логин, пароль и каталог относительно сайта.

Поскольку у нас используется MaxSite CMS, то делайте каталог внутри uploads - это позволит просматривать скриншоты прямо из админки.

После всех этих приготовлений, добавляем данные ftp в программу.

Кнопка «Тест» позволит проверить корректность введенных данных.

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

В случае, если у вас возникли проблемы с создание ftp-аккаунта, то следует обратиться на сайт хостера: обычно в разделе помощи указывается точная последовательность.

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

Если вы сделали каталог для скриншотов в uploads, то у вас будет доступ к изображениям прямо из админки. В последней версии системы появилась возможность пересоздавать миниатюры и превьюшки по заданным параметрам с помощью одной кнопки.

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