Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 73
удобная штука, давно ей пользуюсь :)
Я вообще полюбил нарезку в Фотошопе, после того как узнал что он еще и в div-ах верстать
Люблю я вот такие мануалы для облегчения житейских проблем :)
Наглядно! Давно хотел освоить нарезку оформления в Фотошопе, наверное пора. Хоть и не дизайнер, но иногда бывает нужно. А то, бывает, подгоняю вручную в коде ;)
Спасибо, наконец я узнал для чего нужна эта непонятная кнопа :)
Хочу отметить что резать ни всегда есть хорошо — зачастую для уменьшения количества HTTP-запросов и общего объема данных правильнее будет вставить все одной картинкой с использованием CSS — спрайтов
Хочу отметить что резать ни всегда есть хорошо — зачастую для уменьшения количества HTTP-запросов и общего объема данных правильнее будет вставить все одной картинкой с использованием CSS — спрайтов
Про спрайты вы товарищ не в тему.
Спрайты используются для сервисной графики. А здесь у нас контентная часть. Причём та, которая в реальных условиях будет загружаться пользователями.
Учитывая, то что меня заминусовали ниже нуля за этот пост, хочу отметить:
Господа, Вы не правы! Закидывать все фотографии для контекстной части в фотошоп, чтобы потом сделать их же нарезку — крайне не логичено, поэтому это как раз больше подходит для серверной графики.
Господа, Вы не правы! Закидывать все фотографии для контекстной части в фотошоп, чтобы потом сделать их же нарезку — крайне не логичено, поэтому это как раз больше подходит для серверной графики.
Тут вот какая штука: макет делает графический дизайнер, html-шаблоны и нарезку делает верстальщик, а программингом серверной части занимается программист. При этом приёмка заказчиком делается на всех трёх этапах. Поэтому проще закинуть произвольные фото в макет и потом их нарезать, чем объяснять на пальцах клиенту — а вот тут у нас будут картинки.
Не ново, но слишком усложненно с «custom»-ом. Нарезаем слайсы, save for web, save, в опции «slices» выбираем пункт «All user slices» (все созданные), пишем одно имя(!) и сохраняем. Он сохраняет в папочку images файлы вида filename-[n].
Очень удобно.
Очень удобно.
- получается, что превьюшки сначала надо сделать и запихать в один файл? по-моему это далеко не 20 секунд. или откуда они у вас появились все в одном?
- Библиотеку GD2 уже отменили? Скриптом не проще их формировать «на лету»?
Или поясните смысл ваших манипуляций. Мож я не так понял.
Эмм… тут речь про *.psd макеты, в которых дизайнеры вставляют превьюшки. Описанный способ — самый порстой для быстрого их извлечения.
в этой статье именно про создание макетов сайта…
Речь идет о верстке именно макета. В данном случае эти 20 превъюшек — та же самая «рыба». В данном случае писать еще и скрипт для генерации превъюшек — лишние телодвижения.
За много лет сайтостроительства никогда не сталкивался с нарезкой однотипных картинок из psd. Просто не пойму смысла, ведь дизайнер их вставил в макет откуда-то, значит они у него есть отдельно? Нужно просто взять эту папочку с картинками, узнать какого размера нужны превьюшки (обычно указывается 1 размер — высота или ширина) и прогнать через пакетный resizer. Странные у вас методы работы, однако.
Иногда дизайнер бывает далеко. Иногда дизайнер и не помнит, откуда взял картинки. Да и зачем усложнять себе жизнь лишними папками, переименованиями?? Когда все есть на макете, да еще и нужного размера. Достаточно одной минуты, чтобы получить эти картинки, в оптимизированном для веба качестве.
Гнать такого дизайнера надо, который не оставляет исходных материалов после себя :) Во-вторых не видел фотогалерею с 8 картинками, обычно их много десятков и на разных страницах. В третьих на любом нормальном сайте кроме превьюшки есть еще фулсайз, что-бы можно было нормально рассмотреть фотку не ломая себе глаза. Откуда же его брать тогда, если дизайнер не оставил исходников?
В итоге конечно ваш подход имеет место жить, но только как теоретический приём, на практике же, за за 9 лет работы с сайтами и макетами ни разу не сталкивался с ситуацией описанной вами. Вся графика, которая нарезалась из макета имела разные размеры, разные имена файлов и оптимизировалась индивидуально.
В итоге конечно ваш подход имеет место жить, но только как теоретический приём, на практике же, за за 9 лет работы с сайтами и макетами ни разу не сталкивался с ситуацией описанной вами. Вся графика, которая нарезалась из макета имела разные размеры, разные имена файлов и оптимизировалась индивидуально.
Как выгнать жену директорв? ;)
А вообще, прием описан хороший, вот только пример не тот. При верстке фотогалереи, никто не будет вставлять реальные картинки, конечно вставят рыбу. Просто, почему то, все зациклились именно на том, что это галерея.
На самом деле, нарезка макета слайсами (slice) ускоряет процесс разработки, убедился на личном опыте. Просто автор привел самый простой пример.
А вообще, прием описан хороший, вот только пример не тот. При верстке фотогалереи, никто не будет вставлять реальные картинки, конечно вставят рыбу. Просто, почему то, все зациклились именно на том, что это галерея.
На самом деле, нарезка макета слайсами (slice) ускоряет процесс разработки, убедился на личном опыте. Просто автор привел самый простой пример.
кстати, любой нормальный пакетный ресайзер имеет функцию переименования файлов по шаблону, и обрабатывает за секунды сотни и тысячи фотографий. Простите, а вы за сколько секунд нарежете пару тысяч фотографий из макетов? Так что, повторюсь, это чисто теоретический приём.
Иногда дизайнеры присылают jpg. Гнать его конечно надо, но сначала нужно работу закончить.
занимательно, учту на будущее…
Года три уже её юзаю, но обычно для того, чтобы полностью выдернуть с сайта все картинки, нужные для вёрстки. Получается довольно быстро, а сам код уже вручную. Сложные картинки можно потом, путём включения/выключения перекрывающихся картинок, отдельно добавить.(Save Selected Slice) ну итд)))
Код правда он генерит все-равно хреново;)
)))
Код правда он генерит все-равно хреново;)
)))
описание работы с инструментом хорошее.
Но ИМХО реально в работе это вряд ли поможет.
Если у нас в макете несколько слоёв, и планируется что какая нибудь картинка будет в .png наезжать на текстовый блок, а другая будет градиентом 1px в .jpg, а третья .gif рамка которая накладывается поверх всех фотографий той же галереи, да ещё всё это на разных слоях, — всё равно надо будет их обрабатывать по отдельности, задавать им параметры сжатия, качества, цветности, скорее всего уже после вставки в макет.html слегка подгонять размер.
Сделать из одной картинки несколько — да.
Полноценно разрезать макет на изображения готовые к работе — никак нет.
Но ИМХО реально в работе это вряд ли поможет.
Если у нас в макете несколько слоёв, и планируется что какая нибудь картинка будет в .png наезжать на текстовый блок, а другая будет градиентом 1px в .jpg, а третья .gif рамка которая накладывается поверх всех фотографий той же галереи, да ещё всё это на разных слоях, — всё равно надо будет их обрабатывать по отдельности, задавать им параметры сжатия, качества, цветности, скорее всего уже после вставки в макет.html слегка подгонять размер.
Сделать из одной картинки несколько — да.
Полноценно разрезать макет на изображения готовые к работе — никак нет.
Ну согласитесь, что большинство картинок все-равно можно таким образом быстро взять, а уже над «сложными» случаями естественно приходится поработать. ;)
Ну согласитесь, что большинство картинок все-равно можно таким образом быстро взять, а уже над «сложными» случаями естественно приходится поработать. ;)
На примере показан не макет а набор однотипных рисунков. При порезке макета часто возникает необходимость для каждого слайса задавать свои настройки сохранения, такие как формат, степень ужатия, количество цветов, прозрачность и т. д., в противном случае размер/качество картинок будут не оптимальными.
Обычно картинки такого плана в макетах — просто рыба, показывающая как это должно выглядеть.
Не надо тут задумываться над оптимизированием. Картинки там в любом случае другие будут.
В таком случае я вообще дублирую ОДНУ картинку N раз.
Не надо тут задумываться над оптимизированием. Картинки там в любом случае другие будут.
В таком случае я вообще дублирую ОДНУ картинку N раз.
Этот пример — именно тот случай, когда нужен макет страницы, которая будет в реальности генерится сервером. Ни о какой детальной оптимизации и речи быть не может. Считайте, что мы создаём html-прототип.
Для нарезки до сих пор пользуюсь старым дедовским способом.
1. Рисуется макет (вовремя его изготовления автоматом везде устанавливаются guidelines.
2. Создается action который выделенную область сохраняет в картинку, вызывая «save for web» а там уже, как угодно.
3. назначаем на созданный action горячую клавишу.
action = (flatten image, crop selection, (x) save for web, undo crop selection, undo flatten image).
Диалог указания имени файла будет сразу после нажатия горячей клавиши.
Пробовал и слайсами тоже.
«Дедовский» способ позволяет непосредственно перед сохранением уточнить в каком формате и с каким качество сохранять картинки. В вопросах оптимизации графики это достаточно важный момент.
1. Рисуется макет (вовремя его изготовления автоматом везде устанавливаются guidelines.
2. Создается action который выделенную область сохраняет в картинку, вызывая «save for web» а там уже, как угодно.
3. назначаем на созданный action горячую клавишу.
action = (flatten image, crop selection, (x) save for web, undo crop selection, undo flatten image).
Диалог указания имени файла будет сразу после нажатия горячей клавиши.
Пробовал и слайсами тоже.
«Дедовский» способ позволяет непосредственно перед сохранением уточнить в каком формате и с каким качество сохранять картинки. В вопросах оптимизации графики это достаточно важный момент.
Тоже иногда так делаю, только без горячей клавиши))) Руки привыкли тыкать все это)) Особенно alt+shift+ctrl+S )))
alt+shift+ctrl+S не решит проблемы со слоями и спецэффектами. Я говорю о нарезке макета страницы, а не картинки.
Частенько для вырезания того или иного элемента требуется сливать все слои вместе.
Но в моем варианте, к сожалению есть сложности с сохранением отдельного элемента с альфа-каналом (в png24). Увы в таком случае нудно использовать slice tool иже с ним.
Частенько для вырезания того или иного элемента требуется сливать все слои вместе.
Но в моем варианте, к сожалению есть сложности с сохранением отдельного элемента с альфа-каналом (в png24). Увы в таком случае нудно использовать slice tool иже с ним.
А мои руки помимо этой комбинации почему-то ещё привыкли жать Ctrl+Shift+C — Ctrl+N — Enter — Ctrl+V
;)
;)
Блин, я то думал тут что-то новое будет.
А оказывается, я так чуть ли не сначала нарезал. Только сейчас с Гимпом работаю, там этот функционал менее удобен.
А оказывается, я так чуть ли не сначала нарезал. Только сейчас с Гимпом работаю, там этот функционал менее удобен.
О, актуально ) Как раз дописываю статью/доклад на эту тему.
Про размножение slice'ов с помощью Alt'а не знал, спасибо.
Про размножение slice'ов с помощью Alt'а не знал, спасибо.
Спасибо, не знал.
Про макет это тут громко сказано. Это скорей открыть глаза тем, кто поленился фотошоп потыкать :)
А у меня как-то не сложилось со слайсами… Выделил область, скопировал, вставил в новый документ, сохранил, и так по кругу. Почти всё на клавиатуре, поэтому времени много не занимает. А много времени как раз занимает правильное выделение, с точностью до пикселя.
Если слоёв нет — то выделять придётся вручную всё равно. Кроме того, нарезку я всегда делаю при масштабе от 250%, перемещаясь по макету нажимая Space. Так что всё очень легко выделяется.
Кроме того, нарезка слайсами сохраняется с документом. Так что если что-то потребуется поправить — это будет делом пары секунд. А при вашем методе всё придётся делать заново.
Кроме того, нарезка слайсами сохраняется с документом. Так что если что-то потребуется поправить — это будет делом пары секунд. А при вашем методе всё придётся делать заново.
При условии наличия слоёв — конечно правильнее использовать Layer Based Slice. Однако на написание данной статьи меня побудила необходимость сделать дополнительный шаблон, а в качестве макета прислали скриншот с другого сайта. Типа сделать по аналогии.
Имхо, это ситуация, далёкая от реальности, когда каждый элемент в отдельном слое. Тогда может быть это полезно. Но обычно, по крайней мере в тех дизайнах, что мне высылают, нужно копировать содержмое нескольких слоёв сразу. Что я и делаю по Ctrl+Shift+C.
Но, если мы хотим ускориться, то правильнее будет сначала всё порезать, а именовать слайсы уже в Save for Web.
Покажите скриншот, где это делается в save for web. Или это в фотошопе более позднем, чем cs1?
Небольшая рекомендация от меня.
Не стремитесь сразу нарезать миллион картинок для сайта к примеру, а потом преступить к вёрстке.
недостатки — легко запутаться в этих самых картинках в последующем
да и лучше стараться всё верстать средствами html css а при необходимости вырезать нужный нам image из макета.
в идеале — сверстать шаблон с null изображениями расставить все background`ы а затем просто наслайсить необходимые фрагменты уже по определённым нами размерам в html
Не стремитесь сразу нарезать миллион картинок для сайта к примеру, а потом преступить к вёрстке.
недостатки — легко запутаться в этих самых картинках в последующем
да и лучше стараться всё верстать средствами html css а при необходимости вырезать нужный нам image из макета.
в идеале — сверстать шаблон с null изображениями расставить все background`ы а затем просто наслайсить необходимые фрагменты уже по определённым нами размерам в html
Я придерживаюсь противоположного метода. Сначала распечатываю макет, на нём подписываю что и как будет называться. Поскольку имена файлов имеют логический принцип построения — то я и не путаюсь.
Потом собираю страничку в html.
Потом создаю необходимые стилевые описания.
Следование данному подходу позволяет концентрироваться на одном предмете, а не метаться туда-сюда между текстовым и графическим редакторами и браузером.
Потом собираю страничку в html.
Потом создаю необходимые стилевые описания.
Следование данному подходу позволяет концентрироваться на одном предмете, а не метаться туда-сюда между текстовым и графическим редакторами и браузером.
Если много картинок, то можно сделать и так, создать Action на сохранения картинок фор веб в такую-то папку (можно сделать 2 для jpg и gif). И делаем так, слайс поставил, назвал именем нажал например f9 и все :) Пользуйтесь, когда-то ускорило работу на 40%
Я в шоке! Да это же в каждом учебнике по ФЖ описано! Если уж сел за Шоп, то, блин, одну книжку можно прочитать? 98% самоучек?! Апупеть! 0_о
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Ускорение нарезки макета в Photoshop