Как разрезать макет сайта

Автор Damir-Tote. Опубликовано в Блог, Фотошоп

Довольно часто верстку сайта проще осуществлять из готовых фрагментов шаблона, удачно найденного в интернете. Бывает так, что находится именно тот шаблон, который кажется персонально веб-мастеру идеальным. Для его резки понадобится графическое приложение: самым популярным является Photoshop, иногда можно пользоваться и ImageReady.

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

За идеальную ситуацию возьмем следующую: обладание Photoshop последних версий и наличие неплохого опыта работы в программе. Предположим, на рабочем столе также есть прекрасный шаблон, у которого для начала следует выключить все тестовые слои и иконки, поля ввода, то есть все, что было сверстано в HTML. По итогу останется только визуальная составляющая. Работать дизайнер будет именно с ней.
Как разрезать макет сайта
Макет для начала разделяется на составляющие структурные элементы, для чего направляющие опускаются. Это банальная линейная разметка, которая может и не отображаться. Для исправления этого досадного недоразумения идем в меню, где ищем Просмотр, а затем Линейки. Для их отображения нажимаем Ctrl+R. Для передвижения линеек нужно подвести курсор мышки, нажать левую кнопку мыши, а потом можно двигать сетку как угодно.
Как разрезать макет сайта
Разрезка шаблона должна осуществляться рационально: простое разрезание по направляющим породит большое количество лишних частей в макете. Компоновать элементы в картинку, которую потом будут отрезать, нужно с постоянным удержанием шаблона будущего сайта в воображении.

Осуществляется этот процесс с помощью инструмента Раскройка в инструментальном меню. Они имеет вид ножичка для бумаги. Подводим ножик к левому верхнему углу макета, нажимаем левую кнопку мыши, тянем по форме первого фрагмента. Отпускаем клавишу и получаем готовый визуальный элемент.
Как разрезать макет сайта
Каждый фрагмент изображения программа обозначит номером синего цвета в правом верхнем углу, а под ним будет серый номер следующего элемента. Для корректировки изображения ищите желтые маркеры по углам: двигая их, можно менять размеры. Только не увлекайтесь этим: если изображение изначально не имело достаточного качества, при расширении картинка будет все больше расплываться.

Сохранение отдельных объектов происходит в выбранные пользователем места. Для этого нажимаем Файл, затем Сохранить для Web в нужном формате. Как правило, это JPEG. Нужно обязательно оставить по дефолту сохранение только изображения. Иконка, кнопки, тизеры и линии первоначального макета можно сохранять отдельно в той же ранее указанной папке.  🙂

Если Вы уже имеете сайт, но Вам не нравится дизайн сайта, то сделайте редизайн сайта с помощью профессионалов.