Первый макет пошёл!

[psywalker]

Fu-tai

пипец, вес страницы метр с гаком, считай модемы отвалились, адслщики на нате тоже забылись. !!!

А с таким дизайном друг ты бы разобрался проще? Если да, то поделись пожалуйста способом

[Fu-tai]

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

[psywalker]

Fu-tai

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

Спецовыми прогами? если можно узнать способы

[Razor]

Например Adobe FireWorks ужимает получше фотошопа с тем же качеством (подозреваю все что немного лишнее из информации - откидывает).

Про PNG-8 тут вопрос был. IE понимает прозрачность png-8 если она задана через alpha-канал. Фотошоп так сохранять не умеет, опятьже см. FireWorks

[psywalker]

Спасибо дружище, обязательно попробую!

[Razor]

Прошу прощения, утро и пишу на более чистую голову:

IE6 конечно не понимает прозрачность ни в каком её проявлении ))) Но если использовать png-8 с альфа-прозрачностью, то ИЕ6 все пикселы которые хоть немного прозрачные сделает полностью прозрачные (будет некий гиф). Вроде как компромиссное решение в некоторых случаях

[amiron]

Решил попробовать разобраться с макетом и посмотреть, что можно сделать для уменьшения веса. В итоге получилось 350-370 кб (здесь я чего-то не понимаю, дома показывает 370, на работе - 350):

http://study-languages-online.com/izo-optimized/izo.html

Psywalker, в общем, я предлагаю следующие решения (длинно, но по теме):

1. Картинки с фоном дизайна у тебя не оптимизированы. Я сжал jpg на 80%, в качестве, вроде, особо не потеряли, в количестве - получили 190 кб вместо 500. (уже минус 310 кб)

2. Картинка png с травой снизу. Она у тебя весит 150 кб. Я думаю, слишком много для элемента, которого изначально при загрузке страницы не видно. При этом прозрачность элемента (если это вообще нужно макете, который, как говорят, фиксированный) важна только перед оранжевым блоком. Поэтому, предлагаю траву показывать в jpg картинке, которая используется для нижнего фона дизайна, и png вставить только перед оранжевым блоком. В итоге: вместо картинки png с шириной 1000 px (150 кб), пользовать картинку с шириной 240 - 260 px (40 кб). (еще минус 100-110 кб).

3. Ламинатор и веер. Здесь ситуация такая.

Начну с веера: Тень у картинки не плавная, а поэтому нормально можно использовать png-8, который и жмёт отлично, и с ie 6 проблем нет – просто тень убирается. В итоге: вместо 60 – 70 кб получаем около 15. (еще минус 45 -50 кб)

Ламинатор: Если использовать картинку как в psd макете, с плавной тенью, делать нечего - нужно использовать png – 24. Ты тень убрал, а значит, можно было бы использовать png-8 и уменьшить вес еще на 50 кб.

У меня для всех браузеров, кроме ie, тень отображается. Поэтому ламинатор – png-24, веер – png-8. Для ie6 оба в png-8 для единообразия, чтобы тени не было.

В итоге, ты можешь уменьшить вес как минимум на 450 кб, а возможно - и на все 700 (мне кажется, это много).

Плюс, для оптимизации необходимо сократить количество запросов к серверу. А в этом макете сам бог велел использовать спрайты для уголков в png. Идеальный здесь (для меня, по крайней мере) вариант - png-8: уголки без границ и теней. В ie6 отображается сносно. Если не png-8, то для всех кроме ie – png 24, для ie6 – gif, но в gif-e вырезать области, которые полупрозрачны в png. Я думаю, что это вырезание не займёт много времени.

Уголки всех блоков и меню можно объединить в 1-3 файла, и вместо 20 запросов к серверу получить 1-3 запроса. Я, правда, сам поленился, у меня по спрайту на каждый блок, но, если захочешь, потом объединю.

При совместной работе с дизайнером возможна дополнительная оптимизация, если разобраться с веером, ламинатором (особенно с тенью) и оранжевым блоком. Я думаю, можно добиться веса в 250 кб.

Вот, вроде, всё. Всё, что выше – ИМХО.

PS I. Пока верстал, встретил у тебя пару недочётов. Не очень важных, но если хочешь, напишу.

PS II. Меня каждый раз, как читаю, прёт от твоей истории про Вилларибо и Виллабаджо. LOL!!!

[psywalker]

Razor

Попробовал программу Adobe FireWorks - отлично справляется с ПНГ-8, буду иметь ввиду, спасибо за идею!

amiron

Отличный развёрнутый ответ дружище, люблю такие. Ответь пожалуйста:

1) Какой программой ты всё это сжимаешь?

2)

но в gif-e вырезать области, которые полупрозрачны в png. Я думаю, что это вырезание не займёт много времени.

Можно поподробнее этот участок?

3)

PS I. Пока верстал, встретил у тебя пару недочётов. Не очень важных, но если хочешь, напишу.

Я всегда только ЗА, причём обязяательно!

4)

PS II. Меня каждый раз, как читаю, прёт от твоей истории про Вилларибо и Виллабаджо. LOL!!!

Дааа, было дело

[amiron]

1. Я режу в Adobe ImageReady (идет вместе с фотошопом). У меня, я думаю, уже старая версия (7.7.), иногда макеты кривовато отображаются, но для франко-русского переводчика (т.е. меня) пойдёт, поскольку занимаюсь этим не часто. Вот, кстати, как этот макет нормально выглядит, я увидел на сайте и у тебя. Советовать этот инструмент не буду, может, есть что и получше, но сам привык к интерфейсу и опциям. Меня устраивает.

Для png-8 - Adobe Fireworks.

2. Для варианта "gif-ie6, PNG - остальные". В принципе, сделать работу, которую делает png-8. Если есть Adobe Fireworks – даже не парься. Смысл прост, я его уже описал. Как уже сказал, работаю с ImageReady, поэтому расскажу, как это у меня происходит. Я беру psd или png картинку. Выбираю оптимизацию gif + прозрачность. В ImageRady есть возможность просмотреть до сохранения, как будет выглядеть оптимизированное изображение, при этом полупрозрачные области в psd или png обычно светлее основного цвета или вообще белые в gif-е. Их я вырезаю и сохраняю изображение в gif-е. Возможно, это можно сделать как-то автоматизировано, но у меня это много времени не занимает. Затем в css прописываю для ie6 (у меня через !important или в отдельном css файле) gif-картинку. Всё. Для некоторых случаев (мне) подходит.

3. Одни мелочи.

Причём во многом связанные с работой дизайнера. Мог бы и немного поудобнее для вёрстки сделать макет.

а) Светло-зелёные области вокруг веера и ламинатора. Видно, как ты их, сволочей, вручную стирал. Но, правда, не до конца стёр. Здесь больше вина дизайнера. Из имеющегося psd нельзя получить картинку для вёрстки, схожую с макетом, как бы там не пробовали играться со слоями. Я на фиг убрал зелёный блик на ламинаторе. И без него нормально. Или пусть дизайнер даёт мне нормальную картинку с бликом и тенью.

б) Градиент в зелёном блоке. Не очень важно, если объём содержания изменяться не будет. Если будет изменяться:

- В случае, если уменьшается: появляется тёмно-зеленая полоска внизу.

Предложение: прописать для div.box.green div.mdl минимальную высоту

- В случае, если увеличивается: в середине градиент идёт волнами. Здесь уже просто по-другому вырезать фон для блока и разобраться с нижней частью. Поскольку тоже делал, могу подсказать, что однотонная область градиента идёт примерно на высоте 110px снизу блока.

в) В верхнем голубом блоке тоже есть градиент, хоть и слабый. Не очень важно, потому что визуально малозаметно.

г) Решётка в голубом нижнем блоке не достаёт до низу. Не очень важно, потому что тоже визуально малозаметно.

д) У меня криво отображается в ie6 с отключенным js. Вообще не важно, не фига на кривом браузере js отключать.

[psywalker]

Ок, я тебя понял, а скажи:

1) Могу ли я все операции, которые ты описал делать в Adobe Fireworks ?

2) Значит ты вначале просто вставляешь в программу картинку, которую хочешь оптимизировать?

3) Затем ты нажимаешь функцию

"Выбираю оптимизацию gif + прозрачность."

или такой функции нет?

4) А что за полупрозрачные области, которые ты удаляешь?

p.s. - Насчёт дизайнеров - это даа, бывают нарисуют гады, мучайся потом из-за них!

[amiron]

1. В Adobe Fireworks то же самое можешь.

2,3. Открываешь картинку в программе, выбираешь вкладку "Оптимизировать и выровнять". Там все свойства описаны. Ты можешь выбрать какой тебе нужно формат, изменить свойства (напр. качество, прозрачность и т.п.). Если хочешь посмотреть, что получиться, там есть кнопка просмотра. Можешь сравнить с начальным вариантом.

4. Области, у которых прозрачность меньше 100% (можешь проверить, если что, в панели информации). Вообще, там обычно на глаз видно, прозрачно или нет. Плюс, если смотришь в двух вариантах (оригинал и gif), как уже сказал, в варианте c gif эти области светлее, чем обычные.

[asvocot]

хорошая вёрстка,хотелось бы пощупать этот макет.