Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 178
sarcasm
А ещё можно сделать скриншот макета и уже в нём тыкнуть пипеткой :)
/sarcasm
А ещё можно сделать скриншот макета и уже в нём тыкнуть пипеткой :)
/sarcasm
Нене, ето не оч ок. Удобней посмотреть в свойствах слоя какой-там color blending
Но для етого ж надо хоть чуток ориентироваться в PS. Вопщем опять стык технологий.
А еще хорошие дизайнеры делают специальный слой с квадратиками всех основных цветов. И им самим не надо запоминать и верстальщику удобней
Но для етого ж надо хоть чуток ориентироваться в PS. Вопщем опять стык технологий.
А еще хорошие дизайнеры делают специальный слой с квадратиками всех основных цветов. И им самим не надо запоминать и верстальщику удобней
А что, я, сталкиваясь со всякими эффектами наложения, прозрачности и прочего, 10000 лишниями слоями, и прочими ужасами от дизайнера примерно так и делал: отключал лишние слови, мержил оставшиеся слои в один (Merge/Merge Down/Flatten Image) и спокойно пипетил и резал всё что нужно.
Вот тут клево реализован multiply — roll.com/brands/cuties — см. слайд с мальчиком и мандаринами. Но это исключение скорее.
ИМХО, все описанные проблемы от того что есть промежуточная трансформация psd -> html
Все таки дизайнеры должны уметь верстать html
Тем более для них есть масса тулзовин (compass, emmet) максимально упрощающих етот процесс.
Да и дизайнить документ сразу в html намного удобней.
Возможно аналогия не очень явная но ето мне напоминает WYSIWYG и WYSIWYM подходы.
Все таки дизайнеры должны уметь верстать html
Тем более для них есть масса тулзовин (compass, emmet) максимально упрощающих етот процесс.
Да и дизайнить документ сразу в html намного удобней.
Возможно аналогия не очень явная но ето мне напоминает WYSIWYG и WYSIWYM подходы.
sarcasm
Сенсация! Секрет АвтоВаза раскрыт!
/sarcasm
Сенсация! Секрет АвтоВаза раскрыт!
/sarcasm
Нене, я не предлагаю дизайнерам заниматься работой верстальщиков.
Я предлагаю дизайнерам сменить инструмент. Вместо фотошопа — текстовый редактор. Отличие в том что примитивы дизайнер рисует в граф редакторе, а компоновка в html.
Я предлагаю дизайнерам сменить инструмент. Вместо фотошопа — текстовый редактор. Отличие в том что примитивы дизайнер рисует в граф редакторе, а компоновка в html.
Дык код то как раз и дает. CSS, а особенно всякие надстройки (LESS/SCSS) дают как раз эту самую гибкость.
Документ верстается один раз, а затем вы просто меняете стили. В зависимости от того что пришло в голову.
Вернусь, пожалуй, к аналогии упомянутой в начале статьи.
Photoshop — это «word» в мире дизайна. А HTML + CSS это Latex.
З.Ы: Похоже что дизайнеры не всегда знают что они хотят сделать и любят смотреть на процесс что бы оценить «удачность» варианта.
В этом случае «WYSIWYG» подход удобнее.
Документ верстается один раз, а затем вы просто меняете стили. В зависимости от того что пришло в голову.
Вернусь, пожалуй, к аналогии упомянутой в начале статьи.
Photoshop — это «word» в мире дизайна. А HTML + CSS это Latex.
З.Ы: Похоже что дизайнеры не всегда знают что они хотят сделать и любят смотреть на процесс что бы оценить «удачность» варианта.
В этом случае «WYSIWYG» подход удобнее.
HTML + css это лишь другой инструмент, он ничуть не хуже фотошопа в возможностях.
Правильные дизайнеры что делают? Слои, свойства слоев, вот это все. Для чего? Что бы структурировать макет.
Правильные верстальщики делают тоже самое, блоки, элементы, модификаторы.
Все ради того что бы была структура у документа / макета. Да еще и что бы эта структура подчинялась правилам и некоторой логике.
Фактически дизайнер уже использует этот подход, только все что он придумал и реализовал хранится в немного другом формате.
Дизайнер не структурирующий файл, хотя бы перед сдачей макета, это зло, это большое злобное зло.
Обратите внимание на контекст. Речь о процессе, во время процесса не до структуризации. Структуризация — закрепляющая фаза, к ней переходят при добавлении страниц и в финальной версии.
Начало работы для меня, это создание структуры папок в psd. Потому, что часто дизайнер прерывает работу над задачей и переключается на другую. И вернувшись к прежней задаче через пару недель просто не разберет свой творческий полет и прочую красоту. А может так случится что дизайнер уйдет в отпуск и таску продолжит другой человек и что ему делать с потоком сего творчества?
Так, что я в целом против такого подхода. Под сдачей макета можно в этом случае понимать и ежедневный коммит в svn.
Так, что я в целом против такого подхода. Под сдачей макета можно в этом случае понимать и ежедневный коммит в svn.
Вы забыли одну простую вещь — чтобы перетащить слой на десять пикселей вниз, нужно всего лишь один раз нажать с шифтом на стрелку вниз.
Чтобы сделать то же самое в коде — нужно найти этот слой в css и поменять там отступы.
Не говорите чепухи, в общем. Дизайн — это не только плашка и текст на ней.
Чтобы сделать то же самое в коде — нужно найти этот слой в css и поменять там отступы.
Не говорите чепухи, в общем. Дизайн — это не только плашка и текст на ней.
С одной стороны экрана блокнот с css, с другой — браузер. Если работаешь на блоком, то скорее все он уже найден, в противном случае ctrl+f (в фш слой тоже нужно найти, относящийся к блоку?). Переписал значение, сохранил, обновил браузер. Пару секунд.
В случае использования scss мне будет достаточно поменять значение переменной. Да и без переменной нет проблем если имена блоков соответствуют логике. Поиск по документу занимает секунды.
Это плохрй пример, если есть еще примеры я с удовольствием на них посмотрю.
З.Ы: Когда дизайнер рисует в векторе он относится к документу как к набору примитивово (кривых, прямых, градиентов итд)
Почему же он не хочет относится так-же к html документу?
Это плохрй пример, если есть еще примеры я с удовольствием на них посмотрю.
З.Ы: Когда дизайнер рисует в векторе он относится к документу как к набору примитивово (кривых, прямых, градиентов итд)
Почему же он не хочет относится так-же к html документу?
Заметьте сколько раз он считал на калькуляторе. Это значит что документ не WYSIWYG а построен по строгим правилам которые просто не видны. ОНи в голове у дизайнера. А могут быть формализованы в виде микшинов scss.
Ну так а firebug или google developer tools или что там, дает тот же эффект. + LiveEdit который стал так моден в редакторах.
Речь только об умении пользоваться инструментом.
Речь только об умении пользоваться инструментом.
С точки зрения разработки «чистого» дизайна сайта оба подхода имеют право существовать, и оба имеют свои нюансы, плюсы и минусы.
С практической точки зрения редактирование сразу в css имеет следующие плюсы: изменение размеров окна браузера при резиновой версте. Я не уверен, что в фш вы легко сможете имитировать изменение размера окна и сразу-же визуально наблюдать, как это все будет выглядеть. Отсутствие каких-либо проблем при версте, любые недопустимые вещи просто сразу не выйдет сверстать (например полупрозрачный элемент с нестандартным режимом наложения). А также получение на выходе готового макета, минуя полностью всю работу верстальщика.
С практической точки зрения редактирование сразу в css имеет следующие плюсы: изменение размеров окна браузера при резиновой версте. Я не уверен, что в фш вы легко сможете имитировать изменение размера окна и сразу-же визуально наблюдать, как это все будет выглядеть. Отсутствие каких-либо проблем при версте, любые недопустимые вещи просто сразу не выйдет сверстать (например полупрозрачный элемент с нестандартным режимом наложения). А также получение на выходе готового макета, минуя полностью всю работу верстальщика.
Это очень спорный вопрос ) Если бы можно было с уверенностью так утверждать не возникли бы системы типа Latex, тайловые wm, vim и еще много других вещей управляемых с клавиатуры.
Вопрос в том насколько конкретный инструмент подходит под конкретную задачу
Вопрос в том насколько конкретный инструмент подходит под конкретную задачу
Я программист, жена — дизайнер.
Да потому, что многие дизайнеры — художники, делают прекрасные макеты и фирменные стили, но они ни разу (ни одного) не прогеры, и пинг яндекса для них — достижение и подвиг. Но как дизайнеры они великолепны. И в ФШ, и в АИ, и в прочем они рисуют! А не прогают. И научить их очень тяжко, да и не нужно. Нужно научить понимать, чего от них ждёшь, и то они поймут не всё. Нужен диалог. Долгий. И иногда не без ругани. Но результат может приятно поразить. А может и нет…
Да потому, что многие дизайнеры — художники, делают прекрасные макеты и фирменные стили, но они ни разу (ни одного) не прогеры, и пинг яндекса для них — достижение и подвиг. Но как дизайнеры они великолепны. И в ФШ, и в АИ, и в прочем они рисуют! А не прогают. И научить их очень тяжко, да и не нужно. Нужно научить понимать, чего от них ждёшь, и то они поймут не всё. Нужен диалог. Долгий. И иногда не без ругани. Но результат может приятно поразить. А может и нет…
Вы исходите из ошибочного предположения что процесс творчества не может быть выражен иными инструментами кроме классических «кисти», «пера» и «фортепиано».
Посмотрите хотя бы на code.google.com/p/mingus/
«Креативить» можно используя любой инструмент. Освоение инструмента лишь вопрос времени и поставленной цели.
html + css невероятно мощный инструмент для выражения творческих идей.
Это вовсе не говорит о том что фотошоп плох в этом деле, вовсе нет, просто для создания сайтов он подходит только как инструмент создания отдельных «аккордов».
Мело того, если бы дизайнеры знали на сколько проще можно сделать некоторые вещи используя верстку, они бы сами ринулись ее изучать. Вот только показать им эти преимущества никто не берется.
Посмотрите хотя бы на code.google.com/p/mingus/
«Креативить» можно используя любой инструмент. Освоение инструмента лишь вопрос времени и поставленной цели.
html + css невероятно мощный инструмент для выражения творческих идей.
Это вовсе не говорит о том что фотошоп плох в этом деле, вовсе нет, просто для создания сайтов он подходит только как инструмент создания отдельных «аккордов».
Мело того, если бы дизайнеры знали на сколько проще можно сделать некоторые вещи используя верстку, они бы сами ринулись ее изучать. Вот только показать им эти преимущества никто не берется.
Я исхожу совсем из другого, что у части людей может быть настолько другой способ мышления и восприятия, что пропасть и бездна — наименее яркие метафоры. Это не «дизайнер» — технарь, который в школе хорошо рисовал, а потом закончил курсы по композиции и колористике, это больше художник. И для него проблема не в освоении другого инструмента, а в том, что это будет мучительно не его. Мою жену год пытали в Строгановке на тему анимации во флеше, но она не смогла понять скриптовую анимацию. Не не захотела, а не смогла. Кардинально другой тип мышления и мировосприятия. Она видит, как мне удобно пользоваться css, но ей это чуждо. Поменять циферку она там может, но вот большее — пытка. А вовсе не нежелание.
Есть многие люди, для которых дело действительно лишь в освоении нового редактора. Это просто. Нужно только время и желание. А вот другой способ смотреть на мир — это сложнее. С такими людьми нужен диалог. Объяснение друг другу своих трудностей и желание понять его.
Есть многие люди, для которых дело действительно лишь в освоении нового редактора. Это просто. Нужно только время и желание. А вот другой способ смотреть на мир — это сложнее. С такими людьми нужен диалог. Объяснение друг другу своих трудностей и желание понять его.
Речь все-таки идет о ВЕБ-дизайнерах, а не флористах)
Графический дизайнер может заниматься разными вещами — печатной продукцией, веб-продукцией, разработкой фирменного стиля целиком, разработкой дизайна этикеток и упаковок (не только графически, но и конструктивно)… Более узкая специализация — палка о двух концах. Не все, кто занимается дизайном для веба — узкие спецы. И не у всех даже вебских — технический склад ума. Такие люди могут запомнить ограничения, хоть и не без труда, но вот понять их — не всегда. Могут не понять, почему такая красивая и стильная штука — просто, а вот эта мелочишка — сложно.
И да, они тоже, бывает, хотят навалять верстальщикам и прочим за «Да я почти так сделал, ерунда же!»
P.S.> Мучает меня вопрос, напишу тут же. А почему идёт разговор только о дизайне в фотошопе, изначально растровом редакторе картинок? Почему не Иллюстратор и Индизайн?
И да, они тоже, бывает, хотят навалять верстальщикам и прочим за «Да я почти так сделал, ерунда же!»
P.S.> Мучает меня вопрос, напишу тут же. А почему идёт разговор только о дизайне в фотошопе, изначально растровом редакторе картинок? Почему не Иллюстратор и Индизайн?
Фотошоп — это устоявшееся заблуждение.
В иллюстраторе откровенно говоря неудобно, а индизайн — всё-таки для бумажной вёрстки.
Fireworks (с его автоматизированными задачами) + Photoshop, вот выбор дизайнера.
Кстати, с удовольствием бы почитал о примерах автоматизации с помощью Fireworks.
В иллюстраторе откровенно говоря неудобно, а индизайн — всё-таки для бумажной вёрстки.
Fireworks (с его автоматизированными задачами) + Photoshop, вот выбор дизайнера.
Кстати, с удовольствием бы почитал о примерах автоматизации с помощью Fireworks.
Веб-дизайнер — это не узкая, а просто специализация. Если веб-программист, без подготовки сядет писать десктопное приложение, получится ахтунг. Хотя казалось бы, почему? И там, и там, С#.
Так что, если дизайнер выбрал это направление, должен в нем мксимально развиваться, потому что там столько тонкостей, что на всю жизнь хватит, а не гнаться за многими зайцами.
Так что, если дизайнер выбрал это направление, должен в нем мксимально развиваться, потому что там столько тонкостей, что на всю жизнь хватит, а не гнаться за многими зайцами.
Согласен. И не согласен. Важны и люди, знающие все тонкости одного, и знающие базу о многом.
Тот же фирменный стиль — дизайн сайта лишь один из его элементов. И либо всё комплексно делает специалист широкого профиля, недостаточную специализацию которого нужно принять, либо команда спецов по направлениям под руководством того же «широкопрофильного». И тут уже от масштабов и специфики задачи зависит, будет ли быстрее и лучше такое решение в комплексе. Если же нужен только веб, то понятно, что спец эффективнее. Хотя взгляд из другой области и тут может быть полезен.
Тот же фирменный стиль — дизайн сайта лишь один из его элементов. И либо всё комплексно делает специалист широкого профиля, недостаточную специализацию которого нужно принять, либо команда спецов по направлениям под руководством того же «широкопрофильного». И тут уже от масштабов и специфики задачи зависит, будет ли быстрее и лучше такое решение в комплексе. Если же нужен только веб, то понятно, что спец эффективнее. Хотя взгляд из другой области и тут может быть полезен.
Я программист, жена — дизайнер.
…
И иногда не без ругани.
Вы хоть можете «вдуть» дизайнеру:)
Меня как то за подобные мысли дико заминусовали:
habrahabr.ru/post/173271/#comment_6018847
Вот еще толковый комментарий по теме:
habrahabr.ru/post/173271/#comment_6030909
habrahabr.ru/post/173271/#comment_6018847
Вот еще толковый комментарий по теме:
habrahabr.ru/post/173271/#comment_6030909
Ну мне кажется все потому что в первом комментарии вашу идею выдали за желание заставить всех верстальщиков фотошопить.
А ведь идея то не в этом. Идея в том что бы инструмент подходил к цели.
Мы не одиноки! sixrevisions.com/web_design/should-web-designers-know-html-and-css/
А ведь идея то не в этом. Идея в том что бы инструмент подходил к цели.
Мы не одиноки! sixrevisions.com/web_design/should-web-designers-know-html-and-css/
> верстальщиков фотошопить
Я имел ввиду дизайнеров верстать.
Мне просто со стороны кажется, что дизайнер, который сможет выдать сразу готовый макет будет намного эффективнее. И что бы обучить дизайнера html + css не надо много усилий, ведь это просто, да?
Я имел ввиду дизайнеров верстать.
Мне просто со стороны кажется, что дизайнер, который сможет выдать сразу готовый макет будет намного эффективнее. И что бы обучить дизайнера html + css не надо много усилий, ведь это просто, да?
Давайте теперь рассмотрим очень важную составляющую. Время.
Допустим у нас есть не очень простой проект, примерно 12 шаблонов страниц, 2 gui-листа. Сначала проводим анализ задач проекта, выписываем структуру, навигацию, задачи в текстовый файл. Делаем наброски на бумаге, удачные решения переносим в Fireworks/Axure/Balsamiq/etc. Для утвержденных макетов разрабатываем визуальный стиль, начинаем прорисовывать объекты. После утверждения стиля переходим к отрисовке оставшихся шаблонов и g-листов. Аппрувим в последний раз макеты, вносим оставшиеся правки.
А теперь вы предлагаете к времени потраченному на разработку концепции, анализ, прототипирование, разработку визуального стиля, отрисовку иконок прибавить вёрстку этих 12 шаблонов и 2 gui-листов. Это не очень эффективно, не правда ли?
PS: я верстал когда ещё ценили xhtml 1.0 strict, но сейчас считаю это бесполезной тратой времени. PS: на фрилансим все мои макеты верстались без проблем и верстальщики выдавали нужный результат практически без правок.
Допустим у нас есть не очень простой проект, примерно 12 шаблонов страниц, 2 gui-листа. Сначала проводим анализ задач проекта, выписываем структуру, навигацию, задачи в текстовый файл. Делаем наброски на бумаге, удачные решения переносим в Fireworks/Axure/Balsamiq/etc. Для утвержденных макетов разрабатываем визуальный стиль, начинаем прорисовывать объекты. После утверждения стиля переходим к отрисовке оставшихся шаблонов и g-листов. Аппрувим в последний раз макеты, вносим оставшиеся правки.
А теперь вы предлагаете к времени потраченному на разработку концепции, анализ, прототипирование, разработку визуального стиля, отрисовку иконок прибавить вёрстку этих 12 шаблонов и 2 gui-листов. Это не очень эффективно, не правда ли?
PS: я верстал когда ещё ценили xhtml 1.0 strict, но сейчас считаю это бесполезной тратой времени. PS: на фрилансим все мои макеты верстались без проблем и верстальщики выдавали нужный результат практически без правок.
Нет, они просто должны понимать, что колеса должны быть снизу и соприкасаться с дорогой, а пассажиры должны находиться внутри.
Дизайнер работающий с полиграцией или флексо знает все особенности, к примеру. Ну или весь тираж печатники дизайнеру вставят во все места.
Яркий пример сборка черного с помощью CMYK 100%100%100%100% — вроде и черный, а вроде как ноги дизайнеру сломают на третий раз.
Яркий пример сборка черного с помощью CMYK 100%100%100%100% — вроде и черный, а вроде как ноги дизайнеру сломают на третий раз.
Не совсем корректное сравнение. Печатники могут и не заметить блок мелкого текста набранного нонпарелью или перлом (условия акции, например). А вот заказчик или ФАС с Роскомнадзором, обязательно обратят внимание. Только вот цена ошибки разная.
В случае сайта — недовольство заказчика и изменение в несколько кликов мышкой, а вот в случае полиграфии — невозможность внесения правок в готовый тираж (под нож).
И деньги совершенно разные, зачастую стоимость только печати тиража в несколько десятков раз больше стоимости работы дизайнера и общей прибыли за заказ.
Так что полиграфист все нюансы знает лучше чем Отче наш, бо если вместо мелкого текста выходит грязная плашка, то тут уже никак не отмажешься.
В случае сайта — недовольство заказчика и изменение в несколько кликов мышкой, а вот в случае полиграфии — невозможность внесения правок в готовый тираж (под нож).
И деньги совершенно разные, зачастую стоимость только печати тиража в несколько десятков раз больше стоимости работы дизайнера и общей прибыли за заказ.
Так что полиграфист все нюансы знает лучше чем Отче наш, бо если вместо мелкого текста выходит грязная плашка, то тут уже никак не отмажешься.
Вывод. Лучше найти дизайнера, который своим профессионализмом снимет риски с производства и затраты на подготовку/выверку.
«Лучше один раз пристрелить жену, чем каждую неделю стрелять нового любовника»
«Лучше один раз пристрелить жену, чем каждую неделю стрелять нового любовника»
Вот поэтому любой макет полиграфисты утверждают по нескольку раз у клиента. Ну, если это нормальные полиграфисты.
Судя по минусикам идею воспринимают как глупость, а ведь я не один так думаю.
sixrevisions.com/web_design/should-web-designers-know-html-and-css/
boxiedesigner.com/web-design/6-reasons-to-why-web-designers-should-know-html-and-css/
37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss
www.myintervals.com/blog/2010/09/16/do-web-designers-need-to-know-web-development/
Ну и судя по комментариям никто так и не не понял что я не предлагаю дизайнерам брать свои PSD и перегонять их в html самим. Я предлагаю им придумывать дизайн используя современные инструменты типа compass, emmet, liveedit для создания макета СРАЗУ в html.
sixrevisions.com/web_design/should-web-designers-know-html-and-css/
boxiedesigner.com/web-design/6-reasons-to-why-web-designers-should-know-html-and-css/
37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss
www.myintervals.com/blog/2010/09/16/do-web-designers-need-to-know-web-development/
Ну и судя по комментариям никто так и не не понял что я не предлагаю дизайнерам брать свои PSD и перегонять их в html самим. Я предлагаю им придумывать дизайн используя современные инструменты типа compass, emmet, liveedit для создания макета СРАЗУ в html.
какое отношение приведенные статьи имеют отношение к вашей идеи избавиться от пакета CS6?
Вы не совсем понимаете идеи этих людей.
37 signals специализируются на создании massive content сервисов и сайтов, здесь уместно использовать минимал-стиль. А теперь давайте посмотрим как нам помогут «современные инструменты» в создании промо-сайта, в создании корпоративного сайта банка, в создании интерактивного сервиса/тонкого клиента и тд и тп.
Их идея заключается в том, что для их специфики этот инструмент подходит. Собственно поэтому вас и заминусовали, поскольку каждый представляет конкретный вариант использования «современного инструмента» и не видит как он может помочь в решении его задач.
37 signals специализируются на создании massive content сервисов и сайтов, здесь уместно использовать минимал-стиль. А теперь давайте посмотрим как нам помогут «современные инструменты» в создании промо-сайта, в создании корпоративного сайта банка, в создании интерактивного сервиса/тонкого клиента и тд и тп.
Их идея заключается в том, что для их специфики этот инструмент подходит. Собственно поэтому вас и заминусовали, поскольку каждый представляет конкретный вариант использования «современного инструмента» и не видит как он может помочь в решении его задач.
Я так понимаю, что автор топика Владимир.
Владимир. Вся эта боль, которую вы выплеснули на читателя, решается простой договоренностью (учимся коммуницировать — рассказываем о проблемах) и актом приемки макета в разработку (пришел макет — вы его посмотрели — вас все устраивает — вы подписываетесь заверстать за день. Не устраивает озвучиваете проблемы).
А так это вся история из разряда «Меня обидели, но я не могу этого сказать. Робею.»
Владимир. Вся эта боль, которую вы выплеснули на читателя, решается простой договоренностью (учимся коммуницировать — рассказываем о проблемах) и актом приемки макета в разработку (пришел макет — вы его посмотрели — вас все устраивает — вы подписываетесь заверстать за день. Не устраивает озвучиваете проблемы).
А так это вся история из разряда «Меня обидели, но я не могу этого сказать. Робею.»
У дизайнеров был бы немного другой крик отчаяния.
Но с тем же итогом. «Учимся командной работе».
Но с тем же итогом. «Учимся командной работе».
Да, я не написал в начале статьи, что действительно дизайнер, а потому и большая часть косяков посвящена именно дизайнерам.
Крик отчаяния тут не при чем, это некие символические отношения, с помощью которых немного легче и нагляднее разобрать ситуацию)
Крик отчаяния тут не при чем, это некие символические отношения, с помощью которых немного легче и нагляднее разобрать ситуацию)
Единственный правильный путь это формализовать отношения расставив зоны ответственности.
Простите, но все что вы описываете решается 1 раз с конкретным человеком и забывается раз и на всегда.
Простите, но все что вы описываете решается 1 раз с конкретным человеком и забывается раз и на всегда.
Отношения формировать конечно нужно,
Но статья о косяках, которые далеко не всегда решаются одним единственным диалогом. Статья о том, как заранее предупредить эти косяки, это ведь быстрее и проще, и нервы целее у обеих сторон )
Но статья о косяках, которые далеко не всегда решаются одним единственным диалогом. Статья о том, как заранее предупредить эти косяки, это ведь быстрее и проще, и нервы целее у обеих сторон )
Дизайнер штоле?
Я вот несколько раз уже объяснял дизайнеру, что нестандартные шрифты — плохо. А ему вообще по барабану, у него как будто мания найти извратный шрифт, да еще и поизмываться на ним (запилить обводку, градиент, тень). Вот ничего с ним поделать не могу.
Я вот несколько раз уже объяснял дизайнеру, что нестандартные шрифты — плохо. А ему вообще по барабану, у него как будто мания найти извратный шрифт, да еще и поизмываться на ним (запилить обводку, градиент, тень). Вот ничего с ним поделать не могу.
Беда. Но не зная ситуации конретной, сложно мне вам посоветовать что-либо.
google web fonts забанили?
А там очень часто нет нужного. Я вот заметил, что многие дизайнеры почему-то очень любят паратайповские шрифты. Естественно, пиратские.
И, естественно, на гуглошрифтах их нет, а «белка» посылает в пеший эротический тур.
Причем на тех же гуглошрифтах полно похожих почти до степени неразличимости, и бесплатных. Но нет — нам нужен непременно «PT Sans», а не какой-то там нищебродский «Open Sans»
И, естественно, на гуглошрифтах их нет, а «белка» посылает в пеший эротический тур.
Причем на тех же гуглошрифтах полно похожих почти до степени неразличимости, и бесплатных. Но нет — нам нужен непременно «PT Sans», а не какой-то там нищебродский «Open Sans»
Посылайте его самого искать те шрифты, которых нет в открытых источниках. А PT Sans на Google web fonts кстати есть.
PT Sans я взял чисто для примера — у меня он давно уже валяется сконвертированный белкой, поэтому на гугле его не ищу.
Но проблему я обозначил :)
Дизайнера хорошо, конечно, послать за шрифтами, но часто бывает так (особенно на фрилансе), когда макеты получаешь не от дизайнера, а, скажем, от программиста, который их в свою очередь получил от конечного клиента, а уже им прислал дизайнер.
В этом случае достучаться до дизайнера бывает тяжело, а то и невозможно
Но проблему я обозначил :)
Дизайнера хорошо, конечно, послать за шрифтами, но часто бывает так (особенно на фрилансе), когда макеты получаешь не от дизайнера, а, скажем, от программиста, который их в свою очередь получил от конечного клиента, а уже им прислал дизайнер.
В этом случае достучаться до дизайнера бывает тяжело, а то и невозможно
В этом случае паратайповские шрифты привинчиваются посредством Adobe Typekit, а клиенту приходится сообщить, что заказанный им дизайн будет требовать оплаты арендованных шрифтов.
Как google web fonts поможет мне реализовать градиент и обводку у текста?
Там есть такая функция Gmail или Gtalk, можно написать этому дизайнеру и спросить у него.
Обводку тенью в новейших браузерах. Ваш Кэп.
А если мне нужна обводка в 5 пикселей? Уважаемый Кэп, сделайте примерчик, я на него с удовольствием посмотрю.
Примерно так — jsfiddle.net/8na4D/ ;)
Но обычно такие вот «обводки» относятся к плакатным решениям заголовков большой величины и целесообразно их делать все-таки в виде картинок.
Но обычно такие вот «обводки» относятся к плакатным решениям заголовков большой величины и целесообразно их делать все-таки в виде картинок.
Если сайт локализован на, допустим, 5 языков и там стопицот подобных заголовков, кнопок, баннеров и т.п., то делать картинками еще тот гемор. Я не придумываю гипотетический случай, мне с таким приходится работать к сожалению.
Вот именно поэтому я предпочитаю развитые системы управления контентом, которые могут генерить графические заголовки на лету. Так что на каждую задачу найдется нужный инструмент.
графические заголовки на лету? это же какой обьем дополнительных запросов к сайту будет? в спрайты особо такой обьем не засунешь, в base64 это будет нечто, а вот шрифты, спокойно решают эту задачу. Вебшрифты не панацея, в том виде в котором они есть сейчас, но это выгодное решение и не такое затратное как все полагают
Технологии генерации картинок лет несколько больше, чем повсеместному внедрению веб-шрифтов. Генерятся они один раз при обращении к свежесозданной странице, далее лежат спокойно в папке временной и ждут своего часа. Веб-шрифты безусловно выгоднее, когда они есть и нет таких задач как обводка в 5 пикселей и т.п.
так влюбом случае обращение к нагенерированным картинкам, сколько это запросов? тут люди ломают головы как бы сократить количество css/js файлов и помаксимуму паковать все в спрайты, а на многих ресурсах например graphicriver паки превьюшек склеивают в один длинный файл, вы предлагаете гонять тонны графических заголовков через http запросы
Я не предлагаю, я рассматриваю возможность использовать подобный вариант. Опять, повторюсь, не у всех стоит задача нарисовать заголовок с 5 пикселями обводки.
Тем более можно постараться думать на 2 шага вперед: на тестовой предварительной версии нагенерить картинок, а для продакшена оптимизировать их и склеить в спрайт. Тем более что есть масса решений для автоматической генерации спрайтов и можно автоматизировать и это.
Вы упираетесь в какую-то «проблему» надуманную и не хотите или не можете позволить своему разуму сделать несколько шагов в разные стороны, хотя мы с вами располагаем одной и той же информацией, причем вполне вероятно что вы обладаете даже большим ее количеством.
Просто позвольте вашей технической фантазии вести вас вперед, довертесь своим интуицц и опыту.
Тем более можно постараться думать на 2 шага вперед: на тестовой предварительной версии нагенерить картинок, а для продакшена оптимизировать их и склеить в спрайт. Тем более что есть масса решений для автоматической генерации спрайтов и можно автоматизировать и это.
Вы упираетесь в какую-то «проблему» надуманную и не хотите или не можете позволить своему разуму сделать несколько шагов в разные стороны, хотя мы с вами располагаем одной и той же информацией, причем вполне вероятно что вы обладаете даже большим ее количеством.
Просто позвольте вашей технической фантазии вести вас вперед, довертесь своим интуицц и опыту.
Статья отличная, главное чтобы дизайнеры ее увидели :)
Скажите, а никто еще не придумал способа «урезать» функциональность Фотошопа до состояния «web-safe», или «пригодно для верстки без танцев с бубном»?
Говорят Adobe Fireworks как раз для этого, но дизайнеры с ним работать не хотят упорно.
Великолепная программа для верстальщиков, но, к сожалению, очень часто не понимает эффекты фотошопа, в том числе и упомянутые режимы наложения :(
Я ей никогда не пользовался, но пишут, что она поддерживает экспорт из фотошопа. И потом, от режимов наложения нужно обязательно избавляться — это абсолютное зло. А какие еще эффекты не поддерживает? Подозреваю, что без них можно и нужно обходиться.
При импорте файла PSD с масками бывают глюки, т.е. все маски надо либо растрировать в фотошопе, либо попытаться обойтись без них. Цветовую модель использовать только SRGB, в LAB ty поймет. Это навскидку.
Но вот с нуля макеты в FW делать, по-моему, в общем-то даже и приятнее. Сказываются ее векторные корни и возможность точного указания всего и вся вследствие этого.
Но вот с нуля макеты в FW делать, по-моему, в общем-то даже и приятнее. Сказываются ее векторные корни и возможность точного указания всего и вся вследствие этого.
Чую приближающийся холивар между представителями Владимиров и Дмитриев. Тему взаимодействия между верстальщиками и дизайнерами можно перемывать бесконечно долго, причем как ни странно правы скорее всего будут оба. Я считаю, что пока дизайнер не будет понимать на должном уровне специфики верстки, а верстальщик специфики работы в фотошопе, каши не сваришь.
Не хватает еще одного случая (у меня такое бывало, хотя и редко):
Владимир, помня постоянные пререкания с Дмитрием, подошел к очередной верстке крайне ответственно — замерял расстояния между блоками с точностью до пикселя, не забывал про интерлиньяж, и даже вместо подчеркивания использовал в ссылках border-bottom — потому что Дмитрий нарисовал эти подчеркивания чуть светлее, чем цвет текста ссылки.
И в итоге получился такой диалог:
В: Готово
Д: Вот скажи мне — ты дальтоник?
В: ?????
Д: Да сравни цветовую схему на макете и в верстке — ни одного цвета не угадал
В: ?????
Д: #^@&$#$%&!!!
И только на следующий день Владимир, с красными от недосыпа глазами, в порядке «ну а вдруг поможет?» решил посмотреть цветовой профиль макета в фотошопе.
:)
Владимир, помня постоянные пререкания с Дмитрием, подошел к очередной верстке крайне ответственно — замерял расстояния между блоками с точностью до пикселя, не забывал про интерлиньяж, и даже вместо подчеркивания использовал в ссылках border-bottom — потому что Дмитрий нарисовал эти подчеркивания чуть светлее, чем цвет текста ссылки.
И в итоге получился такой диалог:
В: Готово
Д: Вот скажи мне — ты дальтоник?
В: ?????
Д: Да сравни цветовую схему на макете и в верстке — ни одного цвета не угадал
В: ?????
Д: #^@&$#$%&!!!
И только на следующий день Владимир, с красными от недосыпа глазами, в порядке «ну а вдруг поможет?» решил посмотреть цветовой профиль макета в фотошопе.
:)
Да, неловко вышло )
действительно уместная ситуация!
действительно уместная ситуация!
Вы ещё про калибровку монитора вспомните!
Мне иногда приходится сталкиваться с полиграфией, и готовить некоторые материалы для печати.
Так вот, когда приходишь к нормальным полиграфистам — они дают бумажку с требованиями к макету (CMYK, dpi, размер, формат файла, вектор или можно и растр, черный черным или смесью и т.д.) Неужели сложно сделать такие-же требования к дизайнеру?
Так вот, когда приходишь к нормальным полиграфистам — они дают бумажку с требованиями к макету (CMYK, dpi, размер, формат файла, вектор или можно и растр, черный черным или смесью и т.д.) Неужели сложно сделать такие-же требования к дизайнеру?
This (вторая часть комментария)
Понимаю.
Могу сказать по такому поводу следующее: я работаю в совсем далекой от ИТ области. И я всегда отказываюсь от заказа, который не смогу выполнить хорошо (неподходящие условия, какие-либо проблемы, сложный клиент, недостаточно времени).
Могу сказать по такому поводу следующее: я работаю в совсем далекой от ИТ области. И я всегда отказываюсь от заказа, который не смогу выполнить хорошо (неподходящие условия, какие-либо проблемы, сложный клиент, недостаточно времени).
В случае верстальщика, а особенно верстальщика-фрилансера такое не всегда возможно.
Очень часто берешь заказ, видя лишь превьюшки в jpg или png. А уже когда договорился с заказчиком и приступил к работе, получаешь .psd, а там ужоснах — и слои с «Multiply» и «Overlay», и цвет текста задается через «Color overlay» и прозрачность (причем прозрачность и слоя, и наложения цвета) :)
Очень часто берешь заказ, видя лишь превьюшки в jpg или png. А уже когда договорился с заказчиком и приступил к работе, получаешь .psd, а там ужоснах — и слои с «Multiply» и «Overlay», и цвет текста задается через «Color overlay» и прозрачность (причем прозрачность и слоя, и наложения цвета) :)
Могу сказать, что после того как утвердили макет лучше еще денек или пару дать дизайнеру, что бы он допилил макет и сделал его удобным для верстальщика и они перед эти все тонкости вместе обсудили.
Перезалейте картинки, пожалуйста. Еле шуршат.
Например на habrastorage.org/
Например на habrastorage.org/
Эффекты наложения
Если приперает что мама не горюй — флеш или www.pixastic.com/
PS и умничать тоже не нужно. Научится верстать необходимо немного, а второму научится без проблем бегать по слоям. И проблемы то… и нету…
по-моему, если у дизайнера и верстальщика реально возникают такие примеры-проблемы, то они тупо не умеют работать. я не понимаю, что это за дизайнер который не знает, например, про пункты 1, 4, 6 — это же основы-основ. тоже самое можно сказать и про верстальщика.
Для решения проблемы нечетких писклей у вектора: snap to pixel в настройках (а некоторые дизайнеры еще и пытаются этим нечетким пикселем показать тень и за это я хочу убивать).
Насчет четких границ у теней, либо дизайнер указывает размер тени, либо если есть доступ к psd, можно посмотреть размер тени в эффектах слоя.
Но есть идеальный вариант, это комментарии дизайнера с размерами шрифтов, цветам и всей подобной информацией наложенной поверх макета и самостоятельно им нарезанные градиенты.
Насчет четких границ у теней, либо дизайнер указывает размер тени, либо если есть доступ к psd, можно посмотреть размер тени в эффектах слоя.
Но есть идеальный вариант, это комментарии дизайнера с размерами шрифтов, цветам и всей подобной информацией наложенной поверх макета и самостоятельно им нарезанные градиенты.
Градиенты — это уже лишнее, поскольку они уже есть в CSS и есть вот такой вот замечательный редактор: www.colorzilla.com/gradient-editor/
Хотя для сложных градиентов, конечно, не помешает знать, в какой точке начинается следующий переход
Хотя для сложных градиентов, конечно, не помешает знать, в какой точке начинается следующий переход
Выделяем слой картинки с тенью. Сводим эффект с изображением. Ctrl+A -> Ctrl+N -> Ctrl+V. Фотошоп создаст новый документ как раз по размерам изображения находящегося в буфере, с учётом всяких полупрозрачных финтифлюшек.
С решением, предложенным в п.7. не согласен. Не должны верстальщик с дизайнером калибровать мониторы одинаково, чтобы избежать подобных ситуаций. Ведь в итоге на все это будут смотреть абсолютно разные пользователи с абсолютно разными мониторами, и вполне может возникнуть ситуация, когда добрая часть юзеров просто не будет видеть слишком светлых элементов. Яркий тому пример — цвет подложки непрочитанных сообщений в контакте. Не знаю, меняли ли они его, или просто у меня теперь другой компьютер, но было время, когда я просто не видел этого выделения, и не знал, что оказывается можно узнать, прочитали твое сообщение или нет. Ну да, дизайнер надизайнил, верстальщик сверстал, а часть юзеров про этот функционал все равно не знали. Так что мне кажется, выход состоит в следующем: дизайнер должен проверять свои макеты на разных мониторах с разными настройками и типами матриц.
В данном случае речь идет о взаимодействии «дизайнер + верстальщик», и для нормального взаимодействия их мониторы должны иметь одинаковую настройку, как не крути. Какую именно — это другой вопрос, вы правы, учитывать нужно максимально широкий охват яркости. Но если дизайнер и верстальщик видит один и тот же макет по-разному, это караул.
И все же я считаю, что в данном примере ошибкой являются не разные настройки яркости у мониторов, а неправильно выбранный цвет. Ведь если даже дизайнер с верстальщиком настроят мониторы одинаково, и макет будет благополучно сверстан, заказчик все равно может остаться недовольным. Не будет же и он настраивать свой монитор, чтобы увидеть подложку светло-светло-серого цвета =)
Да верно все это, но в статье речь идет о понимании между верстальщиком и дизайнером а не между дизайнером и пользователем. Вы описываете ситуацию дизайнер/пользователь и в этом вы правы, однако, в случае дизайнер/верстальщик мониторы могут быть настроены неправильно, главное что бы одинаково неправильно, тогда наша связка хотя бы будет понимать друг друга. О пользователях в данном случае речь не идет, но ваша идея понятна )
1. Монитор должен быть откалиброван в любон случае. Всё-таки с графикой работаем.
2. Не понимаю, как невозможность разглядеть паттерн в макете, влияет на вёрстку? Верстальщик что, на глазок изображение руками лепит? Взял образец паттерна и замостил.
2. Не понимаю, как невозможность разглядеть паттерн в макете, влияет на вёрстку? Верстальщик что, на глазок изображение руками лепит? Взял образец паттерна и замостил.
У вас всего одна проблема: Дизайнер и Верстальщик патологически не могут общаться между собой
Большинство этих вещей вполне рабочие вопросы, которые решаются за несколько минут в процессе работы, а не когда ее уже нужно сдавать.
Большинство этих вещей вполне рабочие вопросы, которые решаются за несколько минут в процессе работы, а не когда ее уже нужно сдавать.
Все описанные проблемы от того, что дизайнер не удосужился изучить основы вёрстки. Я вообще не представляю, как можно дизайнить веб-интерфейсы и при этом не понимать хотя бы принципы того, как твой дизайн будет превращаться в вёрстку, и ещё уважать себя как профессионала после этого.
Например, если дизайнер оставил в макете полупрозрачный текст, то значит, что этот текст по его задумке должен использовать цсс-прозрачность (только такой ход должен быть однозначно обоснован).А использовать прозрачность для подбора тупо цвета и отдавать в таком виде на вёрстку — как минимум непрофессионально.
Например, если дизайнер оставил в макете полупрозрачный текст, то значит, что этот текст по его задумке должен использовать цсс-прозрачность (только такой ход должен быть однозначно обоснован).А использовать прозрачность для подбора тупо цвета и отдавать в таком виде на вёрстку — как минимум непрофессионально.
Прям не могу промолчать :)
Нечёткие границы — это банально проблемы с квалификацией. Если визуальщик не видит, что он не попадает в пиксель или ему это не кажется существенным, то это тупо отсутствие правильного воспитания :) Впрочем, как и макет, где нет ни одного layer set. Хотя были времена, когда все так рисовали, даже очень крутые парни :) Просто фотошоп тогда папок для слоёв не умел делать.
Есть масса пожеланий здравых, но есть и весьма спорные утверждения. Я сам и рисовал и верстал, попробую посмотреть на ситуацию под другим углом. Я вот читаю статью и комментарии про то, что «дизайнер должен и то и это», но по факту работы, верстальщику приходится работать в граф. редакторе добрые 2/3 времени, в то время как дизайнер про код разве что только слышал. Так может есть смысл Вове просто немного прокачать свои технические навыки? Ведь да, можно тыкнуть пипеткой, какие проблемы? Если вы думаете, что кто-то заметит разницу в тоне, то можно взять базовый цвет текста, посмотреть на прозрачность и сделать прямоугольный блок небольшого размера с нужным цветом и прозрачностью, тыкнуть пипеткой и получить точный цвет. Отношение к теням убило просто :) Глубокие красивые тени научились реализовывать задолго до появляения box-shadow, и резиновые и какие угодно. Даже MS Windows научился рендерить более менее приличные тени под своими окнами. Призыв с ними бороться в 21 веке звучит не очень убедительно. Вон Дима 6 слоёв перевёл для придания нужной глубины и вообще старался. А кому-то лень «заморачиваться»? Даже если требуется 100% соотвествие, то нарубить блок с тенью вообще не составляет труда. Я их столько нарубил, не счесть :)
Ещё хотелось бы по поводу эффектов наложения. Дизайнер ведь тоже немного програмист, поэтому стремится оптимизировать свою работу. Куда проще бросить дефолтный чёрно-белый градиент поверх цветной плашки и накрутить всякого. Получится вполне себе блок, который можно перекрасить в 2 клика мышки. При другом подходе, пришлось бы подбирать массу других цветов только для изменения базового цвета. И такие решения по своему красивы =) А вот если бы Вова просто позвал к себе Диму и на пальцах показал ему свою сложность, то велика вероятность, что дизайнер бы просто показал, как без потерь сконвертировать в нужный результат. А ещё есть вероятность, что увидев проблему своими глазами, Владимир тоже стал бы немного лучше. А у парней, судя по всему, несгибаемое самомнение, полное нежелание учиться и проблемы с коммуникацией :) Но я отвлёкся. Моя мысль в том, что если бы Вова не думал о себе всякое и просто выучил пару фокусов, то мир стал бы лучше.
Нечёткие границы — это банально проблемы с квалификацией. Если визуальщик не видит, что он не попадает в пиксель или ему это не кажется существенным, то это тупо отсутствие правильного воспитания :) Впрочем, как и макет, где нет ни одного layer set. Хотя были времена, когда все так рисовали, даже очень крутые парни :) Просто фотошоп тогда папок для слоёв не умел делать.
Есть масса пожеланий здравых, но есть и весьма спорные утверждения. Я сам и рисовал и верстал, попробую посмотреть на ситуацию под другим углом. Я вот читаю статью и комментарии про то, что «дизайнер должен и то и это», но по факту работы, верстальщику приходится работать в граф. редакторе добрые 2/3 времени, в то время как дизайнер про код разве что только слышал. Так может есть смысл Вове просто немного прокачать свои технические навыки? Ведь да, можно тыкнуть пипеткой, какие проблемы? Если вы думаете, что кто-то заметит разницу в тоне, то можно взять базовый цвет текста, посмотреть на прозрачность и сделать прямоугольный блок небольшого размера с нужным цветом и прозрачностью, тыкнуть пипеткой и получить точный цвет. Отношение к теням убило просто :) Глубокие красивые тени научились реализовывать задолго до появляения box-shadow, и резиновые и какие угодно. Даже MS Windows научился рендерить более менее приличные тени под своими окнами. Призыв с ними бороться в 21 веке звучит не очень убедительно. Вон Дима 6 слоёв перевёл для придания нужной глубины и вообще старался. А кому-то лень «заморачиваться»? Даже если требуется 100% соотвествие, то нарубить блок с тенью вообще не составляет труда. Я их столько нарубил, не счесть :)
Ещё хотелось бы по поводу эффектов наложения. Дизайнер ведь тоже немного програмист, поэтому стремится оптимизировать свою работу. Куда проще бросить дефолтный чёрно-белый градиент поверх цветной плашки и накрутить всякого. Получится вполне себе блок, который можно перекрасить в 2 клика мышки. При другом подходе, пришлось бы подбирать массу других цветов только для изменения базового цвета. И такие решения по своему красивы =) А вот если бы Вова просто позвал к себе Диму и на пальцах показал ему свою сложность, то велика вероятность, что дизайнер бы просто показал, как без потерь сконвертировать в нужный результат. А ещё есть вероятность, что увидев проблему своими глазами, Владимир тоже стал бы немного лучше. А у парней, судя по всему, несгибаемое самомнение, полное нежелание учиться и проблемы с коммуникацией :) Но я отвлёкся. Моя мысль в том, что если бы Вова не думал о себе всякое и просто выучил пару фокусов, то мир стал бы лучше.
Я вот читаю статью и комментарии про то, что «дизайнер должен и то и это», но по факту работы, верстальщику приходится работать в граф. редакторе добрые 2/3 времени, в то время как дизайнер про код разве что только слышал. Так может есть смысл Вове просто немного прокачать свои технические навыки?
А может и дизайнеру стоит прокачать свои навыки, нет? По моему скромному мнению, дизайнеры часто мнят себя непонятно кем. Я нарисовал макет с кастомными тенями и крутыми эффектами, а как верстать — дело ваше. Я давно не занимаюсь версткой, программирую и кошусь на верстальщиков — верстка часто не учитывает динамические варианты ее использования. Но осадочек остался.
Конечно, всем стоит постоянно учится чему-то, иначе деградация. Мне просто не понятны стенания верстальщиков по поводу сложности работы. Вёрстка сложного макета — небольшой вызов и хороший результат — повод для гордости. Работа дизайнера тоже не лишена сложностей. Попробуйте с таким раздутым эго сдать макет, пройдя 5-10-15 итераций, пока клиент не будет удовлетворён. Это тоже не просто.
Решение проблемы с «нечеткими границами»:
По мне так проблемы именно у дизайнера. Сам увлекаюсь веб-дизайном и считаю, что каждый дизайнер должен знать азы верстки, как и что происходит. Так получилось, что сам я сначала познакомился именно с html/css, позже уже увлекся собственно рисованием макетов. Работал с несколькими верстальщиками/программистами и никто не ругался. Впрочем я и сам старался делать макеты простыми для верстки. Какие то отдельные задумки, которые казались мне сложными, может как то связанные с новшествами html/css я обговаривал заранее, но такое было редкостью. Чаще всего предварительные беседы относились уже к функциональности, т.е. это скрипты, админка сайта, но это уже программирование.
Дизайнеры, учитесь верстать (вы сами поймете, что и как надо рисовать)
Верстальщики, учите photoshop (Сотня статей, где упоминаются одни и те же проблеммы, выучите уже наконец-то, где находятся «прозрачность»,«режимы наложения» и «настройки текста»)
И вы будете читать эту статью с улыбкой на лице, как я
Верстальщики, учите photoshop (Сотня статей, где упоминаются одни и те же проблеммы, выучите уже наконец-то, где находятся «прозрачность»,«режимы наложения» и «настройки текста»)
И вы будете читать эту статью с улыбкой на лице, как я
Улыбка быстро спадёт с лица, когда увидите в макете текст градиентом. А что, дизайнер слышал про «безболезненную реализацию градиентов в вёрстке», а верстальщик может посмотреть опорные цвета в настройках градиента. Только вот с реализацией… Кхм…
Замечательно — и к чему это? Для вебкита делаем так, а остальным все равно суём js или картинку.
Через пол года делаем везде так (или добавят в ИЕ и фокс, или вебкит окончательно станет «почти» единственным движком). Фишки в css растут быстрее, чем онные в фш, раньше вон помните, какие были дебаты, о том, как же все-таки верстать скругленные уголки. А хоть как-то украсить текст? А сейчас делаем text-shadow и не заморачиваемся.
не спадет: webew.ru/articles/279.webew
А еще бл… у браузера на ифоне сранм не 640 ширина а 480…
Чем меньше телодвижений дизайнера тем больше телодвижений верстальщика. Классика же.
святые верстальщики, работавшие со мной, умудрялись каждый раз накосячить с уже порезанными картинками и описанными текстом цветами и размерами.
Отступ 20 пикселей? да нахер он тут нужен.
Что? жирный шрифт? зачем?
кастомный контрол? лишняя работа, виндовый не хуже.
скрытая папка с попапом? ничего не знаю, не видно — значит не надо.
Отступ 20 пикселей? да нахер он тут нужен.
Что? жирный шрифт? зачем?
кастомный контрол? лишняя работа, виндовый не хуже.
скрытая папка с попапом? ничего не знаю, не видно — значит не надо.
Я бы не стал на вашем месте приводить в пример плохую работу верстальщика. В прошлый раз, когда в подобной теме я сравнил подход «как надо» в реализации сервиса, с неудачным подходом программиста — меня люто заминусовали.
Если раньше я представлял себе хабр как место с интересными дискуссиями, новыми знаниями, место для знакомств и создания классных проектов, то уже на протяжении 3-х лет я вижу лишь желтые заголовки и осуждающие статьи (кстати, про дизайнеров и верстальщиков была замечательная статья, о том как помочь друг другу при разработке, написанная в 2008-ом, но её автор удалился с хабра). Для проектов теперь есть фрилансим, для новых знаний — google.com, для дискуссий — встречи на форумах и ивентах и посиделки в кафе с обсуждением новых идей и тенденций в обществе заинтересованных в результате людей.
Если раньше я представлял себе хабр как место с интересными дискуссиями, новыми знаниями, место для знакомств и создания классных проектов, то уже на протяжении 3-х лет я вижу лишь желтые заголовки и осуждающие статьи (кстати, про дизайнеров и верстальщиков была замечательная статья, о том как помочь друг другу при разработке, написанная в 2008-ом, но её автор удалился с хабра). Для проектов теперь есть фрилансим, для новых знаний — google.com, для дискуссий — встречи на форумах и ивентах и посиделки в кафе с обсуждением новых идей и тенденций в обществе заинтересованных в результате людей.
А Вы сами тут что забыли? Проповедуете, что хабр уже не торт для тех, кто сам еще этого не осознал?
Или Вы считаете, что обсуждение аудитории хабра в топике по дизайну способствует «интересным дискуссиям, новым знаниям...»?
Или Вы считаете, что обсуждение аудитории хабра в топике по дизайну способствует «интересным дискуссиям, новым знаниям...»?
Я вспомнил о статье, опубликованной на хабре в 2008-ом году, в которой было комментариев 20 от силы и неимоверно много пользы, поскольку она освещала не проблемы взаимодействия между дизайнером/верстальщиком, а оптимизированный процесс совместной работы.
Если вы внимательно вчитаетесь в моё сообщение, то обнаружите, что я не обсуждаю аудиторию хабра. Я обсуждаю действия этой самой аудитории, причины которых мне оказались непонятны. И да, это совершенно случайно связано с примером плохой работы технаря-специалиста в топике, основной идеей которого, является осуждение работы дизайнеров.
И относительно знаний и дискуссий. Тот топик действительно носит в себе знания о том, как взаимодействовать друг с другом, а в этом у нас «интересная дискуссия».
Если вы внимательно вчитаетесь в моё сообщение, то обнаружите, что я не обсуждаю аудиторию хабра. Я обсуждаю действия этой самой аудитории, причины которых мне оказались непонятны. И да, это совершенно случайно связано с примером плохой работы технаря-специалиста в топике, основной идеей которого, является осуждение работы дизайнеров.
И относительно знаний и дискуссий. Тот топик действительно носит в себе знания о том, как взаимодействовать друг с другом, а в этом у нас «интересная дискуссия».
Разве тут в статье не написано как избежать ошибок при взаимодействии верстальщика и дизайнера?
Статья написана в духе: «Отрежьте Дмитрию руки».
Нет, в ней не написано как избежать ошибок при взаимодействии. В ней описаны типичные ошибки начинающего дизайнера и реакция начинающего верстальщика на это.
Возможно её стоит дополнить реальными практиками взаимодействия специалистов, а не начинающих. Возможно, если отбросить очевидные вещи, станет понятно, что дизайнеру нужно указывать, чтоб верстальщик выполнил свою работу быстро и качественно. Тогда остаётся вопрос, что делать, если верстальщик запорол дизайн по гайдлайнам во время вёрстки?
Нет, в ней не написано как избежать ошибок при взаимодействии. В ней описаны типичные ошибки начинающего дизайнера и реакция начинающего верстальщика на это.
Возможно её стоит дополнить реальными практиками взаимодействия специалистов, а не начинающих. Возможно, если отбросить очевидные вещи, станет понятно, что дизайнеру нужно указывать, чтоб верстальщик выполнил свою работу быстро и качественно. Тогда остаётся вопрос, что делать, если верстальщик запорол дизайн по гайдлайнам во время вёрстки?
Нет, в ней не написано как избежать ошибок при взаимодействии. В ней описаны типичные ошибки начинающего дизайнера и реакция начинающего верстальщика на это.
Ну как же, ведь в каждом случае написан параграф «Что делать?» где написано, что не надо отрезать никому руки, а надо взять и разобраться.
Тогда остаётся вопрос, что делать, если верстальщик запорол дизайн по гайдлайнам во время вёрстки?
Как что? Переделывать верстку конечно. Правда лично я мифического «дизайна по гайдлайнам» никогда не видел.
Не знаю в курсе вы или нет, но вот на этом сайте, если нажать на большую кнопку «Download», можно скачать макет грида (почти для любого популярного графического редактора). Но я ни разу не встречал макета, основанного на гриде. Так же, я ни разу не встречал дизайнера, который прочитал бы этот PDF. А жаль…
В чем нужно разобраться? В непрофессионализме дизайнера? Не проще ему накидать ссылок по подготке макетов, чем каждый раз вылавливать новый косяк? Не проще ли сменить дизайнера, чем пытаться вырастить из него специалиста?
Гайдлайны к дизайну пишутся в сопроводительном письме, в них включаются используемые шрифты, размеры, отступы, описание ховер/овер/актив элементов с цветами и эффектами.
Неопытные верстальщики ничем не отличаются от неопытных дизайнеров и встают в позу — «я это верстать не буду».
960gs при текущих усредненных разрешениях экранов — не лучший выбор, я, например, часто пользуюсь 996gs, которую я собрал для того, чтоб удобнее было работать с моей спецификой.
Возможно, вы не там искали дизайнеров или искали дизайнеров с стоимостью часа работы < 30$, в этом случае не вижу причин жаловаться на непрофессионализм.
Гайдлайны к дизайну пишутся в сопроводительном письме, в них включаются используемые шрифты, размеры, отступы, описание ховер/овер/актив элементов с цветами и эффектами.
Неопытные верстальщики ничем не отличаются от неопытных дизайнеров и встают в позу — «я это верстать не буду».
960gs при текущих усредненных разрешениях экранов — не лучший выбор, я, например, часто пользуюсь 996gs, которую я собрал для того, чтоб удобнее было работать с моей спецификой.
Возможно, вы не там искали дизайнеров или искали дизайнеров с стоимостью часа работы < 30$, в этом случае не вижу причин жаловаться на непрофессионализм.
Разобраться надо в ошибках друг друга. Все мы когда-то были непрофессионалами и все мы как-то учились делать свое дело хорошо. Просто накидыванием ссылок проблему не решить, надо еще и объяснить почему так плохо, а эдак хорошо с технической точки зрения.
Я не понимаю вашего возмущения, все подобные обсуждения сводятся к тому что надо больше общаться. Я уверен что такие топики создаются не для того чтобы сказать всем какие у нас плохие дизайнеры или верстальщики, а для того чтобы всем стало проще и приятней работать.
Я не понимаю вашего возмущения, все подобные обсуждения сводятся к тому что надо больше общаться. Я уверен что такие топики создаются не для того чтобы сказать всем какие у нас плохие дизайнеры или верстальщики, а для того чтобы всем стало проще и приятней работать.
Как сейчас помню тот момент, когда я добрался до паттернов проектирования вёрстки, это было что-то сродни открытию. Вы забываете, что основным фактором роста, является желание расти, по этой причине я и поинтересовался — зачем мучиться?
Меня возмущает то, что вместо того, чтоб составить нормальные инструкции по взаимодействию дизайнер→верстальщик и наоборот, рассматриваются достаточно примитивные кейсы.
Меня возмущает то, что вместо того, чтоб составить нормальные инструкции по взаимодействию дизайнер→верстальщик и наоборот, рассматриваются достаточно примитивные кейсы.
Меня возмущает то, что вместо того, чтоб составить нормальные инструкции по взаимодействию дизайнер→верстальщик и наоборот, рассматриваются достаточно примитивные кейсы.
Так напишите статью по нормальному взаимодействию. Думаю многие с удовольствием почитают и оценят.
Вы забываете, что основным фактором роста, является желание расти, по этой причине я и поинтересовался — зачем мучиться?
Я не выбираю дизайнеров.
Скрытая папка — Ваш косяк! Откуда мне знать, что в макете и по каким причинам скрыто? Может это неудачный вариант дизайна (чаще так и бывает). Прикладывайте png или jpeg для каждой страницы и какждого состояния элементов.
Вы правы, совершенно незачем знать.
Размер и цвет шрифта, например, тоже незачем. и отступы. и ховеры.
Вы же без проблем сверстаете полупрозрачный попап с тенью из джипега.
Размер и цвет шрифта, например, тоже незачем. и отступы. и ховеры.
Вы же без проблем сверстаете полупрозрачный попап с тенью из джипега.
Кстати, да, приходилось и из жпегов самому рисовать…
Но суть Вы так и не поняли. Делается psd-макет для каждой «уникальной» страницы. А если в ней есть какие-то «динамичные» финтифлюшки как-то попапы, нестандартные контролы, «резина» и т.п. То их поведение надо представить приложенным жпегом. Сами слои в макете можете скрыть.
Чтобы было понятно — как выглядит страница для авторизвоанного/неавторизованного пользователя, как выглядит на разных разрешениях и т.п. Т.е. отобразить все воможные состояния элементов. Плодить для этого psd-макеты вовсе не обязательно. Впрочем дело Ваше. Только потом не кричите, что на Вас гнусные фронт-эндщики перекладывают свою работу.
Но суть Вы так и не поняли. Делается psd-макет для каждой «уникальной» страницы. А если в ней есть какие-то «динамичные» финтифлюшки как-то попапы, нестандартные контролы, «резина» и т.п. То их поведение надо представить приложенным жпегом. Сами слои в макете можете скрыть.
Чтобы было понятно — как выглядит страница для авторизвоанного/неавторизованного пользователя, как выглядит на разных разрешениях и т.п. Т.е. отобразить все воможные состояния элементов. Плодить для этого psd-макеты вовсе не обязательно. Впрочем дело Ваше. Только потом не кричите, что на Вас гнусные фронт-эндщики перекладывают свою работу.
Знаете, вот так сходу, не взглянув на макет, сложно осуждать или оправдывать верстальщика или вас. Приведу пример по поводу отступа в 20 пикселей:
У меня частенько попадаются макеты (80% случаев) когда ни о каком вертикальном ритме дизайнер даже не подозревает. И получается так, что на разных страницах у разных элементов совершенно разные отступы. В таких случаях приходится или изобретать отступы самостоятельно или писать разные стили для одинаковых по сути блоков. При этом CSS-файл раздувается неимоверно.
По поводу жирного шрифта косяк явно верстальщика, но что-то мне с трудом верится, что он взял специально и не поставил bold. Может случайно забыл или была веская причина для этого?
С кастомными контролами тоже всё не однозначно. Вообще я противник стандартных контролов, я считаю что стилизованные контролы — это отлично. И жаль что многие со мной не согласны. Но еще есть техническая сторона: реализовать кастомный выпадающий список очень непростая задача, и, самое главное, нет готовых решений для этого. Т.е. скриптов для стилизации селектов в сети полно, но я не видел ни одного, который повторял бы полностью функционал браузера (кто-то не умеет работать с клавишей TAB, кто-то не дружит с динамическими данными, кто-то плохо отображается если форма «резиновая» и т.п.). Так что решение оставить системные контролы тоже может быть оправдано с технической стороны.
У меня частенько попадаются макеты (80% случаев) когда ни о каком вертикальном ритме дизайнер даже не подозревает. И получается так, что на разных страницах у разных элементов совершенно разные отступы. В таких случаях приходится или изобретать отступы самостоятельно или писать разные стили для одинаковых по сути блоков. При этом CSS-файл раздувается неимоверно.
По поводу жирного шрифта косяк явно верстальщика, но что-то мне с трудом верится, что он взял специально и не поставил bold. Может случайно забыл или была веская причина для этого?
С кастомными контролами тоже всё не однозначно. Вообще я противник стандартных контролов, я считаю что стилизованные контролы — это отлично. И жаль что многие со мной не согласны. Но еще есть техническая сторона: реализовать кастомный выпадающий список очень непростая задача, и, самое главное, нет готовых решений для этого. Т.е. скриптов для стилизации селектов в сети полно, но я не видел ни одного, который повторял бы полностью функционал браузера (кто-то не умеет работать с клавишей TAB, кто-то не дружит с динамическими данными, кто-то плохо отображается если форма «резиновая» и т.п.). Так что решение оставить системные контролы тоже может быть оправдано с технической стороны.
Боюсь если последний макет имеет елементы с слабо различимой контрасностью то и этот заказ они потеряют.
Потому-что большинстко пользователей сидят сейчас за TN-мониторами где яркось по умолчанию очень высока.
Потому-что большинстко пользователей сидят сейчас за TN-мониторами где яркось по умолчанию очень высока.
Дизайн (сборка макета) в InDesign в Fireworks может решить проблемы с режимами наложения слоев и проблемы с текстом (искажения) т. к. в них не предусмотрены такие средства. Дизайнеру есть повод все картинки сохранить уже отдельными файлами (тогда по идее верстальщику не надо ничего нарезать) и только прилинковать их.
Побывал во всех ситуациях, описанных в статье и даже больше) При появлении «сомнительного» макета предупреждаю заказчика (или дизайнера), что делать буду на своё усмотрение, вот и всё — опыт позволяет.
Интересная статья, интересные каменты.
Дмитрий недоволен работой Владимира, Владимир — Дмитрия, верстальщики грызутся дискутируют с дизайнерами…
«Откалибруйте ваши мониторы по одному калибровочному тесту, и мир сразу станет добрее.»
Я так понимаю — на этом празднике жизни пользователю делать нечего :-)
Дмитрий недоволен работой Владимира, Владимир — Дмитрия, верстальщики грызутся дискутируют с дизайнерами…
«Откалибруйте ваши мониторы по одному калибровочному тесту, и мир сразу станет добрее.»
Я так понимаю — на этом празднике жизни пользователю делать нечего :-)
Недавняя ситуация с дизайнером заказчика
Д.: там нельзя менять ширину макета, там много чего в поинтах задано
В.: ???
Д.: ну шрифты полетят и все такое
В.: а ты предлагаешь верстать сайт шириной в 3 тыс. пикселей и шрифтами в поинтах?
Д.: не знаю, я свою работу сделала
В.: так нельзя, нужно в нормальных единицах переделать
Д.: я всегда так делала, все нормально было
похоже в данном случае у заказчика дизайнер работает с полиграфией… почему у нас обычно считают что у ИТишников одна профессия на всех?
Д.: там нельзя менять ширину макета, там много чего в поинтах задано
В.: ???
Д.: ну шрифты полетят и все такое
В.: а ты предлагаешь верстать сайт шириной в 3 тыс. пикселей и шрифтами в поинтах?
Д.: не знаю, я свою работу сделала
В.: так нельзя, нужно в нормальных единицах переделать
Д.: я всегда так делала, все нормально было
похоже в данном случае у заказчика дизайнер работает с полиграфией… почему у нас обычно считают что у ИТишников одна профессия на всех?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
WEB DESIGN: Переход на личности