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

При создании html-макета страницы иногда приходится иметь дело с множеством однотипных картинок. Например, выпало верстать фотоальбом. Нужно нарезать порядка двадцати «превьюшек», потом их всех поименовать и сохранить. Рутина.

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

Нарезка

Выделяем инструментом Slice Tool одну картинку. А потом, не отходя от кассы, нажимаем Alt и тащим слайс до следующего пациента. При необходимости корректируем форму слайса. Двадцать секунд - и всё порезано:

Сохранение

Каждый слайс должен иметь своё собственное, уникальное и вменяемое имя. Для этого нам нужно дважды кликнуть по слайсу и вызвать Slice Option . Но, если мы хотим ускориться, то правильнее будет сначала всё порезать, а именовать слайсы уже в Save for Web .

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

Однако у нас с вами целый полк из изображений, которые, скорее всего, будут нужно задать имя вида some-name-[n] . И в этом случае можно вообще не влезать в настройки слайса.

Выделяем нужные нам слайсы и жмём главную кнопку - Save . В окне сохранения указываем Selected Slices и выбираем в списке Settings пункт Other...

В окне Output Settings заходим в раздел Saving Files и здесь конструируем удобное для нас имя файла. Конструктор серьёзный, деталек много, так что никто не уйдёт обиженным.

Имея твёрдую руку вы затратите на всё это действие не больше минуты и получите пачку картинок. А о большем и мечтать сложно.

Итак, вы подготовили макет сайта и хотите разрезать его на фрагменты, дабы сверстать из них сайт. Рассмотрим, как это делается в 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 нам и вовсе не нужны, ведь это картинки белого цвета, поэтому при верстке сайта мы воьзмем лишь их размер. Впрочем это уже другая тема, она подробно изложена в разделе

Любому веб дизайнеру приходилось нарезать сайт для верстки в HTML+CSS . Заняты тем же самым не только веб дизайнеры, но и верстальщики-программисты. Я давно заметил, что как только дело доходит до резки сайта, дизайнеры и программисты достают из кармана инструмент выделения , и начинают поочередно выделять каждый элемент графики. Копируют, делают Paste в новый фаил, сохраняют. Примерно в таком прогрессивном темпе происходит резка всего макета.

Я и сам нарезал сайт точно так же. Старое и надежное всегда предпочтительнее нового и непонятного. Но от старых привычек надо же когда-то избавляться. Не зря же в Фотошопе уже лет 15 существуют прогрессивные способы резки сайта. Не такие прогрессивные, как в , конечно. Но тоже ничего. В этом уроке я возьму один из своих недавних макетов веб сайтов и нарежу его инструментом Slice Tool .

Как нарезать сайт в Фотошопе?

Правильную резку сайта стоит начать с направляющих. Направляющими являются пунктирные линии, которые помогают размечать макет в Фотошопе. Работая с ними нужно понимать, что направляющие никак не прикрепляются к краям пикселя. Если вы установите направляющую не между пикселей, а к примеру, по середине пикселя 50%+1% то при выделении вы зацепите этот лишний ненужный вам пиксель. Чтобы избежать я применю несколько нехитрых трюков.

• Убедитесь что у вас включены Views > Extras . Эта настройка отвечает за все вспомогательные метки одновременно.
• Включите линейку Views > Rulers , из линейки вы будете доставать направляющие.
• Включите Views > Snap . В общем виде это значит, что ваши направляющие будут крепиться к слоям, слои к направляющим, или друг к другу. В общем, все будет немного притягиваться как магнит. Это поможет вам быть более точным при работе с направляющими.
• Далее включите настройки Views > Show > Layer Edge , эта настройка будет показывать края слоев, при выделении.
• Views > Show > Guides — видимость самих направляющих.
• И Views > Show > Smart Guides . Они тоже не будут лишними.

Скорее всего большая этих настроек и так включена. Но проверить лишнем не будет.

Манипулирование слоями

Теперь несколько слов о манипулировании слоев. При резке сайта вам придется постоянно выискивать нужные слои. При этом большая часть разработчиков, занимающихся версткой, и слабо знающих Фотошоп, ищут слои в вкладке Layers Слои. Что, конечно, логично. Однако удобно это только в том случае если дизайнер позаботившись о вас, бережно разложил все слои по папочкам, аккуратно назвав каждую кнопку. В этом случае найти нужный элемент не сложно. Чтож, не всегда дизайнер поступает так сознательно. В хаотично раскиданных слоях порой невозможно найти ничего, особенно если слоев более ста.

На самом деле рыться в слоях панели Layers вовсе не обязательно. Вы можете точно идентифицировать местонахождение слоя инструментом Move Tool . Как это работает я уже показывал в . Просто выберите этот инструмент, и кликайте по нужным объектам нажав клавишу CTRL . Фотошоп автоматически выделит нужный слой на панели слоев. Вы можете так же нажать в настройках инструмента галочку Auto Select . Далее необходимо выбрать слои Layers . Тогда вам не придется постоянно нажимать CTRL , однако в этом случае инструмент будет работать постоянно в режиме авто нахождения. Куда бы вы не кликнули, он будет перескакивать со слоя на слой, что не всегда удобно, если вы хотите передвинуть выделенный слой.

Выбрав нужный слой его края тут же будут выделены благодаря настройке Views > Show > Layer Edge, которую мы включили несколько ранее. Так вам будет значительно проще настроить направляющие и нарезать сайт. Теперь, когда подготовления закончены, переходим к самой резке.

Размечаем макет направляющими

Включите линейку View > Rulers и вытягивайте направляющие мышкой из линейки. На самой линейке установите Пиксели. Для этого кликните по линейке правой кнопкой мыши и из выпадающего меню выберите Pixels . Далее вытягивайте направляющие одну за другой и размечайте ваш макет. Работайте инструментом , кликайте по элементам дизайна нажав CTRL , чтобы подсветить края слоя.

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

В результате у нас должна получиться следующая картина.

Инструмент Slice Tool

После того, как все области намечены направляющими, выбираем инструмент Slice Tool из панели инструментов. Этот инструмент Фотошопа представлен двумя инструментами:

• Slice Tool — вырезает графику на куски, а точнее, только определяет места, которые уже потом будут сохранены как разные изображения.
• Select Slice Tool — из названия понятно, что этот инструмент выделяет уже «нарезанные» области с целью поменять настройки. Почему два инструмента нельзя было объединить в один?

Кстати, я не говорил, что инструмент Slice Tool появился в Фотошопе, в ходе конкуренции с злосчастным Fireworks , с целью отбить у последнего часть рынка и представить веб дизайнерам, хоть какие-то полезные для них инструменты. С тех пор возможности инструмента Slice Tool практически никак не изменялись и не дополнялись. После покупки Adobe компании Macromedia , в пакете которой находилась программа Fireworks, все полезное для веб дизайнера продвигается строго в Fireworks . Последняя версия Фотошоп CS6 не принесла в инструмент Slice Tool никаких нововведений. Поэтому я со спокойным сердцем работаю в CS5 .

Выбрав инструмент Slice Tool , кликаем по кнопке Slice from Guides , что означает — нарезать на основе направляющих. Для этого мы их и создавали. И это самый простой способ создать области реза инструментом Slice Tool . Единственный его минус заключается в том, что Фотошоп не знает какие именно области являются активной разметкой, а какие области вспомогательные. Более того в нашем макете получается слишком много областей пересечения. У нас есть направляющие для Логотипа, но направляющие снизу для формы ввода режут логотип на несколько частей.

Чтобы исправить недостатки выберите инструмент Slice Select Tool нажмите SHIFT и выделите все три куска логотипа. После чего кликните правой кнопкой мышки и из меню выберите Combine соединить.

Тоже самое проделайте и с другими областями разметки Slice.

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

Ручная резка сайта Slice Tool

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

На панели настроек при ручной разметке вам доступны следующие функции:

• Normal — обычная стандартная разметка. Курсор на рабочую область и рисуете сколько нужно.
• Fixed Aspect Ratio — создает области разметки в соотношении 1:1, 2:1 и так далее.
• Fixed Sized — создает разметку определенного размера. Вписываем пиксели, получаем область нужного размера.

И это все что умеет инструмент Slice Tool . Я только что рассказал о всех его возможностях в паре абзацев. Более интересный инструмент Slice Select Tool , к которому мы сейчас и перейдем.

Инструмент Slice Select Tool

Slice Select Tool — управляет вашими разметками. Этим инструментом вы можете передвигать области, выравнивать, делить на двое, сливать и присваивать различные настройки, полезные для создания HTML прототипа. Постепенно мы рассмотрим все из них.

Но для начала несколько полезных советов.

Создавая области реза ручным способом вы создаете активные и пассивные области. Пассивные области возникают автоматически, точно также, как если бы вы вырезали ножницами квадратик из чистого листа бумаги. Остаток бумаги и есть пассивные области. Эти области не будут сохраняться как графика, но любую пассивную область можно превратить в активную. Как? Для демонстрации я опять разметил макет направляющими, но области нарезки нарисовал вручную.

Инструментом Slice Select Tool выберите любую пассивную область реза, а на панели настроек нажмите кнопку Promote .

Некоторым пользователем может мешать обилие областей разметки. Пассивные, активные, вы не хотите видеть все области, хотите видеть только то, что будет сохранено отдельными картинками. В этом случае просто нажмите кнопку Hide Auto Slices и все пассивные области разметки будут скрыты.

В некоторых ситуациях вы хотите доработать дизайн, а области резки начинают мешать. В этом случае выберите View > Show > Slices . И области разметки пропадут. Как только вы активируете инструмент Slice Tool они опять появятся.

Иерархия Slice областей

Области реза находятся по отношению к друг другу в жесткой иерархии. Точно так же как и векторные контуры Фотошопа внутри векторной маски. Конечно у вас нет дополнительной панели «Слоев» чтобы перемещать области реза, но она и не нужна. На панели инструмента Slice Select Tool у вас следующие кнопки.

• Bring to Front — перемещает на самый верх.
• Bring Forward — перемещает на 1 слой вверх.
• Send Backward — перемещает на 1 слой вниз.
• Send to Back — перемещает на дно.

Слово слой в данном случае не очень корректно, речь идет о области реза Slice .

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

Деление области реза Slice

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

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

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

С инструментом Slice Tool найти центр проще некуда. Просто кликните по пустой рабочей области, нажмите кнопку Device и разделите область на 4 равные части. После этого вытаскивайте направляющие и размечайте область. Порезанные области далее можно либо удалить правой кнопкой мышки и из меню Delete . Либо скрыть

Точно так же я воспользуюсь Slice Tool для разбивки области макета под меню. Ниже я подготовил красную область для условного контента. Теперь я хочу разбить её на 5 областей под кнопки, и вы знаете, что Фотошоп не лучшая программа для разметки и разбивки. Инструментом Slice Tool я нарисую область меню. А далее разобью её на 5 равных частей диалоговым окном Device .

Разметка на основе слоя

Ещё один интересный и быстрый способ создать разметку, без особых усилий — это создать разметку на основе конкретного слоя. Особенно хорошо этот способ подходит для не сложных прямоугольных слоев. Для этого вам нужно выделить нужный слой на панели слоев Layers. А затем открыть Layers > New Layer Based Slice

Фотошоп вмиг очертит ваш слой областью реза.

Выравнивания областей разметок

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

Для этого вам конечно нужно выделить несколько областей разметки инструментом Slice Select Tool . После этого воспользоваться функциями выравнивания на панели настроек. Описывать каждую функццию в рамках этой статьи я не буду, так как эти опции уже неплохо описаны в статье . В инструменте Slice Tool они работают точно так же.

Настройки области Slice

Последним диалоговым окном в этой статье пожалуй будет окно настроек самой области разметки. Я не буду углубляться в это диалоговое окно, потому что оно затрагивает совершенно отдельную тему: моделирование в Фотошопе реального рабочего прототипа на HTML+CSS . Более того, в Фотошопе вы можете даже сохранять XTML фаилы с скриптами анимации. Что это значит? Это значит что вы нарезаете сайт, и по ходу дела сохраняете прототип верстки.

Прототип верстки — это сгенерированная квази верстка. Её цель простая, показать клиенту вид дизайна в браузере. Конечно Фотошоп весьма слаб в создании таких прототипов. С тех пор как Адобе заполучила Fireworks все заточенные под веб разработки велись в нем. И я не уверен что вы когда-либо будете пользоваться настройками прототипа в Фотошопе. Не очень уверен что этим вообще нужно пользоваться именно в Фотошопе. Но тем не менее, если вы сделали дизайн, разметили его инструментом Slice Tool , вам останется всего пара кликов чтобы сгенерировать такой прототип. Подробнее об этом я расскажу в следующих статьях.

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

Сохраняем нарезанные картинки

Чтобы сохранить нарезанные картинки переходите в File > Save for Web . И это самое основное диалоговое окно для создания будущего прототипа, о котором мы поговорим в следующих статьях. Но сейчас мы просто сохраним разом нарезанные картинки.

В диалоговом окне вы увидите ваш макет. Вы так же увидите области разметки. Выберите инструмент Slice Select Tool и выделите такую разметку. В поле с правой стороны вы можете настроить опции графики, конкретно для этого участка выделения. Большую картинк имеет смысл сохранить в JPG , логотип в PNG или GIF . Все настройки нужно выставить заранее, пройдясь по всем областям разметки.

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

Теперь нажимаем на Save . В диалоговом окне сохранения в Формате выбираем Images Only . В настройках Default . В свойствах резки вы можете выбрать области для сохранения из Всех кусков, активных кусков Users Slices или только тех кусков, которые вы выделили в окне Save for Web .

Лично я выберу Selected Slices , потому что я хочу сохранить очень определенные области разметки, так как мне нужно несколько раз вернуться к макету, чтобы отдельно сохранить графику на полупрозрачном фоне. Всего несколько минут такой работы и графика нарезана.

Надеюсь эта статья оказалась для вас полезной и вы нашли в неё что-то новое. Теперь вы без особого труда сможете автоматизировать нарезку сайта в Фотошопе. Удачных экспериментов!

Инструкция

Откройте файл шаблона в графическом редакторе 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.

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

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

Любой текст, который можно воспроизвести в самой верстке, т.е. программно с помощью кода, вряд ли необходим в качестве графики. Это правило помнят все верстальщики. Другое дело — если текст служит декоративным оформлением, его сложно воспроизвести с помощью HTML/CSS.

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

Все изображения кликабельны, откроется версия в полном разрешении.

Итак, как мы видим, в Photoshop открыт PSD-макет дизайна сайта «Недвижимость Петербурга». Здесь справа у нас есть панель слоев. Слои в PSD-файле — костяк начала верстки. Без слоев верстка в 99% случаях попросту не удастся. Ведь слои представляют собой практически каждый элемент, нарисованный в дизайн-макете. Если бы все, что показано на скриншоте, было слито в один слой, было бы крайне затруднительно разрезать такой макет качественно и правильно. По ходу вашей практики в верстке сайтов вы это еще не раз поймете, поскольку даже дизайнеры могут допускать ошибки, связанные с неправильным объединением каких-то определенных графических элементов в один слой, из-за чего работа верстальщика зачастую может встать на каком-либо этапе.

Вернемся к описанию способа ручной нарезки PSD-макета для верстки. Предположим, нам необходимо сверстать все так, чтобы в точности так в HTML оно и выглядело. Для этого мы будем каждый ярко выраженный графический элемент сохранять в определенном формате: JPG, GIF, PNG и т.п. Эти три формата наиболее часто используемы в веб-графике. А чтобы сохранить графику в привычных для нее файлах, нам нужно сначала правильно нарезать сам макет. Зачастую в процессе нарезки приходится отключать множество слоев, оставляя лишь тот, который нужно вырезать. Либо переносить конкретный необходимый слой в новый Photoshop-документ.

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

Давайте разберем все на примере. Предположим, нам нужно вырезать логотип. Как мы видим, сейчас он расположен на градиентном фоне серых оттенков. Это слабо заметно в области его действия, но на деле же градиент мог оказаться намного «круче» и разноцветнее. Поэтому просто так взять — выделить — обрезать логотип нельзя. Запомните основной принцип правильной нарезки перед версткой — всегда отделяйте основной элемент от фонового. Также, как элемент заднего плана от элемента переднего. Уровней может быть не обязательно 2, поэтому, как правило, продумывать необходимо заранее.

Выделим логотип с помощью базового инструмента Rectangular Marquee Tool (M).

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

Теперь у нас есть выделенный логотип — отлично. Но необходимо избавиться от элементов заднего плана, помните? В данном случае таковым является градиентная заливка. Ищем слой в панели слоев, соответствующий этой заливке.



И попросту отключаем видимость фоновых слоев. Почему два? Потому что слой «фон2» — это градиентная заливка, а самый основной фон белого цвета служит фоном для остального контента в макете. Мы отключаем оба слоя, поскольку и слой «фон» действует на область с логотипом. Теперь логотип в окне редактора Photoshop выглядит следующим образом:

Отлично! Клеточки за логотипом свидетельствую о том, что там ничего нет, пусто. Т.е. мы получили полупрозрачный элемент, в данном случае — логотип. Как правило, этого недостаточно. Да, не спешите сохранять в PNG или GIF в прозрачном режиме (ведь именно в прозрачном виде нам необходимо сохранять те элементы, которые «плавают» на неоднородном фоне). Для начала сделайте еще одну вещь — обрежьте углы логотипа так, чтобы не оставалось лишних пикселей. Это делается с помощью команды меню Image > Trim. В появившемся диалоговом окне в блоке Based On мы выбираем, на чем основывается обрезка с углов изображения. Это могут быть три способа: Transparent Pixels (обрезать прозрачные пиксели), Top Left Pixel Color (обрезка в зависимости от верхнего левого цвета пикселя) и Bottom Right Pixel Color (соответственно, обрезка в зависимости от нижнего правого цвета). В данном случае я выбрал обрезку только прозрачных пикселей и кликнул ОК. Вот, что получилось:

Вот теперь можно считать обрезку логотипа завершенной! Для тех, кто в танке, сейчас будем учиться сохранять графику для веб с помощью Photoshop. Заходим в меню File > Save for Web & Devices. Так как у нас логотип на прозрачном фоне, и на HTML-странице он будет располагаться на неоднородном фоне, нам необходимо сохранить логотип в полупрозрачном формате. JPG для полупрозрачности совсем не подходит, он ее не поддерживает. Поэтому запомните, что орудовать в этом случае нам придется только с помощью либо GIF-формата, либо PNG-24 (PNG-8 морально устарел и не годится для сохранения качественной графики с такой же качественной поддержкой прозрачности). Часто я использую формат PNG-24 с включенной опцией Transparency (прозрачность).

Минус прозрачности в формате GIF заключается в том, что прозрачные пиксели не учитываются, но вокруг контуров графических элементов создаются лишние пиксели определенного цвета. Другими словами — в графике есть также такое понятие, как полупрозрачные пиксели. Это могут быть «смазанные», не видные вооруженным глазом контуры элементов, которые формат GIF заменяет определенным однотонным цветом. PNG-24 в этом вопросе куда более грамотен, но…

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

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

Итак, предположим, что вы сохранили логотип в формате PNG. Поздравляю! Теперь его можно с успехом использовать при верстке сайта в качестве PNG-изображения.

У новичков может возникнуть вопрос, а как вернуться к первоначальному виду макета, чтобы приступить к дальнейшей нарезке графических элементов? Это нетрудно. Просто отмените несколько шагов истории с помощью Ctrl+Z или команды меню Edit > Undo. И вы вернетесь к первоначальному облику макета.

Таким образом продолжайте вырезать каждый элемент PSD-макета и сохранять его в файле JPG/GIF/PNG. Когда закончите, приступайте к верстке, но это уже другая история, которая, быть может, будет освещена в следующем посте нашего блога.

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

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

Вопрос: В чем преимущества и недостатки такой «ручной» нарезки?
Ответ: Самый главный и, пожалуй, единственный недостаток моего способа (впрочем, его наверняка использует большинство верстальщиков) — большие затраты времени на нарезку. Обычно средней сложности макет режется в течение 30-60 минут. Это время уходит на выявление горячих элементов макета (т.е. «где и что, и как резать»), на выделение и скрытие/отображение ненужных элементов, на саму нарезку, на сохранение в приемлемом формате и, возможно, оптимизацию графики.
Ведь существует метод для «чайников». В Photoshop есть инструмент Slice Tool. С помощью него можно нарезать макет подобно плитке шоколада, после чего он сохранит каждую дольку в отдельный графический файл самостоятельно. Но данный метод вовсе непригоден ввиду того, что он делает нарезку грубой, и так или иначе нужно вручную или с помощью простейших инструментов фотошопа подправлять размеры каждого конкретного изображения, скрывать фоновые слои и прочее.

Вопрос: Можно ли сверстать макет не из PSD-файла, а из CDR (CorelDRAW) или JPG?
Ответ: Из CDR, разумеется, можно. В таком случае верстальщик работает уже с корелом. Либо даже с иллюстратором (формат AI). Просто найти дизайнера, который рисует дизайн-макеты для сайтов в программе, с корней предназначенной для полиграфических работ, проблематично. Львиная доля макетов все же рисуется в фотошопе.
А по поводу JPG — это спорный вопрос. Можно, конечно, открыть любую картинку в фотошопе. Но качественная и безболезненная нарезка JPG-макета в фотошопе напрямую зависит от его сложности. Если это очень сложный, насыщенный графикой макет-картинка, то нарезать практически невозможно. Кроме того, здесь также не последнюю роль играет качество исходника. По-моему, давно уже не найдешь клиентов, которые приносят низкокачественный JPG-макет верстальщику на верстку. Да, кстати, он имеет право не взяться за такую работу, поскольку технически это невыполнимо. А рисовать — задача дизайнеров.

Вопрос: Сколько времени отнимает верстка?
Ответ: Это, конечно, зависит от многих факторов. Опыта верстальщика, сложности макета. Могу сказать точно, что у «среднего» верстальщика макет, представленный на скриншоте в данной статье, вышел бы за 5-6 часов интенсивной, непрерывной работы. Это можно назвать средним уровнем. Высокий уровень макетов — это JS-скрипты, динамика в самой верстке. Как правило, тут речь идет уже далеко не о нарезке графики, но это и совсем другая история. Тем не менее, набив руку, вы запросто сможете верстать подобные макеты за несколько часов.

Спасибо за внимание, и до скорой встречи!