Ускорение нарезки макета в Photoshop

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

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

    Нарезка


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

    Нарезанные слайсы

    Сохранение


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

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

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

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

    Save optimized options

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

    image

    Имея твёрдую руку вы затратите на всё это действие не больше минуты и получите пачку картинок. А о большем и мечтать сложно.
    Поделиться публикацией
    Комментарии 73
    • НЛО прилетело и опубликовало эту надпись здесь
        0
        Если в фотошопе просто всё порезать и сохранить, то в этом случае у нас так же будет куча картинок вида filename-[n]. Но при этом имя файла макета не всегда годится для имени картинок, а в качестве номера будет порядковый номер слайса, тот, который был присвоен при нарезке.
        0
        удобная штука, давно ей пользуюсь :)
          –12
          Я вообще полюбил нарезку в Фотошопе, после того как узнал что он еще и в div-ах верстать
            –4
            Случаем не подскажешь пару-тройку статей хороших по div-ной верстке в Ps?
              –4
              дивы это прошлый век, сейчас модно на span
                –8
                козлы! те кто минусовал, хоть пишите за что!
                0
                Люблю я вот такие мануалы для облегчения житейских проблем :)
                  –6
                  Наглядно! Давно хотел освоить нарезку оформления в Фотошопе, наверное пора. Хоть и не дизайнер, но иногда бывает нужно. А то, бывает, подгоняю вручную в коде ;)
                    –3
                    Спасибо, наконец я узнал для чего нужна эта непонятная кнопа :)

                    Хочу отметить что резать ни всегда есть хорошо — зачастую для уменьшения количества HTTP-запросов и общего объема данных правильнее будет вставить все одной картинкой с использованием CSS — спрайтов
                      +1
                      Про спрайты вы товарищ не в тему.
                        0
                        Спрайты используются для сервисной графики. А здесь у нас контентная часть. Причём та, которая в реальных условиях будет загружаться пользователями.
                          0
                          Учитывая, то что меня заминусовали ниже нуля за этот пост, хочу отметить:

                          Господа, Вы не правы! Закидывать все фотографии для контекстной части в фотошоп, чтобы потом сделать их же нарезку — крайне не логичено, поэтому это как раз больше подходит для серверной графики.
                            0
                            Тут вот какая штука: макет делает графический дизайнер, html-шаблоны и нарезку делает верстальщик, а программингом серверной части занимается программист. При этом приёмка заказчиком делается на всех трёх этапах. Поэтому проще закинуть произвольные фото в макет и потом их нарезать, чем объяснять на пальцах клиенту — а вот тут у нас будут картинки.
                              0
                              Видимо это «особенности» вашего производственного цикла, где имеет место создание лишней работы дизайнера для верстальщика: дизайнер уменьшает фотографии, а потом вставляет их макет и не сохраняет при этом уменьшенные версии рисунков. Не согласованность, однако.
                          0
                          Не ново, но слишком усложненно с «custom»-ом. Нарезаем слайсы, save for web, save, в опции «slices» выбираем пункт «All user slices» (все созданные), пишем одно имя(!) и сохраняем. Он сохраняет в папочку images файлы вида filename-[n].
                          Очень удобно.
                            0
                            А номера он при этом как проставит? По порядку или по номерам слайсов?
                              0
                              Увы, по номерам слайсов :( но спасает Тотал командер, с групповым переименованием.
                            –6
                            • получается, что превьюшки сначала надо сделать и запихать в один файл? по-моему это далеко не 20 секунд. или откуда они у вас появились все в одном?
                            • Библиотеку GD2 уже отменили? Скриптом не проще их формировать «на лету»?

                            Или поясните смысл ваших манипуляций. Мож я не так понял.
                              +3
                              Эмм… тут речь про *.psd макеты, в которых дизайнеры вставляют превьюшки. Описанный способ — самый порстой для быстрого их извлечения.
                                0
                                в этой статье именно про создание макетов сайта…
                                  –4
                                  Вы не правы.

                                  >При создании html-макета страницы

                                  Это статья именно про верстку HTML страниц из PSD макетов.
                                    0
                                    это и имел ввиду…
                                  0
                                  Речь идет о верстке именно макета. В данном случае эти 20 превъюшек — та же самая «рыба». В данном случае писать еще и скрипт для генерации превъюшек — лишние телодвижения.
                                  –7
                                  За много лет сайтостроительства никогда не сталкивался с нарезкой однотипных картинок из psd. Просто не пойму смысла, ведь дизайнер их вставил в макет откуда-то, значит они у него есть отдельно? Нужно просто взять эту папочку с картинками, узнать какого размера нужны превьюшки (обычно указывается 1 размер — высота или ширина) и прогнать через пакетный resizer. Странные у вас методы работы, однако.
                                    0
                                    Иногда дизайнер бывает далеко. Иногда дизайнер и не помнит, откуда взял картинки. Да и зачем усложнять себе жизнь лишними папками, переименованиями?? Когда все есть на макете, да еще и нужного размера. Достаточно одной минуты, чтобы получить эти картинки, в оптимизированном для веба качестве.
                                      –3
                                      Гнать такого дизайнера надо, который не оставляет исходных материалов после себя :) Во-вторых не видел фотогалерею с 8 картинками, обычно их много десятков и на разных страницах. В третьих на любом нормальном сайте кроме превьюшки есть еще фулсайз, что-бы можно было нормально рассмотреть фотку не ломая себе глаза. Откуда же его брать тогда, если дизайнер не оставил исходников?
                                      В итоге конечно ваш подход имеет место жить, но только как теоретический приём, на практике же, за за 9 лет работы с сайтами и макетами ни разу не сталкивался с ситуацией описанной вами. Вся графика, которая нарезалась из макета имела разные размеры, разные имена файлов и оптимизировалась индивидуально.
                                        0
                                        Как выгнать жену директорв? ;)

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

                                        На самом деле, нарезка макета слайсами (slice) ускоряет процесс разработки, убедился на личном опыте. Просто автор привел самый простой пример.
                                          +3
                                          Для рыбы достаточно 2 фотографий — в портретной и пейзажной ориентации.
                                            0
                                            Согласен.

                                            Пример с галереей — хорош только как пример, реально же в любом современном проекте галереи генерируются скрипом, а для вёрстки её предварительного макета можно обойтись одной sample.jpg, мне очень тяжело представить зачем может понадобится верстать галерею.
                                        0
                                        кстати, любой нормальный пакетный ресайзер имеет функцию переименования файлов по шаблону, и обрабатывает за секунды сотни и тысячи фотографий. Простите, а вы за сколько секунд нарежете пару тысяч фотографий из макетов? Так что, повторюсь, это чисто теоретический приём.
                                          0
                                          В прототипе страницы не бывает тысячи файлов. А вот штук пятьдесят — запросто.
                                        0
                                        Иногда дизайнеры присылают jpg. Гнать его конечно надо, но сначала нужно работу закончить.
                                          0
                                          И вы будете из jpg делать нарезку сайта?
                                            0
                                            хи, может и ужасно это звучит, но у меня было такое пару раз :) Пришлось изворачиваться — а что делать?.. )
                                        0
                                        занимательно, учту на будущее…
                                          0
                                          Года три уже её юзаю, но обычно для того, чтобы полностью выдернуть с сайта все картинки, нужные для вёрстки. Получается довольно быстро, а сам код уже вручную. Сложные картинки можно потом, путём включения/выключения перекрывающихся картинок, отдельно добавить.(Save Selected Slice) ну итд)))
                                          Код правда он генерит все-равно хреново;)
                                          )))
                                            0
                                            описание работы с инструментом хорошее.
                                            Но ИМХО реально в работе это вряд ли поможет.

                                            Если у нас в макете несколько слоёв, и планируется что какая нибудь картинка будет в .png наезжать на текстовый блок, а другая будет градиентом 1px в .jpg, а третья .gif рамка которая накладывается поверх всех фотографий той же галереи, да ещё всё это на разных слоях, — всё равно надо будет их обрабатывать по отдельности, задавать им параметры сжатия, качества, цветности, скорее всего уже после вставки в макет.html слегка подгонять размер.

                                            Сделать из одной картинки несколько — да.
                                            Полноценно разрезать макет на изображения готовые к работе — никак нет.
                                              0
                                              Ну согласитесь, что большинство картинок все-равно можно таким образом быстро взять, а уже над «сложными» случаями естественно приходится поработать. ;)
                                                –1
                                                Ну согласитесь, что большинство картинок все-равно можно таким образом быстро взять, а уже над «сложными» случаями естественно приходится поработать. ;)
                                                0
                                                На примере показан не макет а набор однотипных рисунков. При порезке макета часто возникает необходимость для каждого слайса задавать свои настройки сохранения, такие как формат, степень ужатия, количество цветов, прозрачность и т. д., в противном случае размер/качество картинок будут не оптимальными.
                                                  +1
                                                  Обычно картинки такого плана в макетах — просто рыба, показывающая как это должно выглядеть.
                                                  Не надо тут задумываться над оптимизированием. Картинки там в любом случае другие будут.
                                                  В таком случае я вообще дублирую ОДНУ картинку N раз.
                                                    0
                                                    Этот пример — именно тот случай, когда нужен макет страницы, которая будет в реальности генерится сервером. Ни о какой детальной оптимизации и речи быть не может. Считайте, что мы создаём html-прототип.
                                                    +2
                                                    Для нарезки до сих пор пользуюсь старым дедовским способом.

                                                    1. Рисуется макет (вовремя его изготовления автоматом везде устанавливаются guidelines.
                                                    2. Создается action который выделенную область сохраняет в картинку, вызывая «save for web» а там уже, как угодно.
                                                    3. назначаем на созданный action горячую клавишу.

                                                    action = (flatten image, crop selection, (x) save for web, undo crop selection, undo flatten image).

                                                    Диалог указания имени файла будет сразу после нажатия горячей клавиши.

                                                    Пробовал и слайсами тоже.
                                                    «Дедовский» способ позволяет непосредственно перед сохранением уточнить в каком формате и с каким качество сохранять картинки. В вопросах оптимизации графики это достаточно важный момент.
                                                      0
                                                      Тоже иногда так делаю, только без горячей клавиши))) Руки привыкли тыкать все это)) Особенно alt+shift+ctrl+S )))
                                                        0
                                                        alt+shift+ctrl+S не решит проблемы со слоями и спецэффектами. Я говорю о нарезке макета страницы, а не картинки.

                                                        Частенько для вырезания того или иного элемента требуется сливать все слои вместе.

                                                        Но в моем варианте, к сожалению есть сложности с сохранением отдельного элемента с альфа-каналом (в png24). Увы в таком случае нудно использовать slice tool иже с ним.
                                                          0
                                                          Понятно :)
                                                          +1
                                                          А мои руки помимо этой комбинации почему-то ещё привыкли жать Ctrl+Shift+C — Ctrl+N — Enter — Ctrl+V
                                                          ;)
                                                        0
                                                        Блин, я то думал тут что-то новое будет.
                                                        А оказывается, я так чуть ли не сначала нарезал. Только сейчас с Гимпом работаю, там этот функционал менее удобен.
                                                          0
                                                          Повторение — мать учения)))
                                                            –1
                                                            *заикания
                                                          0
                                                          О, актуально ) Как раз дописываю статью/доклад на эту тему.
                                                          Про размножение slice'ов с помощью Alt'а не знал, спасибо.
                                                            0
                                                            Ещё Slice Selection Tool не нужен в принципе, потому что любой слайс активируется при щелчке обычным Slice Tool + Ctrl. Но это только в PS. В Illustrator с нарезкой какой-то местами жуткий казус.
                                                              0
                                                              Я наоборот пользуюсь исключительно ножом со стрелочкой, а нарезаю с модификатором (Ctrl/Cmd), ибо нарезаю реже, чем правлю, ресайзю, переименовываю.
                                                            0
                                                            Спасибо, не знал.
                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                0
                                                                Так-то оно так. Но вот в приведённом макете все картинки разной высоты. Направляющие ставить больно долго.
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                0
                                                                Про макет это тут громко сказано. Это скорей открыть глаза тем, кто поленился фотошоп потыкать :)
                                                                  0
                                                                  А у меня как-то не сложилось со слайсами… Выделил область, скопировал, вставил в новый документ, сохранил, и так по кругу. Почти всё на клавиатуре, поэтому времени много не занимает. А много времени как раз занимает правильное выделение, с точностью до пикселя.
                                                                    0
                                                                    Если слоёв нет — то выделять придётся вручную всё равно. Кроме того, нарезку я всегда делаю при масштабе от 250%, перемещаясь по макету нажимая Space. Так что всё очень легко выделяется.

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

                                                                    Лучше все же подучить фотошоп немного.

                                                                    Открою секрет как порезать 10-20… хоть 100 картинок в слайсы.
                                                                    1. В палитре Layers выделяем все нужные слои
                                                                    2. Нажимаем ALT+L->B

                                                                    Вуаля.
                                                                      0
                                                                      При условии наличия слоёв — конечно правильнее использовать Layer Based Slice. Однако на написание данной статьи меня побудила необходимость сделать дополнительный шаблон, а в качестве макета прислали скриншот с другого сайта. Типа сделать по аналогии.
                                                                        0
                                                                        Имхо, это ситуация, далёкая от реальности, когда каждый элемент в отдельном слое. Тогда может быть это полезно. Но обычно, по крайней мере в тех дизайнах, что мне высылают, нужно копировать содержмое нескольких слоёв сразу. Что я и делаю по Ctrl+Shift+C.
                                                                        0
                                                                        Но, если мы хотим ускориться, то правильнее будет сначала всё порезать, а именовать слайсы уже в Save for Web.


                                                                        Покажите скриншот, где это делается в save for web. Или это в фотошопе более позднем, чем cs1?
                                                                          0
                                                                          Я всё это делал в CS3. В CS2 было точно так же, а вот как в CS уже не помню. В те времена Adobe ещё развивала ImageReady для работы с веб графикой.
                                                                            0
                                                                            Тогда вполне возможно, что в CS и нет такого. Возможно, стоит проапггрейдиться.

                                                                            На всех доступных мне компьютерах CS2 сильно тормозил. А CS3 при установке желает полностью захватить власть над компьютьером.
                                                                          0
                                                                          Небольшая рекомендация от меня.
                                                                          Не стремитесь сразу нарезать миллион картинок для сайта к примеру, а потом преступить к вёрстке.
                                                                          недостатки — легко запутаться в этих самых картинках в последующем
                                                                          да и лучше стараться всё верстать средствами html css а при необходимости вырезать нужный нам image из макета.

                                                                          в идеале — сверстать шаблон с null изображениями расставить все background`ы а затем просто наслайсить необходимые фрагменты уже по определённым нами размерам в html
                                                                            0
                                                                            Я придерживаюсь противоположного метода. Сначала распечатываю макет, на нём подписываю что и как будет называться. Поскольку имена файлов имеют логический принцип построения — то я и не путаюсь.

                                                                            Потом собираю страничку в html.

                                                                            Потом создаю необходимые стилевые описания.

                                                                            Следование данному подходу позволяет концентрироваться на одном предмете, а не метаться туда-сюда между текстовым и графическим редакторами и браузером.
                                                                            0
                                                                            Если много картинок, то можно сделать и так, создать Action на сохранения картинок фор веб в такую-то папку (можно сделать 2 для jpg и gif). И делаем так, слайс поставил, назвал именем нажал например f9 и все :) Пользуйтесь, когда-то ускорило работу на 40%
                                                                              0
                                                                              Спасибо. Но мне кажется что тут есть проблема в том, что для экшн нельзя поменять целевую папку каким-либо разумным способом. Лучше наверно скрипт на Adobe Scripts написать. Но это на случай когда резать приходится каждый день и помногу. Я же больше верстаю, чем режу.
                                                                                0
                                                                                перезапись скрипта на новую папку занимает минуту :)
                                                                              0
                                                                              Я в шоке! Да это же в каждом учебнике по ФЖ описано! Если уж сел за Шоп, то, блин, одну книжку можно прочитать? 98% самоучек?! Апупеть! 0_о

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

                                                                              Самое читаемое