Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 70
По данным требованиям рисуют большинство грамотных и опытных веб-дизайнеров. Видимо вам не повезло и ваши проекты до этого делали полиграфисты.
В принципе, в большинстве случаев используя эти правила, можно довольно быстро подготовить плохой макет к верстке.
А в целом, нужно прежде всего заказчика убедить, что подход «сдвиньте мне этот блок на пол-пикселя» — неправильный и ведет только к ужасу и страданиям.
В принципе, в большинстве случаев используя эти правила, можно довольно быстро подготовить плохой макет к верстке.
А в целом, нужно прежде всего заказчика убедить, что подход «сдвиньте мне этот блок на пол-пикселя» — неправильный и ведет только к ужасу и страданиям.
А как же самый главный недочет?
Никогда! Слышишь? НИКОГДА НЕ ИСПОЛЬЗУЙ ПОДКЛЮЧАЕМЫЙ ШРИФТ НА ВСЮ СТРАНИЦУ!
Заголовки? — Ок.
Подписи? — Ок.
Текст статьи? — Не-е-ет
Никогда! Слышишь? НИКОГДА НЕ ИСПОЛЬЗУЙ ПОДКЛЮЧАЕМЫЙ ШРИФТ НА ВСЮ СТРАНИЦУ!
Заголовки? — Ок.
Подписи? — Ок.
Текст статьи? — Не-е-ет
Можете объяснить почему?
При грамотном подборе fallback-шрифтов не вижу особых проблем с тем, чтобы основной текст страницы использовал нестандартный шрифт.
При грамотном подборе fallback-шрифтов не вижу особых проблем с тем, чтобы основной текст страницы использовал нестандартный шрифт.
Собрал в один документ на github
Кому интересно — присоединяйтесь, дополняйте
Кому интересно — присоединяйтесь, дополняйте
Позвольте уточнить, а зачем TIFF?
PS я про это screencast.com/t/pULjvu5SCgt
PS я про это screencast.com/t/pULjvu5SCgt
Это скорее всего унаследовано от полиграфии, где TIFF — обязательное условие, вместо JPG или PNG, ибо в отличии от первого не искажает (без потери качества), а от второго — может работать с CMYK палитрой. Как агроном агроному скажу, что PNG удовлетворяет потребности полностью.
Ну вот тоже 2 мысли были:
1) Для превью (но тут png / jpg, на мой взгляд, вполне удовлетворяют)
2) Для печати (но речь вроде бы как о верстке для веба)
1) Для превью (но тут png / jpg, на мой взгляд, вполне удовлетворяют)
2) Для печати (но речь вроде бы как о верстке для веба)
Вдруг верстальщик печатает макет, а потом с распечатки верстает, прикладывает к монитору для Pixel Perfect )))
(Вспомнился старый распространённый случай (баян из жизни) про DOC файлы и полиграфию)
(Вспомнился старый распространённый случай (баян из жизни) про DOC файлы и полиграфию)
Standard TIFF doesn't support layers. If a Photoshop document with layers is saved as TIFF Photoshop creates a flat TIFF image file (for compatibility) and the layer data in a separate TIFF tag. This separate TIFF tag can be compressed using RLE (run length encoding) or ZIP compression. ZIP usually results in smaller files, smaller even as if saved as PSD (where you can't choose the compression format).
wiki.panotools.org/TIFF
Только фотошоп поддерживает слои, другие программы эти слои не откроют.
Так что — это вредный совет.
ЗЫ Я не использую фотошоп из-за его томознутости и уже забыл, что он поддерживает слои, ибо другие программы не поддерживают.
Вот похожий топик, который в чем-то пересекается и в чем-то дополняет этот:
habrahabr.ru/post/173271/
habrahabr.ru/post/173271/
А есть еще и ilovepsd.ru/
Зачем градиенты в свойстве слоя делать в нормале?
Порой гораздо проще, разумнее и эффективнее кнопочку зафигачить пнг-шкой, а не css-ом долбить.
Порой гораздо проще, разумнее и эффективнее кнопочку зафигачить пнг-шкой, а не css-ом долбить.
Еще не надо забывать проверять поддерживает ли подключаемый шрифт кодировку UTF если сайт мультиязычный.
Не согласен вот с этим
Дизайнер тоже хочет оптимизировать свою работу. Например, кнопка с градиентом и прочими эффектами, я всегда использую solid color для основы, все остальное — смешиваю. И если мне понадобится кнопка другого цвета, я просто изменю цвет подложки, остальное фотошоп сделает сам. И меня мало интересует, что кто-то не умеет пользоваться пипеткой или у него слабые познания в техническом дизайне.
Вообще, тема не новая, и каждый раз одно и тоже — кто-то кому-то что-то должен :)
2) Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета.
Не должно быть никаких полупрозрачных градиентов и сложных режимов наложения типа ''multiply, screen, overlay, и т.д.".
Дизайнер тоже хочет оптимизировать свою работу. Например, кнопка с градиентом и прочими эффектами, я всегда использую solid color для основы, все остальное — смешиваю. И если мне понадобится кнопка другого цвета, я просто изменю цвет подложки, остальное фотошоп сделает сам. И меня мало интересует, что кто-то не умеет пользоваться пипеткой или у него слабые познания в техническом дизайне.
Вообще, тема не новая, и каждый раз одно и тоже — кто-то кому-то что-то должен :)
Я как-то раз писал дизайнерам длинную телегу по этому поводу, копипаста письма по ссылке: http://atmo.in/AeFD4038
К сожалению, ссылки на скриншоты в нем неактуальны.
К сожалению, ссылки на скриншоты в нем неактуальны.
Не стоит забывать, что большинство кастомных шрифтов (даже честно купленных в OTF и TTF) не имеют правильной лицензии и не могут быть использованы в виде веб-шрифтов без специального на то разрешения. Поэтому я всегда советую дизайнеру искать веб-версию шрифта (и согласовывать его покупку) перед использованием в макете.
Ну или использовать бесплатные Google Web Fonts.
Ну или использовать бесплатные Google Web Fonts.
Градиентные границы для бордера реально грамотно сверстать, так что этот пункт можно смело убирать.
Поделитесь пожалуйста как сверстать градиентные границы у таблицы? Мне очень надо.
И? Внутри ячейки таблицы нельзя использовать position: absolute. Может я чего не понимаю? Живой пример в студию!
Ну как как, вот так: habrahabr.ru/post/140760/
У дизайнера в рабочем документе может быть любой бардак, как ему добнее, хоть колор бёрн на оверлее, лишь бы он понимал, что на вёрстку он не имеет права это отдавать, и обязан подготовить адекватный структурированный темплейт перед передачей верстальщику.
3) Нежелательно использовать «слой на слое» для создание различных эффектов, типа градиента, слой должен быть один.
достаточно объединять эти слои в smart object.
Ребята, перед тем как начать верстать, нужно погрузиться в контекст задачи. Это включает в себя ревью макета, по итогам которого формируется кабздец-набор. Например, при отсутствии сетки — никаких вам пиксельперфектов. При отсутствии шрифтов — довольствуйтесь ариалом. При хитрых градиентах и тенях — понимайте, что они не будут такими даже близко.
Элементарное управление рисками.
Список требований, без указания и обсуждения причин, будет чуть более чем полностью проигнорирован.
В любом случае, дизайнер, который не знаком с ограничениями CSS — плох.
Элементарное управление рисками.
Список требований, без указания и обсуждения причин, будет чуть более чем полностью проигнорирован.
В любом случае, дизайнер, который не знаком с ограничениями CSS — плох.
Может быть некоторых я удивлю, но если в макете присутствует сетка это незначит что дизайнеры понимают для чего эта стетка нужна, они просто прочитали статью / требования и нарисовали такую сетку. Ну ключевую фразу сказал Corpsemeister «Полиграфисты»
Так, что за наезды на полиграфистов? Вы полагаете, что дизайнеры полиграфии, которые чаще всего и верстальщики полиграфии, в частности газет, журналов и книг, не знают что такое макетная сетка?
нет, я полагаю что часто заказчики заказывают дизайн сайтов у полиграфистов, которые полиграфию рисуют не всегда по стандартам, а стандарты/рекомендации создания PSD макетов сайтов, они вообше не читали, вот это я имею ввиду.
а стандарты/рекомендации создания PSD макетов сайтов, они вообше не читали
И поэтому они не знают что такое макетная сетка? (про стандарты я промолчу)
Железная логика! Поздравляю.
Я может открою секрет, но полиграфия появилась задолго до веба и очень многое перекочевало в веб из полиграфии.
… не хотел разводить холивар, но что же, так получается…
Полиграфисты верстают в 99% случаев векторе (люстра, корел, индизайн)
А вот в фотошопе занимаются только обработкой фотографий.
Я, например, как полиграфист, сайты рисую в кореле, т.е. в векторе. И думаю те кто пришел из полиграфии также работают в векторе, ибо это удобнее и качественнее, но а в век адаптивного дизайна и ретина дисплеев ещё и качественнее. И я ни когда не сохраню для верстальщика макет в PSD, ибо это одно и тоже что из PSD сохранять в JPG (аналогия надеюсь понятна) (холиварить будем?)
Теперь подумаем немного, кто же рисует макеты в фотошопе?
— это те кто ни когда не работал в полиграфии
— это фотографы/ретушировщики
— ну и остальные начинающие
Так вот те кто не знает что такое макетная сетку это кто угодно, но только не полиграфисты.
В лучшем случае 1% полиграфистов, который выросли на векторе, переходят на фотошоп.
А чаще всего те, кого вы имеете в виду — просто «школоло» в дизайне.
В Photoshop есть достаточная для веба поддержка векторных инструментов (которыми рисуются кнопочки, иконки, линии, прочие контролы) и намного более удобная, по сравнению с векторными редакторами, поддержка растров. Объясните мне, в чём плюсы использования векторных редакторов? Мониторы у всех растровые.
Спасибо за joxi.ru )
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Собранные требования к psd-макету веб-сайта