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

1. Включите сглаживание шрифтов

Вы за компьютером с 90-го года, ваша сетчатка деформировалась, и вы выключаете сглаживание шрифтов даже в Windows 7. Но ради бога, прежде чем сделать скриншот, включите сглаживание,

2. Разместите больше полезной информации на единицу площади

У вас огромный монитор в 30 дюймов со стандартным разрешением 2560×1600 пикселей. Вы его очень любите, и хотите чтобы любой пользователь с нетбуком ощутил, насколько вам повезло. Но пожалуйста, когда делаете скриншоты, раз-разверните окно, которое хотите показать людям. Не допускайте такого:

Особенно, когда вам нужно просто показать один пункт меню:

3. Уберите все лишнее

У вас отличная картинка на рабочем столе. Или клевый фон с тачкой у каждой папки в проводнике. Готов поспорить, ваши читатель ждут не дождутся, когда вы им все это покажете. Проблема в том, что части фотографий, попавшие в «кадр», очень сильно увеличивают размер png-файлов.

4. Да, png-файлы

Понятное дело, вы на любимом Никоне фигачите по 50 фотографии в день и он сохраняет их в jpeg. Теперь этот формат для вас как родной. Но пожалейте читателей, позвольте им читать текст, а не

от jpeg.

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

Добавлено значительно позже:
А чего бы не устроить доску позора для пятиклассников прямо здесь? В скобках указаны номера нарушенных правил.
habrahabr.ru/blogs/personal/102385/ (2, 4)
habrahabr.ru/blogs/hosting/110708/ (2, 3)
habrahabr.ru/blogs/pm/110643/ (2, 4)
habrahabr.ru/blogs/humour/110817/ (4 в особо циничной форме, jpeg пересохранен в png)
habrahabr.ru/blogs/google_chrome/110816/ (2)
habrahabr.ru/company/croc/blog/110836/ (4)
habrahabr.ru/blogs/GMail/110915/ (2, 4)
habrahabr.ru/blogs/ps3/110945/ (4 в особо циничной форме, jpeg пересохранен в png)
habrahabr.ru/blogs/skype/111032/ (4 в особо циничной форме, jpeg пересохранен в png)

+74

26 декабря 2010, 03:28

homm 24,7

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

комментарии (73)

+42

dinas 26 декабря 2010, 04:00 #

Ну не тематика Хабра это блеать… Обьяснять это надо пятикласникам при подготовке рефератов.

+22

EvilWolf 26 декабря 2010, 04:12 # ↑

Зато очень актуально, особенно 4 пункт.

–2

dinas 26 декабря 2010, 04:14 # ↑

Кому это актуально? Целевой аудитории Хабра?

+10

cst 26 декабря 2010, 10:21 # ↑

Да ладно не ругайся.
Плохому же не учат в топике.

–6

ArMikael 26 декабря 2010, 12:20 # ↑

У меня есть два варианта:
1. Либо автор ошибся табом в браузере и запостил не на тот сайт.
2. Либо какае-то единичная иллюстрация к статье на Хабре резанула глаз автора и он не смог промолчать (помниться недавно пробегал где-то у нас паршивинький скриншот).

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

ArMikael 26 декабря 2010, 12:22 # ↑

Упс, страничку больше часа не обновлял. Автор уже сам на всё поотвечал.

homm 26 декабря 2010, 12:24 # ↑

Ну сколько можно писать в личку авторам? Пора уже нанести превентивный удар.

naryl 26 декабря 2010, 13:06 # ↑

Авторам статей на Хабре. Особенно четвёртый пункт.

homm 26 декабря 2010, 10:54 # ↑

Итак для них. Из последних шедевров: habrahabr.ru/blogs/hosting/110708/

homm 26 декабря 2010, 11:01 # ↑

Туту еще пара замечательных образчиков: habrahabr.ru/blogs/pm/110643/

Отличный скриншот пустого места.

–12

Courteous 26 декабря 2010, 14:40 # ↑

Пусто место, несущее кучу информации…

hTLK 27 декабря 2010, 01:28 # ↑

Я бы на Вашем месте тут бы не спорил ради спора, а обновил скриншот, чтобы получилось хотя бы так:

Почувствуйте разницу (и это ещё артефакты jpeg'а не вычищались).

homm 27 декабря 2010, 01:56 # ↑

Он обновил, и достаточно давно.

homm 26 декабря 2010, 14:51 # ↑

Этот баран еще и упирается в личных сообщениях, что он все скриншоты правильно сделал. А вы говорите, всем и так очевидно.

–23

Courteous 26 декабря 2010, 14:53 # ↑

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

–7

Courteous 27 декабря 2010, 02:41 # ↑

Понимаю, что ещё один комментарий для минусов ( ЖМИ КРЕСТИК, ЖМИ!!)

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

Всем успехов и развития.

BmW 26 декабря 2010, 12:32 # ↑

К несчастью мне регулярно рвут rss ленту люди, для которых изменить размер изображения — пустой звук. Да, так и помещают фоточку 9999x8888 до ката.

burdakovd 26 декабря 2010, 17:16 # ↑

Насчёт пятиклассников согласен, но факт, что ещё не все следуют этому правилу говорит о том, что статья актуальна.

Mezomish 26 декабря 2010, 19:57 # ↑

>Обьяснять это надо пятикласникам при подготовке рефератов.

Печально, но некоторые авторы на Хабре в вопросе подготовки скриншотов очень недалеко ушли от пятиклассников, для которых прописные истины из топика — что-то из области квантовой физики.

dinas 27 декабря 2010, 02:46 # ↑

В комент +34, в карму -7 %) Хабр такой Хабр :)

ivanych 26 декабря 2010, 04:22 #

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

Что-то я не уловил смысла этой строки. Вроде бы по смыслу там должно быть написано «Не разворачивайте окно на весь экран, если показать нужно только его кусочек.»

KlonKaktusa 26 декабря 2010, 12:50 # ↑

unexpand

Strorin 26 декабря 2010, 14:05 # ↑

Заверните.

stolen 26 декабря 2010, 17:47 # ↑

скрутите в трубочку

–1

eyphoriaa 27 декабря 2010, 00:20 # ↑

И засуньте.

+11

sultee 26 декабря 2010, 06:30 #

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

Следующими должны выйти «Правила подготовки заголовков для статей»; о)

besisland 26 декабря 2010, 19:05 # ↑

Было уже, помнится.

negodnik 26 декабря 2010, 06:33 #

/facepalm

negodnik 26 декабря 2010, 06:39 # ↑

> ваши читатель ждут-недождуться

фаталити, занавес

homm 26 декабря 2010, 11:05 # ↑

Простите.
Обычно в этом месте оправдываются тем, что писалось в 4-5 часов ночи :)

propovednik 26 декабря 2010, 06:57 #

о, ужас, в топ лирушечки.

homm 26 декабря 2010, 10:57 # ↑

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

VolCh 26 декабря 2010, 10:20 #

Больше всего в скриншотах меня раздражает их отсутствие из-за проблем с хостингом, как правило внешнем. А ещё больше раздражает их наличие в статьях вроде бы для подготовленных читателей (аудитория хабра в частности), но показывающая чуть ли не каждое движение мышкой вместо простой фразы "..., импортируем файл («File->Import...»)".

То есть правила должны начинаться примерно так:
0. 100 раз подумай, нужен ли этот скриншот в принципе. Если хочется украсить статью, то лучше нагугли прикольную картинку по теме, чем приводить очевидный скриншот.
0.5 Подумай о тех, кто будет читать статью через пару лет (даже если это новость, имеющая актуальность пару дней) или о тех, кто будет её читать во время «хаброэффекта»

–5

kotosergey 26 декабря 2010, 10:28 #

В заголове хотя-бы исправьте ошибку пожалуйста.

+21

savostin 26 декабря 2010, 12:06 # ↑

Кто бы говорил ;-)

kurd 26 декабря 2010, 10:36 #

Лично я ничего нового не узнал. Но хабр пользуется очень большой популярностью у довольно большого числа блоггеров, так стало быть, для них этот пост и будет полезен. Но, честное слово, поправьте заголовок и добавьте еще пару пунктов, а то такое претенциозное название и всего 4 маленьких пункта. Спасибо.

homm 26 декабря 2010, 11:50 # ↑

Больше пунктов для большего количества, или у вас конкретные предложения?

ilynxy 26 декабря 2010, 12:05 #

Ещё никто не рассказал, почему отключают сглаживание шрифтов для скриншотов?
Матрицы бывают с разным расположением RGB-компонент пикселя. Поэтому, скриншот шрифта с субпиксельным сглаживанием для матрицы с RGB последовательностью, будет смотреться ужасно на BGR (VRGB, VBGR и т.п.). И будет смотреться странно на CRT-мониторах (хотя не знаю, какой процент использует CRT сейчас, может быть это неактуально). Поэтому субпиксельное сглаживание использовать для скриншотов не стоит (но можно использовать обычное сглаживание).

–3

homm 26 декабря 2010, 12:22 # ↑

Субпиксельное сглаживание ≠ cleartype.
Вы хотели сказать, нельзя использовать cleartype.

Про то, что порядок пикселей важен, это понятно. Но вы на практике видели мониторы с отличным от RGB расположением пикселей? В голову приходит только перевернутый на 180˚ айпад, который почти никогда не показывает картинки в масштабе 100%.

ilynxy 26 декабря 2010, 12:40 # ↑

Да вроде ClearType (tm) это торговая марка конкретной реализации технологии субпиксельного сглаживания (есть ещё, например, CoolType от Adobe, Quartz от Apple и т.д.)
Так что я сказал, то что хотел сказать.

Видел мониторы с не RGB. Один раз и издалека. =)

homm 26 декабря 2010, 12:53 # ↑

Да, что-то я сглупил, субпиксельное сглаживание — это же всегда не просто антиалиазинг.

GreyCat 26 декабря 2010, 14:40 # ↑

В огромной туче ноутбуков матрицу переворачивают при монтаже. Отношение RGB к BGR на рынке ноутбуков я бы оценивал где-то как 5 к 1.

oWeRQ 26 декабря 2010, 12:14 #

Не хватает: для миниатюр давать ссылку на полноразмерный скрин.

MihallicA 26 декабря 2010, 12:48 #

При скриншоте меню все же заголовок меню лучше захватить.

homm 26 декабря 2010, 13:09 # ↑

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

teonoman 26 декабря 2010, 12:57 #

Из цикла «деревья — зеленые, а зубы нужно чистить утром и вечером».

romx 26 декабря 2010, 13:57 # ↑

Поездив в метро (например утром) понимаешь, что стоило бы про второе напоминать и почаще.

Arceny 26 декабря 2010, 13:58 # ↑

Я только вечером чищу о_О

teonoman 26 декабря 2010, 13:59 # ↑

Раз уж только один раз, то лучше утром. Так оно для социума больше пользы приносит.

Arceny 26 декабря 2010, 14:04 # ↑

Неприятно ложиться спать немытым ногами и с нечищенными зубами, а вставать вполне.

magicstream 26 декабря 2010, 14:33 #

мдя. ожидал увидеть что то существенное.

homm 26 декабря 2010, 14:40 # ↑

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

vam 26 декабря 2010, 14:54 #

Еще хотел бы обратить внимание на оформление статей картинками из протухших клипартов середины 90-х. Иногда картинка для привлечения внимания отбивает желание открывать статью.

gvsmirnov 26 декабря 2010, 15:16 #

Больше всего порадовало

от jpeg.

mr_avi 26 декабря 2010, 15:20 #

Под линуксы есть замечательная програмка shutter, для снятия скриншотов

MihallicA 27 декабря 2010, 02:39 # ↑

Под винду есть замечательная программа «Кнопка Print Screen»
А под мак есть замечательная программа «Cmd+shift+4»

Mezomish 27 декабря 2010, 09:50 # ↑

>Под винду есть замечательная программа «Кнопка Print Screen»

… в компании с кнопками «Win+R — m-s-p-a-i-n-t — Ctrl+V — Ctrl+S»? :)

fanex 26 декабря 2010, 16:10 #

По поводу сглаживания — весьма сомнительный совет.

homm 26 декабря 2010, 16:33 # ↑

fanex 26 декабря 2010, 16:46 # ↑

homm 26 декабря 2010, 19:04 # ↑

Главное, не продолжайте в том же духе. У меня уже глаза болят.

fanex 26 декабря 2010, 19:11 # ↑

Вы первый начали.

navion 26 декабря 2010, 20:36 # ↑

А из-за чего текст на картинках уходит в мыло?
Примера не приведу, но иногда такое попадается, причем на нормальных шрифтах и без всякого курсива.

lasthero 26 декабря 2010, 21:00 # ↑

от ресайза

equand 27 декабря 2010, 00:55 # ↑

от компрессии jpeg

navion 26 декабря 2010, 16:39 #

Практических советов маловато, написали бы как и чем делать скриншоты веб-страниц, уменьшать палитру в png, выделять отдельные пункты и т.п.

homm 26 декабря 2010, 21:36 #

Это моя самая великая статья. Дельта кармы уже –22. И это не считая обиженных авторов будущих статей, которым я буду давать её почитать. Ю-ху!

gvsmirnov 27 декабря 2010, 01:18 # ↑

Мне кажется справедливой закономерность: чем больше (число голосов) / (|карма|), тем больше минусов получено от психанувших людей, получивших баттхёрт от статьи/комментария.

odiszapc 27 декабря 2010, 14:32 #

Извините, но это говнопост

homm 27 декабря 2010, 14:45 # ↑

Я разве не объяснил 10 раз для чего и для кого он был написан? Или вы говночтец, что прочитать не можете?

odiszapc 28 декабря 2010, 02:55 # ↑

Я говночтец, а это — говнопост.

homm 28 декабря 2010, 12:26 #

Список мальчиков, которые не получат в этом году подарки на новый год, в конце статьи. Пополняется он куда быстрее, чем я ожидал.

lol2Fast4U 28 декабря 2010, 21:42 #

В пункте 4 забыл классическую иллюстрацию: lbrandy.com/blog/2008/10/my-first-and-last-webcomic/