Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 213
это огонь!!! Делаю ссылку на статью в «Письме от программиста»
слово «дизайнер» для программистов является синонимом доброй половине словоформ «Большого словаря русского забористого мата».
В русском языке существует 7 матерных корней.
А по существу — восхитительно!
Картинка, которую вы использовали как символ печали, на самом деле является символом умиления.
Как-то ничего особо нового не увидел. Ошибки, описанные в статье обычно являются следствием лени, неопытности и в особых случаях качества матрицы монитора (был случай когда верстальщик просто не видел градиента или обводки). С другой стороны случаи когда дизайнеры применяли для эффектов различные режимы смешивания цветов, особенно в случае со сложными фонами, случаются гораздо чаще.
Ошибки описанные в многочисленных статьях обращенных к дизайнерам так же являются следствием лени, неопытности и не несут ничего нового для опытных дизайнеров.
Тем не менее из-за проблем описанных в начале этого поста — статьи обращенные и поучающие дизайнеров появляются гораздо чаще, чем обращения к ленивым и неопытным верстальщикам.
Тем не менее из-за проблем описанных в начале этого поста — статьи обращенные и поучающие дизайнеров появляются гораздо чаще, чем обращения к ленивым и неопытным верстальщикам.
Проблема глубже. Когда дизайнер по лени совершает ошибку — она часто скрытая, внутренняя и никому кроме последующего исполнителя (верстальщика не видна). Заказчик может одобрить дизайн, опираясь на свой субъективный взгляд, даже не представляя какими сложностями могут обернутся те или иные детали. А верстальщик потом ломает голову, как ему сбалансировать, между pixel-perfect, кроссбраузерностью и «тянучестью» блоков.
И совсем другое дело примеры приведённые в статье. Мы видим банальную некомпетентность верстальщика. Если дизайнер поставил свой цвет ссылок, то такой он и должен оказаться после вёрстки. А если верстальщик самовольно внёс изменения в макет, то му просто нужно отбивать за это руки. И эти ошибки видны моментально. Заказчик просто вправе не принять такую работу.
И совсем другое дело примеры приведённые в статье. Мы видим банальную некомпетентность верстальщика. Если дизайнер поставил свой цвет ссылок, то такой он и должен оказаться после вёрстки. А если верстальщик самовольно внёс изменения в макет, то му просто нужно отбивать за это руки. И эти ошибки видны моментально. Заказчик просто вправе не принять такую работу.
Тот дизайнер, который ценит своё время, любит порядок в работе, разукрашивает папки и обзывает слои вменяемыми именами, а иногда даже оставляет «сноски в фотошопе в трудных для понимания местах» мгновенно переходит на следующий уровень с соответствующим ценником. И даже если финансы позволяют вам воспользоваться их услугами – их очень не просто найти...
Гораздо сложнее найти дизайнеров которые являются web-дизайнерами. Разница в том, что последние рисуют с пониманием того что это будет «Сайт». А «Сайт» это прежде всего документ, а не красивая статическая картинка.
Дизайнеры, способные нарисовать крутой макет и при этом понимающие как это будет потом «жить» в браузере — просто штучные экземпляры. иногда, мне кажется, что даже вымирающий вид. Про их ценник я тихо промолчу вообще.
Сайт это документ?
typekit.com
Да бросьте вы, полно дизайнеров, которые хорошо знакомы с html/css. Я сам в свободное время разрабатываю дизайн макеты, работаю с двумя программистами и никто не жаловался на мои макеты, иногда сам верстаю. Один программист с удовольствием сам нарезает макет и верстает, другой просит верстать. Единственное, что может быть, так это ленивость программистов реализовать какую то интересную идею на javascript, им хочется упростить свою работу.
Что значит упростить? Что значит лень реализовать идею на javascript?
Вы сами верстальщик и должны понимать, что подпирание вёрстки JS-костылями не допустимо. Да, бывают исключительные ситуации, когда совсем баста и для идеала такой костыль приставляется, но в любом случае это решение грязное.
Привожу банальный пример. Есть макет, в нём блок. Блок должен тянутся по вертикали. Но по бордюру блок обрамлён узором. Когда дизайнер нарисовал макет и подогнал внутри текст под высоту кратного узора — всё выглядит супер. Но сразу проблема как это сверстать? Если подкладывать картинку бэкграундом — то узор будет разрываться. Подпирать костылём? Хорошо, подопрём. Допустим узор 100 пикселей в высоту. Блок у нас в высоту должен быть 120 пикселей. Получается, что костылём нам нужно вытянуть блок до 200 пикселей, чтобы узор не оборвался? В итоге имеем жуткие 80 пикселей пустого места. А если узор пикселей на 200-250?
А такая ситуация очень распространена. Дизайнер привык рисовать буклеты/плакаты и прочую полиграфию и для него невдомёк, что блок может тянутся.
И это всего лишь один из банальнейших примеров.
Вы сами верстальщик и должны понимать, что подпирание вёрстки JS-костылями не допустимо. Да, бывают исключительные ситуации, когда совсем баста и для идеала такой костыль приставляется, но в любом случае это решение грязное.
Привожу банальный пример. Есть макет, в нём блок. Блок должен тянутся по вертикали. Но по бордюру блок обрамлён узором. Когда дизайнер нарисовал макет и подогнал внутри текст под высоту кратного узора — всё выглядит супер. Но сразу проблема как это сверстать? Если подкладывать картинку бэкграундом — то узор будет разрываться. Подпирать костылём? Хорошо, подопрём. Допустим узор 100 пикселей в высоту. Блок у нас в высоту должен быть 120 пикселей. Получается, что костылём нам нужно вытянуть блок до 200 пикселей, чтобы узор не оборвался? В итоге имеем жуткие 80 пикселей пустого места. А если узор пикселей на 200-250?
А такая ситуация очень распространена. Дизайнер привык рисовать буклеты/плакаты и прочую полиграфию и для него невдомёк, что блок может тянутся.
И это всего лишь один из банальнейших примеров.
border-image
border-image?
Во-первых, как он спасёт от проблемы описанной в моём предыдущем комментарии, а во-вторых, как много браузеров его понимают?
Во-первых, как он спасёт от проблемы описанной в моём предыдущем комментарии, а во-вторых, как много браузеров его понимают?
Очень легко спасёт, изучите спеку. У вашей проблемы есть множество решений на CSS. Даже банальное background-size с multiple backgrounds. Можете псевдоэлементы использовать с content: url('image') и их тянуть, тут даже IE8 отобразит. Border-image понимают все браузеры кроме недобраузера Internet Explorer.
Вы меня не слышите. Тянуть — не проблема. Я говорю о другом. Когда узор нарисован так, что его нельзя тянуть.
Вот попробуйте сейчас нарисовать любую аброкадабру (такую, которую нельзя взять и оборвать в произвольной точке), скажем 123 пикселя. А потом сверстайте блок, который должен тянуться.
Вот попробуйте сейчас нарисовать любую аброкадабру (такую, которую нельзя взять и оборвать в произвольной точке), скажем 123 пикселя. А потом сверстайте блок, который должен тянуться.
Тогда повторяйте текстуру, пишите дизайнеру чтобы сделал повторяющуюся текстуру если она не может повторяться и он склеил слои. Понятно что верстальщик не должен реверс-инжинирингом заниматься.
Выход из это ситуации можно придумать и не один. И не путайте дизайнера полиграфии с веб-дизайнером, если дизайнер не видит в этих понятиях разницы то пускай идет лесом. Веб-дизайнер должен знать как минимум азы верстки. А про java скрипты я имел виду какую-нибудь функциональность, а не заплатка замудренной верстки :)
Где бы еще найти «дизайнеров-со-скиллом-именования-слоёв». А то 90% не в курсе о том, что такое модульная сетка =(
Ну что тут сказать… Шрифт не стандартный. (яб за такое убивал). Мне хочется предложить дизайнеру сделать его макет самому. Потом появится любовь ко многим вещам типа стандартных шрифтов, отсутствия скругленных уголков и Эффекты это вообще жесть — они у него не стандартные, ну так есть стандарты, их не зря придумали. Отличие Web дизайнера от художника такое, же как у архитектора. Архитектор берет СТАНДАРТНЫЕ вещи и делает из них искусство. А 90% дизайнеров которых я видел лепят нестандартные шрифты. Вы меня извините, но 1) их можно свободно распространять? 2) Какие браузеры их поддерживают?
Я в курсе, что пункт 2 все больше и больше, но даже настройки безопасности часто шрифты отключают.
Я в курсе, что пункт 2 все больше и больше, но даже настройки безопасности часто шрифты отключают.
>Шрифт не стандартный
>отсутствия скругленных уголков
Вы застряли в середине 2000-х.
>отсутствия скругленных уголков
Вы застряли в середине 2000-х.
Давайте не будем перегибать. В конце 2000-х.
Скругленные уголки уже гораздо меньшая проблема (а для бОльшей части браузеров, и не проблема). А вот нестандартные шрифты да, могу попортить много крови. Оччень много.
font-face, cufon, google web fonts и так далее. В 90% случаев можно использовать эти инструменты и никаких проблем не будет.
А теперь посчитаем: каждый подключенный шрифт — это лишние ~500Кб. А если учесть, что бывает курсив/полужирный/полужирный курсив — то уже 2Мб на каждый шрифт получается.
Понятно, что каналы становятся все толще и толще, но все равно неприятно. Особенно если шрифт используется на одном из полутора десятков макетов где-нибудь в заголовке 3-4 уровня :)
Понятно, что каналы становятся все толще и толще, но все равно неприятно. Особенно если шрифт используется на одном из полутора десятков макетов где-нибудь в заголовке 3-4 уровня :)
Это какой-то очень большой шрифт :) Обычный, жирный и курсив с latin и cyrillic, подключенный через cufon вместе с библиотекой и то весит на ~100Kb меньше. Но в целом с Вами согласен: неприятно, когда страница с двумя тремя предложениями весит пару мегабайт и тянет за собой кучу скриптов.
Так cufon вроде же только один файл шрифта требует, а через @font-face для одного шрифта надо целую пачку файлов подргужать, чтобы всякие недобраузеры (не будем показывать пальцем на синенькую буковку «е») поняли :)
Ну через него можно загрузить несколько шрифтов в принципе :)
Не-не, я не об этом — я о том, что через @font-face для каждого шрифта (и каждого начертания) надо подгружать несколько файлов (обычно четыре) — иначе будут проблемы с кроссбраузерностью. Каждый по 100Кб — вот и выходит до полумегабайта на одно начертание одного шрифта.
А cufon довольствуется одним файлом на каждое начертание (хотя тут могу ошибаться — с куфоном работал аж два раза в жизни).
А cufon довольствуется одним файлом на каждое начертание (хотя тут могу ошибаться — с куфоном работал аж два раза в жизни).
При использовании @font-face да, просто если требуется хорошая кроссбраузерная совместимость, я обычно использую cufon или Google Web Fonts (при наличии шрифта в библиотеке, конечно).
Also я как раз дизайнер, но иногда занимаюсь и версткой, так что мне понятны обе стороны :)
Also я как раз дизайнер, но иногда занимаюсь и версткой, так что мне понятны обе стороны :)
Браузер не загружает все файлы для шрифта — только один, тот, который им поддерживается. То есть складывать все размеры шрифтов неверно.
90, но ведь не 100!
Но ведь нужна кроссбраузерная вёрстка.
Но ведь нужна кроссбраузерная вёрстка.
Кроссбраузерность, как и всё остальное, хороша в меру. У меня возникает нервный тик, когда я вижу людей кроссбраузерно верстающих под IE 5.5-6. Плюс вот этот мой комментарий к продолжению.
Мне очень понравился доклад на yac2012, где докладчик рассказывал о том, что сайты не должны выглядеть одинаково во всех браузерах — нужно, чтобы они выглядели хорошо во всех браузерах. Собственно, вот он: events.yandex.ru/talks/305/.
Не вижу проблемы с откатом к стандартным шрифтам. В @font-face генераторе FontSquirrel даже есть опция «x-height matching» выравнивающая высоту нестандартного шрифта с высотой желаемого стандартного (Arial, Verdana и т.д.)
Кстати, по понятным причинам(©) Белочка не хочет некоторые шрифты конвертировать, а покупать их готовыми никто не хочет. Какие еще существуют средства, пусть и декстопные, чтобы они имели такой же функционал как и на белке? Оно понятно, что FontForge, но там все слишком рутинно получается. Ну и нужен пресловутый «x-height matching».
Я еще добавлю — пару раз встречался с шрифтами, которые белка отказывалась конвертить, но клиент был готов их купить… да только не было их для веба даже у разработчика.
а можно вопрос? Вы, я так понял, уже не раз использовали font-squirrel для конвертации шрифта и может подскажите мне, какие галочки нужно поставить, чтобы сгенерированный шрифт не был толще чем оригинальный?
А то я уже разные шрифты пробовал и всегда получал результат, у которого, буквы были толще, чем у исходника.
А то я уже разные шрифты пробовал и всегда получал результат, у которого, буквы были толще, чем у исходника.
Сервисов-то полно, например вот этот — www.font2web.com/
Но они тупо конвертируют шрифт. Возможностей как у белки не нашёл у других сервисов (
Но они тупо конвертируют шрифт. Возможностей как у белки не нашёл у других сервисов (
>ваши работы превращаются в говно
Расскажите об этом дизайнерам
facebook.com
cnet.com
theverge.com
wired.com
huffingtonpost.com
:)
Расскажите об этом дизайнерам
facebook.com
cnet.com
theverge.com
wired.com
huffingtonpost.com
:)
Замечательный пример грамотного использования кастомных шрифтов (правда я всегда думал что фэйсбук использует тахому везде и всюду, нет?). На каждом из представленных вами сайтов есть небольшие нюансы: кастомные шрифты используются там, где шрифт крупнее (заголовки, крупный текст… ну вы поняли). А основной же текст использует стандартные шрифты.
Предложил бы дизайнерам — при использовании нестандартного шрифта — в зип вкладывать сразу: .ttf, .otf, .eot, .woff.
Поправьте, если что-то упустил.
Поправьте, если что-то упустил.
Пусть прикладывают один оригинальный файл шрифта, остальное cделает верстальщик с помощью FontSquirrel.
Вот тут и начинается история «тяни-толкай» (реальный кусок переписки близко к тексту):
В: Шрифт платный. Не конвертится.
Д: Оке, подбери какой-нить похожий.
В: 0_о Для меня они все одинаковые.
Д: Грр. Вот такой -ссылка- похож.
В: Тож платный.
Д: Грр. А какая проблема-то с форматами?
В: кроссбраузерность турлала. нужны .ttf, .otf, .eot, .woff…
Д: 0_о «для меня они все одинаковые». Что делать?
В: гуглфонтс или стандартные.
Как-то так было.
В: Шрифт платный. Не конвертится.
Д: Оке, подбери какой-нить похожий.
В: 0_о Для меня они все одинаковые.
Д: Грр. Вот такой -ссылка- похож.
В: Тож платный.
Д: Грр. А какая проблема-то с форматами?
В: кроссбраузерность турлала. нужны .ttf, .otf, .eot, .woff…
Д: 0_о «для меня они все одинаковые». Что делать?
В: гуглфонтс или стандартные.
Как-то так было.
А купить шрифт не катит?
Катит, конечно, но сами понимаете… Блок у нас в России психологический — как бы спереть и копейку ужать. Каюсь, сам такой, но борюсь: Р
Про «купить» я чуть выше уже писал, например: habrahabr.ru/post/159141/#comment_5453459
вкратце — далеко не у всех платных шрифтов есть веб-версии
вкратце — далеко не у всех платных шрифтов есть веб-версии
Скруглённые углы — ладно, да иногда бывают заморочки, но это всё решаемо, было бы желание.
А вот шрифты… попробуйте сейчас сверстать под все IE с нестандартным шрифтом. А сглаживание? Эх…
А вот шрифты… попробуйте сейчас сверстать под все IE с нестандартным шрифтом. А сглаживание? Эх…
Не стандартные шрифты повсеместно внедряют уже как несколько лет. Так же в последние годы всё более популярны CSS3 и прочие приблуды.
1) их можно свободно распространять? 2) Какие браузеры их поддерживают?
1 — да, их можно распространять по бесплатной или платной лицензии в зависимости от шрифта
2 — font-face поддерживает подавляющее большинство браузеров
Любой опытный дизайнер и верстальщик знает это.
P.S. да, я без проблем сверстаю макет и любовь к уголкам у меня почему-то не убавляется
1) их можно свободно распространять? 2) Какие браузеры их поддерживают?
1 — да, их можно распространять по бесплатной или платной лицензии в зависимости от шрифта
2 — font-face поддерживает подавляющее большинство браузеров
Любой опытный дизайнер и верстальщик знает это.
P.S. да, я без проблем сверстаю макет и любовь к уголкам у меня почему-то не убавляется
Согласен с вами, но по моему мнению дрочение хинтинга и полного соответствия шрифта в браузере с шрифтом на картинке — излишний перфекционизм, допустимый в полиграфии и логотипах. А в вебе достаточно указать размеры межстрочного интервала и кегля. Все остальные особенности рендера пусть остаются на совести разработчиков ОС, браузеров и того дизайнера, который протолкнул заказчику этот шрифт.
А кто в статье писал про «делай как нарисовано, не думай за меня» и про pixel perfect? Граница, до которой надо следовать макету, а после которой не надо — она с сторон дизайнера и верстальщика сильно в разных местах ощущается.
В таком случае нахрена спрашивается кастомный шрифт? С такой непритязательностью для блоков с текстом всегда можно найти адекватную замену из стандартных шрифтов.
В дизайне есть такое понятие «изящная дигродация».
Если кратко, то это — «если нестандартный шрифт не встаёт на старые версии браузеров или в одном из 5 популярных браузеров не показываются скругленные уголки без костылей — НЕ МУЧАЙТЕ ЖОПУ ГОСПОДА».
Когда в font-family вы указываете несколько шрифтов через запятую, для замены одного на другой более стандартный — это и есть «изящная дигродация». Аналогично во многих случаях по договорённости с дизайнером можно не пилить круглые уголки, а отрабатывать их с помощью CSS3.
Хороший дизайнер должен это учитывать, так же как и банальные вещи вроде «увеличение количества пунктов в меню» или «а что будет если заголовок будет длинной в 4 строки, а не в 1»
Если кратко, то это — «если нестандартный шрифт не встаёт на старые версии браузеров или в одном из 5 популярных браузеров не показываются скругленные уголки без костылей — НЕ МУЧАЙТЕ ЖОПУ ГОСПОДА».
Когда в font-family вы указываете несколько шрифтов через запятую, для замены одного на другой более стандартный — это и есть «изящная дигродация». Аналогично во многих случаях по договорённости с дизайнером можно не пилить круглые уголки, а отрабатывать их с помощью CSS3.
Хороший дизайнер должен это учитывать, так же как и банальные вещи вроде «увеличение количества пунктов в меню» или «а что будет если заголовок будет длинной в 4 строки, а не в 1»
Я вынужден с вами несколько не согласиться. Если шрифт в заголовке нужен такой, то таким он должен быть у большинства. Если нет возможности вставить кастомный шрифт, тогда лучше вставить картинку. Сайт для людей прежде всего!
Если этот кастомный шрифт нужен абы был, то тогда незачем его вообще лепить.
Если этот кастомный шрифт нужен абы был, то тогда незачем его вообще лепить.
По моему скромному мнению:
1) У «большинства» всегда стоят нормальные современные браузеры. Если шрифт отображается у более 50% посетителей — это тоже большинство. Вообщем смотря что подразумевать под этим словом.
2) Вот как раз ваш пример с «вставить картинку» — это не «для людей», а «абы был». А если у вас портал с новостями в заголовках которых кастомный шрифт — вместо всех заголовков картинки вставлять? А текст как эти самые люди выделять будут? В первую очередь нужна информация, контент, а кастомные шрифты дизайнер использует просто потому что решил, что так контент визуально будет смотреться лучше. Никогда не понимал подмены текста — картинками. Могу допустить такое разве что на промо-сайтах, где контент не так важен.
1) У «большинства» всегда стоят нормальные современные браузеры. Если шрифт отображается у более 50% посетителей — это тоже большинство. Вообщем смотря что подразумевать под этим словом.
2) Вот как раз ваш пример с «вставить картинку» — это не «для людей», а «абы был». А если у вас портал с новостями в заголовках которых кастомный шрифт — вместо всех заголовков картинки вставлять? А текст как эти самые люди выделять будут? В первую очередь нужна информация, контент, а кастомные шрифты дизайнер использует просто потому что решил, что так контент визуально будет смотреться лучше. Никогда не понимал подмены текста — картинками. Могу допустить такое разве что на промо-сайтах, где контент не так важен.
Так я и говорю о промо-сайтах, где действительно может быть острая необходимость в кастомном шрифте.
А если речь о динамическом тексте, то естественно картинка противопоказана. Но так ли необходим кастомный шрифт для информационного портала перегруженного контентом? На таком сайте важно удобство чтения и тут как раз кастомные шрифты очень не желательны. А с учётом отсутсвия сглаживания, так и противопоказаны…
Почему я так сильно против кастомных шрифтов? Был опыт несколько раз лепили костыли со шрифтами. бьёшься, конвертируешь эти шрифты, лепишь все эти костыли под каждый браузер. А в итоге бах и шрифт выглядит отвратно по сравнению с гладкой картинкой в фотошопе. Смысл всех этих телодвижений? Пару раз наступили на эти грабли и с тех времён было решено пока эту фичу отложить до лучших времён.
А если речь о динамическом тексте, то естественно картинка противопоказана. Но так ли необходим кастомный шрифт для информационного портала перегруженного контентом? На таком сайте важно удобство чтения и тут как раз кастомные шрифты очень не желательны. А с учётом отсутсвия сглаживания, так и противопоказаны…
Почему я так сильно против кастомных шрифтов? Был опыт несколько раз лепили костыли со шрифтами. бьёшься, конвертируешь эти шрифты, лепишь все эти костыли под каждый браузер. А в итоге бах и шрифт выглядит отвратно по сравнению с гладкой картинкой в фотошопе. Смысл всех этих телодвижений? Пару раз наступили на эти грабли и с тех времён было решено пока эту фичу отложить до лучших времён.
«дигродация» — это жаргонизм такой, или Вы не в курсе, как пишется «деградация»?
Google Web Fonts вам в помощь ;) Там есть этот PT Sans, довольно красивый кстати.
typekit.com
Знаете, как то я порекомендовал одному заказчику в макетах которого вообще отсутствовали стандартные шрифты, изменить шрифты на стандартные, на что получил ответ что если убрать все нестандартное, то макет станет обычным и на это мне нечего было возразить.
Да, нестандартные шрифты, экзотические уголки, тени и нестандартная структура — это сложно в исполнении, а еще сложнее добиться кроссбраузерности, но какое эстетическое удовольствие ты получаешь по завершению, когда макет на 99 процентов соответствуют макету, а какое портфолио в итоге.
Ну и в конце концов не забывайте что мы всего лишь исполнители, и работу мы берем когдп посмотрим на макеты, и не стоит брать в работу макет если он вызывает отвращение или вы его не тянете, чтобы потом не отговаривать заказчика от деталей макета
Да, нестандартные шрифты, экзотические уголки, тени и нестандартная структура — это сложно в исполнении, а еще сложнее добиться кроссбраузерности, но какое эстетическое удовольствие ты получаешь по завершению, когда макет на 99 процентов соответствуют макету, а какое портфолио в итоге.
Ну и в конце концов не забывайте что мы всего лишь исполнители, и работу мы берем когдп посмотрим на макеты, и не стоит брать в работу макет если он вызывает отвращение или вы его не тянете, чтобы потом не отговаривать заказчика от деталей макета
Все письма вида «От представителя-профессии-1 к представителям-профессии-2» сводятся к простому «Как же часто вы косячите», а ответ — к «Работайте с профессионалами, а не студентами-недоучками».
Расстояние между строками, шрифт, да и вообще нестандартные стили, которые вы хотите увидеть сделанными в точности, должны быть описаны в сопроводительной записке. Иначе получаеется реверс инжинирг вашего макета. И далеко не каждый разработчик является джедаем фотошопа, чтобы это заметить.
Насчет записки я с вами полностью согласен. А вот насчет «джедай фотошопа» — холивар из той же области, что и «Должен ли веб-дизайнер уметь верстать?»
P.S. И кстати по моему мнению — да, должен хоть на базовом уровне. Так же как и верстальщик обязан знать инструмент инструмент из которого он верстает. И да, в моём идеальном выдуманном мире верстать должны верстальщики, а не программисты.
P.S. И кстати по моему мнению — да, должен хоть на базовом уровне. Так же как и верстальщик обязан знать инструмент инструмент из которого он верстает. И да, в моём идеальном выдуманном мире верстать должны верстальщики, а не программисты.
фраза «программист сверстал» на меня наводит ужас и в моем реальном мире.
Даладна. Что мешает программисту освоить вторую профессию? Я вот, например, освоил и в топ-50 верстальщиков вылез на фрилансе.ру, хотя основная профессия — таки программист.
Так, наверное, даже лучше будет — а то пару раз видел сверстанные макеты с таблицами (не HTML-таблицами, а в дизайне), которые были сверстаны колонками, а не строками, а мне потом приходилось это чудо к движку прикручивать.
Так, наверное, даже лучше будет — а то пару раз видел сверстанные макеты с таблицами (не HTML-таблицами, а в дизайне), которые были сверстаны колонками, а не строками, а мне потом приходилось это чудо к движку прикручивать.
Дизайнеры верстают лучше?
Верстка ближе к программированию, чем к дизайну.
Верстка ближе к программированию, чем к дизайну.
Куда бы она ближе не была — верстает лучше тот у кого опыта вёрстки больше. А если ты ещё и дизайнер который нарисовал эту хрень, то дашь фору любому программисту, ибо продумал как это верстается ещё во время мазюкания макета в графическом редакторе.
P.S. Скорее программиста легче обучить верстке, а кто лучше верстает, дизайнер или программист — сравнение не корректно.
P.S. Скорее программиста легче обучить верстке, а кто лучше верстает, дизайнер или программист — сравнение не корректно.
Понятно, что из дизайнера, программиста и верстальщика лучше всех верстает последний :)
Из моей практики из двух недо верстальщиков лучше сделает работу программист. Что задумал дизайнер при рисовании макета не имеет значение, в любом случае, если он не верстальщик, задумал он неправильно :)
Из моей практики из двух недо верстальщиков лучше сделает работу программист. Что задумал дизайнер при рисовании макета не имеет значение, в любом случае, если он не верстальщик, задумал он неправильно :)
вот так в нашем проекте родились офигенные ярко красные поповеры с белым текстом в 10 px, и черной-чернйо тенью от поповера, вылезающие из каждого поля в форме… Ведь дизайнер придумавший маленькие темно-красные на белом подписи под полями был неправ и программист все улучшил. (Эмоции увидевшего это верстальщика я не буду тут озвучивать)
Верстальщики верстают лучше: )
Спасибо, что используете нестандартные шрифты, вынуждая верстальщиков включать в готовый шаблон тяжеловесные решения вроде Cufon или SIFR.
Спасибо, что не зацикливаетесь на эффектах, которые наконец-то стало возможно реализовывать с помощью css3, а всегда идете на шаг впереди, заставляя как и в прошлом веке вырезать всё картинками.
Спасибо, что в угоду дизайну изменяете стандартные элементы интерфейса, вроде стрелочек у select или скролл-баров у textarea, подкидывая работку по замене их собственными яваскриптами и самостоятельной реализации функций бровзера, отвечающих за отображение и поведение этих элементов.
И спасибо, что в эпоху семантического веба, мобильных платформ и адаптивного дизайна вы не даете верстальщикам спуску и продолжаете требовать от них попиксельного соответствия макету.
Спасибо, что не зацикливаетесь на эффектах, которые наконец-то стало возможно реализовывать с помощью css3, а всегда идете на шаг впереди, заставляя как и в прошлом веке вырезать всё картинками.
Спасибо, что в угоду дизайну изменяете стандартные элементы интерфейса, вроде стрелочек у select или скролл-баров у textarea, подкидывая работку по замене их собственными яваскриптами и самостоятельной реализации функций бровзера, отвечающих за отображение и поведение этих элементов.
И спасибо, что в эпоху семантического веба, мобильных платформ и адаптивного дизайна вы не даете верстальщикам спуску и продолжаете требовать от них попиксельного соответствия макету.
Открою вам секрет, что именно благодаря «Дизайнерским фишечкам» мы сейчас можем задать тени и другие плюшки CSS3.
Спасибо, что живете в прошлом веке. Это так романтично.
«И спасибо, что в эпоху семантического веба, мобильных платформ и адаптивного дизайна вы не даете верстальщикам спуску и продолжаете требовать от них попиксельного соответствия макету.»
А зачем вы вообще дизайнеров в проект зовете, если семантика, мобильные платформы и адаптивный дизайн делают его работу лишней?
У каждого своя область ответственности — проектировщик заботится о семантике и наборе элементов, дизайнер это красиво рисует, а верстальщик переносит в web. И незачем им друг за друга думать.
А зачем вы вообще дизайнеров в проект зовете, если семантика, мобильные платформы и адаптивный дизайн делают его работу лишней?
У каждого своя область ответственности — проектировщик заботится о семантике и наборе элементов, дизайнер это красиво рисует, а верстальщик переносит в web. И незачем им друг за друга думать.
А меня мой первый дизайнер так «выдрючил» за два года, что даже теперь, когда я сменил специализацию, во всех вопросах, касающихся дизайна и внешнего вида: «только пикселпёфект, только хардкор!».
перед сном повторяешь теги CSS3
В CSS нет тегов, там свойства :)
Пиксель перфект все равно зло. Сайт в фотошопе и сайт в браузере не одно и тоже. У шрифта сверху и снизу есть неравные отступы, которые определяются интерьльяжем. И у разных шрифтов / размеров отступ разыный. Поэтому ваше ХОЧУ 10пикселей до текста, выливаются в часы просиживания перед макетом и, убивающим всякое желание работать, сравнивание.
P.S.
Специально для хреновых дизайнеров: сетка и пиксель перфект не одно и тоже. Два блока по горизонтали имеют разный отступ в 1 пиксель = верстальщик накосчил. Два блока по горизонтали вместо 9пикселей имеют 10 — пиксель перфект. Как правило нахрен никому не нужный.
P.S.
Специально для хреновых дизайнеров: сетка и пиксель перфект не одно и тоже. Два блока по горизонтали имеют разный отступ в 1 пиксель = верстальщик накосчил. Два блока по горизонтали вместо 9пикселей имеют 10 — пиксель перфект. Как правило нахрен никому не нужный.
Я скорее всего не правильно выразился. Лично для меня «пиксельпёрфект» в макете сайта — это его точное соответствие сетке, в том числе расстоянию между блоками и ритму в тексте.
Да, только этот момент на практике совершенно не оговаривается. И когда в сущности нормальный дизайнер говорит, «хочу пиксель-перфект», верстальщик понимает это именно как «пиксель-перфект», а не сетку. Вздыхая, начинает делать, с каждой минутой копя все больше ненависти. Не разу еще не видел, чтобы при таком состоянии, что-то хорошее вышло, хоть ты растрижды профессионал. Проще делить термины «сетка» и «ПП». И выбить это где-нибудь на каменных скрижалиях :)
Выразьтесь правильно, пожалуйста.
Пиксель перфект конечно зло, трата жизни на никому не нужные мелочи. Но то что подразумевает под собой эта фраза — наложения макета на верстку — лучшее решение чтобы не спрашивать дизайнера, так ли он сверстан.
Pixel-perfect зло? Вон из профессии. Если не можете делать так как надо, нечего браться за работу. Отнимает лишние часы? И что? Есть задача и ее надо решать.
Задача дизайнера решить поставленные клиентом цели, задача верстальщика сверстать то что придумал дизайнер, задача разработчика заставить все это работать. Как правило, основные косяки начинаются на уровне верстки, потому что верстальщику лень помереть отступы. Он указывает 40px вместо необходимых 34px, что бы в итоге с отступами шрифтов получилось 40px, а не 46px. Или добавляет отступы у красной строки и выравнивание по ширине, потому что ему так захотелось. Если хочется делать все по своему, то идите в дизайнеры. Что вы среди верстальщиков забыли.?
В эпоху ccs3 и html5 практически все верстается без проблем. Большенству пофигу как это выглядит в старых браузерах. В них сайт должен отображать корректно всю информацию, пусть со стандартными шрифтами, без теней и без скругленных уголков. Главное чтобы вся информация была сохранена.
P.S. Учитывая специфику Хабра можете смело меня минусовать. Но от правды не уйдешь. Есть лентяи, а есть первоклассные задроты (в хорошем смысле слова), которым не жалко заплатить побольше за настоящий pixel-perfect. Побывал и на стороне разработчика, и на стороне клиента. И поведал кучу горе «верстальщиков». Особенно жалко видеть таких самородков и топовых агентствах и студиях.
P.S.S. Сам дизайнер, время от времени еще и верстаю. В основном руковожу процессом.
Задача дизайнера решить поставленные клиентом цели, задача верстальщика сверстать то что придумал дизайнер, задача разработчика заставить все это работать. Как правило, основные косяки начинаются на уровне верстки, потому что верстальщику лень помереть отступы. Он указывает 40px вместо необходимых 34px, что бы в итоге с отступами шрифтов получилось 40px, а не 46px. Или добавляет отступы у красной строки и выравнивание по ширине, потому что ему так захотелось. Если хочется делать все по своему, то идите в дизайнеры. Что вы среди верстальщиков забыли.?
В эпоху ccs3 и html5 практически все верстается без проблем. Большенству пофигу как это выглядит в старых браузерах. В них сайт должен отображать корректно всю информацию, пусть со стандартными шрифтами, без теней и без скругленных уголков. Главное чтобы вся информация была сохранена.
P.S. Учитывая специфику Хабра можете смело меня минусовать. Но от правды не уйдешь. Есть лентяи, а есть первоклассные задроты (в хорошем смысле слова), которым не жалко заплатить побольше за настоящий pixel-perfect. Побывал и на стороне разработчика, и на стороне клиента. И поведал кучу горе «верстальщиков». Особенно жалко видеть таких самородков и топовых агентствах и студиях.
P.S.S. Сам дизайнер, время от времени еще и верстаю. В основном руковожу процессом.
Если вы знаете кухню со всех сторон, то к вам вопрос: как правильно замерять расстояние от блока до текста, что б правильно учесть line-height и отступ. Вот вы тут пример привели с 36+6 = 40px. Это можно измерит прямо в photoshop, например?
Line-height как бы напрямую в фотошопе задаётся.
Я поясню.
Предположим, верхний отступ 10px, line-height: 45px; font-size: 14px;
Ссылка на картинку: www.flickr.com/photos/90425570@N04/8215054514/
При этом в photoshop все хорошо. Но, если задать такие же параметры тексту, то верхний отступ выйдет больше чем 10px (он будет равен 10 в случае line-height: 14px;)
Я не прав?
Предположим, верхний отступ 10px, line-height: 45px; font-size: 14px;
Ссылка на картинку: www.flickr.com/photos/90425570@N04/8215054514/
При этом в photoshop все хорошо. Но, если задать такие же параметры тексту, то верхний отступ выйдет больше чем 10px (он будет равен 10 в случае line-height: 14px;)
Я не прав?
Ну, во-первых, отступ сверху в фотошопе задавать не нужно, достаточно просто разместить текстовую зону на 10px ниже.
Во-вторых, line-height надо задавать в относительных единицах (верстальщик сам должен поделить значения).
Так что определить всё достаточно просто, если дизайнер хорошо знает рабочий инструмент.
Как вы так задаёте параметры что верхний отступ у вас зависит от line-height? (могу ещё понять font-size)
Во-вторых, line-height надо задавать в относительных единицах (верстальщик сам должен поделить значения).
Так что определить всё достаточно просто, если дизайнер хорошо знает рабочий инструмент.
Как вы так задаёте параметры что верхний отступ у вас зависит от line-height? (могу ещё понять font-size)
> Или добавляет отступы у красной строки и выравнивание по ширине, потому что ему так захотелось.
Это не относится к Pixel-perfect.
Это не относится к Pixel-perfect.
У вас очень утрированная картинка. Так никто не делает. А если делает, то им не платят.
Пример к сожалению реальный и далеко не единственный в коллекции. Это одна из причин — почему дизайнеры в своём портфолио стесняются показывать ссылки на готовые работающие проекты.
Я не понимаю зачем принимать такие работы. Если дизайнер, что-то там не именует, это просто растраивает, не больше. А то что у вас в картинке — это невыполненая работа. См. пост ниже.
К сожалению в мире фриланса, когда работает не команда, а отдельно взятые «специалисты» — работа дизайнера зачастую заканчивается как раз на отправке PSD-макета и далее его слово не имеет ровным счетом никакой силы. А заказчику ошибки верстальщика никто не объяснит, ибо он от понятий «сетка», «вертикальный ритм» и т.п. ещё дальше, чем тот самый нерадивый верстальщик.
Разве дизайнер в портфель кладет ссылки? Всегда считала (да и встеречала), что в портфолио кладутся сами изображения сделанные из оригинального psd.
И скорее встречается обратная ситуация (хотя может это с моей колокольни) — верстальщик стесняется показывать ссылки на готовые работы. Не потому что свёрстано плохо, а потому что сам макет не презентабелен.
И скорее встречается обратная ситуация (хотя может это с моей колокольни) — верстальщик стесняется показывать ссылки на готовые работы. Не потому что свёрстано плохо, а потому что сам макет не презентабелен.
Как верстальщик — подтверждаю. Из-за корявого дизайна, из которого приходится верстать только потому что постоянному клиенту надо — у меня портфолио чуть ли не в два раза меньше, чем могло быть
Именно поэтому вы и встречали/считали, что в портфолио одни картинки, т.к. получившаяся в итоге работа зачастую очень далека от задуманной дизайнером. Очень редко появляется проект, который на всех этапах разработки ведут профессионалы (в том числе это относится и к контенту: картинкам товаров, текстам не для роботов) и который хочется показать вживую, а не только задуманное состояние на картинке.
Что-то у меня много мыслей вызвал этот пост.
Все же сравнение «те не именуешь слои» и «ты не соблюдаешь, отступы / цвета / размеры» некорректно. Основная задача дизайнера — сделать внешнюю часть. Красивый, отвечающий задачам макет. Так что если дизайнер делает отличные профессиональные работы, да еще и денег с меня не берет, то он может сколько угодно строить из себя приму-балерину, я все равно буду с ним работать. А верстальщика одна из первоочередных задач — соответсвие макету. И если он с этой задачей несправляется, то он никому не нужен. Даже даром.
Все же сравнение «те не именуешь слои» и «ты не соблюдаешь, отступы / цвета / размеры» некорректно. Основная задача дизайнера — сделать внешнюю часть. Красивый, отвечающий задачам макет. Так что если дизайнер делает отличные профессиональные работы, да еще и денег с меня не берет, то он может сколько угодно строить из себя приму-балерину, я все равно буду с ним работать. А верстальщика одна из первоочередных задач — соответсвие макету. И если он с этой задачей несправляется, то он никому не нужен. Даже даром.
Много мыслей — это хорошо.
В данной статье я пытался прежде всего показать проблему того, что не справляющихся с задачей верстальщиков ничуть не меньше выдающих говно-макеты дизайнеров. И как это не прискорбно люди продолжают не по своей воле работать и с теми и с другими, но зачастую дизайнеры, макет которых испоганил верстальщик, молчаливы и не пишут поучительных постов для верстальщиков, а молча терпят затаив обиду.
В данной статье я пытался прежде всего показать проблему того, что не справляющихся с задачей верстальщиков ничуть не меньше выдающих говно-макеты дизайнеров. И как это не прискорбно люди продолжают не по своей воле работать и с теми и с другими, но зачастую дизайнеры, макет которых испоганил верстальщик, молчаливы и не пишут поучительных постов для верстальщиков, а молча терпят затаив обиду.
Тут, мне кажется, в том, что дизайнер, в отличие от верстальщика, не работает с результатом труда верстальщика. Он может доделывать/переделывать макет за своим коллегой. Но к верстке он имеет весьма посредственное отношение. По большому счету внутренняя организация кода его мало волнует, только внешний результат.
Верстальщик же непосредственно работает с результатом труда дизайнера. Поэтому, если работа сделана не качественно, то это сильно затрудняет его работу, иногда это еще мягко говоря. И беспорядочные слои — это самое меньшее из зол.
Верстальщик же непосредственно работает с результатом труда дизайнера. Поэтому, если работа сделана не качественно, то это сильно затрудняет его работу, иногда это еще мягко говоря. И беспорядочные слои — это самое меньшее из зол.
Эх Антон, Антон.
Да как-то всё банально, если честно. Правильно говорят — дизайнер должен быть немного верстальщиком, верстальщик — дизайнером, тогда недопониманий будет гораздо меньше.
Я не первый год работаю верстальщиком и уже могу определить когда дизайнер действительно сделал качественно, а когда схалтурил по лени или по незнанию; верстать данный кусок не очень и приятно, учитывая, что скорее всего придётся переделывать.
Вам всего лишь нужно работать с более профессиональными коллегами по разработке сайтов, тогда и проблем таких возникать не будет.
Я не первый год работаю верстальщиком и уже могу определить когда дизайнер действительно сделал качественно, а когда схалтурил по лени или по незнанию; верстать данный кусок не очень и приятно, учитывая, что скорее всего придётся переделывать.
Вам всего лишь нужно работать с более профессиональными коллегами по разработке сайтов, тогда и проблем таких возникать не будет.
слово «дизайнер» для программистов является синонимом доброй половине словоформ «Большого словаря русского забористого мата».
Наверное, слово «сеошник» тогда является синонимом всех словоформ. И процент тут стремиться к 98% — 2%, как мне часто кажется)
Про картинку справа => «Раз тебе так хочется, без проблем, бро )»
А по теме: Какое обращение к ленивым, застрявшим в 2000х низкопрофильным верстальщикам (Хотя, должен признать, таких тоже много, как и горе дизайнеров)
P.S. Про PP — как-то давайте различать пиксель_в_пиксель и Все_выглядет_отлично_и_при_этом_responsive
А по теме: Какое обращение к ленивым, застрявшим в 2000х низкопрофильным верстальщикам (Хотя, должен признать, таких тоже много, как и горе дизайнеров)
P.S. Про PP — как-то давайте различать пиксель_в_пиксель и Все_выглядет_отлично_и_при_этом_responsive
Дизайнеры, дорогие мои любимые, научитесь пожалуйста пользоваться инструментом layers comps (композиция слоёв). Этим вы дико облегчите жизнь верстальщикам, да и себе, порою. И научите этим пользоваться своих коллег, детей и внуков.
Я понимаю что папочки и всё такое, но папочек зачастую бывает много и включать/отключать их постоянно не совсем сподручно и тем более держать в памяти те, что отключил или наоборот включил. Спасибо.
Я понимаю что папочки и всё такое, но папочек зачастую бывает много и включать/отключать их постоянно не совсем сподручно и тем более держать в памяти те, что отключил или наоборот включил. Спасибо.
пользоваться инструментом layers comps.
Этим вы дико облегчите жизнь верстальщикам, да и себе, порою.
Осталось верстальщиков научить пользоваться layers comps.
К сожалению:
1) А кто научит верстальщиков пользоваться этим инструментом
2) У этого инструмента тоже есть свои "+" и "-". Особенно они ощутимы на проектах, где число страниц переваливает за 5 хотябы.
1) А кто научит верстальщиков пользоваться этим инструментом
2) У этого инструмента тоже есть свои "+" и "-". Особенно они ощутимы на проектах, где число страниц переваливает за 5 хотябы.
Блин, по мне упирается в одну банальную вещь. Одни не хотят лучше изучить фотошоп и работу с макетом, другие не хотят знать про CSS. Здесь есть удивительная полоса двух миров. Мне, как человеку, относительно знающему и то и то не составляет проблем ни сгруппировать слои чужого макета ( а потом объяснить что для общей будущей работы хорошо бы этим занимался тот кто рисует, если этот человек со мной на долго) ни сверстать то что нарисовано. Я не буду отказываться верстать макет если он адово выглядет в слоях. Мне быстрее это сделать самому и отослать назад для просмотра. Потому что пока я буду говнится что макет такой я не принимаю, я осознаю что человек, который мне его прислал немного не опытен, и мне не составляет труда ему объяснить на будущее что-то.
Мне нравится когда дизайнеры в макетах в layer comps выносят различные состояния (hover-ы), popup и т.д., которые относятся к текущей странице.
И очень не нравится когда в композиции слоев сносят все макеты и от этого файл начинает весить 150-200мб и мой бедненький ноут не справляется.
И очень не нравится когда в композиции слоев сносят все макеты и от этого файл начинает весить 150-200мб и мой бедненький ноут не справляется.
Лично я считаю, что кроме webfonts от гугла нет смысла использовать шрифты какие либо еще. Там хоть как то учитывается отображение шрифта в пикселях на мониторе. Часто нестандартные шрифты годны исключительно на заголовки от 18px. Потому что ниша читаемых шрифтов ниже 18px уже занята Tahoma и Arial идеально вливающихся в пиксельную сетку.
Открыть тот же форум Ubuntu, где PT Sans используется как основной текст в 14px.
forum.ubuntu.ru/index.php?topic=49899.0
Я считаю это категорически неверным. Текст читается хуже чем тут в этих комментариях. Привыкли, что чем новее технология, тем «дизайнернее» макет. К чему приводят подобные игры.
Открыть тот же форум Ubuntu, где PT Sans используется как основной текст в 14px.
forum.ubuntu.ru/index.php?topic=49899.0
Я считаю это категорически неверным. Текст читается хуже чем тут в этих комментариях. Привыкли, что чем новее технология, тем «дизайнернее» макет. К чему приводят подобные игры.
Конечно web safe достали я не спорю. Я сам сейчас делаю макет с отличным шрифтом Marmelad
Решил полностью использовать во всех кеглях, то есть даже 12px. Вполне читаем.
Решил полностью использовать во всех кеглях, то есть даже 12px. Вполне читаем.
А мне на форуме Ubuntu браузер показывает не PT Sans, а Ubuntu 14px.
Ага. Дизайнер мечты просто.
Зачем размер шрифта указывать в пунктах?
Обычно так делает фотошоп по умолчанию. Обычно от px это ничем не отличается.
В фотошопе? Покажу картинкой доходчивей:
На самом деле вы первый кто задал вопрос про пункты, т.к. до этого все верстальщики по умолчанию видели 13pt и писали 13px без зазрения совести.
Во вторых — «единицы, какие ему указаны в Units and Rules» по умолчанию в «pt» и даже если я поменяю у себя на «px» — у верстальщика (который вряд ли настраивал фотошоп) они всё-равно будут в «pt»
В третьих — «пути фотошопа не исповедимы» и вы только что открыли мне глаза и указали на опцию о которой я не знал и даже не обращал внимание больше 6 лет использования фотошопа. Искреннее спасибо вам.
И у хорошего дизайнера pt всегда равен пикселю при создании макета в фотошопе :)
Во вторых — «единицы, какие ему указаны в Units and Rules» по умолчанию в «pt» и даже если я поменяю у себя на «px» — у верстальщика (который вряд ли настраивал фотошоп) они всё-равно будут в «pt»
В третьих — «пути фотошопа не исповедимы» и вы только что открыли мне глаза и указали на опцию о которой я не знал и даже не обращал внимание больше 6 лет использования фотошопа. Искреннее спасибо вам.
И у хорошего дизайнера pt всегда равен пикселю при создании макета в фотошопе :)
У хорошего, возможно. А я вот недавно верстал макет с размером шрифта 11.6px
Сочувствую вашей утрате нервных клеток
Это были не внутренние макеты, так что задать вопрос было некому.
А вообще, мы как-то для наших дизайнеров делали что-то типа семинара или доклада на тему «как из картинки в фотошопе получается сайт». Без углубления в технические детали. И мы как раз преследовали целью найти взаимопонимание. После я ждал алаверды, но увы.
А вообще, мы как-то для наших дизайнеров делали что-то типа семинара или доклада на тему «как из картинки в фотошопе получается сайт». Без углубления в технические детали. И мы как раз преследовали целью найти взаимопонимание. После я ждал алаверды, но увы.
Ну и надо было ставить 12px и слать лесом. Субпиксел-перфект это уже за гранью:)
У меня, как у верстальщика, настроено всё в px, но дизиайнеры часто присылают макеты, и получаются просто сказочной индии размеры шрифтов, вроде 47.21px.
Шлите этих дизайнеров вот сюда: ) photoshopetiquette.com
Хороший дизайнер еще и пишет комментарии для верстальщика, объясняя в них почему у него пикселы, какие общие параметры он использовал и т.Д причем комментарии пишутся поверх png версий, что бы была возможность сверить их с psd и понять где там разошлись настройки: )
То что у вас в последнем скриншоте это невыполненная работа верстальщиком, а не несоответствие макету. Отклонения на 1-2 пикселя приемлемы, если макет сделан не по сетке, а когда дизайнер просит пиксель-в-пиксель можно смело требовать объяснения почему тут надо именно такие размеры. Ответ «я так решил» не подходит.
Ещё заметил за большинством дизайнеров одну общую проблему. Они рисуют сайт как картинку, а не как сайт, т.е. не представляют себе его использование в реальном окружении. В связи с чем мне приходится выступать в роли дизайнера и додумывать интерактивное поведение элементов. К сожалению, дизайнеры которые думают над такими проблемами уже давно работают в крупных компаниях. Избитая тема, но я надеюсь со временем общий уровень качества выполнения работы у дизайнеров возрастёт (да и у верстальщиков тоже, чего там), особенно если их тыкать в такого рода статьи.
Ах да, последняя просьба к дизайнерам. Привязывайте, пожалуйста, кривые к пикселям! Проблема решается в один клик и графика выглядит красивей.
Ещё заметил за большинством дизайнеров одну общую проблему. Они рисуют сайт как картинку, а не как сайт, т.е. не представляют себе его использование в реальном окружении. В связи с чем мне приходится выступать в роли дизайнера и додумывать интерактивное поведение элементов. К сожалению, дизайнеры которые думают над такими проблемами уже давно работают в крупных компаниях. Избитая тема, но я надеюсь со временем общий уровень качества выполнения работы у дизайнеров возрастёт (да и у верстальщиков тоже, чего там), особенно если их тыкать в такого рода статьи.
Ах да, последняя просьба к дизайнерам. Привязывайте, пожалуйста, кривые к пикселям! Проблема решается в один клик и графика выглядит красивей.
В начале статьи я указал очевидную причину, почему вы «замечаете, что большинство дизайнеров рисуют сайт как картинку». Просто старайтесь работать с профессионалами, а не с теми, кто до вчерашнего дня занимался исключительно полиграфией.
И я думаю со временем ничего не изменится, т.к. зачастую цикл жизни дизайнера выглядит так:
новичок > профи > работа в крупной компании > своё дело (студия или проекты)
При чём с каждым шагом численность уменьшается процентов на 80%, не перешедшие на следующий шаг 20% либо задерживаются там до конца жизни, либо расстраиваются и меняют работу.
P.S. «крупную компанию» может заменить, к примеру, интересный стартап с высокой зп
И я думаю со временем ничего не изменится, т.к. зачастую цикл жизни дизайнера выглядит так:
новичок > профи > работа в крупной компании > своё дело (студия или проекты)
При чём с каждым шагом численность уменьшается процентов на 80%, не перешедшие на следующий шаг 20% либо задерживаются там до конца жизни, либо расстраиваются и меняют работу.
P.S. «крупную компанию» может заменить, к примеру, интересный стартап с высокой зп
Я обычно для всех элементов отдельный UI файл стараюсь прикладывать, со всеми стэйтами в виде спрайтов. Правда к сожалению не всегда времени хватает на это.
Они рисуют сайт как картинку, а не как сайт
И не говорите, я для каждого из присланных мне макетов требую дорисовать мне состояния кнопок в active, ссылок в hove, focus итд. И это даже я теми дизайнерами, с которыми работаю не раз.
Хотя вот ест и приличные люди(1 раз такое было), которые знают, что такое адаптивный дизайн, и отправляют несколько макетов под разные разрешения. Золотые люди.
а когда дизайнер просит пиксель-в-пиксель можно смело требовать объяснения почему тут надо именно такие размеры. Ответ «я так решил» не подходит.
Вот этого совсем не понял. А чем «я так решил» не устраивает? Если дизайнер нарисовал колонку шириной 300px — то что тут нужно доказывать и требовать от дизайнера?
ну, как по мне, так даже и 311px «Художник так видит» (с)
Дизайн сайта — не рисование красивой картинки. Ответ «художник так видит» автоматом говорит о профнепригодности дизайнера, в качестве веб-дизайнера.
Впрочем, подобный ответ для любого человека и для любой профессии, имхо, говорит о том, что мозг во время работы не включался.
Впрочем, подобный ответ для любого человека и для любой профессии, имхо, говорит о том, что мозг во время работы не включался.
А вы часто верстаете сайты у которых размеры блоков «красивые»? Если да — то я вам завидую. К размерам 297px, 532px и т.д. я уже начал относиться философски. В мыслях у меня мелькает вопрос WTF?, но я сдерживаю себя.
Кстати, раз уж заговорили… Меня всегда интересовал вопрос: а как другие измеряют отступы от текста. Я объясню.
Например, есть блок, внутри него текст. Верхний отступ по макету 10px (между краем блока и началом текста). Но, в этот отступ входит частично line-height? И 10px в фотошопе не тождественны размеру в верстке. Или это я нуб? И это вовсе не проблема?
Кстати, раз уж заговорили… Меня всегда интересовал вопрос: а как другие измеряют отступы от текста. Я объясню.
Например, есть блок, внутри него текст. Верхний отступ по макету 10px (между краем блока и началом текста). Но, в этот отступ входит частично line-height? И 10px в фотошопе не тождественны размеру в верстке. Или это я нуб? И это вовсе не проблема?
И каким именно образом должен включиться мозг, чтобы объяснять те или иные размеры рационально? А радиусы скругления углов кнопок вам тоже объяснять? Кривизну овалов в логотипе? Может вам в формулах кривых логотипа найти логику и закономерность? А выбор цветов в градиенте на кнопке объяснить? Или может выбранный трекинг шрифта вам пояснить? А на вопрос почему интерлиньяж 16px вместо 15px вам также надо рациональное объяснение найти? Высоту и ширину полей вам надо сеткой аргументировать? Вам во всех этих вопросах надо придумать скрытые смыслы/аргументы/дать ссылки на исследования?
То, что вы считаете, что 300px априори лучше, чем, к примеру, 345.23866666666px, говорит лишь о вашей странной любви к магическим круглым числам, будто если все сделаешь по ним — получится хорошо; для вас удобство реализации важнее результата, а это заблуждение, которое на самом деле только замедляет процесс реализации.
Если бы вы вообще не думали о цифрах, а ориентировались только на визуальную сторону, то обнаружили бы с удивлением, что сильные и качественные работы не поддаются очевидным законам «округленных» чисел и чистых пропорций.
То, что вы считаете, что 300px априори лучше, чем, к примеру, 345.23866666666px, говорит лишь о вашей странной любви к магическим круглым числам, будто если все сделаешь по ним — получится хорошо; для вас удобство реализации важнее результата, а это заблуждение, которое на самом деле только замедляет процесс реализации.
Если бы вы вообще не думали о цифрах, а ориентировались только на визуальную сторону, то обнаружили бы с удивлением, что сильные и качественные работы не поддаются очевидным законам «округленных» чисел и чистых пропорций.
Ох и попаду я в немилость дизайнерами, но все же да, объясните? Дизайнер это все же техническая профессия, в отличии от художника, а каждая техническая профессия основана на определённых законах и формулах.
Ширина колонки не может быть просто 300px, это либо 1/3 от всей ширины сайта, либо 4/12 от 12 колоночной раскладки, либо 1/2 от 2/3 по ширине колонки. Здесь нет никакой магии — только рациональная реализация. Дизайн почти синоним проектирования, а проектирование основано на числах, пропорциях, законах, закономерностях, математических формулах.
Почему-то ни один архитектор зданий не осмелится сказать «а я так вижу», потому-что при любой оплошности здание просто рухнет. Чем же веб-дизайнер хуже? Ниже порог вхождения и ответственность? Может здесь и зарыта собака?
Ширина колонки не может быть просто 300px, это либо 1/3 от всей ширины сайта, либо 4/12 от 12 колоночной раскладки, либо 1/2 от 2/3 по ширине колонки. Здесь нет никакой магии — только рациональная реализация. Дизайн почти синоним проектирования, а проектирование основано на числах, пропорциях, законах, закономерностях, математических формулах.
Почему-то ни один архитектор зданий не осмелится сказать «а я так вижу», потому-что при любой оплошности здание просто рухнет. Чем же веб-дизайнер хуже? Ниже порог вхождения и ответственность? Может здесь и зарыта собака?
Повторю. Если вы перестанете думать о цифрах, а сосредоточитесь на результате, то обнаружите, что качественный результат делается и безотносительно всяких закономерностей. Ваша сетка — не панацея. Молиться на неё и втискивать очевидно неподходящие объекты в неё — тратить попусту свое время. У сетки должно быть весомое обоснование для применения, к примеру, фирменный стиль, или сквозное согласование дизайна на страницах/сайтах. А если вам нужна просто колонка слева — то совершенно необязательно для этого выдумывать сетку — нарисуйте колонку размера, при котором тексту в ней не тесно, и даже не вспоминайте о цифрах.
OMG, и вы еще говорите о рациональности, даже не поинтересовавшись назначением колонки и характером контента в ней, а сразу выдав пропорции. Ширина колонки может быть совершенно любой. То, что вы заморачиваетесь над её пропорцией — говорит о вашей вере в тайный смысл пропорций, под предлогом псевдорационализации. Здесь могут быть только два рациональных обоснования — либо уже утвержденная сетка (читай применение фреймворка, к примеру всем известного), либо характер контента внутри колонки, но никак не любовь к круглым числам и рациональным пропорциям. Вопрос о ширине колонки не может быть обоснованием для создания самой сетки. Легче вам делать в пропорции — делайте, но когда это очевидно портит визуальную сторону — а это случается часто, т. к. вы искусственно ограничиваете себя и втискиваете содержание в какие-то априорные формы — не надо врать, что это рационализация, это будет как раз наоборот.
Про архитекторов аналогия не верная. Правильнее сравнивать дизайнера с декораторами интерьеров/экстерьеров. С архитекторами тогда уж надо сравнивать информационных архитекторов — их ответственность такая же.
Ширина колонки не может быть просто 300px, это либо 1/3 от всей ширины сайта, либо 4/12 от 12 колоночной раскладки, либо 1/2 от 2/3 по ширине колонки. Здесь нет никакой магии — только рациональная реализация.
OMG, и вы еще говорите о рациональности, даже не поинтересовавшись назначением колонки и характером контента в ней, а сразу выдав пропорции. Ширина колонки может быть совершенно любой. То, что вы заморачиваетесь над её пропорцией — говорит о вашей вере в тайный смысл пропорций, под предлогом псевдорационализации. Здесь могут быть только два рациональных обоснования — либо уже утвержденная сетка (читай применение фреймворка, к примеру всем известного), либо характер контента внутри колонки, но никак не любовь к круглым числам и рациональным пропорциям. Вопрос о ширине колонки не может быть обоснованием для создания самой сетки. Легче вам делать в пропорции — делайте, но когда это очевидно портит визуальную сторону — а это случается часто, т. к. вы искусственно ограничиваете себя и втискиваете содержание в какие-то априорные формы — не надо врать, что это рационализация, это будет как раз наоборот.
Про архитекторов аналогия не верная. Правильнее сравнивать дизайнера с декораторами интерьеров/экстерьеров. С архитекторами тогда уж надо сравнивать информационных архитекторов — их ответственность такая же.
А, кстати, вспомнил. Как-то читал очень интересный текст про высоту потолков жилых помещений, как она рассчитывалась исходя из пропорций человека. Там были целые схемы и графики.По-моему у АртЛебедева проскакивала ссылка. Так вот почему-то я не вижу больших отличий от высоты потолка и, к примеру, ширины абзаца текста или внутреннего расстояния от текста до границ блока или многих других величин присутствующих на любом дизайн-макете и я почему-то уверен, что все эти величины берутся не из воздуха и не по желанию задней пятки левой ноги дизайнера. Хочется в это верить.
Да-да-да. Хрущёвки назывались дома, спроектированные по таким схемам.
Хотите сайт-хрущёвку? )
Хотите сайт-хрущёвку? )
Передёргиваете, товарищ. Я вам не про конечный результат говорю, а про теорию, что всему должно быть объяснение. Если нет объяснения, то как вы будете обучать своих последователей?
Понимаете: веб-дизайн это не религия, здесь одной веры не достаточно — нужны доказательства!
Понимаете: веб-дизайн это не религия, здесь одной веры не достаточно — нужны доказательства!
Нет, не передергиваю.
Теория — не догма и не аксиома. Да и самих теорий может существовать множество.
В дизайне, конечно, существует определенный набор правил. Но слепое следование им не гарантирует качество конечного результата. Иногда нужно делать и в противоречие правил. Именно это и отличает стандартный дизайн от отличного. Дизайн, хоть и имеет ряд закономерностей, но всё-таки является творчеством. В противном случае его уже давно можно было автоматизировать.
Теория — не догма и не аксиома. Да и самих теорий может существовать множество.
В дизайне, конечно, существует определенный набор правил. Но слепое следование им не гарантирует качество конечного результата. Иногда нужно делать и в противоречие правил. Именно это и отличает стандартный дизайн от отличного. Дизайн, хоть и имеет ряд закономерностей, но всё-таки является творчеством. В противном случае его уже давно можно было автоматизировать.
высота потолков жилых помещений рассчитывалась исходя из пропорций человека
Вот-вот, это уже похоже на рационализацию. Так же и ширина колонок должна рассчитываться — исходя из контента, а не из любви к пропорциям. Представьте, если бы архитектор любил круглые числа и все потолки делал по 2м, или делил ширину дома на 12, получая размер квартиры.
величины берутся не из воздуха … хочется в это верить.
Вот именно. Надо просто доверять другим людям в смежных профессиях, а не тратить их время наивными вопросами.
Про сетку полностью согласен. Часто делаешь по сетке и выходит не то.
И еще — почему дизайнер должен вам это все объяснять? Вы же не станете объяснять дизайнеру принципы работы хэша или алгоритмы поиска на сложных структурах‽
Легко объясню, если он захочет слушать, а мне как верстальщику с большим стажем очень интересен дизайн как таковой, а в особенности дизайн интерфейсов, поэтому мне было бы очень интересно послушать дизайнера, если он сможет мне грамотно всё объяснить, а не то, что он «так видит» и его внутренние ощущения.
Отлично, что вы не против побеседовать с дизайнером, только остается вопрос, насколько это эффективное для дела времяпрепровождение? Если вам и дизайнеру оплачивают часы дискуссий и образования на тему дизайна и метафизики — здорово, я мечтаю о такой работе. Обычно же образование дизайнера о принципах работы хэша и образование программистов о канонах типографики не несет эффекта для проекта, скорее наоборот — порождает лишние вопросы, споры и заморочки.
Сорри что не сразу ответил.
Во-первых, для дизайнеров, как и для 99% профессий есть соответствующее образование. Тот факт, что мало кто этим заморачивается, не отменяет ни наличие теории, ни требования включать голову.
Во-вторых, в комментариях очень верно привели сравнение с архитектором. Обосновывать «почему не 300, а 311 пикселей» надо не столько с точки зрения картинки, сколько с точки зрения людей, которые будут потом работать с вашим дизайном. Любой выебон дизайнера автоматом увеличивает стоимость проекта, а также съедает нервные клетки тех же верстальщиков.
Поинтересуйтесь как-нибудь как работают дизайнеры помещений, к примеру. Я как раз сейчас занимаюсь ремонтом в квартире и с одним таким работаю.
Задача дизайнера — сделать и *практично*, и красиво. Просто красиво — вон из профессии.
Во-первых, для дизайнеров, как и для 99% профессий есть соответствующее образование. Тот факт, что мало кто этим заморачивается, не отменяет ни наличие теории, ни требования включать голову.
Во-вторых, в комментариях очень верно привели сравнение с архитектором. Обосновывать «почему не 300, а 311 пикселей» надо не столько с точки зрения картинки, сколько с точки зрения людей, которые будут потом работать с вашим дизайном. Любой выебон дизайнера автоматом увеличивает стоимость проекта, а также съедает нервные клетки тех же верстальщиков.
Поинтересуйтесь как-нибудь как работают дизайнеры помещений, к примеру. Я как раз сейчас занимаюсь ремонтом в квартире и с одним таким работаю.
Задача дизайнера — сделать и *практично*, и красиво. Просто красиво — вон из профессии.
Дизайнер это не тот, кто рисует макеты в ПСД с нестандартными тенями и заливками, которые нельзя без мудотни перенести в CSS. А тот, кто вполне себе отдает отчет как это будет реализованно на практике. А то вы всех художников, вдруг, начали дизайнерами называть.
Не хочу придираться к формулировкам, но как вот это:
сочетается с этим?
Как верстальщику понять, где вы ошиблись, а где специально так задумали? Особенно это касается начала совместной работы.
Поэтому я прошу тебя сверстать всё что ты видишь в макете “как есть” и не задумываться о смыслах моей работы.
сочетается с этим?
даже если я где-то ошибся и промазав пипеткой превратил синюю ссылку в тёмно-голубую.
Как верстальщику понять, где вы ошиблись, а где специально так задумали? Особенно это касается начала совместной работы.
Всё круто, только часто дизайнеры придумывают такие хероту, которую даже не представляешь как реализовать или просто сидишь целый день, чтобы сделать 1 мааааленькую херовинку, зато красиво и с макетом 1 в 1.
Дорогой дизайнер, мне по правде говоря совсем не важно называешь ли ты слои именами, раскидываешь ли ты все по папкам. Мне куда важнее, чтобы, когда я, используя инструмент «MooveTool», нажимал на правую кнопку над слоем, у меня в выпадающем списке появлялись не все, блин, слои в макете, а только те, которые реально находятся под курсором.
Я не представляю как так получается у большинства, что выделяются все слои, может быть нужно слои вставлять из другого макета, или еще что-то. Но я чаще всего это сравниваю в крутостью дизайнера. Мой любимый дизайнер присылает мне крайне неорганизованные макеты, слои не понятно для чего, папки не пойми где, но зато при выборе нужного слоя у меня только этот слой и есть в списке. А вот все остальные дизайнеры, видимо, начитавшись подобных постов, организовывают имена для своих слоев, раскладывают по папкам(некоторые паскуды еще и забывают снять замок со слоя), но толку от этого никакого — при выборе в списке отображается 100500 слоев.
И еще, никогда не используйте эффекты наложения слоев там, где можно склеить 2 слоя, но не склеивайте всякие градиентные заливки в месте с паттерном, и черт возьми, регулировать оттенок шрифт используя opacity — это просто блядство.
Я не представляю как так получается у большинства, что выделяются все слои, может быть нужно слои вставлять из другого макета, или еще что-то. Но я чаще всего это сравниваю в крутостью дизайнера. Мой любимый дизайнер присылает мне крайне неорганизованные макеты, слои не понятно для чего, папки не пойми где, но зато при выборе нужного слоя у меня только этот слой и есть в списке. А вот все остальные дизайнеры, видимо, начитавшись подобных постов, организовывают имена для своих слоев, раскладывают по папкам(некоторые паскуды еще и забывают снять замок со слоя), но толку от этого никакого — при выборе в списке отображается 100500 слоев.
И еще, никогда не используйте эффекты наложения слоев там, где можно склеить 2 слоя, но не склеивайте всякие градиентные заливки в месте с паттерном, и черт возьми, регулировать оттенок шрифт используя opacity — это просто блядство.
«Автовыбор: Слой/Группы слоёв» не то? Тут как-бы тоже ситуация разнобокая, с одной стороны удобно, что выделяется один слой под курсором, но с другой стороны визуальный блок часто состоит из многих слоёв и его бывает нужно включить/отключить, а слои разбросаны по всему макету. Вот тут и начинаются танцы с бубном — 50 слоев отключать по одному, а потом вспоминать что выключил? Нет уж, уж лучше папочки и пресловутый layers comp, который мне приходится самому настраивать при получении макета.
Нет, не то. Дело не в том, что слой макет в папке лежит, дело в том, что эта папка выделяется даже в футере, хотя в ней вроде как только элементы хедера.
Зачем вам запоминать что вы там включили выкличили?
Вернитесь в прежнее состояние макета в истории и все восстановится.
Если вам нужен какой то слой или группа слоев, удаляйте с макета все лишнее. Как доберетесь до нужного, сделаете trim, сохраните как хотите. По f12 все вернется на свои места.
Layer comps хуже, тут дело в том, что чем глубже макет тонет в надстройках со стороны фотошопа. тем сложнее его поддерживать при изменении макета дизайна.
Больше того, с удаленными слоями вы быстрее сделаете crop полотна, чем просто с выключенными слоями. В некоторых случах просто в разы быстрее.
Я, если мне нужно вырезать какую то папку, конверчу ее в smartlayer и по двойному щелчку она открывается в новом документе уже сама обрезанная.
Вернитесь в прежнее состояние макета в истории и все восстановится.
Если вам нужен какой то слой или группа слоев, удаляйте с макета все лишнее. Как доберетесь до нужного, сделаете trim, сохраните как хотите. По f12 все вернется на свои места.
Layer comps хуже, тут дело в том, что чем глубже макет тонет в надстройках со стороны фотошопа. тем сложнее его поддерживать при изменении макета дизайна.
Больше того, с удаленными слоями вы быстрее сделаете crop полотна, чем просто с выключенными слоями. В некоторых случах просто в разы быстрее.
Я, если мне нужно вырезать какую то папку, конверчу ее в smartlayer и по двойному щелчку она открывается в новом документе уже сама обрезанная.
> удаляйте с макета все лишнее
вы наверное пошутили
layers comps настраивается после завершения работы над макетом, когда все слои готовы, согласитесь, дизайнеру это сделать намного проще, чем верстальщику, он же помнит все свои слои?
вариант с конвертированием папки в smartlayer сработает, когда слои нужного блока в одной папке, а не раскиданы по всему проекту
все еще зависит от распределения слоёв в дизайн-макете: либо слои сверху вниз эмулируя веб-страницу (шапка, контект, подвал), либо из глубины наружу (фон, декор фона, декор блоков, контент блоков, рюшечки и иконки)
вы наверное пошутили
layers comps настраивается после завершения работы над макетом, когда все слои готовы, согласитесь, дизайнеру это сделать намного проще, чем верстальщику, он же помнит все свои слои?
вариант с конвертированием папки в smartlayer сработает, когда слои нужного блока в одной папке, а не раскиданы по всему проекту
все еще зависит от распределения слоёв в дизайн-макете: либо слои сверху вниз эмулируя веб-страницу (шапка, контект, подвал), либо из глубины наружу (фон, декор фона, декор блоков, контент блоков, рюшечки и иконки)
Просто макеты по дизайну вносятся лично у меня когда угодно и как угодно. И сейчас все сверстано и кое что я захотел изменить. Если Layer comps удобен — нет проблем.
smartlayer по другому и неимеет смысла если слои лежат где и как хотят. Когда у меня есть иконка сложная, я ее конверчу в smart иначе ею манипулировать перетаскиванием невозможно.
Но метод с удалением лишнего с макета я считаю не таким и плохим, вы же пытаетесь нарезать макет по элементам. А crop работает значительно быстрее, когда ничего кроме нужно вам элемента нет. Если вы отключите все элементы кроме, к примеру, иконки, то кроп будет таким же долгим как и с влюченными слоями. Можете попробовать, когда макет тяжелый это очень спасает. Потом же вы по f12 вернетесь к своему прежнему состоянию. Ничего не удалится навсегда.
В вашем случае вам лучше запарится не с Layer comps а с организаией макета в слои используя папки и smartlayer. Мне кажется это будет значительно быстрее, ибо с Layer comps вы каждый раз потояете все теже итерации. А с организацией слоев, вы каждым шагом уменьшаяете будущие действия. И заодно обратной отсылкой дизайнеру макета можно запарится чотбы привыкал.
smartlayer по другому и неимеет смысла если слои лежат где и как хотят. Когда у меня есть иконка сложная, я ее конверчу в smart иначе ею манипулировать перетаскиванием невозможно.
Но метод с удалением лишнего с макета я считаю не таким и плохим, вы же пытаетесь нарезать макет по элементам. А crop работает значительно быстрее, когда ничего кроме нужно вам элемента нет. Если вы отключите все элементы кроме, к примеру, иконки, то кроп будет таким же долгим как и с влюченными слоями. Можете попробовать, когда макет тяжелый это очень спасает. Потом же вы по f12 вернетесь к своему прежнему состоянию. Ничего не удалится навсегда.
В вашем случае вам лучше запарится не с Layer comps а с организаией макета в слои используя папки и smartlayer. Мне кажется это будет значительно быстрее, ибо с Layer comps вы каждый раз потояете все теже итерации. А с организацией слоев, вы каждым шагом уменьшаяете будущие действия. И заодно обратной отсылкой дизайнеру макета можно запарится чотбы привыкал.
Да бесполезно давать добрые советы. Их все равно все не напишешь. Верстать нужно уметь и все будет в порядке. Мне тоже особо все равно что там со слоями. Все ваши советы поддерживаю, потому что понимаю, если слой несет на себе динамические эффекты, а требуется его выделить отдельно, то тут и засада — невозможно повторить. То что вы описали это совершенно сырой вебдизайнер.
Но его можно обучить. Вопрос в том хотят ли этого верстальщики? Да.
Умеют ли( хотят ли) они обучать? Нет.
Но обратите внимание, что проблемы в основном в некомпетентности работы с пакетом от Adobe у ЛЮБОЙ стороны.
Но этот вопрос не рассматривается группой верстальщиков и минусуется, исходя из того что кто-то там (я) не хочет сделать жизнь верстальщику лучше.
Да со мной то нет проблем, я чо угодно сделаю, проблемы то не со мной а со своими дизайнерами и решать, господа верстальщики, их не умеют ( не компетентны) и предпочитают бурчать о папках именах слоев и прочим. Ну обучите дизайнеров как надо.
Но его можно обучить. Вопрос в том хотят ли этого верстальщики? Да.
Умеют ли( хотят ли) они обучать? Нет.
Но обратите внимание, что проблемы в основном в некомпетентности работы с пакетом от Adobe у ЛЮБОЙ стороны.
Но этот вопрос не рассматривается группой верстальщиков и минусуется, исходя из того что кто-то там (я) не хочет сделать жизнь верстальщику лучше.
Да со мной то нет проблем, я чо угодно сделаю, проблемы то не со мной а со своими дизайнерами и решать, господа верстальщики, их не умеют ( не компетентны) и предпочитают бурчать о папках именах слоев и прочим. Ну обучите дизайнеров как надо.
Согласен по поводу некомпетентности любой стороны.
А вот с обучением дизайнеров сложно. Программисты-то еще какие снобы, а если верстальщик будет дизайнеру указывать как работать — то совсем — туши свет. Оно знаете, когда накипит после 10 страницы в макете, напишешь гневное письмо дизайнеру, и знаете что в следующий раз он мне присылает — то же самое. И я правда не могу понять, почему так сложно думать, как браузер, почему именно нельзя сделать именно так, как нарисовано. Большинство дизайнеров думают, что верстка — это примерно так же, как собраться страничку в индизайне, что html =~ pdf. Но все это меркнет, перед длинным списком слоев в контекстном меню — тут просто слезы лить хочется.
А вот с обучением дизайнеров сложно. Программисты-то еще какие снобы, а если верстальщик будет дизайнеру указывать как работать — то совсем — туши свет. Оно знаете, когда накипит после 10 страницы в макете, напишешь гневное письмо дизайнеру, и знаете что в следующий раз он мне присылает — то же самое. И я правда не могу понять, почему так сложно думать, как браузер, почему именно нельзя сделать именно так, как нарисовано. Большинство дизайнеров думают, что верстка — это примерно так же, как собраться страничку в индизайне, что html =~ pdf. Но все это меркнет, перед длинным списком слоев в контекстном меню — тут просто слезы лить хочется.
Тоже непоспоришь, но все равно можно разжевать)
Вы скажите как. Вот эту саму проблему, когда слой Логотип доступен в контекстном меню вообще во всех точках макета? Что нужно сделать в ФШ, чтобы произошло такое, и что нужно делать, чтобы слой был только в тех местах, где сам логотип?
А… вы когда щелкате по слою Логтип в любом месте макета, он отображается тоже?
Нужно найти логтип и посмореть его границы слоя. Скорее всего он рисовал лого и поствил случайно куда то один пиксель далеко далеко от логтипа в этом же слое, а фотошоп расстояние между ними считает как равноценный слой. Или же он в smartlayer с футером объединен, к примеру.
Нужно найти логтип и посмореть его границы слоя. Скорее всего он рисовал лого и поствил случайно куда то один пиксель далеко далеко от логтипа в этом же слое, а фотошоп расстояние между ними считает как равноценный слой. Или же он в smartlayer с футером объединен, к примеру.
Вот-вот, потому моя главная рекомендация — рисовать все важное в другом слое, а затем вклеивать в мастер.
Ну так оно и делается. Есть логические элементы на основе будущей разрезки. Они если сложные, их или в папку под замок перемещения или в smartlayer чтобы слои случайно не уехали. Дизайнеру нужно объяснить что макет должен тянуться как то по высоте.
Кинь мне пример PSD. Я по папкам раскидаю кое чо удалю покажешь как макет должен выглядеть.
Кинь мне пример PSD. Я по папкам раскидаю кое чо удалю покажешь как макет должен выглядеть.
На мой взгляд дизайнер для того и нужен, что бы минимальной кровью (количетво требуемых извращений при вёрстке) достить хорошего визуального эффекта. Для этого он должен быть в курсе как все верстается. По идее дизайнер это верстальщик у которого есть навыки дизайна, вёрстки и присутствует хороший вкус. Если первые два пункта зачастую присутствуют и у простых верстальщиков то последний пунк это то почему мы идём к дизайнеру. А лепить просто красивые картинки на которые пойдёт уйма времени при вёрстке есть зло. Поэтому хороший дизайнер обычно стоит дороже верстальщика (по крайней мере те с кем сталкивался я).
Господа дизайнеры, учитесь верстать, тогда вы поймёте что от Вас ждут, к сожалению, иначе никак.
п.с. Деньги потраченные на хорошего дизайнера всегда отбиваются быстро назад за счет экономии времени при вёрстке и сопровождении.
Все вроде банально и понятно, но почему-то многие дизайнеры упорно не желают учиться. Уж извините.
Господа дизайнеры, учитесь верстать, тогда вы поймёте что от Вас ждут, к сожалению, иначе никак.
п.с. Деньги потраченные на хорошего дизайнера всегда отбиваются быстро назад за счет экономии времени при вёрстке и сопровождении.
Все вроде банально и понятно, но почему-то многие дизайнеры упорно не желают учиться. Уж извините.
Ага, «Я дизайнер, я так вижу, почему я так вижу, никому объяснять не хочу, я тут главный».
Поэтому я пожелаю, во что бы то ни стало, чтобы вот этот вот слой накладывался на фон не иначе, как через «Hard Light». Я так в фотошопе нарисовал, а как ты это будешь верстать — твои проблемы, ты же у нас верстальщик!
И подчеркивание ссылок я хочу чтобы было на 2 пиксела ниже! Что значит нельзя? Я же так могу нарисовать!!! Давай делай как нарисовано!
И еще почему у тебя в сверстанном макете совсем иначе шрифты выглядят? Что, не видно, что вот в этой строке у меня антиалиасинг Crisp, а вот тут — Strong? Мне надо пиксел-в пиксел, иначе вся работа не имеет смысла.
А это ты тут зачем нарисовал??? Ты что, не видел, что этот слой был скрытым, когда ты PSD от меня получил? Скрытый — значит не нужно его делать и вообще на него не смотри! Вот сверху же есть слой с сеткой, ты же его не нарисовал. Вот на скрытый слой с сеткой надо смотреть, а на другие скрытые слои не надо смотреть, ну это же так ясно!
А вот эти два блока должны дыть равной высоты! Ну и что, что там разное количество текста! Зачем ты, кстати, так сделал? Я, когда рисовал, специально подбирал текст для рыбы, чтобы красиво было. Ну значит если я смог подобрать, то и клиент сможет такой текст написать. Ну а если не сможешь, пусть тогда размер шрифта и расстояние между пробелами немножко увеличится, чтобы блоки были разной высоты, это важно, у нас же СЕТКА!
Поэтому я пожелаю, во что бы то ни стало, чтобы вот этот вот слой накладывался на фон не иначе, как через «Hard Light». Я так в фотошопе нарисовал, а как ты это будешь верстать — твои проблемы, ты же у нас верстальщик!
И подчеркивание ссылок я хочу чтобы было на 2 пиксела ниже! Что значит нельзя? Я же так могу нарисовать!!! Давай делай как нарисовано!
И еще почему у тебя в сверстанном макете совсем иначе шрифты выглядят? Что, не видно, что вот в этой строке у меня антиалиасинг Crisp, а вот тут — Strong? Мне надо пиксел-в пиксел, иначе вся работа не имеет смысла.
А это ты тут зачем нарисовал??? Ты что, не видел, что этот слой был скрытым, когда ты PSD от меня получил? Скрытый — значит не нужно его делать и вообще на него не смотри! Вот сверху же есть слой с сеткой, ты же его не нарисовал. Вот на скрытый слой с сеткой надо смотреть, а на другие скрытые слои не надо смотреть, ну это же так ясно!
А вот эти два блока должны дыть равной высоты! Ну и что, что там разное количество текста! Зачем ты, кстати, так сделал? Я, когда рисовал, специально подбирал текст для рыбы, чтобы красиво было. Ну значит если я смог подобрать, то и клиент сможет такой текст написать. Ну а если не сможешь, пусть тогда размер шрифта и расстояние между пробелами немножко увеличится, чтобы блоки были разной высоты, это важно, у нас же СЕТКА!
Поэтому я пожелаю, во что бы то ни стало, чтобы вот этот вот слой накладывался на фон не иначе, как через «Hard Light».
В браузере нет режимов наложения слоев. Либо мы сливаем слои. Либо делаем на флеше, где это есть.
И подчеркивание ссылок я хочу чтобы было на 2 пиксела ниже! Что значит нельзя? Я же так могу нарисовать!!! Давай делай как нарисовано!
Подчеркивание шрифта в браузере делается через свойство underline.Эта линия берется из набора шрифта. Если вы подготовите мне файл шрифта, в котором смешена линия на 2px -я подключу к дизайну сайта этот шрифт.
И еще почему у тебя в сверстанном макете совсем иначе шрифты выглядят? Что, не видно, что вот в этой строке у меня антиалиасинг Crisp, а вот тут — Strong? Мне надо пиксел-в пиксел, иначе вся работа не имеет смысла.
Шрифты в браузере рендерятся через движок операционной системы. Цветное Субпиксельное сглаживание патентованная технология windows. Потому Adobe не может встроить ее в Photoshop для идеального совпадения шрифта. Можете посмотреть как смотрятся сайты в Ubuntu или в MACos — у них у всех все по разному. Это общая известная проблема.
А это ты тут зачем нарисовал??? Ты что, не видел, что этот слой был скрытым, когда ты PSD от меня получил? Скрытый — значит не нужно его делать и вообще на него не смотри! Вот сверху же есть слой с сеткой, ты же его не нарисовал. Вот на скрытый слой с сеткой надо смотреть, а на другие скрытые слои не надо смотреть, ну это же так ясно!
Извини, если бы ты почистил файл от мусора мне было бы легче. Мне это не ясно ровно как и тебе ясно что такое за свойство overflow: hidden. Я думаю ты понимаешь что без твоей помощи я не справлюсь.
А вот эти два блока должны дыть равной высоты! Ну и что, что там разное количество текста! Зачем ты, кстати, так сделал? Я, когда рисовал, специально подбирал текст для рыбы, чтобы красиво было. Ну значит если я смог подобрать, то и клиент сможет такой текст написать. Ну а если не сможешь, пусть тогда размер шрифта и расстояние между пробелами немножко увеличится, чтобы блоки были разной высоты, это важно, у нас же СЕТКА!
Сайт рисуется на основе будущего контента. Если нет контента нельзя, то предположить что там будет даже с рыбой. После того как сайт наполнится контентом, мы вернемся к сетке и подгонке высоты блоков. Сейчас это будет пустая трата времени на рыбе.
Если вдруг появляются жалобы, то можно показать какими средствами это реалиуется. и Когда у жизайнера переполнится буфер, он перестанет приставать.
Вроде все можно объяснить?)
порадовал параметр Smooth на скрине Шрифты )) — На это тоже верстаку обратить внимание?
Проблема сглаживания шрифтов в FireWorks достаточно острая… и если ПРО дизайнер сдал макет где присутствует допустим не Smooth… а Crisp… пиксельПерфект курит… да и Strong себя ведет не однозначно, особенно на маленьких кеглях
Проблема сглаживания шрифтов в FireWorks достаточно острая… и если ПРО дизайнер сдал макет где присутствует допустим не Smooth… а Crisp… пиксельПерфект курит… да и Strong себя ведет не однозначно, особенно на маленьких кеглях
Объясните мне кто-нибудь, зачем веб-дизайнеру фотошоп и вообще всё разделение дизайнер-верстальщик? Он же ВЕБ-дизайнер, как было справедливо отмечено. Что дизайнеру мешает взять HTML, CSS, и дизайнить гарантированно то, что может быть отображено?
Спасибо за статью. Буду частенько давать почитать верстальщикам, прежде чем отдавать на верстку :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Письмо дизайнера — верстальщикам