Slice tool в Фотошопе. Нарезка макета из PSD шаблона

У каждого верстальщика есть свои определенные методы работы с 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-скрипты, динамика в самой верстке. Как правило, тут речь идет уже далеко не о нарезке графики, но это и совсем другая история. Тем не менее, набив руку, вы запросто сможете верстать подобные макеты за несколько часов.

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

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

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

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

Именование отрезков

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

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

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

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

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

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

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

Очевидно для того, чтобы всё это работало правильно, вам нужно предельно чётко распределять элементы по слоям. Здесь гораздо больше времени требуется на распределение объектов по слоям и папкам, но это гораздо меньшая проблема, поверьте опыту!

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

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

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

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

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

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

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

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

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

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

Экспорт отрезков

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

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

Если у вас имеются созданные отрезки, превью документа отображает сразу их все (к сожалению, превью также включает и ненужные автоматически созданные отрезки). Здесь вы просто можете кликать, выбирая каждый отрезок, и оптимизировать настройки для каждого индивидуально. Настройки включают тип файла, его качество и так далее. Т.е. за один присест вы можете экспортировать все три отрезка в JPG и PNG, и каждый из них с тем качеством, которое вы посчитаете приемлемым.

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

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

Вывод

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

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

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

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

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

Сервис автоматической верстки сайтов дополнен новым (бесплатным! ) сервисом по . В связи с этим, расскажем, что стоит учитывать при нарезке картинок из дизайн макета 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

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

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