Статей, по поводу деланья скриншотов написано уже туева хуча и, в
Итак, дано: великолепный скриншот или картинка. Задача: разместить его на сайте или страничке, чтобы все было хорошо и быстро.
Все примеры я буду проводить на основе программы PMView. Это отличная программа, которой я уже пользуюсь много лет и которая прекрсано выполняет свою основную работу (просматривает картинки), ну а кроме того, позволяет быстро делать простейший манипуляции с картинкой. Ну а больше нам и не нужно. Желающие могут воспользоваться другими аналогичными программами.
Правило номер один. Не стоит пытаться разместить всё в меаленькой картинке. Как правило это не получается. Либо картинка выходит слишком большой (как по формату, так и по размеру), либо всё равно ничего не видно. Для этого случая есть совершенно нейтральный вариант: разместить иконку от картинки (т.е. её уменьшенный вариант) и ссылку на полноразмерный вариант картинки. Не надо думать, что пользователи, мол, дураки не догадаются, что надо «кликнуть» на картинке, чтобы получить крупный вариант. Догадаются и посмотрят. Кому нужно. А кому не нужно и смотреть не будет. Не всем же, например, интересно наблюдать вашу бухую рожу в субботу с утра. Здесь мы плавно переходим ко второму пункту нашей программы.
Правило номер два. Размер имеет значение! Чем больше картинка, тем больше её размер в килобайтах. И это все приходится скачивать. Поэтому всегда нужно стараться использовать иконки для картинок. На нашем сайте иконки делаются автоматически. Вопрос этого параграфа состоит в следующем: какой должен быть размер иконки и большой картинки (имеется ввиду длина и ширина).
На данный момент большинство пользователей работает в режиме 1024×768. Поэтому, каждый уважающий себя и своих пользователей
Поэтому на данный момент желательно использовать разрешение не более чем 800×600. Это является оптимальным для просмотра картинок (повторюсь, на данный момент: конец 2003 года). Что делать, если картинка имеет высокохудожественную ценность и предназначена, скажем, для обоев «рабочего стола»? Все очень просто. Придется сделать три копии картинки. Первая — это иконка, чтобы пользователь приблизительно видел что это такое. Вторая — это средний вариант (для обоев подойдет и 640×480), композиция должна быть видна совершенно отчетливо. И, наконец, третий вариант — большая картинка в виде «файла» (по клику должно появлятся диалоговое окно «сохранить», смотреть то уже не нужно), желательно в с указнием размера и разрешения. Абсолютно недопустимым является промежуточный вариант, когда одна картинка является уже не иконкой, но ещё и не полноразмерным вариантом, а вторая представляет собой полноценный вариант (на
С полноразмерным вариантом вроде разобрались, теперь об иконке. Иконка, на то и является иконкой, что должна быть маленькой. С другой стороны мельчить тоже особенно не стоит (иначе теряется весь смысл, ведь вместо иконки можно разместить и обычную текстовую ссылку). Я рекомендую размер от 80 до 150 пикселей. Главное правило: на иконке должно быть видно, о чем идет речь. На художественной картинке можно уменьшить разрешение, если идет скриншот окна, увеличить. Здесь разумеется можно выходить за установленные рамки, главное чтобы видно все было хорошо.
Что нибудь видно?
Так тоже не очень?
Уже ничего
Оптимальный вариант
Разумеется не стоит метаться
Правило номер три. Если картинка представляет собой не большой вариант, а средний (приблизительно до 400 пикселей), то здесь потребуется индивидульный подход. Нужно решить, можно ли обойтись просто картинкой без иконки. Как правило можно. Но! Таких картинок должно быть предельно мало (не более
Правило номер четыре. Нельзя перегружать страницу картинками. Все должно быть в меру. Помните, текст первичен, поэтому здесь мы плавно переходим к размеру большой картинки и размеру иконку. Тому размеру, которыми они должны занимать в килобайтах на диске. Иконка не должна занимать более
Правило номер пять. Существует два формата картинок: это PNG и JPG. Про GIF забыли, он уже умер. Важно уметь ими пользоваться. Итак для больших, художественных картинок используется JPG (это в
Особенно хорошо это заметно у менюшки. Ну и на размер файла тоже можно обратить внимание.
Ну и наконец правило номер шесть. Категорически нельзя ставить ссылки на другие сайты на иконку!
Приступаем к практической части. Обрабатываем большую картинку.
Берем большую картинку и грузим её в PMView. Картинка имеет большое разрешение, а нам нужно 800×600. Идем в меню «Transform» пункт «Size».
С разрешением все понятно, пройдемся по галочкам. Изображение может ужиматься либо пропорционально, либо нет. Нам конечно нужно пропорционально, поэтому ставим галочку на «Keep Proportional». В случае, если нам требуется изменить пропорции результирующего разрешения, программа позволяет таки втиснуть его в требуемый размер пропорционально, но при этом добавляет черную окантовку требуемого размера. Ну и самая интересная галочка: «Resample pixels». Для чего нужна? Для сглаживания картинки. Не вдаваясь в детали: ставить нужно всегда! Для тех, кому интересно почему, поясняю. Как например преобразуется картинка из 1600 в 800 по горизонтали? Совершенно правильно: каждая вторая вертикальная черта пикселей выкидывается. Именно так и делают все нами любимые браузеры. Раз пиксели выкидываются, то информация, записанная в них теряется. Можно ли это
Итак, изображение уменьшено, до 800×600, что дальше? Дальше неплохо бы избавится от «мыла». Для этого есть фильтры. Идем в пункт меню «Transform» и выбираем «Normal Filters». Нас интерисуют фильтры группы «Sharpen». Этот фильтр повышает четкость изображения (действует обратно сглаживанию). Скорее всего нужно использовать либо слабую либо среднюю коррекцию («Mild» и «Moderate» соответственно). Чем больше картинка, тем больше нужна коррекция. Достигается эксперементально, на глазок. Если слабая коррекция слишком слаба, а средняя слишком сильна, можно попробовать сделать слабую два раза подряд. В любом случае, «отмена» спасет. Делаем последовательно (с отменой) «Сильную», «Среднюю» и «Слабую» коррекцию. Какая больше нравится? Чтобы было более понятно, чего здесь необходимо избежать, сделайте «Очень сильную» коррекцию. Запомните, так быть не должно.
Теперь нужно сохранить полученный результат. Формат JPG напрашивается сам собой. Однако не все так просто. JPG имеет определенный набор параметров, отвечающих за качество результирующей картинки и, как следствие, за размер. Параметр «Optimize entropy encoding» на качество не влияет (влияет лишь на скорость обработки и немного на размер), поэтому всегда ставим, так как файл получается чуть меньше. «Progressive JPEG» и «Save EXIF information» тоже не интересны. Итого имеем два параметра, на которые стоит обратить внимание: «Quality» и «Smoothing». С качеством все понятно. Чем больше качество, тем лучше смотрится картинка и тем больше размер. Правило очень простое: чем меньше картинка, тем больше должно быть качество. Допустимый «размах» этого параметра: от 75 (по умолчанию), до 90. Больше и меньше смысла не имеет. Особая разница по размеру заметна между 90 и 80 процентами. При 75 процентах размер файла — 56KB, при 80 — 77KB, а при 90 — 112. Особого различия по качеству нет (на самом деле разница будет заметна на более светлых картинках, с более резкими переходами). Я, разумеется, рекомендую не заморачиваться, и во всех случаях ставить 90. Да, файл чуть больше (ага, в два раза) зато думать не надо.
После сохранения снова видим нашу картинку, аналогичным способом делаем иконку. Иконку почти всегда можно сохранить как в PNG, так и в JPG. Как лучше, решать вам. Но «артефактов», повторяю, на иконке быть не должно. Как правильно использовать PNG написано ниже.
Пусть наша картинка содержит текст или резкие, контрастные фигуры и конвертация в JPG не очень удается. Картинка такого плана есть в календарике. Делать нечего, сохраняем в PNG (эта методика подходит и для иконки). PNG очень схож с
Видим диалоговое окошко с параметрами. Разбираемся. «Pallette Type» — тип палитры. Всегда рекомендуется ставить адаптивную, палитра будет подбираться исходя из гаммы цветов у картинки. «Dither Type» — дитеринг. Можно выбрать либо «None» (нет), либо «Diffusion» (рассеивание). Очень интересная опция. Работает (когда включена) следующим образом: недостающие цвета получаются путем вкрапления пикселей альтернативных цветов. Как на плакатах: цвета всего четыре и, если присмотрется, видно, что плакат состоит из разноцветных
Вот, собственно, почти и все. На последок посмотрим, что можно сделать со скриншотами, элегантно стыренными из интернета. Например с таким:
Тут все достигается упражнением. Например вот таким. Накладываем «Blur (Moderate)». Уменьшаем размер до 500×700. Накладываем фильтр «Sharpen (Strong)». Преобразовываем в
В заключение, ссылки по теме:
Не, я просто как лох сижу: все фотожоп CS да фотожоп CS, а тут, ептыть, PMView.
Зашибись. Там даже фильтры есть…
(Бля, ну когда идиоты вымрут?)
Кстати, в Омске все такие культурные? :-)
Можно, например, поставить себе набор кодеков ffdshow. Тогда в свойствах кодека можно сграбить как текущее изображение, так и любой фрейм, хоть весь фильм раскадрировать.
К сожалению на официальной странице собраный бинарник датирован 2004 годом, поэтому нужно искать более свежую сборку на других серверах.