Фотошоп, оптимизация графики

Задаем вопросы по фотошопу как инструменту для веб-технолога: как лучше вырезать и сохранять графику, автоматизация процесса, оптимизация графики, проблемы вроде «опять эти дизайнеры нарисовали не так» и как сделать «так». Самые интересные вопросы будут добавляться прямо в статью.

18 комментариев

  1. Мохов Олег
    13 августа 2009

    В макете имеет повторяющийся фон-картинка (Pattern Overlay — Multiply), существует ли способ вырезать его не на глаз, а магической комбинацией кнопок? Я только смог сохранить его в .pat, дальше ступор.

    Павел Петрухин: Я выходил из этой ситуации следующим образом:
    Насколько я помню в Pattern Overlay рядом с иконкой pattern’a появляется (при наведении) его размер. Т.е. создаём файл того же размера и заливаем этим pattern’ом. Затем меняем режим наложения слоя на Multiply и подкладываем фон (который у вас под pattern’ом). Надеюсь я вас правильно понял.

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

  2. Rendm
    15 августа 2009

    Чем отличается показатель Optimized от Progressive в окошке Save for web?

    Это два абсолютно разных параметра. Если коротко и просто: первый оптимизирует таблицы Хаффмана, что иногда увеличивает, а иногда снижает объем файла, а второй измеряет порядок сохранения коэффициентов. Как правило, это всегда влечет за собой увеличения размера файла, но позволяет загружать его «прогрессивно»: на медленных соединениях/очень больших файлах сначала будет появляться изображение с низкой детализацией (состоящее из огромных квадратов), которое затем будет постепенно уточняться.

  3. Алексей
    16 августа 2009

    Вопрос думаю относитсяко всем, а не только к Сергею, как можно сделать скриншот сайта в рамке браузера Сафари(как в студии Лебедева к примеру), мак не стоит, не имею такой возможности , а как-нибудь онлайн(кроме browsershots.org) или еще как?

    Vii: Если «скриншот» нужен чтобы макет показать клиенту, то наверно лучше просто взять изображение окна браузера и вставить туда макет (рамку можно взять например тут.

  4. 16 августа 2009

    Алексей, Сафари для Винды можно скачать на сайте Эпла — http://www.apple.com/safari/download/

  5. Мохов Олег
    17 августа 2009

    Павел Петрухин, спасибо! Это хоть какой-то вариант не на глаз!

  6. Александр
    4 сентября 2009

    Помню существует такое Air-приложение: растянул рамочку поверх окон и всё что в неё попало сохраняется вместо с декоративной рамочкой а-ля сафари. Название запамятовал — поищите в каталоге Air-приложений Adobe.

  7. Мохов Олег
    15 сентября 2009

    Дали макет, в нём тень для объекта сделана через Multiply, когда пытаюсь вырезать (через Ctrl+Shift+C) в png тень пропадает. Почему такое происходит и как с этим бороться, кроме как просить дизайнера переделать тень? (Photoshop CS3)

  8. 26 сентября 2009

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

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

    В таких случаях, как правило, я прошу перерисовать дизайнера картинку на нормальном режиме наложения. А если простой случай (например, цвет нужно подправить), то правки делаю сам. Каких-то конкретных рекомендаций дать не могу, нужно каждый случай в отдельности рассматривать.

  9. Valera
    11 ноября 2009

    http://twitter.com/chikuyonok/status/5026633112

    когда будет новая статья? 🙂

  10. 25 ноября 2009

    Сергей, не подскажете ли утилиту, кроме convert из ImageMagick, способную «сплющить» PNG? Простите за дурацкий вопрос, но не могу найти.

  11. Сергей Чикуенок
    25 ноября 2009

    PNGOut, OptiPNG, PNGSquash

  12. 11 декабря 2009

    Сергей, есть задача: оптимизация директории сайта с картинками (во вложенных папках). Хотелось бы сделать фотошоповским экшеном, но не получается, и вот почему:
    Обычный Save, который помог бы сохранить файл «в себя» (в этом случае не стоит задачи «запомнить» расположение файла), не подходит, т.к. получается огромный размер файла (либо он пишет в файл кучу ненужной информации, либо использует странный алгоритм JPG-сжатия).

    Save for Web, который качественно жмёт в JPG, просит указать папку N для сохранения.
    Потом я использую Batch (но ставить галочку «Обрабатывать вложенные папки» бесполезно — файлы в результате все окажутся в одной конечной папке N).
    Таким образом, можно лишь вручную запускать Batch для каждой отдельной папки.

    1) Можете что-нибудь посоветовать (не сторонние конвертеры картинок, а именно для фотошопа)?
    2) Почему JPG-файл при обычном сохранении как-то странно пакуется (в отличие от Save for Web)?

  13. Lardok
    20 декабря 2009

    http://www.gracepointafterfive.com/punypng — отличный сервис для уменьшения пнг файлов на 40%…

  14. Стас
    23 августа 2010

    Здравствуйте. Часто бывает нужно сохранить часть изображения, с фоном под полупрозрачными пикселями. Например для последующего сохранения в png8 или gif, чтобы избежать мороки с png24 в ie6. Пока что я нашел лишь 2 способа, но оба добавляют однопиксельную рамку к изображению. Это matte, expand на 1px и последующее redefine edge.

    Уверен, что есть простая последовательность позволяющая решить эту задачу. Поделитесь 🙂

  15. Сергей Чикуенок
    23 августа 2010
  16. Дмитрий
    17 сентября 2010

    Добрый день. Столкнулся с вариантом, когда без modify color reduction, описанном в http://www.artlebedev.ru/tools/technogrette/img/png-4/ не обойтись.
    Но лицензия есть только на cs4, а там нет этого диалогового окна.
    Есть какие-то способы сделать то же самое в cs4?

  17. Станислав
    27 октября 2010

    Здравствуйте.

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

    Спасибо.

  18. Михаил
    22 января 2012

    Давно ничего нового не пишете. Все нормально? Если не идет.. Может пора идти в том направлении, в котором раньше не шли?

Комментировать

Powered by Zen Coding

(Spamcheck Enabled)