Как преобразовать дизайн Photoshop в код CSS менее чем за минуту

css-фотошоп

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

Это очень хороший вариант, особенно потому, что он позволяет нам увидеть эволюцию нашего дизайна визуально и в режиме реального времени. Вот несколько советов, как использовать эту опцию и получить максимальная производительность:

Попробуй быть точным

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

Использование руководств и правил интерфейса поможет вам создать аккуратный, чистый шаблон, в котором все его элементы идеально выровнены.

веб-фотошоп

Настроить все характеристики каждого элемента

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

  • Размер
  • Положение
  • Цвет обводки
  • Цвет заливки (включая градиенты)
  • Падающая тень

Из текстовых слоев мы можем получить следующие значения:

  • Семейство шрифтов
  • Размер шрифта
  • Толщина шрифта
  • Высота линии
  • Подчеркнутый
  • просачивание
  • Надстрочный
  • Нижний индекс
  • Выравнивание текста

Помните об этом и установите каждое из этих значений, чтобы обеспечить стиль, который вы ищете.

Работа с группами слоев

Эта функция переводит нашу работу, организованную по двум типам классов, по одному для каждой группы, которая включает слои фигур или текста, и по классу для каждого слоя одного из этих типов. Каждый класс группы будет представлять родительский элемент div, который будет содержать дочерние элементы div и будет соответствовать слоям, вставленным в каждую группу. Таким образом, верхнее и левое значения дочерних контейнеров будут установлены со ссылкой на родительский контейнер. Следует иметь в виду, что эта опция недоступна для смарт-объектов и не будет применяться более чем к одному слою одновременно, если они не сгруппированы.

Шаги по преобразованию

После того, как вы создали свой макет, настроили каждый элемент и сгруппировали их по группам, вам нужно будет выполнить только следующие шаги:

 

  • Перейдите на панель слоев и выберите один из этих двух вариантов:
    • Щелкните правой кнопкой мыши слой формы или текста или группу слоев и выберите Копировать CSS в контекстном меню.
    • Выберите слой с фигурами или текстом или группу слоев, затем выберите параметр Копировать CSS в меню панели «Слои».
  • Вставьте код в документ таблицы стилей и примените его к своим страницам через html5.

    CSS-Photoshop1

    CSS-Photoshop2


Содержание статьи соответствует нашим принципам редакционная этика. Чтобы сообщить об ошибке, нажмите здесь.

Будьте первым, чтобы комментировать

Оставьте свой комментарий

Ваш электронный адрес не будет опубликован.

*

*

  1. Ответственный за данные: Мигель Анхель Гатон
  2. Назначение данных: контроль спама, управление комментариями.
  3. Легитимация: ваше согласие
  4. Передача данных: данные не будут переданы третьим лицам, кроме как по закону.
  5. Хранение данных: база данных, размещенная в Occentus Networks (ЕС)
  6. Права: в любое время вы можете ограничить, восстановить и удалить свою информацию.