Загрузка...Растровые и векторные изображения
Растровые изображения это изображения, которые состоят из очень маленьких прямоугольников — пикселей разного цвета.
У каждого пикселя есть свое место на рисунке и свой собственный цвет.
Каждое изображение имеет фиксированное количество пикселов. Их вы можете видеть на экране монитора, большинство из которых отображают примерно от 70 до 100 пикселей на 1 дюйм (2,54 см) фактическое количество зависит от вашего монитора и настройки самого экрана.
Виды изображений
Векторное
Когда вы создадите новый документ в Photoshop, напишите на белом листе любое слово, подобрав удобный размер (использование функций «Текст» — значок с буквой «Т» на панели инструментов).
Увеличьте масштаб инструментом «Лупа» — вы увидите, что буквы состоят из пикселей. На самом деле вид задаётся формулами, только отображение в программе выполняется пикселями.
Возвращаем нормальный размер, кликнув дважды на значок с рукой. Уменьшаем размеры следующим образом: «Редактирование» — «Трансформирование» — «Масштабирование». При уменьшении размеров качество букв сохраняется. Таким же способом увеличиваем текст максимально, качество так же остаётся хорошим, так как формулы работают при любом масштабе хорошо.
Типичный пример векторного изображения
Растровое
Чтобы перевести векторное изображение в Фотошопе в растровое, уменьшим готовую картинку. Затем проходим на вкладку «Слои», там выбираем «Растрировать» — «Текст». У нас получились буквы, действительно состоящие из пикселей.
При увеличении растровой картинки/текста с помощью функций «Редактирование» — «Трансформирование» — «Масштабирование», качество сильно ухудшается. При повторениях процедуры качество каждый раз становится всё хуже — буквы становятся расплывчатыми.
У таких иллюстраций при увеличении по алгоритму программы заполняются цветом новые пиксели. Это происходит менее аккуратно, чем при работе формул.
При увеличении масштаба растровая картинка теряет в качестве
Дополнительные параметры
В названии слоя можно задавать дополнительные параметры экспорта, такие как:
- Несколько форматов — moonlight.jpg, moonlight_b.png, moonlight_c.png
- Указать папку — [название папки]/moonlight.jpg
- Особые параметры размера и сжатия
Если мы сохраняем JPG, то мы можем указать степень сжатия:
Определять размеры исходящего файла. Например:
- 200% moonlight.jpg
- 300 x 200 moonlight.jpg
Для PNG можно так-же указывать размеры и качество:
- moonlight.png24 (24 битный PNG)
- 42% moonlight.png
Так же можно указывать комплексные названия:
120% moonlight.jpg, 42% moonlight.png24, 100×100 moonlight_2.jpg90%, 250% moonlight.gif
Обычно дизайнеры присылают макеты сразу же под ретину (которые нужно уменьшать в 2 раза), но перед этим можно выгрузить от туда все изображения в двух размерах: 100% под ретину и 50% под стандартные мониторы.
Пример: 50% moonlight.png, moonlight.png .
Подробнее об (Оптимизации верстки под retina дисплеи) я уже писал в своем блоге. Пункт про плагин Retinize It можно пропустить />
Добавить комментарий Отменить ответ
Для полноценной работы по созданию сайтов вам обязательно необходим хороший удобный редактор. Есть очень много платных продуктов для этого, но нам бы хотелось выделить бесплатный очень функциональный и в то же время простой в использовании редактор – Codelobster PHP Edition. Давайте рассмотрим некоторые важные возможности и преимущества этой программы: Весь код подсвечивается разными […]
Рассмотрим наиболее часто встречающиеся проблемы, с которыми сталкивается верстальщик при работе с psd-макетами
В современном Вебе в слово семантика вкладывают очень много. Но что означает семантика? Почему она так важна?
Преобразование формата PSD в векторные форматы (SVG, AI и т.д.)
Для теста создадим примитивный рисунок в фотошопе:
Пусть это будет прямоугольник со скругленными углами и градиентом, и надпись «27» на нем. Надпись нужно «преобразовать в кривые» (одноименный пункт по ПКМ). Понятно, что нет смысла создавать такое в фотошопе и перегонять в SVG, когда можно в той же Xara все сразу нарисовать. Однако чаще бывает так, что файлы PSD были откуда-то взяты и нами не создавались.
Далее, нужно сохранить файл как PDF 
Настройки экспорта можно оставить без изменения 
Файл готов. Его «понимают» некоторые другие редакторы, я проверял на Xara Designer Pro, Adobe Illustrator. После открытия файла в вышеуказанных программах их можно преобразовать в форматы, с которыми работает данный софт. С сохранением в SVG неплохо справляется Xara, в ней создаем новый документ:
Файл -> Создать -> Пустое фото
И импортируем PDF-файл в программу (либо просто перетаскиваем в рабочую область окна). Далее: Экспорт — выбрать формат SVG.
Более простой и быстрый способ
Но что делать, если есть только фотошоп и желание сделать побыстрее, желательно не устанавливая лишнего софта? На помощь приходят различные онлайн-конвертеры, мне понравился этот
Там все проще некуда: выбираем файл PDF («Обзор»), и нажимаем («Преобразовать файл»). После чего сайт отдаст нам архив с заветным файлом.
Качество файла — высокое, сохраняются градиенты и другие детали (хотя в самом PDF и предпросмотре в Xara может иметь место пикселизация. Ее не стоит пугаться — выходной файл будет выглядеть как нужно)
Использование готового и бесплатного скрипта, о котором пойдет речь, значительно упрощает и ускоряет процесс переноса исходников из Photoshop в Sketch. Но я думаю, скрипт может пригодится и для тех, кто с указанной программой не работает. Он экспортирует слои в формат .svg, избавляя от необходимости по одному генерировать 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;
— перед началом процесса убедитесь, что все экспортируемые слои являются замкнутыми векторами.
В некоторых случаях при экспорте исходников может наблюдаться искажение цвета. Тогда в скрипт после строки:
Кисточка (обычная) / Brush
Компромисс между пентулом и блоб брашем для тех, кто хочет проводить линии, а не ставить точки, и при этом иметь больший контроль над тем, как линия выглядит.
Что на линию, проведенную кистью, что на “пентульную” можно “насадить” огромное количество самых разных кистей — из стандартной библиотеки (правда, официально на стоки их использовать нельзя), либо !! своих собственных, каждый раз получая новый результат. Потом нужно не забыть все это дело отэкспандить (то есть превратить в вектор с помощью команды Object — Expand).
Плюсы и минусы кисточки:
+ Сохраняется возможность редактирования линий и можно рисовать руками (не точками)
– Нужен планшет
– Линии почти всегда получаются не такими, как хочется, — может у меня руки кривые, но по моим ощущениям тот же блоб браш позволяет точнее контролировать линию
У блоб браша и кисточки есть свои индивидуальные настройки, добраться до которых можно, дважды кликнув по конкретному инструменту в левой панельке.
У кисточки можно настроить чувствительность и сглаживаемость линии, у блоб браша также можно включить или отключить автоматическое слипание объектов одного цвета друг с другом. Подробно про настройки мне рассказать нечего, тк у меня стоят стандартные.
Как легко и быстро создать векторный логотип онлайн?
Если вам необходим векторный лого, получить его можно несколькими способами: сделать самому в графическом редакторе (потребуются знания и навыки) или заказать у профессионального дизайнера (может стоить недешево). Однако существует гораздо более удобное и простое решение, доступное для всех пользователей онлайн сервиса Логастер.
После регистрации на сайте вы получите широкий набор эффективных инструментов для создания качественных логотипов. Оплатив созданный вами векторный логотип, вы сможете за считанные секунды скачать его в одном из самых распространенных форматов (PDF и SVG) непосредственно на свой компьютер или бесплатно, но в небольшом размере.
Хотите создать векторный лого за несколько минут?
Тогда воспользуйтесь онлайн-сервисом Логастер, и создайте фирменный знак в PDF и SVG форматах для удобного мастабирования при печати всего за несколько минут.
Обновлено 3 августа, 2020
Руководитель отдела маркетинга и главный генератор идей компании Logaster. Автор книги «Как создать фирменный стиль и не разориться». Ценит экспертный подход, но в то же время использует простой язык для объяснения сложных идей.
Экспорт объектов из Photoshop в SVG
Поэтому, вот вам мой более сложный путь экспорта объектов из Photoshop в SVG .
Предположим, вы решили создать дизайн мобильного приложения в стиле Flat , используя векторные фигуры. У вас есть вот такие элементы.
Для начала сохраним весь документ в формат PDF. Файл – Сохранить как… выбрать формат Photoshop PDF . Появится диалоговое окно, в котором я рекомендую изменить лишь одну настройку. Вкладка Сжатие – Сжатие: Не показывать.
Теперь, можно смело открывать полученный PDF документ в Adobe Illustrator. Если там есть текст, то он будет преобразован в кривые.
Как видите, все объекты распределены по слоям и разбиты на группы, каждый контур редактируемый. На примере контур одной из кнопок выделен с помощью инструмента «Выделение».
Уже из Adobe Illustrator вы можете сохранять объекты по отдельности или все вместе в формат SVG .
Файл – Сохранить как… выбрать формат SVG.
В появившемся диалоговом окне я выбираю следующие настройки:
Полученный файл можно просмотреть через любой браузер. Попробуйте поменять масштаб страницы браузера, чтобы убедиться, что масштабирование происходит без потерь.
Надеюсь, данная статья оказалась для вас полезной и вы сможете в дальнейшем, без проблем создавать дизайн качественно масштабируемых проектов.
