Zoomify в фотошопе что это

Обновлено: 04.07.2024

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

Чтобы создать веб-страницы и элементы их интерфейса, можно воспользоваться слоями или фрагментами. (См. главу Слои и раздел Разбиение веб-страниц на фрагменты.)

С помощью композиций слоев можно экспериментировать с различным расположением страниц или экспортировать варианты страницы. (См. раздел Композиции слоев.)

Создайте ролловер-изображения текста или кнопки для импорта в Dreamweaver или Flash.

С помощью панели «Анимация» можно создать веб-анимацию, а затем экспортировать ее как анимированное изображение в формате GIF или файл QuickTime. См. Создание покадровой анимации.

С помощью Adobe Bridge можно создать веб-фотогалерею и легко превратить набор фотографий в интерактивный веб-сайт с помощью разнообразных профессиональных шаблонов.

См. видеоролик о создании веб-сайтов с помощью Photoshop и Dreamweaver по адресу Вызов Photoshop из Dreamweaver для коррекции веб-изображений.

Ролловер является кнопкой или изображением на веб-странице, которое изменяется при наведении курсора мыши на него. Чтобы создать ролловер, необходимо как минимум два изображения: первое изображение необходимо для нормального состояния, а второе изображение — для измененного состояния.

Приложение Photoshop содержит несколько удобных инструментов для создания ролловер-изображений.

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

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

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

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

При сохранении ролловер-изображений используйте в названиях файлов условные обозначения для отделения основного изображения (нормальное состояние) от дополнительного изображения (ролловер-состояния).

После создания набора ролловер-изображений в Photoshop воспользуйтесь приложением Dreamweaver для размещения изображений на веб-странице и автоматического добавления кода Javascript для ролловер-операций.

На веб-странице изображения с высоким разрешением можно разместить таким образом, что посетители смогут панорамировать изображение и изменять его масштаб, чтобы получить более детализированное изображение. Изображение основного размера загружается в то же самое время, что и JPEG-файл эквивалентного размера. Photoshop экспортирует JPEG-файлы и HTML-файл, которые можно передать на веб-сервер.

Создайте ролловер-изображения текста или кнопки для импорта в Dreamweaver или Flash.

С помощью панели «Анимация» можно создать веб-анимацию, а затем экспортировать ее как анимированное изображение в формате GIF или файл QuickTime. См. Создание кадров анимации.

Создание изображений ролловера

Приложение Photoshop содержит несколько удобных инструментов для создания ролловер-изображений.

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

Экспорт в Zoomify

В меню «Файл» выберите пункт «Экспортировать» > «Zoomify» и установите параметры экспорта. Шаблон Устанавливает фон и панель навигации для просматриваемого в браузере изображения.

Конечное местонахождение Определяет местоположение и имя файла..

Параметры фрагмента изображения Определяет качество изображения..

Параметры браузера Определяет высоту и ширину в пикселах основного изображения в браузере.

Работа с шестнадцатеричными значениями цвета

Приложение Photoshop может отображать шестнадцатеричные значения цветов изображений или копировать эти значения для использования в HTML-файле.

Шестнадцатеричные значения цветов на панели «Информация»

В меню «Окно» выберите пункт «Инфо» или щелкните вкладку панели «Инфо» для отображения панели.
Выберите «Параметры панели» в меню панели. Для первой или второй цветовой модели в меню «Режим» выберите «Цвета Web» и нажмите кнопку «ОК».
Укажите курсором цвет, шестнадцатеричное значение которого необходимо показать.

Копирование шестнадцатеричного значения цвета

Используя инструмент «Пипетка», подведите указатель к цвету, который необходимо копировать. Щелкните правой кнопкой мыши (Windows) или удерживая клавишу «Control» (Mac OS), и выберите «Скопировать цвет как HTML» или «Копировать шестнадцатеричный код цвета».

С помощью панели «Цвет», «Образцы» или палитры цветов установите основной цвет. В меню панели «Цвет» выберите «Скопировать цвет как HTML» или «Копировать шестнадцатеричный код цвета».

В диалоговом окне «Сохранить для Web » щелкните образец цвета или выберите «Подложка» > «Другое». В палитре цветов Adobe щелкните правой кнопкой мыши шестнадцатеричное значение и выберите «Копировать».

Web-дизайн в Photoshop: Полезный плагин Zoomify для размещения большого изображения на сайте

Привет всем! В этом уроке я расскажу Вам про предустановленный плагин Zoomify, который позволяет добавить на сайт что-то наподобие увеличительного стекла для больших фотографий

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

В Adobe Photoshop CS5 есть предустановленный плагин, который поможет решить этот вопрос. Он называется Zoomify . Плагин позволяет увеличивать изображение в режиме онлайн, причем без задержки подгрузки деталей. И находится тут File > Export > Zoomify .

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

Зайдя в указанную папку, вы обнаружите несколько файлов и подпапку с нарезкой кадров. Причем Фотошоп уже создал html страницу, в которой вставлен Flash -плеер.

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

В данном топике я расскажу о одной из реализаций и о том как склеить Zoomify изображение, чтобы сразу было понятно о чём идёт речь, можете перейти по ссылке: 2 доллара.

Где-то около полугода назад я писал утилиту по преобразованию картинки в Zoomify изображение, хоть на тот момент была бесплатная фирменная утилита, да и Photoshop имеет такой функционал, но там требовалась пакетная обработка, отправка по ftp и ещё некоторые возможности. Спустя какое-то время мне понадобилось сделать обратный функционал, вот об этом и пойдёт речь в данном топике.

Зачем это нужно?

Ссылка выше указывала на страницу с изображением 2 долларов, я склеил данное изображение и размер получился больше 100 мегабайт (7500 х 6500 пикселей), конечно, я его не ужимал, но в любом случае размер будет внушительный. Думаю, что немногие смогли бы дождаться загрузки данного изображения, тем более, если им не нужна супер детализация или интересует лишь какой-то кусок. Со спутниковыми картами всё гораздо печальнее, например, размер Минска больше 4 Гб (точную цифру не помню, когда-то был сохранен кэш гугла на винчестере без максимального увеличения).

Как это работает?

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

На картинке видно, что загружается страница, после чего грузится флэш приложение (ZoomifyViewer.swf) и ImageProperties.xml для картинки 2DollarBill. Все картинки хранятся в отдельных папках на сервере, поэтому ImageProperties.xml всегда называется одинаково. Флэш просмоторщик загружает файл ImageProperties.xml, после чего он начинает подгружать кусочки. Что же там такого содержится, что он сразу знает что грузить?

< IMAGE_PROPERTIES WIDTH ="7500" HEIGHT ="6500" NUMTILES ="1052" NUMIMAGES ="1" VERSION ="1.8" TILESIZE ="256" />

* This source code was highlighted with Source Code Highlighter .

Как Вы можете наблюдать, то тут нет ни одной ссылки на картинки, хотя просмоторщик загрузил больше десяти картинок. Давайте по порядку разберем параметры:

WIDTH=«7500» — ширина исходного изображения
HEIGHT=«6500» — высота исходного изображения
NUMTILES=«1052» — количество получившихся кусочков
NUMIMAGES=«1» — число изображений
VERSION=«1.8» — версия
TILESIZE=«256» — размер кусочка

Как эти параметры могут приблизить нас к ссылкам спросите Вы. Вот тут начинается самое интересное:
TileGroup0 — это папка, как только в папке появилось 256 файлов, то создается новая папка (TileGroup1 и т.д.)
0-0-0.jpg — первый нуль — это уровень (минимальная картинка, которая помещается в 256*256), второй и третий — это массив (столбец и строка соответственно, как и в большинстве языков программирования нумерация начинается с нуля)

Алгоритм

Вычисляем сколько раз нужно уменьшить картинку, чтобы она вписалась вписалась в квадрат 256*256, для этого исходную картинку делим на 2. В итоге получаем 234 * 203 пикселей и уровень равный 6. Тут окно просмоторщика довольно большое, поэтому был взят сразу третий уровень, а первый пошёл в навигацию. Нам же нужно взять сразу максимальный уровень, разделить изображение на кусочки и начать их скачивать, после чего можно их склеить и радоваться результату.

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

Зачем это нужно?

Как это работает?

< IMAGE_PROPERTIES WIDTH ="7500" HEIGHT ="6500" NUMTILES ="1052" NUMIMAGES ="1" VERSION ="1.8" TILESIZE ="256" />

* This source code was highlighted with Source Code Highlighter .

Алгоритм

Читайте также: