Экспорт из Photoshop в SVG

Недавно я столкнулась с проблемой, которая заставила меня изрядно потрудиться, рыская по просторам интернета в поисках решения. Мне нужно было экспортировать элементы дизайна, нарисованные в Adobe Photoshop в формат SVG. Я думаю, многие сталкивались с такой проблемой и вам будет интересно узнать, как же я вышла из сложившейся ситуации.

Начну с того, что формат SVG – это формат масштабируемой векторной графики, входящий в подмножество расширяемого языка разметки XML, который в свою очередь используется в web программировании и мобильных разработках. Если сказать своими словами, то SVG файл хранит в себе программный код изображения, а XML, взаимодействуя с HTML или определенными языками программирования, позволяют этот код преобразовывать в это самое изображение в окне браузера или в окне мобильного приложения. Таким образом, можно использовать векторную графику в дизайне сайтов или приложений. А это дает огромные преимущества – ведь, как вы все знаете, векторная графика может, как угодно масштабироваться без потери качества.

В Adobe Photoshop есть возможность создания векторной графики с помощью Фигур и инструмента Перо. Направление дизайна, которое активно использует данный тип графики, называется Flat дизайн. Чтобы в браузере элементы дизайна смотрелись так же выгодно, как и в исходном файле и при этом свободно масштабировались без потери качества логично будет сохранить их в векторном формате, иначе, зачем вся затея? Векторный объект, сохраненный в форматах jpeg или png, воспринимается как растровая графика. Поэтому логично будет сохранять векторные объекты в формат

Оговорюсь, что в этот формат так же можно сохранять объекты с растровыми элементами. Например, векторная фигура с параметром наложения «Тень». Но в итоге данный объект будет масштабироваться с потерей качества, как элемент растровой графики. Так что, рекомендую сохранять в формат SVG именно векторную графику.

Дополнение автора: Подход, описанный в статье относится к версиям Photoshop ниже CS5. Если ваша версия программы выше, за более детальной информацией обращайтесь к новой статье — Экспорт изображений в SVG для мобильных приложений

Еще одна проблема состоит в том, что

Положив руку на сердце, скажу, что сначала я искала более простой путь, а именно всевозможные онлайн — конвертеры, например, как этот — http://www.online-convert.com/ru . Но работа с ним не принесла положительного результата. В случае с черно-белой картинкой – все было хорошо, а вот если нужно было сохранить цвет – начинались глюки.

Поэтому, вот вам мой более сложный путь экспорта объектов из Photoshop

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

Для начала сохраним весь документ в формат PDF. Файл – Сохранить как… выбрать формат Photoshop PDF. Появится диалоговое окно, в котором я рекомендую изменить лишь одну настройку. Вкладка Сжатие – Сжатие: Не показывать.

Теперь, можно смело открывать полученный PDF документ в Adobe Illustrator. Если там есть текст, то он будет преобразован в кривые.

Как видите, все объекты распределены по слоям и разбиты на группы, каждый контур редактируемый. На примере контур одной из кнопок выделен с помощью инструмента

Уже из Adobe Illustrator вы можете сохранять объекты по отдельности или все вместе в формат SVG.

Файл – Сохранить как… выбрать формат SVG.

В появившемся диалоговом окне я выбираю следующие настройки:

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

Надеюсь, данная статья оказалась для вас полезной и вы сможете в дальнейшем, без проблем создавать дизайн качественно масштабируемых проектов.

(Visited 44 791 times, 39 visits today)

Экспорт графики для вёрстки из Photoshop

Гостевая статья Юрия Матюхина, front end разработчика с опытом верстки и программирования более трех лет. Ведет блог разработчика интерфейсов и автор автопрефиксера онлайн.

Когда я только начинал верстать, мой коллега нарезал графику слайсами. Мне это казалось очень крутым, мне даже хотелось научиться этому. Но я так и не разобрался с этим инструментом и показалось как-то неудобно. А теперь и не нужно. Есть способ лучше, которым можно экспортировать

Сохраняем в SVG

Выберите слой или папку, кликните правой кнопкой мыши на нем и выберите пункт «Export as…».

После этого в выпадающем списке можно выбрать SVG.

Автоматический экспорт

Сохранять таким образом каждый слой конечно можно, но не очень эффективно. Хотя я раньше так и делал . Но теперь есть способ удобнее, о котором я сейчас расскажу.

1. Открываем фотошоп (обязательно чтобы он был СС >= 2014 года)
2. Открываем PSD файл или создаем его сами
3. Активируем автоматический экспорт через меню File > Generate > Image assets.

1. Выбираем нужный нам слой, переименовываем его понятным именем и приписываем в конце расширение (к примеру: logo.png)

1. Проверяем что в папке с PSD файлом появилась еще одна папка заканчивающаяся на -assets, в котором будет лежать наш файл logo.png.

Дополнительные параметры

В названии слоя можно задавать дополнительные параметры экспорта, такие как:

1. Несколько форматов — moonlight.jpg, moonlight_b.png, moonlight_c.png
2. Указать папку — [название папки]/moonlight.jpg
3. Особые параметры размера и сжатия

Если мы сохраняем JPG, то мы можем указать степень сжатия:

• moonlight.jpg5
• moonlight.jpg50%

Определять размеры исходящего файла. Например:

• 200% moonlight.jpg
• 300 x 200 moonlight.jpg

Для PNG можно так-же указывать размеры и качество:

• moonlight.png24 (24 битный PNG)
• 42% moonlight.png

Так же можно указывать комплексные названия:

Обычно дизайнеры присылают макеты сразу же под ретину (которые нужно уменьшать в 2 раза), но перед этим можно выгрузить от туда все изображения в двух размерах: 100% под ретину и 50% под стандартные мониторы.
Пример: 50% moonlight.png, moonlight.png.

Подробнее об (Оптимизации верстки под retina дисплеи) я уже писал в своем блоге. Пункт про плагин Retinize It можно пропустить

Экспорт документов, слоев и монтажных областей в Photoshop

Можно задать следующие параметры в диалоговом окне Экспортировать как:

Формат: выберите PNG, JPG, GIF или SVG.

Настройка формата: для PNG укажите, экспортировать ресурсы с включенным параметром «Прозрачность» (32 бита) или выполнять экспорт изображений меньшего размера (8 бит). Для JPEG укажите требуемое качество изображения (0–100 %). Изображения GIF по умолчанию прозрачны. При экспорте ресурсов PNG учитывайте следующее.

• При выборе параметра «Прозрачность» будут созданы 32-битные ресурсы PNG.
• Выбор параметра «Файл меньшего размера» позволит создать 8-битные ресурсы PNG.
• Если снять оба флажка, приложение будет создавать 24-битные ресурсы PNG.

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

Масштаб: выберите, насколько большим должно быть экспортированное изображение. Этот параметр полезен для экспорта ресурсов большего или меньшего разрешения. Изменение масштаба влияет на размер изображения.

Ресамплинг: выберите метод повторной выборки. Повторной выборкой называется изменение объема данных изображения при изменении его размеров в пикселах либо разрешения, обычно при изменении размера изображения.

• Билинейная: этот метод добавляет новые пикселы, рассчитывая среднее значение цвета окружающих пикселов. Он дает результат среднего качества.
• Бикубическая: более медленный, но и более точный метод, основанный на анализе значений цвета окружающих пикселов. За счет использования более сложных вычислений бикубическая повторная выборка дает более плавные цветовые переходы, чем билинейная повторная выборка или выполняемая по соседним пикселам.
• Бикубическая, глаже: хороший метод для увеличения изображений на основе бикубической интерполяции, разработанный специально для получения более гладких результатов.
• Бикубическая, четче: удобный метод для уменьшения размера изображения на основе бикубической интерполяции при увеличении резкости. Этот метод позволяет сохранить детали изображения, подвергнутого повторной выборке. Если интерполяция «Бикубическая, четче» делает слишком резкими некоторые области изображения, попробуйте воспользоваться бикубической интерполяцией.
• Бикубическая автоматическая: автоматически выбирает метод бикубической повторной выборки, подходящий для изображения.
• По соседним: быстрый, но менее точный метод, который повторяет пикселы изображения. Этот метод используется в иллюстрациях, содержащих несглаженные края. Он сохраняет четкие края и позволяет создать файл уменьшенного размера. Однако этот метод может создать зубчатые края, которые станут заметными при масштабировании изображения или проведении множества операций с выделением.
• Сохранить детали: при изменении размера изображения этот метод в первую очередь пытается сохранить детали и четкость изображения.

Размер холста: если для ресурса отводится область с определенной высотой и шириной, укажите эти значения в качестве размера холста. Область предварительного просмотра в диалоговом окне «Экспортировать как…» обновляется: изображение располагается по центру в этих границах. Этот параметр полезен в некоторых ситуациях, например:

• Выполняется экспорт значков разных размеров, которые требуется расположить по центру в окошках 50х50 пикселов.
• Выполняется экспорт баннерных изображений, размер которых больше или меньше требуемых значений.

Если изображение превышает размер холста, оно обрезается до заданных значений ширины и высоты. Щелкните Сбросить, чтобы вернуть значения, заданные в параметре Размер изображения.

Метаданные: укажите, следует ли включать метаданные (информацию об авторских правах и контактные данные) в экспортируемые ресурсы.

Цветовое пространство: укажите следующее.

• Требуется ли преобразовывать экспортируемые ресурсы в цветовое пространство sRGB. По умолчанию этот параметр выбран.
• Требуется ли внедрять цветовые профили в экспортируемые ресурсы.

Как открыть svg в фотошопе

Масштабируемая векторная графика (SVG) — это спецификация для изображений, которая предлагает преимущества для онлайн-просмотра и хранения на устройствах с ограниченной памятью. Разработанная Консорциумом World Wide Web (W3C), эта спецификация использует файлы XML для определения внешнего вида, рендеринга и поведения изображений.Большинство интернет-браузеров и графических приложений поддерживают файлы SVG или планируют сделать это в будущих выпусках. Поскольку Adobe Photoshop является растровым редактором, он не поддерживает напрямую SVG, который является векторным форматом. Рекомендуемое решение — открыть файл SVG в Adobe Illustrator, который является векторным редактором, и сохранить его в формате, который распознает Photoshop, например EPS.

Вещи, которые вам понадобятся

• Adobe Illustrator установлен и настроен на вашем компьютере
• Adobe Photoshop установлен и настроен на вашем компьютере

Шаг 1

Запустите Adobe Illustrator. Откройте файл SVG, который вы хотите открыть в Adobe Photoshop.

Шаг 2

Выберите «Сохранить как» в меню «Файл». Выберите «Illustrator EPS» в меню «Сохранить как тип». Нажмите «Сохранить».

Шаг 3

Нажмите «ОК» в диалоговом окне «Параметры EPS». Вам не нужно менять какие-либо настройки по умолчанию.

Шаг 4

Запустите Adobe Photoshop. Откройте файл EPS, который вы сохранили в Illustrator. Нажмите «ОК» в диалоговом окне «Растеризация общего формата EPS».

Adobe обеспечивает поддержку формата SVG файла с помощью Adobe Illustrator, однако люди, которые используют Adobe Creative Suite может потребовать открытия такого файла через другие приложения Adobe Photoshop, как, что невозможно без преобразования файла SVG в первую очередь. Проще решение этой проблемы может быть просто использовать инструмент стороннего производителя, известного какSVG Kit, который позволяет напрямую открывать файлы SVG , используя различные Adobe Suite , приложения , такие как Adobe в InDesign Server, Adobe Photoshop, Adobe InCopy и Adobe Bridge.Этот вектор графический инструмент совместим как с Windows, и компьютерах Mac, в том числе 32-разрядные, так и 64-разрядных операционных систем. Давайте посмотрим, как вы можете использовать SVG Kit, чтобы открыть SVG файлы непосредственно с помощью Adobe Photoshop.

Открыть SVG файлов непосредственно в Adobe InDesign, Photoshop и других приложений

После того, как SVG Kit установлен, вы будете иметь возможность приобрести необходимые функциональные возможности для открытия SVG файлов с помощью InDesign или Photoshop. Все, что вам нужно сделать, это просто запустить InDesign или Photoshop и выберите файл SVG (как показано ниже).

Работа с типичным качеством изображения в Photoshop

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

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

SVG Kit работает с операционными системами под управлением Adobe CS3 для CS6, за исключением 64-битных операционных систем Windows, так как они совместимы с версией CS4 к CS6. Одна лицензия SVG Kit стоит $ 99.

название говорит само за себя. Есть ли способ открыть / импортировать файл SVG в Photoshop CS2 или CS3? Я нахожусь на Mac OS X, но предпочитаю кросс-платформенные решения. Illustrator может открывать файлы SVG, поэтому мне кажется странным, что Photoshop не может. Я понимаю, что Illustrator основан на векторах, но Photoshop также имеет ограниченные векторные возможности.

9 ответов

вы можете открыть его в Inkscape (это бесплатно,inkscape.org) и экспортировать как PNG оттуда, с размером вы предпочитаете.

Adobe потеряла всякий интерес к SVG, когда они купили Flash. Лучше всего открыть его в Illustrator и преобразовать в нечто другое, что Photoshop может проглотить.

для использования SVG изображений в Photoshop CS3 попробуйте «SVG Kit for Adobe Creative Suite» изsvg.scand.com и это вся история!

да, SVG Kit для Adobe Creative Suite только для Photoshop / Elements составляет $ 100! Adobe CS5 по-прежнему не открывает эти файлы. Лучший вариант сейчас-скачать Inkscape (бесплатно) и экспортировать его в другой формат.

SVG Kit для Adobe Creative Suite имеет бесплатную пробную версию в любом случае, так почему бы не попробовать? Кроме того, он поддерживает CS5.5, CS5, CS4 и CS3, и вам не нужно конвертировать SVG в другие форматы.

вы можете использовать GIMP для открытия и растеризации SVG, а затем Сохранить как PSD. Gimp также может импортировать пути, но я не уверен, как их сохранить, чтобы сохранить векторную графику в photoshop.

Я всегда просто помещаю [ctrl+shft+p] в Illustrator, а затем копирую и вставляю в photoshop как смарт-объект. Его быстрый и грязный, но он работает.

Я знаю, что вы спрашивали о CS2 или CS3, но Photoshop CC 2015.1 теперь поддерживает открытие и импорт статических SVG файлов.

кроме того, GIMP (free и open source) может открывать их. затем вы можете экспортировать его или даже скопировать-вставить как растеризованное разрешение по вашему выбору.

Как открыть svg в фотошопе

Масштабируемая векторная графика (SVG) — это спецификация для изображений, которая предлагает преимущества для онлайн-просмотра и хранения на устройствах с ограниченной памятью. Разработанная Консорциумом World Wide Web (W3C), эта спецификация использует файлы XML для определения внешнего вида, рендеринга и поведения изображений.Большинство интернет-браузеров и графических приложений поддерживают файлы SVG или планируют сделать это в будущих выпусках. Поскольку Adobe Photoshop является растровым редактором, он не поддерживает напрямую SVG, который является векторным форматом. Рекомендуемое решение — открыть файл SVG в Adobe Illustrator, который является векторным редактором, и сохранить его в формате, который распознает Photoshop, например EPS.

Вещи, которые вам понадобятся

• Adobe Illustrator установлен и настроен на вашем компьютере
• Adobe Photoshop установлен и настроен на вашем компьютере

Шаг 1

Запустите Adobe Illustrator. Откройте файл SVG, который вы хотите открыть в Adobe Photoshop.

Шаг 2

Выберите «Сохранить как» в меню «Файл». Выберите «Illustrator EPS» в меню «Сохранить как тип». Нажмите «Сохранить».

Шаг 3

Нажмите «ОК» в диалоговом окне «Параметры EPS». Вам не нужно менять какие-либо настройки по умолчанию.

Шаг 4

Запустите Adobe Photoshop. Откройте файл EPS, который вы сохранили в Illustrator. Нажмите «ОК» в диалоговом окне «Растеризация общего формата EPS».

Adobe обеспечивает поддержку формата SVG файла с помощью Adobe Illustrator, однако люди, которые используют Adobe Creative Suite может потребовать открытия такого файла через другие приложения Adobe Photoshop, как, что невозможно без преобразования файла SVG в первую очередь. Проще решение этой проблемы может быть просто использовать инструмент стороннего производителя, известного какSVG Kit, который позволяет напрямую открывать файлы SVG , используя различные Adobe Suite , приложения , такие как Adobe в InDesign Server, Adobe Photoshop, Adobe InCopy и Adobe Bridge.Этот вектор графический инструмент совместим как с Windows, и компьютерах Mac, в том числе 32-разрядные, так и 64-разрядных операционных систем. Давайте посмотрим, как вы можете использовать SVG Kit, чтобы открыть SVG файлы непосредственно с помощью Adobe Photoshop.

Открыть SVG файлов непосредственно в Adobe InDesign, Photoshop и других приложений

После того, как SVG Kit установлен, вы будете иметь возможность приобрести необходимые функциональные возможности для открытия SVG файлов с помощью InDesign или Photoshop. Все, что вам нужно сделать, это просто запустить InDesign или Photoshop и выберите файл SVG (как показано ниже).

Работа с типичным качеством изображения в Photoshop

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

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

SVG Kit работает с операционными системами под управлением Adobe CS3 для CS6, за исключением 64-битных операционных систем Windows, так как они совместимы с версией CS4 к CS6. Одна лицензия SVG Kit стоит $ 99.

название говорит само за себя. Есть ли способ открыть / импортировать файл SVG в Photoshop CS2 или CS3? Я нахожусь на Mac OS X, но предпочитаю кросс-платформенные решения. Illustrator может открывать файлы SVG, поэтому мне кажется странным, что Photoshop не может. Я понимаю, что Illustrator основан на векторах, но Photoshop также имеет ограниченные векторные возможности.

9 ответов

вы можете открыть его в Inkscape (это бесплатно,inkscape.org) и экспортировать как PNG оттуда, с размером вы предпочитаете.

Adobe потеряла всякий интерес к SVG, когда они купили Flash. Лучше всего открыть его в Illustrator и преобразовать в нечто другое, что Photoshop может проглотить.

для использования SVG изображений в Photoshop CS3 попробуйте «SVG Kit for Adobe Creative Suite» изsvg.scand.com и это вся история!

да, SVG Kit для Adobe Creative Suite только для Photoshop / Elements составляет $ 100! Adobe CS5 по-прежнему не открывает эти файлы. Лучший вариант сейчас-скачать Inkscape (бесплатно) и экспортировать его в другой формат.

SVG Kit для Adobe Creative Suite имеет бесплатную пробную версию в любом случае, так почему бы не попробовать? Кроме того, он поддерживает CS5.5, CS5, CS4 и CS3, и вам не нужно конвертировать SVG в другие форматы.

вы можете использовать GIMP для открытия и растеризации SVG, а затем Сохранить как PSD. Gimp также может импортировать пути, но я не уверен, как их сохранить, чтобы сохранить векторную графику в photoshop.

Я всегда просто помещаю [ctrl+shft+p] в Illustrator, а затем копирую и вставляю в photoshop как смарт-объект. Его быстрый и грязный, но он работает.

Я знаю, что вы спрашивали о CS2 или CS3, но Photoshop CC 2015.1 теперь поддерживает открытие и импорт статических SVG файлов.

кроме того, GIMP (free и open source) может открывать их. затем вы можете экспортировать его или даже скопировать-вставить как растеризованное разрешение по вашему выбору.

Не используйте русифицированный фотошоп — Блог HTML Academy

Не используйте русифицированный Фотошоп. Подавляющая часть уроков написана для англоязычного интерфейса, на русский язык интерфейс переведён с ошибками. Например, настройка автовыбора инструмента «перемещение» имеет выпадающий список (выбирать по клику слой или группу слоёв) в русском переводе в некоторых версиях перепутана (устанавливаем её на «слой» — выбирается группа слоёв, устанавливаем на «группа» — выбирается слой), а в некоторых содержит два одинаковых пункта. Далее в тексте я рассуждаю об англоязычном интерфейсе.

Убедитесь, что Фотошоп правильно настроен: выпадающее меню Edit → Color Settings (вызывается Shift + Ctrl + K), выставьте для RGB вариант sRGB. Это то цветовое пространство, «в котором работает весь веб».

Дополнительная мелкая настройка: Edit → Preferences → Units & Rulers (для OS X пункт Preferences — в выпадающем меню с названием программы), в выпадающих списках для «Rulers» и «Type» нужно выбрать единицы измерения «Pixels».

Интерфейс

Под выпадающим меню длинная горизонтальная область — в ней отображаются настройки активного инструмента.

Панель со всеми инструментами слева, прочие панели справа или «плавают».

Внешний вид Фотошоп настраивается: можно перетаскивать панели, включать и отключать их видимость (в выпадающем меню Window), сворачивать и разворачивать (двойной клик по названию панели), сворачивать в иконки.

Создав рабочее окружение с нужными панелями и скрыв всё ненужное, можно сохранить вариант получившегося интерфейса. Список рабочих окружений — в верхней правой части окна, в нижней части списка есть пункт «New Workspace…» — нажимаем, именуем, сохраняем.

Необходимые и желательные для верстальщика панели:

1. Layers — панель слоёв — папки и слои макета.
2. Character — данные о выделенном текстовом слое или тексте (шрифт, цвет, размер, интерлиньяж и другое).

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

Все лишние панели закрыть, ибо занимают место. Спасибо, кэп!

Как верстальщику работать в Фотошопе

Если вы правша, держите левую руку на левой части клавиатуры, чтобы легко доставать до Shift, Ctrl, Alt и Пробел.

Включите линейки (выпадающее меню View → Rules, поставить галочку (оно же — Ctrl + R)), убедитесь, что они показывают пиксели (правой кнопкой мыши кликнуть на линейке, выбрать пиксели).

Ориентация по документу

Tab — показать или скрыть все панели.

Зажать Пробел, «схватить» мышью за документ и перетаскивать — перемещение в рамках масштаба. Зажатие кнопки временно активирует инструмент Hand Tool.

Ctrl + 0 — вписать макет в рабочую область.

Ctrl + 1 — установка масштаба 100%.

Зажать H, зажать левую кнопку мыши — документ масштабируется так, чтоб был виден целиком, можно перетащить рамку (вы держите левую кнопку нажатой, просто тащите мышь) в любое место и отпустить — окажитесь в этой области с тем масштабом, который был ранее. Архиудобно для перемещения по увеличенному документу! Почти как зажатие Пробел, но быстрее при перемещении на «большие расстояния».

Зажать Alt, крутить колесо мыши — масштабирование в обе стороны вокруг того места, где расположен курсор.

Выбор слоёв

Можно поискать нужный слой в панели слоёв, но есть способ быстрее.

Зажать Ctrl и кликнуть на слой. Зажатие кнопки временно активирует инструмент Move Tool. Работает в случае выбора любого инструмента кроме Hand Tool (по зажатию Ctrl включается инструмент масштабирования) и самого Move Tool. Чтобы это работало, убедитесь, что настройки инструмента Move Tool (это панель под выпадающими меню, когда инструмент выбран) выставлены следующие: Auto-Select — галка стоит, в выпадающем списке рядом — Layer.

Показать и скрыть

Показать или скрыть какие-либо слои просто — кликнуть на иконке «глаз» этого слоя в панели слоёв (или с клавиатуры: Ctrl + ,).

Alt + клик по иконке «глаз» в панели слоёв — показать только один этот слой, прочее скрыть, повторный клик, чтобы вернуть статус кво.

Информация о слоях

Двойной клик по миниатюре текстового слоя — редактирование слоя, выставляйте текстовой курсор в нужное место — узнаёте шрифт, размер, интерлиньяж, трансформации, кернинг, спейсинг и цвет. Если параметры Horizontally Scale или Vertically Scale отличаются от 100%, нужно экспериментировать с CSS3-свойством transform у блока, в который включать только этот текст и налаживать взаимодействие дизайнера и верстальщика, если это контентный текст.

Двойной клик по миниатюре слоя с цветом, градиентом, заливкой текстурой — вызов модального окна с данными слоя.

Если у слоя справа есть курсивная надпись «fx» (и иконка, открывающая список), значит у него есть эффекты. Кликайте на открывающую иконку — увидите список эффектов (можно отключить их показ — кликаем на иконки глаза рядом с эффектами), двойной клик по эффекту вызовет панель с настройками эффекта.

Лирическое отступление: в верхней левой части панели слоёв есть выпадающий список — это режим наложения слоя. Если его значение отличается от Normal, то опять налаживаем взаимодействие дизайнера и верстальщика, так как слои, имеющие наложение в режиме отличном от Normal и не являющиеся часть сложных коллажей/картинок (целиком сохраняются в единое изображение), сверстать корректно (как в макете), или нереально вовсе, или требует дополнительных трудозатрат с вашей стороны.

Цвет в макете: инструмент Eyedropper Tool (в настройках указать Sample Size → Point Sample). Кликаем по произвольному пикселю, в панели цвета (под всеми инструментами) видим цвет пикселя.

Размер в макете: инструмент Ruler Tool — нажать, тащить мышью, отпустить — в панели настроек (под выпадающим меню, параметр L1) увидите измеренное расстояние. Если тащить с зажатым Shift, измеритель перемещается строго горизонтально, строго вертикально или под 45° (для верстальщика не актуально).

Можно использовать Rectangle Marquee Tool, создавая выделение (размер выделения будет показан рядом с выделением), если Фотошоп версии CS6 и новее. Убрать получившееся после измерения выделение — Ctrl + D.

Прочие полезные верстальщику техники

Показать и скрыть сетку, направляющие, габариты трансформации, нарезку — Ctrl + H.

Отмена и повтор последнего действия — Ctrl + Z(снова спасибо, Кэп!)

Отмена действий последовательно — Ctrl + Alt + Z

Команда из выпадающего списка Image → Trim — подрезка прозрачных или однотонных пикселей (удобно, если нужно получить слой на прозрачном фоне: копируем слой в новый документ, подрезаем, экспортируем).

Узнать истинный габарит слоя с полупрозрачными эффектами — правый клик по названию слоя → Convert to Smart Object. После этого габарит трансформации показывает размер с эффектами.

Обрезать макет до габаритов какого-либо изображения для его экспорта — инструмент Crop Tool.

F12 — восстановить макет в том виде, в котором он сейчас сохранён на диске.

Экспорт графики для веба

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

Если векторный объект нарисован в самом Фотошопе, то чтобы экспортировать SVG, выберите в панели слоёв векторный слой, вызовите контекстное меню и используйте команду File → Export As. В открывшемся окне экспорта можно выбрать SVG-формат. На этапе экспорта отмасштабируйте экспортируемую картинку — убедитесь, что в результате получится именно вектор, а не растровая вставка в векторный файл.

Если же SVG создан в стороннем векторном редакторе (например, в Adobe Illustrator) и добавлен в Фотошоп как смарт-объект, то для его экспорта нужно вызвать на слое контекстное меню и выбрать пункт Export Contents.

Большие фотографические (многоцветные) изображения экспортируются как JPEG, качество 60‒95.

Мелкие картинки, вписывающиеся в 256 цветов, которым не нужна полупрозрачность или она бинарная — PNG-8.

Любые картинки где нужна полупрозрачность или отсутствие искажений — PNG-24.

Заключение

Предлагаю тему к обсуждению. Какими приёмами и клавиатурными сокращениями пользуетесь вы?

Как преобразовать текст Photoshop в SVG [Quicktip]

С появлением экранов высокой четкости веб-дизайнеры теперь должны быть уверены, что используемые ими изображения оптимизированы для HD . Пропуск этого процесса может сделать веб-сайт размытым или пиксельным, что оставит не очень хорошее впечатление на посетителей. Один из лучших способов справиться с HD-экранами — использовать Vector Graphic , когда это возможно.

Vector Graphic масштабируется до любого размера, поэтому будет отлично смотреться на экране HD.В этом посте мы хотели бы поделиться советом о том, как преобразовать текст Photoshop в формат SVG . Если у вас есть, например, текстовый логотип в вашем дизайне, вы, вероятно, найдете этот совет очень полезным.

Рекомендуемая литература: Scalable Vector Graphic Series

Этап Photoshop

В этом примере мы будем использовать простой текстовый логотип, созданный с использованием семейства шрифтов Pacifico (снимок экрана).

На вкладке Layers в Photoshop щелкните правой кнопкой мыши текстовый слой и выберите Convert to Shape (снимок экрана).

Затем сохраните файл в формате Photoshop EPS .

Этап иллюстратора

Откройте файл EPS в Adobe Illustrator . Вы должны увидеть, что текст теперь является векторным объектом.

На этом этапе вы можете внести несколько корректировок, например удалить ненужные слои, изменить цвета фона или изменить размер. Чтобы изменить размер документа в Illustrator, просто зайдите в File> Document Setup и выберите Edit Artboards.

Вы можете использовать мышь для изменения размера монтажной области или более точно указать размер, заполнив поля Width (W) и Height (H) .

Затем сохраните файл в формате SVG , который используется по умолчанию. Вот и все.

Заключение

Преобразование шрифта в Shape — это для обеспечения совместимости на нескольких компьютерах — при удаленной работе разные шрифты, установленные в разных системах, могут вызвать ошибку «Шрифт отсутствует». Это также может происходить с разными версиями Adobe Illustrator или Photoshop. Преобразование текста в SVG поможет минимизировать или устранить проблемы, связанные с совместимостью.

Как открыть SVG в Photoshop с помощью SVG Kit для Adobe Creative Suite

Adobe обеспечивает поддержку формата файла SVG с помощью Adobe Illustrator, однако людям, использующим Adobe Creative Suite, может потребоваться открыть такой файл в других приложениях Adobe, таких как Photoshop, что невозможно без предварительного преобразования файла SVG. Более простым решением этой проблемы может быть просто использование стороннего инструмента, известного как SVG Kit , который позволяет напрямую открывать файлы SVG с помощью различных приложений Adobe Suite, таких как Adobe InDesign Server, Adobe Photoshop, Adobe InCopy и Adobe Bridge. .Этот инструмент векторной графики совместим как с компьютерами Windows, так и с Mac, включая 32-разрядные и 64-разрядные операционные системы. Давайте посмотрим, как можно использовать SVG Kit для открытия файлов SVG напрямую с помощью Adobe Photoshop.

Открытие файлов SVG непосредственно в Adobe InDesign, Photoshop и других приложениях

После установки SVG Kit вы сможете получить необходимые функции для открытия файлов SVG с помощью InDesign или Photoshop. Все, что вам нужно сделать, это просто запустить InDesign или Photoshop и выбрать файл SVG (как показано ниже).

Работа с изображениями типичного качества в Photoshop

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

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

SVG Kit работает с операционными системами, работающими под управлением Adobe CS3 — CS6, за исключением 64-разрядных операционных систем Windows, поскольку они совместимы с версиями CS4 — CS6.Одна лицензия на SVG Kit стоит 99 долларов.

Перейти к загрузке SVG Kit

иконок сохранения — 18 463 бесплатных векторных иконок

  M   x   y 
(или)
  м   dx   dy 
 

  L   x   y 
 (или)
   л   dx   dy 
 

  В   x 
 (или)
   h   dx 
 
   В   л 
 (или)
   v   dy 
 

  Z 
 (или)
   z 
 

  C   x1   y1 ,  x2   y2 ,  x   y 
 (или)
   c   dx1   dy1 ,  dx2   dy2 ,  dx   dy 
 

  S   x2   y2 ,  x   y 
 (или)
   с   dx2   dy2 ,  dx   dy 
 

  Q   x1   y1 ,  x   y 
 (или)
   q   dx1   dy1 ,  dx   dy 
 

  T   x   y 
 (или)
   т   dx   dy 
 

  A   rx   ry   поворот по оси x   большой дуговый флаг   sweep-flag   x   y 
   a   rx   ry   поворот по оси x   большой дуговый флаг   sweep-flag   dx   dy