С ножом против паровоза
Вашему вниманию предлагается видеозапись презентации «С ножом против паровоза», прозвучавшей на Яндекс.Субботнике в Киеве 25 апреля 2009 года. Речь в ней идёт о нарезке и оптимизации изображений для вёрстки. Длительность доклада вместе с вопросами — 58 минут.
Для лучшего понимания, доступен оригинал презентации: С ножом против паровоза (PDF, 4.4 МБ).
Комментарии
60Спасибо за очень интересную презентацию! Я ее успела в пятницу на Я.Видео посмотреть :) Почерпнула много нового и интересного, однако и порадовалась отдельно за себя по некоторым пунктам презентации (т.к. я просто маленький любитель, преимущественно читающий чужой код, было лестно узнать, что профессионалы тоже дошли до каких-то приемов точно так же как и я).
О класс! Обязательно посмотрю видео!
Отлично!
Вадим, чем конкретно GIMP уступает Photoshop'у по функциональности?
GIMP уступает тем, что:
— Когда я пытался открыть в нём сложные слоистые PSD'шники, он тупо отображал все слои. Особенно это плохо, когда дизайнер забывает удалять из исходника свои эксперименты, которые не должны идти в работу.
— В диалоге сохранения GIMP предлагает сохранить файл в PNG. Отлично — в какой из 3-х видов PNG? А чёрт его знает…
— В нём нет столь же удобных инструментов для экспорта
…про то как он глючит, тормозит и падает наверное подробно говорить не буду.
Кстати, ты пробовал Pixelmator? Его, конечно, нельзя назвать «заменой фотошопу», но ребята стараются насколько я понял.
Пробовал ) Тоже смешная штучка, без компромиссов — только для художников.
В разделе «цветовые профили» описан неверный подход. Так нельзя делать ни в коем случае.
При конвертировании теряется информация. В связи с этим, синий оттенок может стать фиолетовым и т.п. вещи, которые просто недопустимы. Никакого «то, что видел дизайнер» тут, соответственно, не получится.
Простой тест-кейс. Вторая картинка, по описанному в докладе методу. Она не просто другого цвета, она ещё и неоднородная. Исходник для экспериментов.
Тогда какие рекомендации предложите вы?
Ну, в принципе, можно и "Discard ..." выбирать, но тогда придется каждый раз на этот вопрос отвечать. :)
Насчет вырезания смайла из фона с градиентом. Вы предлагаете не совсем рациональный вариант, не нужно создавать никаких слоев, и не нужно их заливать усредненными цветами. В диалоге "Save for Web & Devices" есть для этого инструмент "пипетка". Нужно выбрать ее (клавиша I) и, с зажатым шифтом (чтоб можно было выбрать несколько цветов), выделять те самые средние цвета (они будут выделяться в индексированной палитре справа). Затем, нужно просто нажать на значок с сеткой (типа прозрачность), который находится ниже палитры, и все выделенные цвета заменятся на прозрачный.
Рабочий профиль sRGB, который установлен по умолчанию. sRGB — стандартный для веба профиль.
В принципе, это всё :)
За колор менеджмент спасибо, гуглил но там не так понятно написано было.
Я раньше юзал fireworks вместо фотошопа изза этого, плюс нормальные векторые инструменты.
Александр, а как вы первую картинку вырезали? Методом "Discard color profile" ?
Александр, sRGB — это чудесно, но что, если приходит файлик с профилем MyMonitorTrueColors? Опишите, если не трудно, ваш сценарий работы с другими профилями, учитывая все описанные в докладе настройки.
Хотелось бы вывести полноценный рецепт, если уж вы утверждаете, что «так нельзя делать ни в коем случае».
Panya, этот метод — не какое-то откровение, а просто способ не бегать за каждым пикселом вокруг изображения.
я не понял самой сути касталеьно вырезания смайла из фона с градиентом, если мы хотим наложить что то на градиент, чем не подходит описанный метод в начале этой статьи http://www.artlebedev.ru/tools/technogrette/img/cutting-images/ ? не понятно с усредненными цветами и то делается в индексированной палитре, можно как то по подробней, пожалуйста про Ваш метод?
GaN, этот метод всего лишь иллюстрирует, что PNG-24 — это не идеальное решение для всех проблем, и что изображения можно упрощать. В указанном примере есть тень, которая не даёт возможности использовать метод с упрощением градиента.
Николай, у меня рабочим профилем выставлен sRGB. Никаких сообщений в
таком случае не появляется. Они ведь совпадают. Если настроить фотошоп,
как в видео, то выбираем «использовать встроенный профиль».
Вадим, прежде всего дизайнер должен рисовать в sRGB. Хотя бы с этого
момента. Всё конвертировать в sRGB.
Proof Colors нужен больше дизайнеру, нежели верстальщику. Галочку в Save
for Web можно оставить.
Т.е. вы говорите «Вадим, забудьте о проблеме — её не должно быть».
Как бы я хотел, чтобы было так. Ну а галочка в «Save For Web…» пишет в файлы цветовые профили, которые понимают пара браузеров из всего их зоопарка.
В общем, вопрос остаётся открытым.
Я сказал, что вместо того, чтобы конвертировать в профиль вашего
монитора, надо конвертировать в sRGB.
Вашу проблему создают дизайнеры. Она решаема, или нет. У других людей
всё хорошо, но вы им предлагаете «решение», которое принесёт им
проблему.
Мы говорим про разные галочки. Я про «Convert to sRGB».
Я повторю свой вопрос: какое точное сочетание настроек, отвечающих за работу цветовых профилей, вы считаете правильным?
а) Для файлов с профилем sRGB
б) Для файлов с калиброванным профилем неизвестного монитора
Настройки:
Proof Setup
Color Settings
Convert to sRGB
Embedded Profile Mismatch
— В нём нет столь же удобных инструментов для экспорта
Еще один пользователь не установил GIMP# и не воспользовался Slice Tool :)
…про то как он глючит, тормозит и падает наверное подробно говорить не буду.
Ну уж нет, рассказывайте :)
Позвольте, почему же — установил, честно искал.
Покажете, расскажете?
К примеру — закрытие панели инструменты правда должно закрывать (или ронять) всю программу? Текущая версия для Windows.
Добрый день, Вадим, спасибо вам за доклад, очень понравился, не смотря на то, что для себя ничего практически нового ничего не узнал - как и что вы рассказывали - супер. Лично я для нарезки графики до сих пор использую ImageReady - в виду того, что он обладает большими возможностями инструмента Slice. И все друзья удивляются, зачем мне столь древний пакет Adobe CS2 :)
Настройки, независимо от пункта а) и б):
1. Proof Colors → Monitor RGB
2. Color Settings → Working Spaces → RGB: sRGB
3. Profile Mismatches → Ask When Opening
4. Convert to sRGB → Отметить
Это стандартные настройки фотошопа. Хотя, насчёт первого пункта не уверен :)
Proof Colors — отвечает только за то, как вы видите макет. Если вы забудете его включить, в итоге никто не пострадает :) Разве что эпловской пипеткой возьмёте не тот цвет…
Convert to sRGB — не делает ничего, что не указано в его названии. Опять же, учитывая второй и третий пункт, — на эту галочку можно забить.
А, собственно, что делать с диалогом «Embedded Profile Mismatch» — Use, Convert, Discard?
Convert.
Не очень понял: показать, где в "Filters - Web" пункт "Slice Tool" находится? :)
Закрывать. Да, почему бы и нет? :)
У меня ронять получается только совсем нестабильную версию из дерева разработки. В заведомо известных местах. Собственно, почему и спрашиваю :)
Т.е. я не должен хотеть убрать ненужные мне панели с экрана? Какой-то авторитарный подход. Ну, ладно — предположим, что это не глюк, а просто проектировщики идиоты. Или вы готовы поспорить, что это нормальное поведение?
К сожалению, у меня там есть только две опции «Карта изображения…» и неактивное «Полусведение». Предположив, что «Slice Tool» — это «Карта изображения» я попробовал, но ничего там не нашёл для экспорта картинок, только олдскульная генерация карт.
Ну и, знаете ли, прятать инструменты для работы с изображением в меню фильтры — это ещё то извращение.
tnx!
и особенное спасибо за наводку на http://company.yandex.ru/experience/ - как раз сегодня утром думал - блин - сколько прикольных докладов, где б посмотреть подробнее... :)
Спасибо за доклад и за материалы конференции онлайн.
По сути я не согласен насчет Slice tool. Я пробовал найти ему применение и даже использовал раньше, но не прижилось. Я использую CS2. Не знаю как в CS4, но здесь нет возможности создавать отдельных слоев для слайсов как в ImageReady, в противном случае макет превращается в нагромождение слайсов. Еще одна проблема использования слайсов это спрайты. Я собираю их сразу и поэтому использовать слайсы здесь не вижу смысла. Раньше я применял их для нарезки больших цветных шапок (был такой прием когда шапка разбивалась на несколько частей для ускороения загрузки или отдельной оптимизации). Но сейчас я уже не уверен, в полезной применимости такого решения.
У меня — напротив — совсем не получается собирать спрайты сразу. Точнее, получается, что гораздо оптимальнее делать это на самом последнем этапе, когда уже понятно как можно наиболее эффективно сгруппировать графику.
Я согласен, что для инструмента Slice Tool очень не хватает отдельной панели со слоями нарезки, возможности переноса в другой документ и может быть чего-то ещё… Но, как я уже говорил, эта штука действительно повышает эффективность благодаря тому, что настройки экспорта сохраняются вместе с иходниками.
Значит в CS4 никаких изменений в этом направлении не произошло. Жаль. У этого инструмента хороший потенциал, но в таком виде как он есть сейчас его использовать невозможно.
Насчет оптимизаци, я обычно использую 64-цветовую палитру. Да, это иногда дает оверхед байт 100-200. Но для удобства этим можно пожертвовать.
Чисто из интереса: зачем Вы хотите убрать панель инструментов? Она простым перетаскиванием за ЛНУ превращается в тонкую и не мешается.
Не вижу в этом ничего противоестественного. В принципе, я впервые слышу, чтобы человек хотел убрать панель инструментов. Скрыть на время — сам часто делаю, нажимая Tab. Но насовсем...
*sigh*
Это Вы так "Позвольте, почему же — установил, честно искал"? :-)
Мы точно говорим сейчас о http://gimp-sharp.sourceforge.net/?
Добрый день, Вадим, присоединюсь к поблагодарившим - спасибо за интересный доклад. После просмотра возникла пара вопросов к вам.
1) Вы используете в работе IntelliJ IDEA как и другие в вашей компании?
2) Как вы поступаете с кучей направляющих, которых появляется огромное количество при нарезке реальных макетов? Либо после нарезки блока (шапки, допустим) вы закрываете файл и уже следующий блок вы режете заново?
3) Как вы поступаете с версткой блоков со скругленными углами и наличием бордюра? Используете спрайты в таком случае? Я имею в виду случай, когда такой блок должен быть резиновым по вертикали и горизонтали, скругленные углы и еще нужен бордюр для блока?
Заранее спасибо.
1) Для вёрстки я использую TextMate. Громоздкие IDE я не перевариваю, мне по душе редактор либо продуманный до мелочей, либо тот, что я смогу продумать до мелочей сам. TextMate — это второй случай.
2) Направляющие я без особых проблем скрываю — Cmd+H или Cmd+; — этого, в принципе, достаточно.
3) Для блоков с рамками можно использовать квадратную рамку самого блока, прикрыв её в нужных местах нашими уголками. В этом случае их нужно спозиционировать со смещением, равным толщине рамки.
Гм. Ну, я вообще-то говорил про gimp.org…
Вот честно не мог предположить, что существуют разные сборки этого ушастого редактора. Попробую сегодня поставить шарп-версию.
Насчёт панелей — мне кажется, что если я нажму на кнопочку фиксации рожка с патронами на автомате, то он, по идее, не должен выстрелить. Так ведь?
Ну а почему тогда кнопка закрытия панели инструментов закрывает программу? Не хотите, чтобы я ей пользовался — не давайте мне её )
Мда... Вот для кого я написал "GIMP#"? :)
Это как бы не сборка. Это пакет расширений GIMP на языке C# (а также Nemerle). Были бы мы сейчас на лоре, я бы подумал, что Вы — Ъ, не ходящий по ссылкам :)))
Скажу по секрету, схожий принцип именования используют пакеты с привязками к Perl и Ruby :)
Это артефакт, оставшийся от версий, когда в панели инструментов было меню «Файл» с командой завершения работы с программой. Не усмотрели, в общем :)
А в GIMP исправился косяк с текстовыми слоями? Где-то чуть меньше года назад одна менеджер-активистка уломала директора пересадить весь офис на Ubuntu. Вот я (верстальщик) и дизайнер радовались, когда GIMP во всех псдшках от предыдущих проектов показывал текстовые слои, как обычные графические :) Вобщем, после первого знакомства я что-то не пропёрся.
А вот подскажите ещё, есть под Винду редактор похожий на Textmate, кроме Intype?
Intype меня, в принципе, устраивает, но есть в нём куча недоработок ещё, а исправляют и доделывают ну очень медленно. Notepad++ пользовал очень много, но Intype мне как-то больше по душе пришёлся. На Мак пересесть не предлагать, пока нет возможности :(
Помимо Intype есть ещё «E texteditor», но бандлы для них портируются весьма условно. Главным образом по причине различных консольных команд, которые не исполнишь под Windows. Ну и некоторые запрещённые символы в именах файлов вызывают проблемы, ведь бандл для Windows — это по сути папка со снипетами.
Надо думать, Вы подразумеваете ошибку с чтением файлов PSD? Насколько я знаю, пока не исправлено. Но лучше проверить :)
Не исправлено.
Для работ с сторонними psd-макетами Gimp не пригоден.
О каком серьёзном его использовании тогда можно говорить.
Спасибо за ответ, такая ситуация понятна, меня интересует случай когда есть блок со скругленными уголками, этот блок положен на градиентный фон, у блока есть эффект тени. То есть обойтись "бордером" в таком случае не получится. Есть ли для такого случая (учитывая "резиновость" блока) в вашем арсенале универсальный пример с использованием минимального количества DOM элементов и, возможно, использованием спрайтов?
Если такой блок не просто резиновый, а должен изменять размеры по содержимому, то такое чудо из-за IE6 можно сделать только при помощи таблицы. Посмотрите, как сделаны балунчики на Яндекс.Картах (клик на иконку для прокладки маршрута) — там тоже используются спрайты.
В случае, когда ширина определена в пикселах, em'ах или процентах, можно сделать такой блок простым позиционированием экстра-элементов внутри родительского элемента: а) TL, TR, BL, BR по углам б) T и L просто лежат в потоке в) L и R спозиционированы абсолютно, с привязкой top/bottom, равной высоте T и B — IE6 так не умеет, это правится expression'ом.
Предлагаю задать этот вопрос создателям digg.com :)
У меня такой вопрос , немного не по теме . Поисковики в равное в степени сканируют и ? влияет каким либо образом style="display:none"
Попробуйте ещё раз, только на этот раз с тегом source, который превратит ваш код в простой текст, как написано в правилах добавления и форматирования чуть выше.
Идея такова :
Существует облако тегов , но оно не вписывается в дизайн , если его засунуть в див и скрыть. Будут ли его сканировать поисковики?
Сканировать-то будут и ходить по ссылкам тоже, но постарайтесь сделать так, чтобы это не смотрелось как спамерская уловка. В любом случае, вы не застрахованы от бана в тех же самых поисковиках.
И вообще, что значит «существует»? Уберите, если оно вам не нужно )
Убрать то можно , но лишние ссылки и описания не помешают .
Думаю можно попытатся избежать бана , если применить в диву class или id.
На сколько я понял поисковики даже не подгружают внешние таблицы стилей...
Ясно. Если вы играете в грязное SEO, то это совсем другая история.
Просто было интересно ;) Большое спасибо за быстрые ответы
Так что там насчет профилей, определились? или это так и остался спорный вопрос?
Могу сказать одно — предложенный Александром способ тоже выдаёт неадекватные результаты. До нового этапа тестирования пока не добрался.
У меня есть только одно добавление. Возможно оно уже здесь звучало, но я не осилил все комментарии =)
Вырезание картинки из градиента. Я бы рекомендовал использовать не простую пипетку, а 5 by 5 Average, это позволит избежать попадания на случайные артефакты в градиенте (всякое бывает) и даст более усредненный цвет.
Спасибо за полезные советы по настройке профиля photoshop.
Вадим, можно пример, где вы получаете неадекватный результат?
Подписка на комментарии не планируется в ближайшее время? :)
Да, огромное спасибо за доклад, было интересно.
Скажите, а как отключить для slice tool сохранение, помимо выделенных мной областей, кучи различных областей на макете выделенных по какому-то принципу самим фотошопом?
Смотрите на скриншот.
очень интересный доклад, спасибо Вадим, только вот хотелось бы это видео иметь на жестком диске, но с флешплеерами я не очень дружу (:
смотрел в кэш лисицы, там все бьется на много файлов... и не особо мне понятно что с ними делать, первое что пришло в голову в flv переименовать, но не помогло.... подскажите пожалуйста как поступить?
sikwel, посмотрите здесь: Я.Субботник, Апрель 2009. Там есть ссылка на AVI последней версии доклада.
спасибо большое скачал, а проблему с flv решил с помощью сервиса http://videosaver.ru/