Всем привет! Сегодня я расскажу как можно весьма неплохо работать с PSD-макетами без Фотошопа на компьютере. В свободное время немного увлекаюсь вёрсткой (учебные цели) и порой возникает необходимость “распилить” какой-либо учебный макет на кусочки, чтобы использовать их уже по назначению.
Дизайнеры обычно поставляют шаблон в формате Adobe Photoshop (уже некий де-факто стандарт), и нам, верстальщикам, нужно распилить его на отдельные изображения (померить все расстояния) и т.д., для правильной вёрстки. Как это сделать?
Самый простой вариант – имея Photoshop. Но что делать, если под рукой его не оказалось? Оказывается, Adobe бесплатно предоставляют инструмент, которым можно воспользоваться, чтобы выполнить некоторые операции с PSD-файлами.
Но для этого нам потребуется AdobeID:
Открываем сайт по ссылке, что я дал выше, кликаем на “Получить Adobe ID”, если ещё не имеем. Регистрация бесплатна, рекомендую.
И жмём на вход!
Попадаем в рабочий кабинет. Переходим на “Мои ресурсы”, здесь будут хранится все наши файлы и, кстати, кусочки, которые мы будем вырезать. Жмём на ссылку “отправить” с моего компьютера. При этом загружаем макет PSD.
Я взял типовой макет Nerds, который верстаю в свободное время (учусь), это для примера. В принципе можно загрузить произвольный.
Загрузили файл. Увидели его предпросмотр.
Кликаем на пиктограмму и открывается макет. Переходим на вкладочку Extract. Здесь у нас две зоны – первая – макет, вторая – свойства. Кликаем на произвольное изображение и видим выпадающую панельку, где можно сохранить изображение отдельно, а так же увидеть его размеры и смещение. А в правой части увидеть CSS стиль элемента.
В частности вот шрифт. Видим, что используется шрифт Roboto, дан его размер и т.д.
Сохраняем произвольную картинку с макета, как я показывал, кликаем на изображении, нажимаем на кнопку загрузки в появившейся под картинкой панели, выбираем формат сохранения. Что выбрать JPEG или PNG? Когда картинка будет сохранена, она отобразится во вкладке “Ресурсы”.
Теперь снова переходим на главную – куда мы закачивали макет – там в файлах появится новая папка, в которую скидываются все сохраненные файлы.
Каждый файл мы можем сохранить, кликнув на него, открыв и выбрав в операциях пункт “Загрузить”.
Такой вот нехитрый способ, о котором я узнал буквально сегодня! Может кому-то пригодится!
Comments: