Разное

Где узнать нюансы: как нарезается дизайн и как художник должен работать в паре с кодером. Кто в курсе? Как должен проходить процесс?

Есть у меня тяжёлые видеотуториалы по Дрим Вейверу и там очень грамотно показано и описано как правильно нарезать и как правильно HTML код строить для нарезки дизайна)))

сколько весит?

по-моему 'дримвейвер' и 'нарезка' плохо стыкуются. правильнее : дримвейвер-верстка, фотошеп - нарезка.

Скачивайте любую понравившуюся страницу и смотрите как она собрана. вот и все.

Во-первых, если дизайнер ещё не знаком с технологией веб-вёрстки, то надо ему преподать какие-то азы.

Во-вторых, макет от дизайнера лучше всего получать в Кореле. Это значительно упрощает последующую нарезку-вёрстку.

Вёрстка, не должна подразумевать под собой тупую нарезку фотошоповой картинки. В Кореле легче выбрать только необходимые элементы и экспортировать их в гиф/джипег по необходимости. Не захыватывая куски от других элементов. Таким образом имеется возможность разнести по слоям, в фон, по ячейкам разные элементы дизайна.

При вёрстке главное выдержать суть дизайна, а не фотографическую точность.

Некоторые элементы дизайна могут при вёрстке оказаться очень тяжеловесными, поэтому от них стоит отказаться, либо несколько переиграть дизайн, либо уменьшить эти элементы, включив их частично.

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

Вот эскизы от дизайнера. http://www.redut.byte.nsk.su/picture/2006/site/

Утверждённый дизайн главной и остальных страниц рисунки: 1-3, 1-4 (строка-столбец).

Вот что из этого получилось: http://www.td.byte.ru/

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

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

Поэтому пока дизайнера попросили внести этот элемент (лучи) локально, в каких-то уголочках...

В итоге, первая страница стала весить менее 100 Кб, в отличии от старого дизайна, который делала какая-то сурьёзная компания http://www.volkov.ru/portfolio/sites2004.php, когда первая страница весила более полумегобайта, из-за тупой нарезки квадратиками большой картинки.

Таким образом либо надо работать командой: дизайнер/художник, верстальщик, кодер. Либо осваивать самому простейшие навыки работы в смежных облостях. При этом хочу заметить, что кодер и верстальщик - разные специализации.

В команде, если дизайнер специализируется на www, то лучше, если бы он выдал уже готовые элементы дизайна. Кнопки, фоновые картинки, логотипы и пр.

Кстати, вначале понравился вариант дизайна 2-2, 2-3 - но такое, похоже, вообще не реально сверстать без статичной графики.

интересный у вас подход. заказчик просил и одобрил одно, а получил другое.

мне что дают в эскизе, то и должно получиться в tml. если вам приходиться при верстке переделывать дизайн, просто найдите другого художника или объясните текущему чего делать нельзя.

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

> А дизайнер ваш ничего в замешивании цемента все равно не понимает"

Как точно подмечено. :-)

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

Я бы к вредным советам отнёс: "дримвейвер-верстка, фотошеп - нарезка."
Это весьма сужает кругозор и ограничевает возможности.

"Скачивайте любую понравившуюся страницу и смотрите как она собрана. вот и все."

Что можно, к примеру, рассмотреть в исходниках такого? http://www.cn.ru/

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

В данном случае я и являлся заказчиком. :-) И одобрил изменения.

Конечно, бывает заказчик, который требует выдержать исключительно предоставленную картинку. В таком случае проще разрезать эту картинку на куски, впихнуть на сайт и срубить побыстрому "бабла".

Но можно ещё и объяснить заказчику, что дизайн - это не картинка, а стиль. И можно по разному сверстать в одном и том же стиле. Даже вёрстка слоями, с абсолютными позициями или таблицами - в итоге, по разному могут выглядеть. Но если ещё для каждой ячейки таблицы вписать жёсткие размеры... И оригинал - всегда чем-то отличается от макета.

Опять же на наглядных примерах. Заказчик дал макет от дизайнера.
http://seebest.byte.nsk.su/pict/screenshot.jpg

Крутой верстальщик берёт крутую программу и круто и быстро делает сайт.
http://seebest.byte.nsk.su/index.html
Тика в тику совпадающий с макетом.

Потом чешет затылок и понимает, что соглсано техзаданию, нужно, чтобы кнопочки "мигали", т.е. ему нужен ещё и хоть хреновенький, но кодер. Тогда он обращается ко мне. Заливая мне ту самую страницу.

Но в связи с тем, что при применении простейшего стандартного ява-скрипта нужны две картинки, несколько отличающиеся друг от друга, а кнопки он вообще нарезал захватив куски соседних кнопок и вертикальной черты (других элементов дизайна), сделать что-либо с подобными каринками http://seebest.byte.nsk.su/picture/6-1.gif, практически невозможно.

Поэтому я стряс с него "исходники" макета в Кореле. В течении часа нарезал необходимые элементы дизайна, причём только графические, так как текст на них "нанёс" при вёрстке.
После чего наложил всё это на свой движок и преподнёс, в качестве черновика, верстальщику.
Чтобы можно было довести до необходимой кондиции степень схожести.

Но его это не устроило. При этом основной претензией к моему _чероновику_ было то, что вертикальные линии не доходят до заголовка, чего в итоге и сам не добился...
Он снова начал резать макет. Более тщательно. В итоге, после чуть ли не недельных мучений он взял мои кнопки и свой нарезанный тремя кусками заголовок и родилось вот это:
http://www.seebest.ru/

Я не думаю, что текст в заголовке моего черновика выглядит хуже, чем на его картинках.
И что сильно отличается дизайн или стиль.

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

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

Это когда дизайнер свой. А когда заказчика?

>по-моему 'дримвейвер' и 'нарезка' плохо стыкуются. правильнее : дримвейвер-верстка, фотошеп - нарезка.

Да. я не правильно выразился....ну вобщем там показывают как в Image Ready нарезать и в дриме зделать вёрстку....поучительный видеоурок на русском языке...особенно когда ты новичёк))

>сколько весит?

503 Мб целиком все уроки и конкретно 60,4 Мб про нарезку и 70,8 Мб про вёрстку))

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

на русском... что заиздательство? надеюсь программы описываются не руссифицированные? =)

>Как можно достать его?

у меня с сервера скачать к примеру http://evoll.sytes.net/files/
Там нарезка это: 13 а вёрстка 14 ;)))

>как называется, где продается?

незнаю

>что заиздательство?

тоже незнаю

>надеюсь программы описываются не руссифицированные? =)

нет, программы на английском))

LuxeMate
>у меня с сервера скачать к примеру http://evoll.sytes.net/files/
>Там нарезка это: 13 а вёрстка 14 ;)))
У, прикольно, спасибо большое. Правдо, у диктора не очень уверенный голос :)
А так спасибо... Всё качаю, может чтонить интересное для себя подчеркну.

Кто нибудь ещё будет качать видеоуроки или я могу их убирать?

PS. Fddd как скорость?

>Кто нибудь ещё будет качать видеоуроки или я могу их убирать?
Ой, слушай, не докачал 16_DHTML_06.avi и 16_DHTML_07.avi , а ты уже убрал....

>PS. Fddd как скорость?
Вроде около 60 Kb

>Ой, слушай, не докачал 16_DHTML_06.avi и 16_DHTML_07.avi , а ты уже убрал....
А вот и не правда :)))

аааа выложи еще на пару дней плиз) не успел докачать

все, спасибо не надо

=)