Экспорт растровых изображений

При экспорте изображения в формате JPG можно выставить параметр сжатия. Чем больше сжатие, тем ниже качество картинки, но и зато тем меньше вес итогового файла. Рекомендуется сжимать картинки не больше, чем на 60%.

Настройка уровня сжатия в окне экспорта изображений

При экспорте изображения в формате PNG можно управлять следующими параметрами:

· прозрачность в изображении — для картинок без прозрачных частей можно убрать прозрачность и итоговый вес файла будет меньше

· количество цветов в изображении — для картинки с небольшим количеством цветов итоговый размер файла можно снизить выставив галочку, включающую 8-битный цвет

Остальные параметры при экспорте можно не изменять.

Замечание

Экспорт нескольких слоёв

Чтобы экспортировать сразу несколько картинок, выделяем несколько слоёв с изображениями. При выделении используем клавиши Ctrl или Shift для выбора нескольких слоёв. Затем выбираем в контекстном меню команду Export As….

Выбор нескольких слоёв для экспорта изображений

После этого в окне экспорта появляются выбранные изображения. Нажимаем чекбокс Select All и кнопку Export. Каждое изображение будет экспортировано в отдельный файл.

Экспорт нескольких изображений

Экспорт сгруппированных слоёв

Если требуется экспортировать несколько изображений как одно, перед экспортом нужно объединить эти изображения в одну группу с помощью команды Group from Layers…

Создание группы слоёв

И выбрать команду Export As… для группы.

Экспорт группы слоёв

В этом случае все изображения экспортируются в один файл.

Экспорт нескольких изображений в один файл

Экспорт фрагмента слоя

Фрагмент слоя может пригодиться для задания фоновых изображений в CSS. В этом случае кусочек фона из макета с помощью свойства background-repeat повторяется и заполняет фон всего элемента.

Существует несколько вариантов экспортировать фрагмент изображения.

Вариант 1

Для экспорта фрагмента изображения выбираем растровый слой, затем инструментом Marquee tool выделяем часть изображения, которая будет повторяться. При этом нужно выделить достаточно большой участок изображения, минимум 100 на 100 пикселей, так чтобы при его «склеивании» в background-repeat-ом не было видно «швов».

Выделение участка изображения

Далее нажимаем сочетание клавиш Ctrl/Cmd + J (или меню Layer / New / Shape Layer Via Copy), чтобы создать новый слой из выделенной области.

Создание нового слоя из выделенной области

Дальше выбираем слой с фрагментом изображения, в контекстном меню нажимаем Export As… и дальше экспортируем изображение как обычно.

Экспорт нового слоя

Вариант 2

Этот вариант экспорта основан на понятии pattern — это образец узора определённого размера. Задача pattern-а — служить образчиком, которым дизайнер выполняет заливку слоя. Попросту — это маленький кусочек рисунка, которым дизайнер «мостит» весь слой. Второй способ получения фрагмента изображения для фона самый точный и надёжный. В нем мы «опираемся» на силы самого Фотошопа, который должен нам «помочь» обнаружить pattern в PSD-макете.

Задача — выделить этот pattern или образец узора из PSD-макета в отдельное изображение. Обнаружить, что к слою применяется заливка pattern-ом, — просто. В этом случае, среди применённых к слою эффектов стоит «Pattern overlay».

Для слоя применён эффект «Pattern overlay»

После того как мы обнаружили слой с эффектом «Pattern Overlay», дважды кликаем мышкой по названию эффекта. При этом открывается окно «Layer style», в котором активирован пункт — «Pattern Overlay».

Окно настройки эффекта «Pattern Overlay»

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

Отображение размеров образца узора

Запоминаем или записываем эти размеры — они нам понадобятся в дальнейшем.

Щелчком мыши на маленькой стрелочке справа от окна с образцом узора открываем палитру узоров.

Палитра с образцами узоров

В этой палитре добавим выбранный нами образец узора в свою коллекцию pattern-ов. Это нужно для того, чтобы затем использовать образец узора в своих целях. Для этого нажимаем на кнопке с шестерёнкой, выбираем пункт меню New Pattern…. Для сохранения нового образца узора также можно использовать кнопку, на которой изображён знак Плюс, она находится справа от поля.

Добавление образца узора в свою коллекцию

Создаём новый документ. Размеры для документа устанавливаем как у интересующего нас образца узора. В нашем случае 600×575.

Создание нового документа для образца узора

Затем в меню Фотошоп выбираем Layer / New fill layer / Pattern и создаём новый заполняющий слой.

Новый заполняющий слой

В открывшемся окошке «New layer» нажимаем по кнопке ОК, параметры менять не нужно.

Окно «New layer»

Далее откроется ещё одно окошко, в котором выбираем нужный нам образец узора.

Окно для выбора образца узора

В результате получаем новый документ с заливкой слоя выбранным нами образцом узора. Факт того, что к слою была применена заливка узором хорошо заметно в палитре «Layers». Чтобы экспортировать слой, его предварительно придётся растеризовать, то есть применить команду Rasterize Layer.

Команда Rasterize Layer

Картинка для фоновой заливки готова. Осталось только её экспортировать.

Команда Экспорт изображения для фоновой заливки