ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Categories:

Новая версия файла heroes.png

Начало: GIMP, формат PNG, утилита pngcrush.

1. Оригинальная версия файла heroes.png из задачи «Расставить супергероев по полю» к подразделу 3.3 «Drag'n'Drop с событиями мыши» второй части учебника по JavaScript:



Размеры изображения (ширина, высота): 380 × 260 пикселей.
Размер файла изображения: 56 699 байт (55,3 килобайта).

2. Я сделал новую версию этого файла:



Размеры изображения (ширина, высота): те же, что и у оригинала.
Размер файла изображения: 46 170 байт (45,0 килобайта).

Что сделано? Во-первых, убрал мусорные пиксели (не тени) между фигурками героев, создававшие впечатление грязи на экране компьютера. Нужно учитывать, что фон картинки между фигурками героев — прозрачный.

Во-вторых, фигурку Человека-паука опустил вниз на один пиксель (на демонстрационной странице авторов задачи у этой фигурки срезался один пиксель с головы сверху, это можно увидеть, если увеличить демонстрационную страницу авторов задачи в браузере), фигурку Железного человека поднял вверх на несколько пикселей до уровня Человека-паука (у Железного человека на демонстрационной странице авторов задачи из-за этой недоработки художника отрезается часть тени снизу), фигурку Капитана Америки сдвинул вправо на несколько пикселей и дорисовал срезанную художником часть тени слева от этой фигурки.

В-третьих, подправил (кое-где дорисовал) тени Капитана Америки, Железного человека, Человека-паука и Циклопа (немного сомневаюсь, что правильно его идентифицировал). Нужно учитывать, что тени нарисованы пикселями с частичной прозрачностью.

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

Эту версию картинки я делал с тем условием, чтобы при ее использовании не пришлось менять код стилей на языке CSS элементов тестовой HTML-страницы, подготовленной авторами задачи. Поэтому нельзя слишком сильно двигать фигурки, иначе они могут вылезти за границы, определенные верстальщиком, и часть фигурки попадет в фон к другой фигурке или будет «срезана».

При таком условии не получается исправить самый главный «косяк» художника и верстальщика. Авторы задачи отвели для каждой фигурки размеры (ширина, высота) 130 × 128 пикселей. Фигурки Халка и Винни-Пуха почти полностью занимают эти размеры, поэтому с ними проблем нет. А вот остальные четыре фигурки для таких размеров слишком узкие (по высоте всё в порядке), поэтому у них с боков остается определенное пространство, которое на демонстрационной странице авторов задачи не позволяет поднести четыре проблемные фигурки вплотную к боковым сторонам области просмотра браузера.

Чтобы решить эту проблему, верстальщику для каждой из четырех узких фигурок в коде стилей CSS стоит выделить область гораздо меньше 128 пикселей по ширине. В этом случае код CSS-стилей тестовой HTML-страницы придется изменять.
Tags: Образование, Программирование, Рисунки
Subscribe

  • Как похудеть (держать себя в форме)

    Многие хотят знать легкий (или относительно легкий) способ держать себя в форме или привести себя в форму, если всё уже очень запущено. Здесь я…

  • Полуфабрикат Магур

    Купил в магазине некий замороженный полуфабрикат в виде котлет, обсыпанных панировкой, с неизвестным мне названием «Магур». Поиск в интернете дал…

  • Жарю минтай с овощами

    Я думал, у меня в плане кулинарии — руки из ж... Оказалось, нужен хороший учитель. Приготовил первый рецепт отсюда:…

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments