Копировать css и svg в фотошопе что это
Перейти к содержимому

Копировать css и svg в фотошопе что это

Копирование CSS из слоев

Команда «Копировать CSS» обеспечивает создание свойств каскадных таблиц стилей (CSS) из слоев фигуры или текста. Код CSS копируется в буфер обмена и может быть вставлен в таблицу стилей. Для фигур захватываются следующие значения:

  • размер;
  • положение;
  • цвет обводки;
  • цвет заливки (включая градиенты);
  • тень.

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

  • гарнитура шрифта;
  • размер шрифта;
  • толщина шрифта;
  • высота строки;
  • подчеркивание;
  • перечеркивание;
  • надстрочный индекс;
  • подстрочный индекс;
  • выравнивание текста.

Копирование CSS из группы слоев, содержащей фигуры или текст, приводит к созданию класса для каждого слоя, так же как и класса Group. Класс Group представляет родительский блок div, содержащий дочерние блоки div, которые соответствуют слоям в группе. Верхние и левые значения дочерних блоков div связаны с родительским блоком div.

Команда «Копировать CSS» не работает со смарт-объектами или при выборе нескольких слоев фигур/текста, которые не распределены по группам.

  • Щелкните правой кнопкой мыши слой фигуры/текста или группу слоев и выберите «Копировать CSS» в контекстном меню.
  • Выделите слой фигуры/текста или группу слоев и выберите «Копировать CSS» в меню панели «Слои».

С Photoshop CC 2018 копирую svg картинку(пкм), а в Illustrator вставляет только текст?

Пробовал что угодно, ничего не помагает, вставляет текст для веб-сайта, скорее всего.
почему другим путём не сохраняю картинку с фотошопа, потому что нужно очень много картинок перетаскиват ьв иллюстратор и банально займёт очень много времени.
Помогите пожалуйста решить проблему

  • Вопрос задан более трёх лет назад
  • 96 просмотров

2 комментария

Средний 2 комментария

delphinpro

Сергей delphinpro @delphinpro

Копировать SVG — это копирование кода SVG. Логично, что вставляется этот код текстом.

Копировать SVG, вставить в новый файл (в блокноте, в IDE), открыть файл в люстре. Я так делаю.

navalgn @navalgn Автор вопроса

Сергей delphinpro, Парень с Мака правда скидал видео как он так делал и вставляется картинка, у него всё работает

Фотошоп для верстальщика. Как работать с макетом и откуда брать данные?

Дизайнер скинул макет. Что дальше?

Дизайнер скинул макет. Что дальше?

Данная статья посвящается всем тем, кто только-только взялся за изучение верстки макетов, и тем, кто пока плохо разбирается в Adobe Photoshop. Моя цель рассказать откуда брать данные из PSD-файлов и научить приёмам, которые будут полезны всем верстальщикам.

Как вырезать и сохранять картинки?

Простые картинки, которые состоят из геометрических фигур, лучше всего описывать посредством CSS. Такой метод не будет нагружать сайт, а значит скорость загрузки не пострадает.

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

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

Photoshop

Во-вторых, в окне «Слои» в нужном слое нажать на правую кнопку мыши и выбрать пункт «Создать дубликат слоя…». В диалоговом окне «Дубликат слоя» выбрать в выпадающем списке пункт «Новый».

Photoshop

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

Photoshop

Далее в левой панели необходимо выбрать инструмент «Рамка». Весь документ затемнится, кроме нужной картинки.

Photoshop

Жмем 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]

Многофункциональный графический редактор фирмы Adobe. В основном предназначен для работы с растровыми изображениями, но имеет и векторные инструменты.

119 вопросов
Конкурсные
Неотвеченные

  • Конкурсные 0
  • Неотвеченные
  • Цитируемые
  • Рейтинг
  • Неотвеченные (мои метки)

9k показов

Аналог Photoshop для Ubuntu

Какой есть аналог Photoshop для Ubuntu, главное чтоб мог открывать psd и работать с слоями. Сейчас использую в качестве альтернативы assets.adobe.com, но с 28,06 самая главная функция Extract .

задан 13 июн 2016 в 11:12
10k показов

Открыть файл Sketch на Windows

Ребят, как открыть sketch-формат на Windows? Есть программуля avocode, но там нужно ставить доп. плагин, который на этой странице у меня выдает только версию для OS X.

задан 5 сен 2016 в 13:40
2k показов

Векторная или растровая графика для 2D игры?

Делаю 2D игру на движке Unity, определился, что анимация для персонажей будет скелетной и реализовано с помощью расширения Anime2D, но вот где рисовать сами спрайты озадачился. Будет это растровое .

задан 10 июн 2017 в 8:32
104 показа

Как вырезать из псд пнг с эффектами?

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

задан 18 авг 2016 в 21:22
256 показов

Photoshop, копирование цвета в hex

В фотошопе, если выбрать слой текста, и потом правой кнопкой вызвать меню и выбрать «Копировать CSS», то цвет копируется в формате rgb. Подскажите, как настроить фотошоп, чтобы цвет копировался в hex?

задан 31 июл 2017 в 10:32
2k показов

Зачем Pixel perfect верстка

Зачем писать макет pixel perfect? Я так понимаю для этого используется Position: relative И отрицательные margin. Это же от одной до трех лишних строк иногда на каждый блок! Это, наверное, плохо .

задан 19 ноя 2019 в 22:44
1k показов

Как рисовать в фотошопе 8-битные картинки?

Мне нужно нарисовать декорацию для 8-битной игры, но все картинки получаются с глубиной цвета 32 бита. Пробовал менять разные настройки в фотошопе (изображение- режим- 8бит/канал) но картинки все .

задан 15 сен 2020 в 16:33
17k показов

Правильно отдать логотип?

Клиент попросил сделать логотип, он будет использоваться на сайте, визитках, документах и тд. Логотип простой, текстовый(цифры). Попросил еще в векторном формате прислать. Вопрос: 1. Какие размеры .

задан 11 июл 2017 в 7:34
12k показов

Пипетка в фотошопе неправильно определяет цвет

Пипетка в Фотошопе неправильно определяет цвет:
задан 7 апр 2017 в 19:10

Картинка с белым фоном при экспорте

Проблема в следующем: есть макет в psd, в нём содержится логотип, в самом макете он с прозрачным фоном, но если я начинаю его экспортировать в PNG, фон становится белым. Также если открыть этот .

задан 6 сен 2016 в 14:45
514 показов

Как получить координаты слоя (svg) в Photoshop?

Имеется ли возможность получить координаты определенного слоя в Photoshop(про сохранить в svg и далее извлечь из файла — знаю), чтобы далее применить их в SVG на сайте, например такого формата: 119 30.

задан 13 фев 2018 в 11:33
552 показа

Массовое удаление белого фона в tiff

Есть порядка 5000 съемок с беспилотника, но проблема в том, что фон не прозрачный, а белый. Есть ли инструмент для автоматического массового удаления фона (заменить на прозрачный) ?

задан 7 дек 2017 в 6:42
2k показов

Как вырезать svg из макета?

Как правильно вырезать svg из psd макета? Через Export as. можно выбрать формат сохранение svg, а на деле сохраняет картинку которая портится при масштабировании. Читал что можно через File > .

задан 6 авг 2016 в 20:05
449 показов

Как сделать условный вид сверху у фотографии? [закрыт]

Добрый день! Я делаю небольшую 2д игру на HTML5 и у меня есть такое изображение: Тут изображена пушка на колёсиках, но если вы заметили, то пушка немного наклонена вперёд, то есть такое ощущение, что .

задан 23 июл 2016 в 14:48
176 показов

Разное отображение фона при смене разрешения экрана

Подскажите, пожалуйста, заказчик прислал через psd-файл фон для сайта. На нём чёрный фон, на котором есть некоторые изображения (узоры). Когда я ставлю у себя на мониторе разрешение 1680×1050, всё .

задан 29 сен 2014 в 5:39
15 30 50 на странице

    Важное на Мете

Связанные метки

Подписаться на ленту

Лента вопросов с наивысшим рейтингом по меткам [photoshop]

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.28.1620

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *