Делаем качественный скриншот
В ходе работы над проектом СофтЛист мне часто приходится посещать сайты, посвященные программному обеспечению. Среди них попадаются самые разные: от скромных домашних страничек программистов-одиночек до солидных сайтов shareware-компаний.
Почти на каждом из таких сайтов существует раздел «Скриншоты» («Screenshots»). Если кто не в курсе, то скриншот (дословно «снимок экрана») — это изображение-копия содержимого экрана компьютера. По скриншоту потенциальный пользователь программы может получить представление о ее внешнем виде.
Даже если дизайн сайта выполнен профессиональной студией, почти всегда скриншоты делают сами программисты — ведь новые версии программ выходят очень часто, и сделанные однажды скриншоты устаревают; приходится их время от времени обновлять. Естественно, у программистов есть гораздо более важные занятия, чем изучение тонкостей подготовки графики для WWW, но из-за этого качество публикуемых на софт-сайтах скриншотов сильно страдает: картинка то получается слишком большой и редкий пользователь дождется хотя бы половины ее загрузки, то оказывается размытой и выглядит плохо.
Однако скриншот — очень важная деталь для эффективного представления программного продукта в интернете. Потенциальному пользователю зачастую гораздо приятнее и интереснее познакомиться с внешним видом программы, чем изучать длинный список функциональных возможностей. Например, мне на СофтЛисте пришлось сделать возможность показа скриншотов к опубликованным в каталоге программам во многом из-за многочисленных просьб посетителей. Поэтому долго загружающийся или некрасивый скриншот действует на потенциального пользователя программы отталкивающе.
Эта заметка написана в помощь тем программистам, которые самостоятельно обновляют сайты своих продуктов. Здесь я расскажу о том, как сделать небольшой по объему и красиво выглядящий скриншот к программе. Этот материал будет также полезен тем, кто пишет о программном обеспечении — редакторам веб-обозрений, журналистам и вообще всем, кому приходится самостоятельно готовить иллюстрации к статьям о программах.
Да, сначала я хочу оговориться, что дальнейшие рекомендации относятся к процессу подготовки скриншотов только к программам, чей интерфейс выдержан в стиле оформления Windows-программ (стандартный вид окон и их элементов — заголовков, рамок, кнопок и т.п.). Подготовка скриншотов к программам, имеющим многокрасочный нестандартный интерфейс (например, к большим и сложным играм), принципиально мало чем отличается от обработки, скажем, полноцветных фотографий и оптимизации их для Web.
Сначала надо выбрать формат файла, в котором будет сохранен скриншот. Нет, конечно, о сохранении файла до того, как создана картинка, говорить рано, но выбор формата файла во многом определяет действия по ее созданию и обработке.
Очень многие дизайнеры совершают ошибку, сохраняя скриншоты в формате JPEG. Ведь интерфейс Windows (впрочем, как и интерфейсы Macintosh и графических оболочек Unix) построен на прямых линиях и довольно небольшом количестве цветов (не более 256, но обычно — от 8 до 32 цветов). То есть для сохранения изображения компьютерных интерфейсов идеально подходит формат GIF. Если же вы сохраните скриншот в формате JPEG, то в результате используемой в этом формате компрессии изображения прямые линии и надписи на картинке будут сильно размыты, и она приобретет неприглядный вид. Конечно, можно сохранить скриншот в JPEG и без сжатия, но тогда объем получившегося файла будет слишком большим.
Как вы знаете, объем графического файла (формата GIF — особенно) в первую очередь зависит от количества цветов и размеров сохраненной в нем картинки. Вам также, скорее всего, известно, что в графическом редакторе при обработке загруженного файла можно установить любое количество цветов и любое разрешение (эти параметры могут быть ограничены ресурсами компьютера и возможностями конкретной программы). Но незначительное ухудшение качества изображения (то же размытие линий и букв), почти незаметное при оптимизации фотографий, на скриншотах будет сразу бросаться в глаза — ведь все знают, как выглядит интерфейс Windows. Поэтому главная задача — сделать так, чтобы окно программы, с которого нужно сделать снимок, изначально содержало относительно небольшое количество цветов и при этом было нужного размера.
Что касается цветов, то в первую очередь нужно обратить внимание на такую деталь. В Windows 98 и более поздних версиях этой системы фон заголовков окон не сплошной, а градиентный (то есть в виде плавного перехода от одного цвета (синего) до другого (светло-голубого)). В этом переходе «участвуют» несколько миллионов цветов — так как действительно плавным такой градиент выглядит в режиме минимум 24 бит (2 с копейками миллиона цветов). Представляете, как сильно пострадает качество скриншота при его оптимизации до стандартных для формата GIF 256 цветов, не говоря уже о 16 цветах? И это притом, что никакой смысловой нагрузки этот градиент не несет — так, ненужное украшение.
Поэтому нужно открыть «Свойства экрана» Windows, выбрать закладку «Оформление» и установить для заголовка активного окна одинаковые «Цвет» и «Цвет 2». После этого миллионы цветов, присутствующие в окне программы, заменятся всего одним.
Кстати, если вы для оформления своей системы используете какую-либо специфическую тему (нестандартные цвета, шрифты), то в этом же окне установите стандартную схему оформления. Дело в том, что экзотический вид обычных элементов Windows (окон, кнопок и т.п.) может сбить с толку не очень опытных пользователей или просто помешать восприятию информации. Помнится, Евгений Козловский, ведя в Компьютерре рубрику «Огород Козловского», сопровождал свои статьи скриншотами, где для заголовков окон был выбран малочитабельный рукописный шрифт.
Далее, если программа, с которой вы снимаете скриншот, может показывать полноцветную графику (например, это вьювер картинок или видеоплейер), то позаботьтесь о том, чтобы в момент, когда вы делаете снимок экрана, в программу было загружено какое-нибудь не очень пестрое, с относительно небольшим количеством цветов изображение. Принцип тот же: чем меньше цветов — тем лучше.
Теперь — о размере окна программы. На первый взгляд, не нужно запариваться с этим: проще простого сделать скриншот, а потом в графическом редакторе уменьшить изображение до нужного размера. Но в данном случае (когда речь идет не об изображении вообще, а о скриншоте), налицо два больших минуса. Во-первых, уменьшение снимка экрана отрицательно сказывается на качестве восприятия информации пользователем. Ну разве можно понять что-либо из такого вот скриншота:
Во-вторых (и это самое неприятное), при масштабировании снимка экрана в графическом редакторе четкие линии оконного интерфейса Windows размываются, и теряется все преимущество формата GIF, который, как известно, лучше всего сжимает четкие и контрастные изображения. Например, этот маленький по размерам скриншот на диске занимает 11 килобайт — столько же, сколько и большой снимок окна «Свойства экрана» четырьмя абзацами выше.
Поэтому лучше всего изменить размеры окна «снимаемой» программы до нужных вам (с некоторыми окнами, например, окнами диалогов, это не удастся — так как они имеют неизменяемую границу). При этом не нужно стесняться «оставить за кадром» часть кнопочных панелей инструментов или уменьшить рабочее поле (там, где, например, в MS Word набирается текст) — главное, чтобы зрителю было понятно их функциональное назначение.
Иногда бывает так, что уменьшить размеры окна программы нельзя, так как его содержимое должно быть показано «во всей красе». Я постоянно сталкиваюсь с такой ситуацией при подготовке иллюстраций для материалов раздела «Обзоры» этого сайта. Тут ничего не поделаешь: такой скриншот приходится масштабировать в Photoshop и затем сохранять его в формате JPEG. Единственное, что радует — так как цветов в таких снимках экрана относительно немного, то можно применять высокий уровень сжатия JPEG (60%–70%) - снижение качества почти незаметно.
Теперь нужно сделать непосредственно сам скриншот — то есть изображение окна программы. Для этого нужно скопировать содержимое экрана компьютера в буфер обмена Windows.
Существует множество программ для создания скриншотов (одна из самых известных — HyperSnap DX). С их помощью можно скопировать содержимое экрана или его часть в буфер, отредактировать его и записать на диск. Лично я считаю, что все эти программы — от лукавого. Как говорится в старом анекдоте, «А руки зачем?!». Незачем скачивать, оплачивать, осваивать еще одну программу, когда все можно сделать с помощью трех уже имеющихся у вас инструментов: рук, Windows и графического редактора.
Итак, чтобы скопировать содержимое экрана компьютера в буфер обмена, нажмите клавишу PrintScreen. Если вам нужно скопировать только содержимое активного окна, нажмите комбинацию клавиш Alt+PrintScreen.
Осталось совсем немного. Вы переходите в графический редактор. У многих из них в меню «Edit» («Правка») есть функция «Paste As New Image» (Вставить как новое изображение). В Adobe Photoshop нужно сделать на 2 клика больше: создать новый файл (размеры для него будут автоматически предложены равные размерам изображения, находящегося в буфере обмена) и нажать Shift+Insert. В результате вы получите новый графический файл, содержащий сделанный вами снимок экрана.
Далее, если нужно, вы можете подредактировать картинку — например, выделить область изображения и скопировать ее в новый файл.
И, наконец, финальная стадия — сохранение файла. В зависимости от возможностей конкретного редактора, вам нужно выбрать цветовую палитру изображения. Поэкспериментируйте с палитрами 8, 16, 32, 64, 128, 256 цветов и остановитесь на той, при которой соотношение «качество картинки/объем файла» является оптимальным. После этого сохраните файл на диск в формате GIF — и качественный скриншот готов.


Поделиться статьей:
Акция: Закажи любой сайт до окончания акции и получи скидку + подбор семантического ядра + поисковую оптимизацию сайта Это позволит Вам получать еще больше трафика и соответственно клиентов из Интернета!
До конца акции осталось
0
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
|
Узнайте подробности акции у менеджеров компании по телефонам: 8-924-200-7194 г.Хабаровск 8-800-550-9899 Бесплатно по России (с 2:30 до 11:30 по Мск) |
Новые статьи и публикации
- 2022-05-18 » Анализ рынка интернет-маркетинга в РФ от Яндекс Дзен
- 2022-05-18 » Итоги развития рекламного рынка РФ за 2021 год по версии АКАР
- 2022-05-18 » Потребление мобильного трафика в Рунете достигло рекордных значений
- 2022-05-17 » Yappy, TenChat и другие. Обзор новых русских соцсетей и их возможностей
- 2022-05-17 » Реклама малого бизнеса. Разбор доступных каналов, инструментов аналитики и терминов
- 2022-05-16 » Зачем нужен счетчик [email protected] и как установить на сайт пиксель myTarget
- 2022-04-25 » Несмотря на отсутствие блокировки: в Youtube потеряли более 20% активных русскоязычных авторов
- 2022-04-25 » Чат-бот – что это такое
- 2022-04-19 » Комплексная услуга по разработке сайта или Интернет-магазина БЕСПЛАТНО!!!
- 2022-03-17 » Импорт большого дампа БД в OpenServer через консоль
- 2022-02-25 » Возможности и преимущества Google Analytics 4
- 2022-01-18 » Основные UX-тренды 2022 года
- 2021-12-24 » Как увеличить продажи перед Новым годом
- 2021-12-23 » Ключевые запросы − основа эффективного продвижения
- 2021-12-22 » 7 бесплатных сервисов с иконками и паттернами
- 2021-12-08 » Поиск и анализ сайтов конкурентов: для чего это нужно?
- 2021-10-04 » Разработка сайта: вредные советы для желающих платить больше и постоянно переделывать
- 2021-09-14 » Что такое редирект
- 2021-08-10 » Зерокодинг: особенности, преимущества, недостатки
- 2021-08-02 » Особенности оформления подвала сайта
- 2021-06-17 » Особенности SMM-продвижения для проектов B2B
- 2021-05-26 » Скликивание рекламы: как от него защититься?
- 2021-05-26 » Автостратегии Яндекс.Директа: использование и настройка
- 2021-05-07 » Сообщество ВКонтакте − база для создания сайта
- 2021-04-30 » Показатели авторитетности, полезности, качества сайта: ИКС, DR, DA
- 2021-04-22 » Оформление сторис в Instagram: как привлечь клиентов?
- 2021-04-20 » Привлечение клиентов на сайт: как сделать это быстро?
- 2021-04-20 » Яндекс.Взгляд: чем этот сервис полезен предпринимателям?
- 2021-04-07 » WordPress. Как создать нового администратора с помощью базы данных
- 2021-04-02 » Ключевые слова − база для полёта в ТОП-выдачи
Предоставляем полный комплекс услуг по созданию, обслуживанию и продвижению сайтов по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.