Создание скриншотов для своего сайта
10-05-2011Reading time ~ 6 min.Софт 16708
Для создания скриншотов (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, то у вас будет доступ к изображениям прямо из админки. В последней версии системы появилась возможность пересоздавать миниатюры и превьюшки по заданным параметрам с помощью одной кнопки.
Таким образом можно делать миниатюры и для скриншотов, скажем если картинка не помещается в текстовом поле сайта или самих изображений очень много. В этом случае использование миниатюр будет хорошим решением.
Ух, даже и не знаю как благодарить (разве что решиться, и следующий небольшой проектик сделать на MaxSite CMS). Обалденный инструмент. Сразу выкинул несколько ненужных софтин.
Спасибо, в общем.
Тоже использовал сначала Clip2Net, но частые сбои при загрузке изображений отвадили меня от этой программы (может быть временно). Сейчас использую Gyazo. Тоже не бог весть что, но быстрая. А мне достаточно одного скрина, редактор не нужен.
Спасибо за обзор.
Использую PicPick уже давно, отличная программа. Очень помогает при верстке.
спс)