Инструкция

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

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

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

Нарезка

Сохранение

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

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

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

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

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

Наверное, мало кто любит верстать дизайны в Photoshop. Если быть точнее, речь идёт не о самой конвертации PSD в веб-сайт, а о конкретном процессе нарезки файла и экспорта изображений инструментами Photoshop. В целом, процесс очень утомительный, ведь надо отделить каждый элемент дизайна и вручную его экспортировать.

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

Три типа нарезки в Photoshop

Три типа? Это было самым интересным, с чем мы столкнулись в процессе исследования. Когда особо не вдаёшься в это с головой, сидишь и думаешь, что есть лишь один метод. Но это не так.

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

Как известно, для того, чтобы разрезать PSD, сначала берётся инструмент резки (Slice Tool – C) и рисуется короб вокруг области, которую нужно экспортировать в отдельное изображение. Добавив отрезки/области для всех элементов, которые вам нужны в отдельных изображениях, вы можете существенно оптимизировать и ускорить процесс экспорта.

Когда вы создаёте отрезок, у вас должно получаться нечто, что отображено на изображении ниже.

Здесь мы нарисовали короб вокруг логотипа в верхней части страницы. Это действие производит как ручную резку, так и несколько автоматически сделанных отрезков. Когда вы создаёте отрезок, Photoshop расценивает это так, как будто вашей целью является разделение цельного PSD-файла на несколько серий отрезков. Это немного надоедает, и позже мы обсудим варианты, как избежать этого. А сейчас вам нужно учесть, что каждый раз, когда Photoshop делает такой вывод, границы вашего отрезка расширяются, тем самым создавая несколько других областей. Это отображено на изображении выше.

Уловки при работе с Ручной и Автоматической нарезкой

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

Перемещение и редактирование отрезков

Как только вы создали отрезок, перед вами должна появиться панель опций, схожая с панелью свободной трансформации (Free Transform). Посредством этой панели вы сможете двигать и редактировать отрезок. Вы также можете воспользоваться инструментом выделения отрезка (Slice Select Tool), чтобы убедиться, что вы редактируете именно этот отрезок, а не создаёте новые. Этот инструмент можно найти в выпадающем меню инструмента создания отрезков (Slice Tool).

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

Процесс крайне прост. Для начала, вам нужно выделить автоматически созданный отрезок, воспользовавшись инструментом выделения отрезков. Далее выберите автоматически созданный отрезок, который вам нужно преобразовать, и нажмите кнопку «Promote», расположенную ближе к верхней части.

Автоматически-разделяющиеся отрезки

Если у вас есть серия объектов, расположенных по горизонтали, вертикали или по сетке, вам не обязательно создавать область резки вокруг каждого из объектов. Вместо этого, вы можете создать один отрезок, который охватывал бы все объекты, и приказать Photoshop’у сделать всю остальную работу.

Для того чтобы сделать это, для начала вам нужно создать большой отрезок, нарисовав короб вокруг всех объектов. Далее, посредством инструмента выделения отрезков, кликните по кнопке «Divide» в верхней части страницы.

Отрезки по направляющим

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

Если вы действуете таким же методом, то это сильно упрощает процесс создания отрезков. Просто выставьте направляющие так, чтобы можно было разрезать ваш PSD-файл и игнорируйте инструменты для резки. Далее, после того, как вы закончите, выберите инструмент для резки, и нажмите кнопку «Разрезать по направляющим» (Slices from Guides), которая расположена в верхней части.

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

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

Теперь, не удивляйтесь! Даже если вы выберете опцию CSS, Photoshop всё равно вряд ли создаст чудо-сайт для вас. Вам гораздо удобнее и выгоднее будет сделать всё собственными руками или хотя бы в Dreamweaver’е. Это мы всё ведём к тому, что этих опций лучше избегать совсем.

Отрезки, основанные на слоях, и почему это лучший вариант

Одна вещь, которая делает процесс резки немного приятнее – это резка, основанная на слоях. Это нечто вроде ручной резки, только с некоторым преимуществом.

Как видно из названия метода, эти отрезки не основываются на коробе, как в первом случае. Здесь суть заключается в том, что края отрезка придерживаются границами слоя. Для того чтобы реализовать резку, основанную на слоях, выберите слой на панели слоёв, перейдите в меню и выберите пункт Layer>New Layer Based Slice. Учтите, что это будет работать, даже если у вас выбраны сразу несколько слоёв – каждый слой будет преобразован в отдельный отрезок!

Преимущество

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

Тем не менее, метод резки, основанный на слоях вполне приемлемый. Когда вы обработаете все слои, ваши отрезки будут созданы автоматически. Если вы добавите эффект, который изменяет границы (например, внешнее свечение), отрезок автоматически расширяется, чтобы охватить его. Если вы деформируете слой до 30% от его исходного размера, то и отрезок последует автоматически.

Обрезаем помехи

Ещё одна вещь, которая раздражает, наверное, каждого, кто сталкивался с резкой, это то, что процесс резки может сильно «испачкать» PSD-файл, особенно если речь идёт об автоматической резке.

К примеру, посмотрите на изображение ниже (оно сильно упрощено, но вы точно поймёте, о чем идёт речь). Здесь нужно было создать всего три отрезка, но Photoshop автоматически создал 12!

Для того чтобы избежать этого, мы можем просто взять инструмент выделения отрезков, и нажать кнопку скрытия автоматически созданных отрезков (Hide Auto Slices), расположенную в верхней части экрана. Это позволяет нам прийти к тому, о чём говорится в названии, т.е. скрыть все эти ненужные отрезки.

Вот этот ключевой момент, когда резка действительно помогает. Без резки, вам придётся сохранять всю вашу композицию отдельными порциями. Рабочий процесс будет представлять собой нечто вроде: создание выделения, вырезание, оптимизация под веб, сохранение, отмена вырезания, и так по кругу. Столько ненужных этапов! Давайте посмотрим, как дело обстоит с резкой.

После того, как вы окончательно указали все отрезки, ваш файл PSD готов к экспорту. Теперь вы можете пройти в меню Файл (File) к пункту сохранения для веб и устройств (Save for Web and Devices). Вероятно, вы уже знакомы с этим пунктом, но он немного отличается, когда у вас имеется уже разрезанный документ.

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

Вывод

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

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

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

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

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

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

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

Сервис автоматической верстки сайтов дополнен новым (бесплатным! ) сервисом по . В связи с этим, расскажем, что стоит учитывать при нарезке картинок из дизайн макета Photoshop и почему эта задача не такая тривиальная, как может показаться на первый взгляд.

Что надо иметь ввиду при нарезке графики из PSD файла

1. Для начала, требуется выбрать уровень качества экспортируемой графики. Должна иметься возможность как задать уровень качества по-умолчанию, так и переопределить его для конкретных слоев макета.
2. Должна быть возможность выбрать, какие из изображений требуется извлечь из PSD шаблона в JPG формате. Естественно, те слои, которые не содержат в себе прозрачных пикселей, автоматически извлекаются в JPG формате. Но слои с прозрачностью по-умолчанию извлекаются в PNG формате. При желании, можно пометить любой слой тегом #jpg и он будет нарезан в формате JPEG.
3. Графика должна быть максимально оптимизирована для WEB. В частности, должно производиться автоматическое сжатие PNG изображений, как без потери качества (lossless), так и с потерей качества (lossy) — так называемая квантизация PNG изображений в 8-битный формат. Это требуется для уменьшения размеров графики и улучшения показателей SEO. Оба вида сжатия рекомендованы сервисом Google Pagespeed.
   JPEG графика также должна быть оптимизирована.
4. Тексты со стандартными шрифтами (в том числе, Google Fonts) и примененными стилями, для которых есть соответствующие стили в CSS3, должны быть сверстаны как текст. Остальные тексты должны быть сверстаны как изображения.
5. Слои, которые возможно сверстать, как CSS3 код, не должны быть экспортированы. Он должны быть заменены CSS кодом.
6. Ширина и высота изображений должна быть минимальной, т.е. у нарезанных изображений не должно остаться пустых прозрачных полей по краям.
7. Надо учесть, что могут использоваться режимы смешения слоев, отличные от ‘normal’. В таком случае нельзя извлечь слой сам по себе, а требуется учитывать влияние слоев, находящихся под экспортируемым слоем.
8. Эффекты слоев должны быть применены к изображениям.
9. Эффекты, примененные к группам слоев, должны быть применены к каждому изображению внутри группы.
10. Иногда требуется экспортировать целую группу слоев как одно изображение (например, логотип). Если пометить такую группу слоев тегом #merge, то это будет сделано сервисом автоматически.
11. Экспорт должен работать достаточно быстро, т.е. занимать минуты, а не часы.

Автоматическая быстрая нарезка изображений из макета Photoshop

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

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