Если у Вас есть готовый дизайн сайта в Photoshop или просто в хорошем качестве и реальном размере, то можно его раскроить на отдельные изображения, нужные для последующей верстки. И тогда не придется сохранять каждый фрагмент по отдельности как это реализовано например в Gimp.
Начнем. Выбираем инструмент «Раскройка».
Теперь разделите изображение на нужные фрагменты. Старайтесь не захватывать лишнего и придерживайтесь краев конкретного элемента. Это позволит снизить вес конечных изображений.
Если какой то фрагмент вы решите изменить в процессе раскройки, то Вам потребуется использовать другой инструмент «Выделение фрагмента».
Когда все раскроили, открываем «Файл > Сохранить для WEB» и оптимизируем каждый фрагмент по отдельности таким образом как это нам требуется.
1. Инструмент для выделения редактируемого фрагмента
2. Выделенный фрагмент подсвечивается желтой рамкой
3. Можно выбрать формат и настроить каждый фрагмент по отдельности.
Если нужно что бы у элементов был прозрачный фон нужно отключить все мешающие слои и выбрать при сохранении формат png
Результатом этих манипуляций будет папка с файлами отдельных фрагментов среди которых будут наши фрагменты и обрезки от них.
