Как сделать svg в фотошопе
Создание SVG-спрайта вручную
Если у вас небольшой проект, вы не используете (не умеете?) сборщики, то собрать SVG-спрайт можно вручную. Дело это несложное.
Сохраняем SVG-иконки. Для этого в Photoshop можно нажать «ctrl+shift+alt+w» или зайти в меню «Файл», затем выбрать «Экспортировать» и наконец «Экспортировать как…».
В правом верхнем углу открывшегося окна выбираем «SVG» и сохраняем.
Далее создаём файл спрайта, например, «sprite.svg». Открываем его и наши иконки в редакторе.
Удаляем всё лишнее. Информацию в xmlns, ширину, высоту (viewBox оставляем), id, взятый из названия слоя в Photoshop. Стили тоже можно удалить и прописать их в CSS-файле. Получается что-то типа этого:
В sprite.svg создаём тег SVG, дописываем ему display: none.
Внутрь тега SVG переносим код наших иконок.
Каждой иконке задаём id, а тег SVG самой иконки заменяем на тег «symbol».
Всё! Вставляете на страницу SVG удобным для вас способом (из-за display: none отображаться он не будет), в нужном месте, для того чтобы использовать иконку, пишете следующий код:
Экспорт графики для вёрстки из Photoshop
Гостевая статья Юрия Матюхина, front end разработчика с опытом верстки и программирования более трех лет. Ведет блог разработчика интерфейсов и автор автопрефиксера онлайн.
Когда я только начинал верстать, мой коллега нарезал графику слайсами. Мне это казалось очень крутым, мне даже хотелось научиться этому. Но я так и не разобрался с этим инструментом и показалось как-то неудобно. А теперь и не нужно. Есть способ лучше, которым можно экспортировать SVG, PNG, JPG, GIF сразу в нескольких размерах, что позволяет сразу адаптировать графику под ретина дисплеи.
Сохраняем в SVG
Выберите слой или папку, кликните правой кнопкой мыши на нем и выберите пункт «Export as…».
После этого в выпадающем списке можно выбрать SVG.
Автоматический экспорт
Сохранять таким образом каждый слой конечно можно, но не очень эффективно. Хотя я раньше так и делал 
. Но теперь есть способ удобнее, о котором я сейчас расскажу.
Дополнительные параметры
В названии слоя можно задавать дополнительные параметры экспорта, такие как:
Если мы сохраняем JPG, то мы можем указать степень сжатия:
Определять размеры исходящего файла. Например:
Для PNG можно так-же указывать размеры и качество:
Так же можно указывать комплексные названия:
120% moonlight.jpg, 42% moonlight.png24, 100×100 moonlight_2.jpg90%, 250% moonlight.gif
Подробнее об (Оптимизации верстки под retina дисплеи) я уже писал в своем блоге. Пункт про плагин Retinize It можно пропустить
Добавить комментарий Отменить ответ
Для полноценной работы по созданию сайтов вам обязательно необходим хороший удобный редактор. Есть очень много платных продуктов для этого, но нам бы хотелось выделить бесплатный очень функциональный и в то же время простой в использовании редактор – Codelobster PHP Edition. Давайте рассмотрим некоторые важные возможности и преимущества этой программы: Весь код подсвечивается разными […]
Рассмотрим наиболее часто встречающиеся проблемы, с которыми сталкивается верстальщик при работе с psd-макетами
В современном Вебе в слово семантика вкладывают очень много. Но что означает семантика? Почему она так важна?
Бесплатный скрипт для Photoshop: экспорт векторных слоев из PSD в SVG
— Windows или Mac OSX;
— Photoshop CS5, CS6;
— Adobe Illustrator.
Как использовать скрипт
1. Скачать скрипт по инструкции, описанной ниже.
2. Перетянуть в свою папку скриптов Photoshop («Adobe Photoshop/presets/scripts»).
3. (ОПЦИОНАЛЬНО) Перейти в Photoshop и сделать для скрипта горячую клавишу «Edit» menu –> Keyboard Shortcuts и потом в File –> Scripts –> PS to SVG. Как вариант, можно выбрать сочетание из CMD+ALT+E.
4. В файле PSD в конце векторных слоев, которые будут экспортироваться, нужно дописать префикс «.svg». Например, слой под названием “Sky” преобразуется в “Sky.svg”.
5. После переименования слоев достаточно активировать скрипт горячей клавишей или через меню File –> Scripts –> PS to SVG. И файлы будут в той же папке, где хранятся PSD.
Примечание: чтобы скрипт работал быстрее, перед его активацией нужно открыть Illustrator.
Проблемы, которые встречаются:
— скрипт не совместим с новыми версиями Photoshop CC;
— дополнительно к SVG, скрипт создает и файлы AI (но их можно просто удалить);
— скрипт работает только с векторными слоями, не с группами слоев.
Если скрипт не работает:
— убедитесь, что Вы помещаете «.svg» (DOT SVG) в конце названия слоя, который нужно экспортировать. А также, что каждый из слоев — в единственном экземпляре;
— проверьте, запущен и работает ли Illustrator;
— перед началом процесса убедитесь, что все экспортируемые слои являются замкнутыми векторами.
В некоторых случаях при экспорте исходников может наблюдаться искажение цвета. Тогда в скрипт после строки:
Конвертация файлов SVG в PNG с помощью Adobe Photoshop
Узнайте, как использовать Photoshop как конвертер для преобразования файлов SVG в файлы PNG всего несколькими щелчками мыши.
Что такое SVG-файлы?
Аббревиатура SVG означает «масштабируемая векторная графика». Это масштабируемый файл открытого формата, который определяет графику в формате Extensible Markup Language, или XML. Масштабируемость означает, что графика в формате SVG обычно используется в Интернете, так как сохраняет свое качество и в очень большом, и в очень маленьком размере.
Поскольку SVG — это векторный графический формат, Photoshop автоматически конвертирует файл в растровое изображение при импорте. Если вы используете Adobe Illustrator, то по-прежнему сможете работать с файлом в векторном формате.
Что такое PNG-файлы?
Аббревиатура PNG означает «переносимая сетевая графика». PNG — это растровый графический формат, позволяющий выполнять сжатие данных без потерь. Это означает, что исходные данные поддаются полному восстановлению только с использованием сжатых данных. Файлы PNG идеально подходят для рисунков, текстовых файлов и простой графики.
PNG, как растровые графические файлы, обладают меньшим размером, используют меньше системной памяти, быстрее загружаются и более удобны в использовании, чем файлы SVG. Их недостаток заключается в том, что они не сохраняют качество при увеличении или уменьшении масштаба. При использовании файла PNG в размере, превышающем размер исходного файла, будут заметны отдельные пиксели.
Типичный верстальщик
Фотошоп для верстальщика. Как работать с макетом и откуда брать данные?
Данная статья посвящается всем тем, кто только-только взялся за изучение верстки макетов, и тем, кто пока плохо разбирается в Adobe Photoshop. Моя цель рассказать откуда брать данные из PSD-файлов и научить приёмам, которые будут полезны всем верстальщикам.
Как вырезать и сохранять картинки?
Простые картинки, которые состоят из геометрических фигур, лучше всего описывать посредством CSS. Такой метод не будет нагружать сайт, а значит скорость загрузки не пострадает.
Если такой возможности нет, нам потребуется вырезать картинки из макета. Но стоит помнить, что некоторые картинки стоит сохранять по одной, а другие — лучше вывести в отдельный спрайт. Например, социальные иконки. Их я советую размещать в одной картинке. Выглядеть это будет примерно так:
Итак, чтобы вырезать картинку из макета, надо, во-первых, найти слой с картинкой.
Во-вторых, в окне «Слои» в нужном слое нажать на правую кнопку мыши и выбрать пункт «Создать дубликат слоя…». В диалоговом окне «Дубликат слоя» выбрать в выпадающем списке пункт «Новый».
Картинку перенесет в пустой документ по длине и ширине схожим с размерами прошлого макета. Искать в ней картинку бывает довольно проблематично, особенно, если она прозрачная. Чтобы этого не делать достаточно зажать Ctrl и кликнуть по иконке нужного слоя с картинкой. Он выделится пунктиром.
Далее в левой панели необходимо выбрать инструмент «Рамка». Весь документ затемнится, кроме нужной картинки.
Жмем Enter. Наша картинка готова.
Как правило, картинки сохраняют в JPEG и PNG-24.
Сохранение SVG картинок в Photophop
Чтобы сохранить картинку в формате SVG, достаточно кликнуть правой кнопкой мыши и кликнуть на «Экспортировать как…»
Далее появится диалоговое окно, в котором необходимо установить Формат SVG и нажать на «Экспортировать все». Важно, чтобы картинка в документе была одна.
Информация о font-family, font-size, line-height, color
Информация о 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.
Тема оказалась довольно объемной и уместить все в рамках одной статьи — сложно. Но я для вас подготовила видеоролик, в котором я все подробно объясняю: