Веб-дизайн и веб-разработка для компаний и частных лиц в Чешской Республике.
+420 608 713 199

Получение CSS правил из слоев PSD

Как известно, любой сайт, разработка которого ведется с нуля, проходит как минимум три этапа:

  • разработка графического макета (зачастую в качестве инструмента выступает Photoshop)
  • статическая верстка (html/css)
  • натяжка на движок (языки php, RoR, python, asp и др.)

Каждый из этапов выполняется соответствующим специалистом. В небольших и средних компаниях статическую верстку может выполнять либо дизайнер, либо программист. Обычно стоит задача получить качественную верстку, близкую по внешнему виду к PSD. И если вырезание картинок, выделение фона, выбор цветов, шрифтов, размеров – все эти задачи не самые сложные для опытного верстальщика, то подбор теней, переливов, скруглений и некоторых других правил в CSS превращаются в сущую муку (особенно если заказчик настаивает на максимальной похожести html/css на psd). С переливом (css gradient) мы как-то справлялись с помощью бесплатного сервиса Ultimate CSS Gradient Generator от ColorZilla, куда можно просто залить изображение с градиентом и получить на выходе перелив цвета. То подбор теней все же заставлял несколько попотеть.

И так было бы и до сих пор, если бы замечательные молодые разработчики из Праги не выпустили свой не менее замечательный продукт под названием CSS Hat. Если коротко, то CSS Hat экономит время верстальщку, позволяя быстрее конвертировать PSD в CSS. Вот перечень свойств слоев PSD, которые CSS Hat умеет переводить в CSS:

  • Gradient/Solid color fill layer (заливка цветом или переливом)
  • Drop Shadow (тень)
  • Inner Shadow (внутренняя тень)
  • Inner Glow (внутреннее свечение)
  • Outer Glow (внешнее свечение)
  • Opacity (прозрачность)
  • Gradient Overlay (наложение градиента)
  • Text Layers (текстовые слои)
  • Color Overlay (наложение цвета)
  • Stroke (обводка)
  • Border Radius (радиус углов)

Но и это еще не всё, CSS Hat умеет генерировать не только обычный (“чистый”) CSS, но и форматы для препроцессоров Less, SASS и Stylus. Более того, CSS Hat умеет также генерировать градиенты в SVG для IE9.

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

Все еще сомневаетесь в нужности CSS Hat? Тогда посмотрите это небольшое видео о том как быстро можно получить CSS из готового PSD:

Как видно из видео CSS Hat работает под MacOS. У вас Windows? Не спешите закрывать страницу, поскольку CSS Hat работает и под этой OS тоже.

Кстати, говоря, наш сайт тоже сделан с применением CSS Hat (например, вот эти ярлычки слева, или кнопочка в статье). Выглядят они идентично изображению в PSD. Да-да, а вот вручную сделать подобное в CSS весьма затруднительно. По этой причине многие дизайнеры (верстальщики), которые еще не знают о существовании CSS Hat, зачастую используют изображения вместо CSS. Но у изображения есть ряд недостатков: они не масштабируются, имеют размер больше, чем несколько правил в CSS, при неумелом использовании Photoshop’а изображения могут быть искажены при сохранении.

У CSS3, справедливости ради, есть и свои недостатки: не полная поддержка в старых браузерах. Однако, говоря, на чистоту: зачем поддерживать нерадивых пользователей, которым лень обновиться, и тормозить тем самым прогресс? Кстати, даже такая крупная корпорация как Google планомерно отказывается от устаревших версий IE и уже сейчас не поддерживает все версии старее IE8. Понятно, что если уж такая корпорация прибегает к подобным решениям, то малым и средним компаниям и подавно не стоит тратить финансы и людские ресурсы на поддержку устаревшего ПО. Хотя, конечно же решать вам.

Если после прочтения этой статьи вы убедились, что CSS Hat может стать незаменимым инструментом в вашей работе, то переходите на сайт разработчика и смело покупайте. Стоимость продукта всего $29.99. Согласитесь, не огромные деньги за ежедневную экономию времени? Если, скажем, час вашей работы стоит $15, то уже после двух сэкономленных часов продукт окупится. К тому же, если он вам по какой-то причине не понравится, вы можете вернуть за него деньги.

Купить CSS Hat

Интересуют наши услуги?
Наймите нас