Как раскроить макет для сайта в фотошопе (Photoshop)

Дата редактирования: 25.03.2015 Просмотрен: 21686

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

Начнем. Выбираем инструмент "Раскройка".

Инструмент Раскройка

Теперь разделите изображение на нужные фрагменты. Старайтесь не захватывать лишнего и придерживайтесь краев конкретного элемента. Это позволит снизить вес конечных изображений.

Выделить нужные фрагменты

Если какой то фрагмент вы решите изменить в процессе раскройки, то Вам потребуется использовать другой инструмент "Выделение фрагмента".

Выделение фрагмента

Когда все раскроили, открываем "Файл > Сохранить для WEB" и оптимизируем каждый фрагмент по отдельности таким образом как это нам требуется.

Сохраняем фрагменты

1. Инструмент для выделения редактируемого фрагмента

2. Выделенный фрагмент подсвечивается желтой рамкой

3. Можно выбрать формат и настроить каждый фрагмент по отдельности.

Если нужно что бы у элементов был прозрачный фон нужно отключить все мешающие слои и выбрать при сохранении формат png

Прозрачный фон у фрагмента

Результатом этих манипуляций будет папка с файлами отдельных фрагментов среди которых будут наши фрагменты и обрезки от них.

Папка с фрагментами



Создан: 25.03.2015 08:47 | Отредактирован: 25.03.2015 08:47