10. Экспорт изображений.

Для сохранения изображений для верстки, используется экспорт. Экспорт можно сделать разными способами, давайте разберем их.

Быстрый экспорт:

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

После этого, в панели Слои правой клавишей мыши вызываем контекстное меню

Ищем пункт «Быстрый экспорт в …

Формат, который используется для быстрого экспорта указывается в настройках (мы это рассматривали с Вами ранее)

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

Также можем изменить имя файла. Также, мы можем экспортировать сразу несколько изображения. Для этого при выборе изоюражения мы зажимаем славиш CTRL/CMD и выбираем нужные изображения

При этом мы видим выбранные слои как в панели «Слои» так и на макете. После этого, повторяем те же действия – вызываем контекстное меню, выбираем быстрый экспорт. Путь экспорта. И тут есть одна особенность –при экспорте нескольких слоев одновременно, мы не можем изменять их имена. Имя файла будет соответствовать имени слоя

Удобство этого способа заключается в скорости

Из недостатков – невозможность выбора формата изображения, невозможность экспорта для экранов с повышенной плотность пикселей (retina)

Экспортировать как

Следующий метод экспорта называется Экспортировать как. Вызывается от также через контекстное меню

От быстрого он отличается тем, что мы можем выбрать формат изображения, при выборе jpg можем выбрать степень сжатия(качества)

После выбора все параметров нажимаем на кнопку экспортировать все и выбираем путь(папку) для экспорта

Удобство этого способа заключается в возможности выбора параметров изображения

Из недостатков – скорость экспорта

Экспорт паттернов

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

Если Вы видите такой эффект, скорее всего изображения, которое повторяется, у Вас нет. Что же делать спросите Вы?

Способ есть, и он единственно правильный для таких случаев.

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

А сделаем мы это так:

1. Откроем окно эффектов, два раза нажав левой клавишей по названию эффекта 2. Дальше нам нужно сохранит наш узор в наш набор паттернов. Для этого наводим мышку на иконку рядом с паттерном и нажимаем на неё. 3. После этого наводим курсор на сам паттерн и ждем несколько секунд пока появится подсказка с указанием размера паттерна

Отлично. У нас есть сохраненный паттерн и его размеры. Нажимаем «Ок».

4. Далее создаем новый документ (Файл-Создать или CTRL/CMD+N). Выбираем размер документа по размеру нашего паттерна (400х400пкс) 5. В панели слоев снимаем блок со слоя. Для этого просто наводим курсор на замок и делаем два клика левой кнопкой мыши 6. После того как имя слоя изменилось с ФОН на Слой 0 и пропал замок, делаем еще два клика вызываем панель эффектов 7. Выбираем «Наложение узора» 8. После это в списке узоров ищем наш и выбираем его

Нажимаем Ок и видим нужный нам фрагмент. После этого мы можем сохранить файл (выбрав расширение jpg/png)

И на выходе получаем вот такое изображение

Сделать его повтор мы сможем через CSS\

Градиенты

Градиенты и однородные заливки мы делаем через CSS, поэтому мы не экспортируем слои с градиентами, а просто смотрим их свойства

Также не обязательно экспортировать такие изображения