d0bad0b0d0ba d0bfd0b5d180d0b5d0b2d0b5d181d182d0b8 psd d184d0b0d0b9d0bb d0b2 css d0bad0bed0b4 d181 d0bfd0bed0bcd0bed189d18cd18e photoshop d0bf 6610f6328994b

Многие веб-дизайнеры, перед тем, как создать сайт — делают макет в Photoshop, чтобы потом видно было что и как верстать. Однако подбор стилей и цветов занимает много времени, поэтому сегодня я хотел бы рассказать о бесплатном плагине для Photoshop, который позволяет переводить слой или группу слоёв сразу в CSS код. Повторюсь, что плагин абсолютно бесплатен и в данный момент умеет переводить в CSS следующее: текстовые слои, групповые слои, размер, тени, свет, цвет, градиент, падающая тень, края и др. Собственно вот и пример результата, который вы можете получить:

d0bad0b0d0ba d0bfd0b5d180d0b5d0b2d0b5d181d182d0b8 psd d184d0b0d0b9d0bb d0b2 css d0bad0bed0b4 d181 d0bfd0bed0bcd0bed189d18cd18e photoshop d0bf 6610f632d0f50

Полный список того, что позволяет делать этот плагин:

d0bad0b0d0ba d0bfd0b5d180d0b5d0b2d0b5d181d182d0b8 psd d184d0b0d0b9d0bb d0b2 css d0bad0bed0b4 d181 d0bfd0bed0bcd0bed189d18cd18e photoshop d0bf 6610f63342d0a

1) Переходим на сайт CSS3PS.

d0bad0b0d0ba d0bfd0b5d180d0b5d0b2d0b5d181d182d0b8 psd d184d0b0d0b9d0bb d0b2 css d0bad0bed0b4 d181 d0bfd0bed0bcd0bed189d18cd18e photoshop d0bf 6610f633bc4fd

2) Собственно на скриншоте ниже вы можете увидеть сам процесс перевода:

d0bad0b0d0ba d0bfd0b5d180d0b5d0b2d0b5d181d182d0b8 psd d184d0b0d0b9d0bb d0b2 css d0bad0bed0b4 d181 d0bfd0bed0bcd0bed189d18cd18e photoshop d0bf 6610f63436c28

3) Нажимаем на кнопку в правом верхнем углу «Free Download».

Как перевести PSD файл в CSS код с помощью Photoshop плагина

4) Выбираем версию своего Photoshop. На момент написания статьи версии для Photoshop CS 6 — не наблюдается, но ожидаем в будущем и её.

d0bad0b0d0ba d0bfd0b5d180d0b5d0b2d0b5d181d182d0b8 psd d184d0b0d0b9d0bb d0b2 css d0bad0bed0b4 d181 d0bfd0bed0bcd0bed189d18cd18e photoshop d0bf 6610f634d4c1c