Как правильно порезать PSD-макет перед версткой

Инструкция

Откройте файл шаблона в графическом редакторе Adobe Photoshop. Выберите в меню пункты File и Open либо нажмите комбинацию клавиш Ctrl+O. В диалоге, появившемся после этого, перейдите в директорию с файлом, выделите его в списке и нажмите кнопку «Открыть».

Выберите удобный масштаб просмотра изображения шаблона. Воспользуйтесь инструментом Zoom Tool или пунктами контекстного меню. Следует выбрать масштаб, позволяющий позиционировать курсор с точностью до пикселя. Это необходимо для точной установки опорных линий.

Сформируйте набор опорных линий над изображением шаблона. Включите отображение линеек в окнах документа, если оно еще не включено. Для этого нажмите Ctrl+R либо выберите в меню пункты View и Rulers.

Добавьте необходимое количество опорных линий и позиционируйте их по границам разделения областей шаблона. Линии должны проходить через все места, по которым необходимо разрезать шаблон. Они должны ограничивать все изображения и логические области (логотип, шапка сайта, горизонтальные и вертикальные меню, и т.д.), которые будут представлены на web-странице.

Активируйте инструмент Slice Tool. Его кнопка находится на вертикальной инструментальной панели.

Создайте необходимое количество областей разрезания при помощи инструмента Slice Tool. Выберите удобный масштаб отображения шаблона. Мышью задавайте границы областей. Направляющие линии, добавленные на третьем шаге, обеспечат точное позиционирование границ создаваемых объектов. При необходимости скорректируйте уже существующие области при помощи инструмента Slice Select Tool.

Измените свойства областей разрезания, если это требуется. Активируйте инструмент Slice Select Tool. Кликните правой кнопкой мыши по нужной области. В контекстном меню выберите пункт Edit Slice Options. В появившемся диалоге Slice Options выберите тип области (изображение, пустая область, таблица), режим заполнения фона, укажите, если это надо, имя, целевой URL, содержимое атрибута alt и другие значения. Нажмите кнопку OK.

Итак, вы подготовили макет сайта и хотите разрезать его на фрагменты, дабы сверстать из них сайт. Рассмотрим, как это делается в Photoshop. Посмотрите на панель инструментов, если у вас есть вот такой инструмент:

Итак, предположим у нас есть вот такой макет сайта (взят из шаблона):

Для начала выключим все текстовые слои, а также иконки, поля ввода и все прочее, что, либо верстается в HTML, либо сохраняется отдельно (иконки, кнопочки...). В итоге должно остаться вот что:

Теперь опустим направляющие, деля ими макет на структурные элементы (возможно они у вас уже есть). Если у вас не отображены линейки, то выберите в меню: Просмотр -> Линейки или нажмите Ctrl+R. Чтобы опустить направляющую подведите курсор мыши к верхней линейке, нажмите левую клавишу мыши и тащите направляющую вниз. Так можно опустить сколько угодно направляющих. Аналогично подведите курсор мыши к левой линейке, нажмите левую клавишу мыши и тащите направляющую вправо.

У меня получилось вот так:

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

Определились и двигаемся дальше. Берем инструмент "Раскройка" (Tools), его еще называют ножик, потому что он имеет такой вид. Начинаем резать. Для этого подведем курсор мыши (в виде ножика) в левый верхний угол макета, нажмем левую клавишу мыши и растянем по форме первого фрагмента. Отпускаем.

В левом углу фрагмента появится номер фрагмента (он синего цвета, т.к. активный), а ниже появится номер следующего фрагмента (серого цвета). Желтые маркеры на сторонах фрагмента позволяет его подкорректировать. Если это нужно ухватитесь за них мышкой и подвиньте границу фрагмента.

Снова подводим курсор мыши, теперь уже к левому верхнему углу второго фрагмента и снова растягиваем рамку. Так поступаем со всем макетом. У меня получилось вот так:

Вы можете разрезать по-другому, так, как считаете нужным. Остался последний шаг - сохранить эти фрагменты. Для этого выбираем в меню: Файл -> Сохранить для Web, выбирайте самый, с вашей точки зрения, оптимальный формат JPEG (можно и GIF, но для основы сайта я предпочитаю JPEG), щелкаем "Сохранить". В открывшемся диалоговом окне сохранения укажите следующее:

Место, куда сохранить, выберите сами. Жмем ОК. В итогое получаем папку Images, внутри которой наши фрагменты с именами images_01.jpg - image_11.jpg. Т.е. имя файла, которое вы написали при сохранении, является основой имени для всех картинок. Теперь вы можете их переименовать.

Теперь возвращаемся к нашему макету и сохраняем отдельными картинками иконки, кнопочки, линии и т.д.

На этом можно было бы и закончить, но давайте посмотрим еще раз на фрагменты, которые мы сохранили. В основном это прямоугольники разных коричневых оттенков, которые будут фоном в вашем будущем сайте. А рационально ли хранить картинку шириной 780 пикселов, если можно сохранить ее часть, скажем шириной 10 пикселов и замостить ею фон?

Да, не рационально. Поэтому заменим фрагменты 2, 3, 5, 7 и 8 одноименными оптимальными фрагментами (т.е. шириной в 10 пикселов). А фрагменты 1, 6, 8 и 10 нам и вовсе не нужны, ведь это картинки белого цвета, поэтому при верстке сайта мы воьзмем лишь их размер. Впрочем это уже другая тема, она подробно изложена в разделе

У нас есть макет сайта, в формате PSD, мы хотим разрезать (раскроить) его на фрагменты для дальнейшей HTML верстки сайта.

Для этого мы будем использовать программу Photoshop

Шаг 1. Открытие PSD макета в Photoshop для раскройки

PSD - макет сайта для PS +готовые изображения, если у вас нет PS, либо вам лень это делать самим.

Разархивируйте файлы с архива в рабочую папку, если вы этого еще не сделали. Откройте файл с названием home-o.psd. Вид интерфейса самой программы Photoshop у вас будет отличаться от моего, так как у нас могут быть разные версии программы, и скорее всего сами окна программы у вас расположены, так как вам удобней.

На скриншоте показано расположение моего интерфейса окна Photoshop

Шаг 2. Инструмент раскройка

Найдите и выберите в панели инструментов (ToolBox) нужный нам инструмент «Раскройка» или он может называться «Нож» , в зависимости от вашей версии программы. Находится рядом с инструментом «Рамка» или «Crop» в английской версии Photoshop.

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

Шаг 3. Разрезаем PSD макет на фрагменты

Пользоваться инструментом "Раскройка" очень просто, всё что вам необходимо, это выделить все необходимые вам фрагменты шаблона для последующей верстки. Но помните золотое правило: «7 раз отмерь, один раз отрежь».

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

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

Выделение мелких элементов шаблона

Шаг 4. Сохраняем выделенные фрагменты шаблона

Перед тем, как перейти к сохранению фрагментов шаблона в виде кусочков изображений, проверьте ещё раз, все ли нужные вам элементы были выделены. Если да, перейдите в раздел Файл - Сохранить для Web и устройств , или воспользуйтесь комбинацией клавиш Alt+Shift+Ctrl+S (Если хватит рук)

Сохранение выделенных фрагментов

Шаг 5. Настройка сохраняемых фрагментов

У вас должен открыться следующий интерфейс, в нем вы можете просмотреть ещё раз размеченные области. Так же вы можете изменить масштаб изображения и его качество как в целом, для всего шаблона, так и конкретно для каждого выделенного фрагмента.

Параметры сохранения выделенных фрагментов

Вы можете выделить фрагмент , просто кликнув по нему, но убедитесь что в качестве текущего инструмента у вас выбран «Выделитель» . Когда нужный элемент выбран, он подсвечивается и становится более заметным на фоне остальных фрагментов.

Для каждого выделенного фрагмента, вы можете выбрать в каком формате его сохранять, в каком качестве , устанавливать уровень размытия и метод оптимизации .

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

Шаг 6. Сохранение изображений в папку

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

Но не спешите продолжать. Здесь есть еще пара настроек, которые необходимо установит, если они не выбраны по умолчанию.

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

А в поле «Фрагменты» должно стоять «Все фрагменты»

И только после этого всего можно нажимать «Сохранить».

Вам еще может выдать вот такое предупреждение.

Игнорируйте его!

Шаг 7. Удаляем лишнее, оставляем нужные фрагменты макета

В результате свой работы Photoshop создаст большое количество лишних изображений. Смело выделяем их и отправляем в корзину.

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

Те кто начинал изучать тематику создания сайтов, наверняка слышали о том что можно разрабатывать дизайн в программе фотошоп, и задавались вопросом: как создать дизайн сайта в фотошопе? На самом деле это процесс не простой. В этой статье будет рассказано то, как нарезать макет на определенные изображения которые Вы потом будете вставлять к себе на веб-страницу.

Допустим, Вы выбрали бесплатный вариант создания дизайна Вашего сайта. Вам нужно ли самому нарисовать PSD макет, либо взять готовый, например .Загрузили файл PSD в программу Photoshop. Давайте рассмотрим такую картинку в качестве примера.

Дело в том, что некоторые изображения и некоторые виды фона нельзя сделать на CSS и HTML. Поэтому эти объекты вам придется вырезать. В этом примере к таким объектам относятся блок с колесом и текстом около него, иконка возле слова «Новости» и желто-оранжевый фон. Начните с самого крупного объекта – фона.

Для этого нажмите на правой панели программы кнопку «Слои» и в выпадающем меню отключите все изображения кроме «Фон». А потом нажмите на левой панели кнопку с изображением ножа и выберете инструмент «Раскройка».

Инструментом «Раскройка» выделяете весь фон. Нажимаете на кнопку «Файл» и в выпадающем меню кликаете «Сохранить для Web…».

После этого появится окно, в котором вам нужно выбрать формат PNG-24. Этот формат дает наиболее качественное изображение.

Нажимаете кнопку «Сохранить». Открываете ту папку, в которую Вы сохраняете эти картинки. Эту картинку нужно переименовать в bg.png (background). Теперь перейдем к следующему крупному объекту – шапке сайта. Для того чтобы ее вырезать отключите фон в выпадающем меню «Слои». Выберите инструмент «Раскройка». Нажмите клавишу «Delete», чтобы удалить старую раскройку и выделите инструментом блок шапки. При выделении постарайтесь, чтобы на картинке не осталось ничего лишнего и в тоже время какие-нибудь элементы не были обрезаны.

Опять нажимаете на кнопку «Файл» и в выпадающем меню кликаете «Сохранить для Web…». Снова выбираете PNG-24 и нажимаете «Сохранить». Заходите в папку сохраненных рисунков и переименовываете картинку в logo.png. При создании сайтов использование латинского шрифта имеет принципиальное значение. Это связано с кодировкой. Поэтому при названии файлов вы можете использовать только латинский алфавит, точку, тире и черту подчеркивания. Другие буквы и знаки недопустимы.

Переименуйте картинку в new_icon.png. Теперь выделите все три картинки и перенесите их в папку images Вашего сайта.

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

В Интернете существует (на момент написания статьи ) мало материалов с примерами как нарезать макет в Photoshop. Для новичков-верстальщиков этот факт является камнем преткновения.

И хотя на форумах, посвященных web-дизайну, много говориться о том, что … да там все просто - нечего учить cite>, … в сети полно информации по этому вопросу cite>, но на самом деле это не совсем так. Я могу судить об этом по самом себе. Мне потребовалось немало времени, чтобы самому разобраться и докопаться до процесса нарезки.

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

Итак, у нас имеется psd-макет, созданный неким “гением” web-дизайна:

Как и положено, макет представлен в формате psd (в исходном коде) со всеми слоями так, как нарисовал его дизайнер.

Нам необходимо вырезать логотип будущего сайта. В данном случае это красивая цветастая напись POLO360. Видим, что логотип состоит из двух текстов - самого POLO360 и нижней строки “My kind of business blog”. Также имеется некое графическое изображение (слева от надписи), которое также является частью логотипа. В сумме все эти объекты являются одним целым и представляют логотип сайта.

Вот нам и предстоит задача вырезать его. Первым и самым трудным делом является нахождение всех слоев, отвечающих за прорисовку логотипа. Для этого нужно выбрать инструмент “Move Tool (V)”. В панели инструментов Photoshop необходимо проверить, что стоит галочка в разделе “Auto - Select”:

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

Теперь начинается самое интересное. Если дизайнер человек ответственный и пунктуальный, то перед передачей макета на верстку он рассортирует все слои по папкам. Каждая из папок будет однозначно указывать и содержать в себе все слои, отвечающие за отрисовку только одного объекта. И жизнь верстальщика значительно упрощается.

Но такое бывает редко и слои разбросаны по палитре как попало. нам необходимо методом “научного тыка” найти нужные нам.

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

Когда все слои найдены, картина в “Палитре слоев” будет примерно такой:

Теперь объединяем отмеченные нами слои. Для этого держим зажатой клавишу Ctrl kbd> и выделяем каждый из слоев одинарным щелчком мыши. Получаем следующую картину:

Далее необходимо объединить выделенные слои в один. Другими словами, мы сведем нужные нам слои в один и в результате изображение (в нашем случае - логотип) будет цельным. Только так мы можем вырезать его впоследствии. Для объединения слоев щелкаем правой кнопкой мыши на любом из выделенных слоев и в открывшемся контекстном меню выбираем “Merge Layers”:

Видим такую картину:

Несколько слоев слились в один. Все, теперь мы готовы к нарезке.

Выбираем в панели инструментов “Rectangular Marquee Tool(M)” и обводим логотип произвольным прямоугольником:

Теперь копируем выделенную нами область - нажимаем на клавиатуре комбинацию клавиш Ctrl+C .

Создаем в Photoshop новый документ - нажимаем Ctrl+N . Откроется новая вкладка с диалоговым окном настройки создаваемого документа:

Здесь самым важным является поле “Preset”. В его значении должно стоять “Clipboard (Буфер обмена)”. Если все было сделано правильно, то Photoshop автоматически создаст новый документ с размерами той области, которую мы скопировали. Размеры программа возмет из “Буфера обмена”, куда была помещена выделенная нами область. Остальные параметры для нас неважны. Нажимаем ОК.

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

Нам осталось вставить в этот документ выделенную область, которая все еще находится в “Буфере обмена”. Для этого нажимаем на клавиатуре Ctrl+V . Результат:

Как видим, Photoshop автоматически обрезал изображение так, чтобы не было пустых областей вокруг него (ведь при выделении мы создали произвольный прямоугольник - лишь бы выделить логотип).

Однако, белый фон остался. А он нам совсем не нужен. Это делается очень просто. Переводим взгляд на “Палитру слоев”” и видим там всего два слоя: “Layer 1” и “Background”. Слой “Layer 1” - это вставленная нами область, а “Background” - фоновое изображение. Щелкаем мышью на значке “глазика” напротив слоя “Background”:

Само изображение в окне Photoshop изменилось - вместо белого фона появилась шахматная “доска”. Это говорит о том, что фоновый слой у нас теперь прозрачный.

Здесь нам нужны два поля.

Верхнее - для выбора формата сохраняемого файла. В Интернете имеются подробные описания, как выбрать нужный формат. На самом деле все просто. Формат GIF имеет поддержку прозрачного фона, но не имеет поддержки передачи градиентов. Формат JPEG наоборот, хорошо передает плавные переходы цветов (градиент), но у него отсутствует прозрачный фон. Формат PNG-8 очень похож на GIF, только имеет лучший алгоритм сжатия. Формат PNG-24 имеет как поддержку градиентов, так и прозрачный фон (по другому называется - прозрачные пиксели). В нашем случае нам нужен как градиент, так и прозрачный фон, поэтому выбор однозначен - PNG-24.

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

Все, сохраняем файл с выбранными настройками и задаем ему имя -

1

logo.png

.

На этом обзор примера нарезки макета в программе Photoshop заканчиваю. Думаю, он был достаточно полным и понятным.