Форма авторизации
Главная Пособия / уроки Как работать с Extract в Brackets (Preview)

Как работать с Extract в Brackets (Preview)

Интеграция Extract в Brackets приносит силу извлечения в легком, современном редакторе кода. Используя Extract в Brackets (Preview), вы можете вытащить информацию о конструкции из чистого PSD файла, с минимальным CSS через контекстные подсказки кода. Эта информация о дизайне включает в себя цвета, шрифты, градиенты и информацию измерения. Вы также можете извлечь слои в виде изображений, использовать информацию из PSD и определить переменные препроцессора, и легко получить размеры / расстояния между объектами. Вся эта информация извлекается в контексте вашего кода.

Начало работы с Extract в Brackets (Preview)


Extract в Brackets (Preview) доступна либо как часть Brackets и Extract в Brackets паке (доступного в релизе v.1.0) или как отдельное расширение. Если вы видите значок Extract в правой панели панели инструментов, вы можете быть уверены, что он установлен.


Иконка Extract в Brackets

Когда вы в первый раз щелкните значок Extract, вас просят принять лицензионное соглашение с конечным пользователем (EULA). Затем вам необходимо будет набраться немного опыта перед началом работы, который поможет вам использовать Extract в Brackets в дальнейшем с вашими файлами. Ознакомление включает в себя образец PSD, который можно использовать, чтобы опробовать некоторые особенности и возможности расширения Extract.


Extract в Brackets знакомительный вариант

Когда вы закончили изучение началы работы с PSD, вы можете начать использовать Extract с вашим собственным PSD файлом.
- Нажмите кнопку Open PSD и подписать с помощью своего аккаунта Creative Cloud.
- Загрузите PSD, перетащив его в область файлов.
Примечание: Если у вас нет учетной записи Creative Cloud, вы можете создать ее бесплатно.


Загрузка PSD файла

Когда PSD закончит загрузку, вы можете открыть его, нажав на него. Теперь все готово для того, чтобы использовать Extract в Brackets.


PSD предпросмотр

Примечание: Если у вас есть какие-то PSD файлы, которые уже хранятся в вашем аккаунте Creative Cloud, вы увидите их в файлах Extract в Brackets.

Работа с Extract в Brackets (Preview)


Извлечение CSS из одного слоя

Extract в Brackets считывает информацию CSS стилей из выбранных слоев PSD. Затем он дает имена и значения свойств. По мере ввода Extract в Brackets фильтры код намекает соответствовать тому, что вы уже набрали. Выполните следующие действия, чтобы запустить извлечения стилей CSS:

- Откройте файл CSS. Препроцессоры работают как Sass или LESS.
- Выберите слой в PSD.
- Убедитесь, что курсор находится внутри правила CSS. Например, .my-rule { ..курсор здесь.. }.
- Начните ввод, и вы увидите список соответствующих подсказок кода. Вы также можете нажать Ctrl + Space, чтобы показать все возможные значения в подсказках кода.


Подсказки кода

Поддерживаются следующие свойства CSS:
font (shorthand)
font-family
font-size
font-weight
line-height
text-shadow
box-shadow
opacity
transform
background (image)
background-color
border-radius
border-style
border-width
width
height
свойства позиционирования top/left/bottom/right; position relative к документу
свойства цвета; both solid colors и gradients

Извлечение изображений из одного слоя
Вы можете извлечь слои в PSD в качестве актива изображения для следующих применений:
- В качестве фонового изображения в CSS; background: url(mylayer.png)
- В качестве элемента изображения в HTML

Извлечение изображения как CSS
- Выберите слой.
- Начните вводить background: или Ctrl + Click, чтобы открыть полный список кодов хинтов.
- Выберите значение свойства background. Нажмите клавишу Enter, чтобы подтвердить.


Подтверждение значения собственного фона.

Синяя ограничительная рамка является действующим текстовым полем. По отношению к файлу CSS с которым вы работаете, введите место, где вы хотите сохранить актив.
Укажите имя файла и расширение файла. Расширение файла определяет формат, в котором извлекается (JPEG, PNG, или SVG).


Укажите имя файла активов и расширение

Нажмите клавишу Enter, чтобы загрузить и сохранить файл.

Извлечение изображения как HTML
- Выберите слой.
- Начните вводить IMG в теге изображения.
- Выберите атрибут SRC и нажмите Enter, чтобы подтвердить.


Подтвердите значение атрибута "SRC"


Синяя ограничительная рамка является действующим текстовым полем. По отношению к файлу CSS с которым вы работаете, введите место, где вы хотите сохранить актив.
Укажите имя файла и расширение файла. Расширение файла определяет формат, в котором извлекается (JPEG, PNG, или SVG).


Ввод имя файла активов и расширение


Нажмите клавишу Enter, чтобы загрузить и сохранить файл.

Советы для извлечения изображений
- Вам потребуется подключение к Интернету для извлечения изображений.
- Путь файла по умолчанию начинается с последнего использованного папке.
- Если файл уже существует, будет предложено переименовать новый файл или перезаписать существующий файл.
- Кроме нажатия Enter, вы можете использовать) сочетание клавиш в CSS и > комбинации клавиш "в HTML, чтобы выйти из этого режима и начать загрузку файла.
- Вы также можете нажать клавишу Tab, чтобы переместить курсор за пределы поля Имя файла и сохранить печатать. Extract загружает файл в фоновом режиме.

Размер Мера и смещения
В то время когда вы создавали макет дизайна, вы, возможно, должны знать размеры слоев или измерительной информации об относительной позиции одного слоя относительно другого. Чтобы получить размер и положение информацию, выполните следующие действия:
- Выберите слой.
- Extract отобразит синее всплывающее диалоговое окно, отображающее ширину, высоту, и координаты слоя X/Y. Вы также увидите черные всплывающие диалоги, которые показывают горизонтальные и вертикальные смещения слоев относительно друг друга.


Ширина, высота и координаты слоя



Расстояния между слоями

С помощью Shift + Нажмите, чтобы выбрать один из двух различных слоев.

На заметку: Для изменения единиц от пикселя к процентам, нажмите % в синей подсказке.

Поддержка предпроцессора
Это предварительный просмотр Extract в Brackets, который обеспечивает начальную поддержку препроцессора файлов (LESS и Sass). В этой версии, вы можете извлечь значения из выбранного слоя при определении переменных. Выполните следующие действия для использования этой функции:
- Откройте .scss, .less или .sass файл.
- Выберите слой.
- Определите переменную, например $base-font:
- После: вы увидите список значений из выбранного слоя, со свойствами, перечисленных справа.
- Нажмите клавишу Enter, чтобы вставить значение.


Вставка значения свойств

Извлечение изображений из нескольких слоев
Вам возможно потребуется сгладить слои из PSD для создания изображений для вашего веб-дизайна. Extract в Brackets позволяет выбрать несколько слоев и извлекает те слои, как единое, сведенное изображение. Чтобы сгладить слои, выполните следующие действия:
- Откройте CSS или HTML файл.
- Выберите несколько слоев с использованием Shift + Нажмите на PSD просмотра или в панели слоев.


Выбор несколько слоев

Открыть код в CSS (внутри правило) или в HTML (в IMG тега).
Extract в Brackets дает возможность предварительного просмотра из уплощенных слоев.


Предварительный просмотр плоскими слоями

Зазайте для актива имя файла и расширение файла. Расширение файла определяет формат, в котором актив извлекается (JPEG, PNG, или SVG).


Укажите имя файла и расширение для актива

Нажмите клавишу Enter, чтобы загрузить и сохранить файл.





Комментарии к материалу
Всего комментариев: 1

animous |14.06.2015, 09:51
Здравствуйте, у меня глюк с шрифтами, не распознает русский язык в названиях слоев.В чем проблема?
avatar