Друзья, в этой публикации мы разберем плюсы и минусы работы над веб-дизайном в Photoshop, дополнительных к нему плагинов: Zeplin и Avocode , а также графическом редакторе Figma . Мы делали этот обзор, опираясь на знания и опыт нашего веб-дизайнера, который изучил перечисленные инструменты и составил свое мнение касательно преимуществ и недостатков работы с ними. Здесь мы делимся опытом, обращая внимание наших читателей на более удобные сервисы.
Стоит ли отказываться от плагинов Zeplin , Avocode и полностью перейти на работу с Figma, и чем этот графический редактор может вас удивить, читайте ниже.
А стоит ли?
Если вы работаете в команде, где каждый может вносить изменения в дизайн, если вы занимаетесь веб-разработкой и вам важно, чтобы шаблоны подходили к любому устройству, и вы просто хотите получать удовольствие от графического дизайна, смело выбирайте Figma .
Это первый облачный инструмент для разработки пользовательского интерфейса, позволяющий совместную работу в режиме реального времени как в Google Docs.
Обзор Zeplin за 15 минут для верстальщиков и веб-дизайнеров
Однако, полностью отказаться от работы в Photoshop у веб-дизайнера не получится, так как графический редактор Figma предназначен только для веба. Если нужно обработать фотографию, либо совершить какие-то манипуляции для более сложных изображений, то Figma этого не позволит. Банально даже убрать белый фон с картинки товара в Figma нельзя. Сначала придется обрабатывать фото в Photoshop, а уже потом закидывать в графический редактор.
Чем Photoshop проигрывает:
· он перегружен другими возможностями, которые не используются дизайнерами;
· в разрешении макетов 4к очень сильно пожирает ресурсы компа и все проседает. Для качественной работы нужен мощный компьютер;
· отсутствует экспорт в PDF и SVG;
· по сравнению с Photoshop в Figma удобнее сделаны линейка и позиционирование объектов (перемещение, выставление отступов);
· в Figm a удобнее работа с макетами и слоями.
Пример работы в графическом редакторе Figma
Figma
Какие мы выделили преимущества Figma перед другими графическими редакторами:
1. Потребляет меньше ресурса компьютера и при разработке больших макетов сервис «не виснет».
2. Можно работать с любого компьютера, так как сервис не требует установки дополнительного ПО.
3. Легко переносить проекты с одного аккаунта на другой.
4. Удобно работать с большим количеством макетов.
5. Есть возможность работать над проектом сразу в команде в реальном времени.
6. Удобно работать с выгрузкой и экспортом макетов и иконок.
7. Можно сохранять макет в SVG или PDF, что удобно для просмотра в хорошем качестве.
8. Каждый проект может весит 200-500мб, иногда и больше. Для большого количества проектов нужно много места на ПК. Однако Figma от этого освобождает. Все данные хранятся в специальном облаке редактора.
9. Можно просмотреть историю изменений.
Если вы ни разу до этого не работали в Figma , советуем попробовать. Это очень комфортный в использовании инструмент, не требующий установки дополнительных утилит. Адаптироваться к новому графическому редактору будет несложно. Чтобы привыкнуть к новому интерфейсу и работать с Figma на автомате, придется потренироваться несколько недель, желательно изучить горячие клавиши.
Обзор Zeplin за 5 минут для верстальщиков и веб-дизайнеров
Плагины Zeplin и Avocode
Zeplin — инструмент для совместной работы дизайнеров UI и фронтенд-разработчиков. Avocode — это сервис, ориентированный на веб-разработку.
Сервис Zeplin предоставляет своим пользователям пробный период работы с инструментом и бесплатный тариф. Сервис Avocode не такой щедрый: в нем возможно работать бесплатно только 2 недели.
Обычно веб-дизайнеры начинают создавать сайт с дизайна в Photoshop или Sketch. После завершения макета, разработчику нужно превращать его в спецификацию с отдельными изображениями и CSS-стилями. Именно такие плагины, как Avocode и Zeplin призваны выполнить роль моста между дизайнерами и разработчиками.
Пример работы с дизайном в Zeplin
В отличие от Figma сервисы Zeplin и Avocode нуждаются в установке десктопного приложения. Прежде чем начать работу с ними дизайнеру нужно загрузить свой проект через плагин Photoshop или Sketch. Напрямую через веб-приложение загрузить свой дизайн в Zeplin или Avocode нельзя. Приложения больше похожи на просмотр дизайна с возможностью экспорта деталей этого дизайна.
Все преимущества, которые мы перечислили для Figma , в Zeplin и Avocode отсутствуют. В этих инструментах для разработки веб-дизайна есть возможность демонстрации проекта. Однако, совместная работа нескольких дизайнеров над одним проектом там недопустима.
Чего вы еще не найдете в Zeplin и Avocode :
· оптимизации под мобильные устройства;
· возможности отставлять комментарии;
Однако Avocode все-таки будет отличаться от Zeplin бОльшими возможностями. В Avocode веб-дизайнер может напрямую загружать макеты проектов. Здесь все достаточно интуитивно, просто и не требует дополнительных знаний. Для того, чтобы перенести макет в Zeplin , понадобится сначала создать монтажную область в Photoshop, которая потом и переносится в приложение.
Многие начинающие дизайнеры теряются на моменте первого переноса, так как не особо понятно, что такое монтажная область и как ее создать. Для этого нужно потратить время в поисковике. Также в Avocode есть контроль версий, чем не может похвастаться Zeplin .
По сравнению с Figma приложения Zeplin и Avocode проигрывают во многих аспектах. Они больше подходят для экспорта и структуризации макетов, создания рабочей области.
Пример работы в Avocode
Всем тем, кто только открывает для себя графический редактор Figma , мы советуем терпения, чтобы привыкнуть и не бросить затеянное на полпути. Управление и горячие клавиши здесь полностью отличаются от других редакторов, из-за чего может возникнуть путаница. Это вывод, который мы вынесли для себя в процессе работы со всеми перечисленными сервисами.
Задав вопрос нашему веб-дизайнеру на счет того, что он подумал, когда ему предложили перейти на незнакомый графический редактор и его ощущения о работы с Figma, мы получили такой ответ:
«Подумал, почему бы и нет. Если этого требует время, обстоятельства и коллектив, то нужно развиваться. Да, я советую Figma, она удобнее для коллективной работы. От нее ощущения легкости и простоты в работе. Это, наверное, многим не понять, кто с 4к не столкнулся: очень заметны проседания ресурсов в программах, рендеренге и так далее, а Figma– это просто окно браузера, которому на это все равно».
Подписывайтесь на канал, ставьте лайк и спасибо за интерес к нашей деятельности!
Источник: dzen.ru
Zeplin
Zeplin.io — это десктопное приложение, которое помогает дизайнерам интерфейсов и front-end разработчикам эффективно работать в команде, экономя свое время. Программа берет файл с дизайном, а затем генерирует руководство по стилю, исходники и спецификации, которые нужны разработчикам. Чаще всего используется в связке со Sketch.
Тематические технологии:
Cтатьи по теме:
Создание дизайна сайта или веб-приложения
Создание дизайна для сайта или веб-приложения — это самый субъективно оцениваемый этап разработки, часто вызывающий сложности как на этапе постановки задачи, так и на этапе сдачи-приёмки выполненных работ.
JPEG и PNG — в чём разница форматов?
JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG.
Сжатие изображений с потерями и без потерь
Сжатие изображений — это один из способов ускорения загрузки сайта. Сделать изображения более «легкими» можно как уменьшив их физический размер в пикселях, так и путём оптимизации параметров сохранения.
Адаптивные изображения
Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI для более детализированного отображения. Есть несколько вариантов реализации адаптивных изображений.
Источник: web-creator.ru
Знакомьтесь — zeplin
Случилось мне недавно познакомиться с инструментом, который может помочь небольшим веб-студиям изрядно сэкономить на лицензиях Adobe Photoshop. Это сервис zeplin. Сервис дает возможность дизайнеру выложить в общий доступ макеты, а разработчикам — получить доступ к этим макетам. Доступ означает: возможность загрузки Assets — слоев или групп слоев, а также просмотр параметров элементов — битмэпов, шейпов, текстов и т.д.. При выделении элемента сервис генерит css для этого элемента.
Чтобы вам долго не разбираться, коротко по шагам:
1. Заходите на сайт zeplin.
3. Скачиваете приложение для Windows (ссылка на скачивание приложения есть также в футере, но зарегистрироваться придется все равно, потому что с этим аккаунтом вы и в приложение потом зайдете).
4. Устанавливаете приложение. Внимание! Если вы не дизайнер, а девелопер, плагин для Photoshop вам не нужен, как и сам Photoshop. Просто пропускаете этот шаг, и установка заканчивается.
5. А вот вашему дизайнеру плагин понадобится — так у него и Photoshop есть. Дизайнер загружает макет, в котором предварительно делает отдельные слои загружаемыми, и добавляет в проект верстальщиков и программистов.
6. Верстальщик может сохранить себе все макеты проекта в PNG-формате, а также графические элементы и тексты.
7. Тимлид может натыкать дизайнера носом в косяки, и дизайнер вносит правки «на лету», о чем участники проекта получают извещения.
А самое главное:
1. zeplin — это одна лицензия Adobe на всю команду;
2. можно, наконец, навсегда похоронить руководства по шрифтам-цветам, на создание и поддержку которых во время проекта уходит уйма времени.
В общем, хороший, годный сервис. Я считаю, что мне повезло, что я о нем узнала.
Кстати, на хабре есть неплохая статья про zeplin.
Источник: marimbu.livejournal.com