Лучше меньше, да лучше

Author
Анна Петрова
Senior UX Designer @ TechCorp

Уроки Photoshop
4.7 / 5 (77 оценок)



Впрочем, создание анимации - тема отдельной статьи. Рассмотрим работу непосредственно оптимизатора на конкретном примере. Для того чтобы понять работу подобных программ, нужно понимать принцип записи информации в различных форматах графических файлов. В Интернет наиболее используемые форматы - JPG и GIF. Их использование в тех или иных случаях принципиально разное, так как различен принцип кодирования информации при их оптимизации. В GIF уменьшение размера файла происходит за счет уменьшения количества отображаемых цветов, а в JPG - за счет объединения соседних пикселей в блоки. Поэтому отличается их применение в Интернет. Там, где в графике встречается текст, JPG неприменим - буквы получаются нечеткими и размытыми, зато при использовании градиентной заливки JPG, в противоположность GIF-формату, полностью оправдывает свое применение.

Итак, имелся ducky.psd, который занимал 705 Кб. В рабочем поле существуют два окна - с оригинальным изображением и оптимизированным. Мы можем отредактировать файл, как нам угодно, открыть какой-то готовый анимированный гиф и изменить его для своих нужд. В процессе редактирования нам доступны практически все стандартные инструменты Photoshop, за исключением, наверное, только градиентной заливки. В любой момент мы можем посмотреть результат нашей работы в окне оптимизации. Применение оптимизатора уменьшило объем исходного файла ducky.psd почти в 80 почти без потери качества.

Иногда исходный рисунок перед оптимизацией удобно разбить на части. Это целесообразно при работе с gif форматом, когда уменьшение размера идет за счет уменьшения количества отображаемых цветов. При этом некоторые части изображения можно отобразить в 16 цветах, а некоторые - и в 256. Таким образом можно добиться значительного эффекта. Следует отметить, что в нашем примере оптимизация проводилась в JPG формат, хотя есть возможность конвертации и в старый добрый GIF, и в сравнительно новый формат PNG. В каждом конкретном случае следует решать в зависимости от конкретного файла. Конечно, Вы свободны в своем решении, но я надеюсь, что данная статья, по крайней мере, подскажет Вам пути усовершенствования методов работы с web-графикой и Вам не придется проделывать тот долгий путь проб и ошибок, каким прошел я:).

Завершить свой обзор я хотел бы указанием на то, что все эти программы или, по крайней мере, их демонстрационные версии можно легко найти в Интернет или на компакт-дисках с ПО.


Предыдущая   -    Страница: 2 из 2

Навигация: 1  2  
#UX #UI #Дизайн #Доступность
Author

Анна Петрова

Senior UX Designer @ TechCorp

Более 10 лет опыта в дизайне пользовательских интерфейсов. Работала с компаниями из списка Fortune 500. Спикер на международных конференциях по дизайну.

Комментарии (5)

Оставить комментарий

Ваш email не будет опубликован

М
Михаил Сидоров

15 Января 2026

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

Е
Елена Козлова

20 Декабря 2025

Спасибо за подробное объяснение принципов доступности. Многие дизайнеры недооценивают эту тему, а зря!

А
Алексей Новиков

17 Ноября 2025

Could you share more about design systems? Would love to see a dedicated article on that topic!

Понравилась статья?

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