Мануалы

Как сделать скриншот сайта за 3 минуты для портфолио

Как сделать скриншот сайта за 3 минуты для портфолио

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

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

Я предлагаю очень простой и действенный алгоритм создания скриншота. Для этого нам понадобится: Firefox, аддоны Pearl Crescent Page Saver Basic и Web Developer (по желанию). А также замечательный сервис http://www.browsercover.me/

Хочу обратить внимание mac-юзеров. Ранее, плагин Pearl Crescent Page Saver Basic был доступен только для PC, а на данный момент версия 2.6 полностью поддерживает Mac Firefox.

Итак, приступим (если вы уже счастливый обладатель Firefox и Web Developer, то можно перейти к п.5):

1. Если не установлен браузер Firefox, то установка его займет совсем немного времени.

2. Ставим аддон Pearl Crescent Page Saver Basic и Web Developer (перегружаемся).

3. Теперь заходим на сайт, скриншот которого нам надо сделать.

4. В этом месте в дело вступает не обязательный аддон Web Developer (правда, если вы серьезно занимаетесь вэб-строительством, то он он незаменим). Он необходим, чтобы получить окно брайзера по заданному размеру. Заходим в меню Resize выбираем один из заготовленных размеров.

Если у нас нет заготовленных размеров экрана, то делаем с помощью кнопки Edit Resize Dimentions. На мой взгляд лучше всего подойдут 800x600, 1024x78, 1280x1024.

5. Теперь мы получили браузер с определенными размера экрана и можно смело переходить к созданию самих снимков экрана.

В статус баре после перезагрузки у нас появилась иконка с фотоаппаратом. Нажимаем на стрелочку вниз и из выпадающего меню выбираем Save Image of Entire Page... (если нам надо сделать снимок по всей высоте сайта) или Save Image of Visible Portision...(если нам надо сделать скрин только видимой области). Сохраняем файл в формате PNG. Первый скриншот готов.

6. Заходим на сайт http://www.browsercover.me/ Загружаем свеженький скриншот с помощью кнопки Choose your web site image. Далее настраиваем и вписываем настройки по своей задаче. Так как у нас уже сам скриншот с нужными нам размерами, то размер оставляем оригинальные (Original image size). После всех настроек нажимаем "Create a coverd preview". Сохраняем файлик рядом с основным снимком.
7. Вот и все. Скриншоты готовы.

Без подготовительных действий, скриншоты создаются очень быстро.
Если кто-то подскажет как таким же легким способом можно создавать скрины с помощью Safari, Chrome, Opera (IE  не предлагать :), буду рад дополнить мануал.

Наверх