С момента появления версии CS6 Adobe реализовала в Photoshop очень полезную возможность для макета и разработки веб-дизайна. Операция очень просто и, особенно, быстро. С помощью приложения мы сможем создавать каскадные таблицы стилей, взяв за основу нашу фигуру и текстовые слои. Процедура так же проста, как разработка нашего макета, копирование версии кода наших элементов и вставка ее на наш лист.
Это очень хороший вариант, особенно потому, что он позволяет нам увидеть эволюцию нашего дизайна визуально и в режиме реального времени. Вот несколько советов, как использовать эту опцию и получить максимальная производительность:
Попробуй быть точным
Для получения профессионального результата рекомендуется учитывать размеры и пропорции вашего участка. Установите значения ширины и высоты разрабатываемого шаблона и примените их к своему макету. Когда вы копируете код CSS, мы будем размещать каждый элемент, взяв за основу расстояние в пикселях между каждым элементом и краями холста. Также примите во внимание размеры и иерархические причины, которые вы собираетесь включить в свой дизайн, включая выравнивание каждого элемента и расстояние между ними, чтобы обеспечить максимальную читаемость для ваших пользователей.
Использование руководств и правил интерфейса поможет вам создать аккуратный, чистый шаблон, в котором все его элементы идеально выровнены.
Настроить все характеристики каждого элемента
Возможность скопировать код CSS дает нам возможность разрабатывать наш сайт с большой точностью, используя слои формы и текста. Содержимое каждого слоя будет скопировано в буфер обмена, и мы сможем быстро вставить его в нашу таблицу стилей. Из слоев-фигур запишите значения следующих параметров:
- Размер
- Положение
- Цвет обводки
- Цвет заливки (включая градиенты)
- Падающая тень
Из текстовых слоев мы можем получить следующие значения:
- Семейство шрифтов
- Размер шрифта
- Толщина шрифта
- Высота линии
- Подчеркнутый
- просачивание
- Надстрочный
- Нижний индекс
- Выравнивание текста
Помните об этом и установите каждое из этих значений, чтобы обеспечить стиль, который вы ищете.
Работа с группами слоев
Эта функция переводит нашу работу, организованную по двум типам классов, по одному для каждой группы, которая включает слои фигур или текста, и по классу для каждого слоя одного из этих типов. Каждый класс группы будет представлять родительский элемент div, который будет содержать дочерние элементы div и будет соответствовать слоям, вставленным в каждую группу. Таким образом, верхнее и левое значения дочерних контейнеров будут установлены со ссылкой на родительский контейнер. Следует иметь в виду, что эта опция недоступна для смарт-объектов и не будет применяться более чем к одному слою одновременно, если они не сгруппированы.
Шаги по преобразованию
После того, как вы создали свой макет, настроили каждый элемент и сгруппировали их по группам, вам нужно будет выполнить только следующие шаги:
- Перейдите на панель слоев и выберите один из этих двух вариантов:
- Щелкните правой кнопкой мыши слой формы или текста или группу слоев и выберите Копировать CSS в контекстном меню.
- Выберите слой с фигурами или текстом или группу слоев, затем выберите параметр Копировать CSS в меню панели «Слои».
-
Вставьте код в документ таблицы стилей и примените его к своим страницам через html5.
