Копирование CSS из слоев
Команда «Копировать CSS» обеспечивает создание свойств каскадных таблиц стилей (CSS) из слоев фигуры или текста. Код CSS копируется в буфер обмена и может быть вставлен в таблицу стилей. Для фигур захватываются следующие значения:
- размер;
- положение;
- цвет обводки;
- цвет заливки (включая градиенты);
- тень.
Для текстовых слоев команда Копировать CSS также захватывает следующие значения:
- гарнитура шрифта;
- размер шрифта;
- толщина шрифта;
- высота строки;
- подчеркивание;
- перечеркивание;
- надстрочный индекс;
- подстрочный индекс;
- выравнивание текста.
Копирование CSS из группы слоев, содержащей фигуры или текст, приводит к созданию класса для каждого слоя, так же как и класса Group. Класс Group представляет родительский блок div, содержащий дочерние блоки div, которые соответствуют слоям в группе. Верхние и левые значения дочерних блоков div связаны с родительским блоком div.
Команда «Копировать CSS» не работает со смарт-объектами или при выборе нескольких слоев фигур/текста, которые не распределены по группам.
- Щелкните правой кнопкой мыши слой фигуры/текста или группу слоев и выберите «Копировать CSS» в контекстном меню.
- Выделите слой фигуры/текста или группу слоев и выберите «Копировать CSS» в меню панели «Слои».
Как экспортировать файл в svg из photoshop?
Я использую Vector Magic. Загружаешь в него растровую картинку и преобразовываешь в вектор. Результат зависит от простоты растровой картинки. Таким образом можно нелегально использовать платные иконки из Iconfinder или похожих сервисов.
Только этим способом и получилось сохранить svg без потери качества. Честно, не ожидал, что способ окажется настолько простым и эффективным. До этого экспортировал без смарт-объекта
Фотошоп для верстальщика. Как работать с макетом и откуда брать данные?
Данная статья посвящается всем тем, кто только-только взялся за изучение верстки макетов, и тем, кто пока плохо разбирается в Adobe Photoshop. Моя цель рассказать откуда брать данные из PSD-файлов и научить приёмам, которые будут полезны всем верстальщикам.
Как вырезать и сохранять картинки?
Простые картинки, которые состоят из геометрических фигур, лучше всего описывать посредством CSS. Такой метод не будет нагружать сайт, а значит скорость загрузки не пострадает.
Если такой возможности нет, нам потребуется вырезать картинки из макета. Но стоит помнить, что некоторые картинки стоит сохранять по одной, а другие — лучше вывести в отдельный спрайт. Например, социальные иконки. Их я советую размещать в одной картинке. Выглядеть это будет примерно так:
Итак, чтобы вырезать картинку из макета, надо, во-первых, найти слой с картинкой.
Во-вторых, в окне «Слои» в нужном слое нажать на правую кнопку мыши и выбрать пункт «Создать дубликат слоя…». В диалоговом окне «Дубликат слоя» выбрать в выпадающем списке пункт «Новый».
Картинку перенесет в пустой документ по длине и ширине схожим с размерами прошлого макета. Искать в ней картинку бывает довольно проблематично, особенно, если она прозрачная. Чтобы этого не делать достаточно зажать Ctrl и кликнуть по иконке нужного слоя с картинкой. Он выделится пунктиром.
Далее в левой панели необходимо выбрать инструмент «Рамка». Весь документ затемнится, кроме нужной картинки.
Жмем Enter. Наша картинка готова.
Сохраняем ее в режиме web. Чтобы так сохранить в Photoshop CC надо нажать на Файл -> Экспортировать -> Сохранить для Web (старая версия). Для более ранних версий Photoshop можно было сохранить еще проще: Файл -> Сохранить для Web
Как правило, картинки сохраняют в JPEG и PNG-24.
Сохранение SVG картинок в Photophop
Чтобы сохранить картинку в формате SVG, достаточно кликнуть правой кнопкой мыши и кликнуть на «Экспортировать как…»
Далее появится диалоговое окно, в котором необходимо установить Формат SVG и нажать на «Экспортировать все». Важно, чтобы картинка в документе была одна.
Информация о font-family, font-size, line-height, color
Чтобы найти данные по этим трем компонентам, достаточно дважды кликнуть на слой с текстом, чтобы он стал активным. Как правило, информацию о font-family и font-size можно найти в верхней панели, а данные о line-height в окне «Символ». Обычно он располагается в правой части, но если его пока там нет, достаточно открыть его через Окно -> Символ.
Информация о margin и padding
Чтобы узнать сколько пикселей необходимо задать для отступа, достаточно включить Инструмент «Прямоугольная область» и потянуть курсор вниз (или влево), чтобы посмотреть расстояние в пикселях.
Этот метод я использую, как правило, чтобы узнать о высоте или ширине определенного элемента. Но для того, чтобы соблюсти pixel-perfect всего макета, обычно я использую расширение для Chrome с одноименным названием PerfectPixel. Чтобы его установить, нажмите здесь.
Информация об opacity
Довольно часто веб-дизайнеры делают элементы прозрачными. В css за это отвечает свойство opacity. К счастью, в Photoshop можно увидеть процент непрозрачности. Для этого достаточно кликнуть на слой, в котором применяется прозрачность и посмотреть в верхний правый угол окна «Слои». На скриншоте видно, что прямоугольный элемент имеет прозрачность в 90%. Следовательно, в css следует записать следующее: opacity: 0.9
Горячие клавиши Photoshop для верстака
В процессе верстки я применяю «горячие клавиши», которые значительно ускоряют работу в Photoshop. Список актуален для всех версий:
Ctrl + «-« — уменьшить масштаб
Ctrl + «+» — увеличить масштаб
Ctrl + «1» — масштаб 100%
Ctrl + J — создать дубликат слоя
Ctrl + [ — уменьшить размер кисти
Ctrl + ] — увеличить размер кисти
Ctrl + Alt + Z — шаг назад (отмена действия)
Ctrl + Shift + Z — шаг вперед (вернуть назад отменённое действие)
Ctrl + Alt + I — диалоговое окно «Размер изображения»
P.S. Скриншоты, приводимые в статье сделаны в программе Photoshop CC.
Тема оказалась довольно объемной и уместить все в рамках одной статьи — сложно. Но я для вас подготовила видеоролик, в котором я все подробно объясняю:
С Photoshop CC 2018 копирую svg картинку(пкм), а в Illustrator вставляет только текст?
Пробовал что угодно, ничего не помагает, вставляет текст для веб-сайта, скорее всего.
почему другим путём не сохраняю картинку с фотошопа, потому что нужно очень много картинок перетаскиват ьв иллюстратор и банально займёт очень много времени.
Помогите пожалуйста решить проблему
- Вопрос задан более трёх лет назад
- 97 просмотров
2 комментария
Средний 2 комментария
Сергей delphinpro @delphinpro
Копировать SVG — это копирование кода SVG. Логично, что вставляется этот код текстом.
Копировать SVG, вставить в новый файл (в блокноте, в IDE), открыть файл в люстре. Я так делаю.
navalgn @navalgn Автор вопроса
Сергей delphinpro, Парень с Мака правда скидал видео как он так делал и вставляется картинка, у него всё работает