Нарезка (дизайн интерфейса)

Предварительный просмотр слайсера 3D-модели, готовящейся к печати.

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

Этот процесс включает в себя разделение композиции либо на однослойный [формат файла изображения], либо на многослойный собственный формат файла графического программного обеспечения, используемого для разделения. После разделения их можно было бы сохранить как отдельные файлы изображений, обычно в формате GIF , JPEG или PNG , либо в пакетном режиме , либо по одному. Многослойные файлы изображений могут включать в себя несколько версий или состояний одного и того же изображения, что часто используется для анимации или виджетов .

Практическое использование

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

Срезы могут быть изготовлены и использованы несколькими различными способами. До появления бестабличного веб-дизайна нарезанные изображения объединялись именно с помощью html-таблиц . Современный интерактивный макет страницы включает широкое использование каскадных таблиц стилей (CSS) и семантической разметки . Таблицы можно использовать для совместимости с более редкими старыми веб-браузерами , которые неспособны точно обрабатывать современное бестабличное кодирование.

Нарезка используется исключительно для растровых изображений . Векторные изображения обычно обрабатываются приложениями, воспроизводящими мультимедиа подключаемыми , и содержатся в собственных форматах мультимедийных файлов, таких как X3D , SWF , SVG или PDF файлы .

Преимущества

Нарезка снижает рабочую нагрузку и требования к пространству для хранения компьютерных данных : теперь требуется только часть динамического изображения, которая изменяется, а не все изображение. Если фрагмент находится на прозрачном многослойном изображении, его можно повторно использовать в нескольких частях изображения без изменения фона.

В Интернете нарезка разбивает одно большое изображение на множество более мелких, что снижает «вес страницы» или время загрузки. значительно ^{[ нужна ссылка ]}. Расширенные методы нарезки можно использовать для дальнейшего сжатия объема данных, необходимых для загрузки на компьютер пользователя, чтобы веб-страница отображалась правильно. Такие методы, как повторение фоновых изображений, означают, что одно небольшое изображение можно загрузить с веб-сервера только один раз, а затем получить указание (через CSS) повторить его с помощью языка разметки, перекладывая рабочую нагрузку с веб-сервера на компьютер клиента. Могут возникнуть определенные проблемы с производительностью, однако они обычно незначительны по сравнению с сегодняшними технологиями и тенденциями веб-дизайна, смещающимися в сторону мультимедийных веб-сайтов, которые обычно требуют подключения с высокой пропускной способностью и новейшего компьютерного оборудования.

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

Инструменты

Довольно много стандартных программ предлагают возможность автоматически разбивать макет непосредственно на таблицы с помощью встроенных функций. Они описаны ниже:

Adobe Фотошоп
Эскиз
Adobe Fireworks (ранее опубликовано Macromedia )
Adobe ImageReady (прекращено после CS2, функциональность ImageReady перенесена в Photoshop начиная с CS3)
GIMP
Магазин покраски Jasc Pro

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

Альтернативы

Нарезка в основном используется для 2D-компьютерной графики с однослойными интерфейсами. Многоуровневые интерфейсы могут использовать фрагменты, но также могут использовать векторную графику (включая 3D-модели ), но с недостатком дополнительного (чаще всего незаметного) времени рендеринга и с преимуществом большего количества опций и гибкости в изменении внешнего вида отдельного изображения. Эти альтернативные отдельные изображения обычно называются спрайтами .

См. также

Внешние ссылки