Як зробити скріншот сайту за 3 хвилини для портфоліо
Рано чи пізно будь-якому веб-розробнику доводиться робити скріншоти своїх сайтів. У мережі є маса корисних мінлива з описами різних способів: простих і не дуже. Але коли кількість сайтів перевалює за 10 (а адже розробник хоче показати різні види сторінок, тобто на один сайт припадає по 3 і більше скриншота), то швидкість створення зображень дуже важлива.
Наше завдання полягає в тому, щоб зробити два скріншота для однієї сторінки сайту. До речі, на цю тему багато суперечок і розбіжностей, як найкраще показувати сайти в портфоліо. Для себе я зупинився на такому наборі скроневої: вид сайт без вікна браузера для повнорозмірного виду і другий - превью цього виду з рамкою браузера.
Хочу звернути увагу mac-юзерів. Раніше, плагін Pearl Crescent Page Saver Basic був доступний тільки для PC, а на даний момент версія 2.6 повністю підтримує Mac Firefox.
Отже, приступимо (якщо ви вже щасливий володар Firefox і Web Developer, то можна перейти до п.5):
1. Якщо не встановлено браузер Firefox. то установка його займе зовсім небагато часу.
3. Тепер заходимо на сайт, скріншот якого нам треба зробити.
4. У цьому місці в справу вступає не обов'язковий аддон Web Developer (правда, якщо ви серйозно займаєтеся веб-будівництвом, то він він незамінний). Він необхідний, щоб отримати вікно брайзер за заданим розміром. Заходимо в меню Resize вибираємо один із заготовлених розмірів.
Якщо у нас немає заготовлених розмірів екрану, то робимо за допомогою кнопки Edit Resize Dimentions. На мій погляд найкраще підійдуть 800x600, 1024x78, 1280x1024.
5. Тепер ми отримали браузер з певними розміру екрану і можна сміливо переходити до створення самих знімків екрана.
У статус барі після перезавантаження у нас з'явилася ікона з фотоапаратом. Натискаємо на стрілочку вниз і з меню, що випадає вибираємо Save Image of Entire Page. (Якщо нам треба зробити знімок по всій висоті сайту) або Save Image of Visible Portision. (Якщо нам треба зробити скрін тільки видимої області). Зберігаємо файл у форматі PNG. Перший скріншот готовий.
Без підготовчих дій, скріншоти створюються дуже швидко.
Якщо хтось підкаже як таким же легким способом можна створювати скріни за допомогою Safari, Chrome, Opera (IE не пропонувати :), буду радий доповнити мануал.