Как сохранить изображения из макета PSD без Photoshop?

Всем привет! Сегодня я расскажу как можно весьма неплохо работать с PSD-макетами без Фотошопа на компьютере. В свободное время немного увлекаюсь вёрсткой (учебные цели) и порой возникает необходимость “распилить” какой-либо учебный макет на кусочки, чтобы использовать их уже по назначению.

Дизайнеры обычно поставляют шаблон в формате Adobe Photoshop (уже некий де-факто стандарт), и нам, верстальщикам, нужно распилить его на отдельные изображения (померить все расстояния) и т.д., для правильной вёрстки. Как это сделать?

Самый простой вариант – имея Photoshop. Но что делать, если под рукой его не оказалось? Оказывается, Adobe бесплатно предоставляют инструмент, которым можно воспользоваться, чтобы выполнить некоторые операции с PSD-файлами.

https://assets.adobe.com/

Но для этого нам потребуется AdobeID:

Открываем сайт по ссылке, что я дал выше, кликаем на “Получить Adobe ID”, если ещё не имеем. Регистрация бесплатна, рекомендую.

И жмём на вход!

Попадаем в рабочий кабинет. Переходим на “Мои ресурсы”, здесь будут хранится все наши файлы и, кстати, кусочки, которые мы будем вырезать. Жмём на ссылку “отправить” с моего компьютера. При этом загружаем макет PSD.

Я взял типовой макет Nerds, который верстаю в свободное время (учусь), это для примера. В принципе можно загрузить произвольный.

Загрузили файл. Увидели его предпросмотр.

Кликаем на пиктограмму и открывается макет. Переходим на вкладочку Extract. Здесь у нас две зоны – первая – макет, вторая – свойства. Кликаем на произвольное изображение и видим выпадающую панельку, где можно сохранить изображение отдельно, а так же увидеть его размеры и смещение. А в правой части увидеть CSS стиль элемента.

В частности вот шрифт. Видим, что используется шрифт Roboto, дан его размер и т.д.

Сохраняем произвольную картинку с макета, как я показывал, кликаем на изображении, нажимаем на кнопку загрузки в появившейся под картинкой панели, выбираем формат сохранения. Что выбрать JPEG или PNG? Когда картинка будет сохранена, она отобразится во вкладке “Ресурсы”.

Теперь снова переходим на главную – куда мы закачивали макет – там в файлах появится новая папка, в которую скидываются все сохраненные файлы.

Каждый файл мы можем сохранить, кликнув на него, открыв и выбрав в операциях пункт “Загрузить”.

 

Такой вот нехитрый способ, о котором я узнал буквально сегодня! Может кому-то пригодится!


Like this post? Please share to your friends:
Litl-Admin.ru

Comments:

Leave a Reply