Как установить расширение zeplin на фотошоп
Какой инструмент выбрать для начала, фотошоп, фигма, зеплин может другие еще есть? на слуху только фотошоп был. из вашей академии узнал о другух редакторах. Поспрашивал знакомых верстальщиков. мнения разделились Одному без разницы какой инструмент другой сказал фотошоп не предназначен для удобной работы для извлечения контента. В Видео на youtube сказали что лучше с фотошопа начать и не в коем случае не зеплина и авакода. якобы не дадут полного представления о работе с графикой. так что лучше?
Будет ли обзор Adobe XD? Насколько он актуален для верстальщика? В некоторых вакансиях требуется знания целого зоопарка графических программ (Photoshop, Illustrator, Adobe XD и т.д.), с чем это связано и как с этим бороться?
Фотошоп по-прежнему популярен среди дизайнеров, но на смену ему приходят Sketch, Figma, Adobe XD и другие. Лучше всего будет, если вы будете одинаково хорошо знать все их них или, как минимум, две основные группы: 1. Adobe Photoshop и Illustrator, 2. Sketch, Figma, Adobe XD. Отдельно про Adobe XD — продукт пока молодой и достаточной популярности не получил, чтобы говорить о нём отдельно.
В Avocode есть уже готовые css код элемента, насколько он актуален?
Любой код в графическом редакторе — это подсказка, помощь вам, но никак не готовый финальный код. Внимательно на него смотрите, прежде чем переносить в ваш код.
В процессе верстки потребуются колонки в макете? Как их можно включить в макете Zeplin?
Посмотрел макеты в photoshop и zelpin. В макетах photoshop есть колонки и разделение по слоям (если автор это предусмотрел). В макетах zeplin включить колонки не удается. В инструкции сказано как можно включить колонки. В правой панели на вкладке информация должен быть переключатель "grid". В предоставленных макетах такого переключателя нет. Вопрос 1. В процессе создания верстки мне потребуются колонки в макете? Если да, то как их можно включить в макете zeplin? Вопрос 2. В макетах zeplin имеется возможность разделять объекты по слоям, как photoshop? Это должен реализовывать автор или эту возможность где-то включить?
Колонки — это полезная часть макета, которая позволяет вам понять локику расположения блоков на сетке и правильно измерить расстояния. Но это не единственная возможность понять макет и измерить расстояния. Если вам всё же будет не хватать направляющих, скачайте и откройте макеты в Photoshop или Avocode.
Как экспортировать встроенные объекты в Фотошопе?
Вопрос следующий: в фотошопе, частенько дизайнеры внедряют элемент, сделанный в другой программе, ну например илюстратором. Когда его пытаешься скачать, то он качается с расширением этой программы, в данном случаи расширение .ai. Что в таком случае делать?
Вам не обязательно открывать встроенный объект, вы можете экспортировать этот слой в SVG прямо из Фотошопа: из контекстного меню в списке слоёв — Export Contents…
Как посмотреть свойства объекта в Фотошопе?
Добрый день! Как посмотреть свойства объекта в Photoshop CC (будь то тип и размер шрифта для текста, или размеры изображения для фотографии)?
Мы подробно рассмотрели это на лекции :)
✅ Что делать если фотошоп не поддерживает шрифты?
Фотошоп поддерживает шрифты — их нужно установить в вашу систему. Если у вас что-то не работает, спросите у наставника.
Можно ли для проекта использовать только Zepplin, без Photoshop?
Да, вам будет достаточно Zeplin для экспорта графики и замера параметров макета.
Имеет ли смысл делать картинки для ретины?
Имеет ли смысл для картинки размером 50 х 50 рх подготавливать изображение 100х100 рх, а потом ужимать через width и height до 50х50 рх, чтобы на ретине-дисплее она смотрелась как нужно?
Нужно ли делать картинки разных размеров для адаптивной страницы или просто сжимать одну и ту же средствами CSS?
Да, готовить отдельную графику для ретиновых экранов нужно. Таких экранов становится всё больше: их подавляющее большинство на мобильных и планшетах и становится всё больше на десктопе. Мы рассказываем про ретиновую графику подробнее на втором уровне вёрстки. Уменьшать вдвое большую картинку — это только один из способов.
Экспорт текста в кривые
Иногда возникают сложности при экспорте из фотошопа. Например при экспорте комбинированного логотипа (состоящего из изображения и текста). В этом случае в SVG файле отсутствуют стили оформления текстовой части. например жирность или межстрочный интервал. И приходится дописывать эти стили в стилевом файле. Дизайнер говорит что в этом случае требуется преобразовывать текст в кривые, и лишь потом экспортировть в SVG, но для этого требуется программа Adobe illustratior. Может быть есть более простой способ объединения текстовой и графической частей логотипа в один SVG?
Можно обойтись без Illustrator: из меню со слоями в Photoshop можно сделать текстовому слою Convert to Shapes и тогда он станет кривыми.
Как нарезать картинки в Zeplin, где Styleguide?
Правильно понимаю, что нарезать графику мы можем по скинутой нам ссылке на Zeplin (при наведении на элементы там появляется их css код)? Нам не помешает, что для Нёрдс в Zeplin нет Styleguide (у всех других проектов он есть, а в Нёрдс его нет)?
Добрый вечер! Не разобралась, как вытащить из zepelin картинки и иконки? Сохранять по одной не очень удобно. Или все таки стоит установить фотошоп?
У Nerds есть стайлгайд. Более того у всех проектов есть стайлгайд. В Zeplin нет группового экспорта картинок, но это не сильно усложняет процесс экспортирования, ведь экспорт в Zeplin это два клика: клинкуть на иконку, кликнуть экспортировать.
Логотип в Барбершопе
Почему в разметке примера Барбершоп, логотип вставили в начала тега nav, хотя если делать разметку он идет после меню.
Если посмотреть на остальные страницы Барбершопа, то можно заметить, что логотип находится вначали шапки сайт. То есть получается, что только на одной странице(главной) логотип находится после навигации. В этом случае удобне сделать, чтобы логотип шёл до навигации.
Указание размеров картинок
В дополнительных критериях есть следующий пункт: "У всех изображений в теге <img> прописан размер". Почему такое требование? Если можно сделать у тегов img в стилях "max-width: 100%", и тогда картинка будет масштабироваться в зависимости от ширины контейнера
Тут разница в том, где мы указываем размеры. Если CSS-стили не загрузятся, то получается и правила max-width: 100% не будет, а значит картинка может вылететь и сломать весь интерфейс. Также это нужно для того, чтобы интерфейс не прыгал пока загружаются стили. У картинки уже есть размер и он может улучшиться, а не наоборот размеров нет и он появляется, тогда появится резкий скачок интерфейса.
Экспорт декоративной графики
- Если background-image окружают декоративные элементы (треугольники и т.п.) нужно ли добавлять эти элементы отдельно или лучше "склеивать" их вместе с фоновой картинкой и загружать цельным куском? Речь о Седоне, главная картинка с каньоном и белые перекрывающие треугольники внизу.
- Иконки твиттер, фейсбук и т.п. нужно загружать как картинки с макета или как иконочные шрифты?
- Лучше иметь в отдельных файлах. Если основная картинка изменится, то нужно будет поменять только её и при этом не нужно будет заново заходить в редактор графики.
- Как картинки - самый верный выбор. Иконочные шрифты уже не актуальный формат. От иконочных шрифтов больше проблем, чем пользы.
Как принято обозначать различные интерактивные/аудио/видео элементы на макетах?
Прям какого-то стандарта не существует.
Почему при background-position с одним значением (например background-position: 10px;) картинка выравнивается по центру по оси y?
Потому что background-position принимает два значения. background-position: x y , когда вы не указаете второе значение, то браузер автоматически подставляет значение по умолчанию 50%
То есть указав background-position: 10px; , для браузера это выглядит как background-position: 10px 50%
Можно ли установить в background одновременно полупрозрачный градиент и фоновое изображение вместе?
Да, без проблем. Для этого нужно указать фоны через запятую.
Фоны накладываются друг на друга и только последний может иметь цвет.
Почему при современных технологиях и графических редакторах сложные картинки пишутся кодом? Можно ли их нарисовать в редакторе и позже конвертировать в код?
Если я правильно понял ваш вопрос, то такая возможность есть. Прямо сейчас можно нарисовать векторную картинку в Adobe Illustrator и экспортировать её в SVG. Браузеры прекрасно понимают этот формат. SVG внутри выглядить как код и поэтому удобен тем, что картинку можно отредактировать не только в графическом редакторе,но и текстовом.
Экспорт фотографий из Фотошопа
Изображения(фотографии) экспортировать из фотошопа с размерами заданными с помошщью маски слоя или экпортировать исходные изображения больших размеров, а с помощью стилей подгонять размеры?
Можно экспортировать с размерами заданными с помощью маски, но если будет такая ситуация, когда потребуется изменить картинку, то можно будет взять исходную картинку. Почему лучше не подгонять размеры с помощью стилей. Дело в том, что исходная картинка может иметь другие пропорции, тогда подгонка расположения картинки на сайте будет достаточно трудоемким процессом.
Здравствуйте! Стоит ли потратится на подписку Photoshop для того чтобы сразу получить навыки работы с самым популярным графическим редактором и потом только улучшать их, не меняя графический редактор?
Если говорить со стороны верстальщика, то вы обязательно встретитесь с другими грфическими редакторами в своей работе. Поэтому делать ставку только на Photoshop не получится.
Размер объектов в Фотошопе
Для <img> нам рекомендуется указывать фиксированную ширину и высоту. Как можно быстро проверить размер графического элемента в .psd файле макета? Обязательно ли сначала его "нарезать" в отдельны?
- Если не отображается вкладка Properties , то включить в Window -> Properties
- Выбрать инструмент Move tool
- Кликнуть в картинку
- На вкладке Properties посмотреть размеры картикни
Используются ли сейчас спрайты?
Используются ли сейчас спрайты и если да, то как часто и для каких элементов? Просто для иконок можно использовать иконочные шрифты.
Вопрос про спрайты. Туда только иконки добавляют или все фоновые изображения? На каком этапе работы его обычно делают?
Как связана прозрачность с формой?
В описании формата JPEG сказано: "Формат JPEG не поддерживает прозрачность, поэтому изображение в JPEG - это всегда прямоугольник." Как связана прозрачность с формой?
Если вы видите изображение с формой отличной прямоугольника - то это точно не jpg. Подразумевается, что для придания формы используется прозрачность, которой нет в jpg. Прямой связи, конечно же нет.
Можно использовать любую версию фотошопа?
Чем более свежее версия, тем лучше. Добавляется новая более полезная функциональсноть для верстальщика. Тем более сейчас фотошоп приопретается по подписке, а значит обновления бесконечные в рамках подписки. Со старыми версиями могут быть небольшие проблемы. Например, не будет функции "Export as", а только "Save for web". Что не так критично, но различия всё же есть.
Плагины для Фотошопа
Всегда стараюсь прогонять графику из макета через Squoosh для максимального адекватного сжатия. Есть ли подобные Squoosh плагины для ФШ, чтобы экономить время при экспорте графики из макета?
К сожалению, нет.
Как определить лишние элементы в SVG Файле и удалить их (оптимизировать svg-файл)? Например лишние стили, лишние именования классов и объекты, которые порой попадают в SVG при экспорте? Ведь дизайнер не всегда правильно готовит макет?
Только попрактиковавшись. Удалил одно свойство, посмотрели результат, если ничего не сломалось - продолжаем.
Лучше конечно же использовать SVGOMG и проверять это на уровне проставленных галочек и просмотра результата экспорта.
Вставка ретиновой графики
Есть ли смысл уменьшать исходный размер иконок в формате svg, если в макете используется в размере 32 на 32, а в исходном состоянии у них размеры 520 на 520?? Это повлияет на вес файла? нужно ли это вообще проверять?
Какой объём всех изображений считается приемлемым, в рамках одной страницы? Влияет ли на скорость загрузки страницы использование кода svg из photoshop?
Если коротко, то чем меньше, тем лучше.
Конкретного объёма приемлемости нет. Всё зависит от скорости отклика вашего интерфейса. Ведь можно сделать так, что загрузится только первая главная картинка, а все остальные загрузятся потом и фоном. общий объём может быть при этом большим, но интерфейс вполне себе рабочим.
Как верстальщик я неоднократно сталкивалась с макетами от заказчиков. Сейчас становится все удобнее работать, так как появилось большое количество редакторов для просмотра этих макетов, однако дизайнеры продолжают строить их в Photoshop.
Если же у вас нет Photoshop или Adobe Illustrator, то возникают, чаще всего, возникают сложности, если только вы не установите эти программы. Давайте рассмотрим, какие есть аналоги для облегчения работы верстальщика.
Avocode
Один из лучших редакторов в настоящее время, так как в нее можно импортировать файлы с расширениями .psd, .ai, .sketch, .xd, а также иные разрешения (figma), что делает этот редактор универсальным.
Макет можно загружать как с компьютера, так и с Dropbox. Если дизайнер заранее не подготовил графику для скачивания, то тут можно сохранить ее самостоятельно, просто выбрав нужный элемент и нажав кнопку экспорта.
Avocode настраивается под любые критерии и типы разработки (веб и мобильные приложения). Можно даже подключить библиотеки Compass или Bourbon, если выбрать стил кода Sass.
InVision
Сервис для быстрого преобразования дизайнов в кликабельные прототипы и макеты для совместной работы. В InVision, в отличии от других программ, можно просматривать анимированные прототипы.
Загрузить макеты и прототипы можно по такому же принципу как в Zeplin, то есть из исходной программы.
Zeplin
Сервис для просмотра дизайн-макетов, которое берет файл с дизайном и генерирует руководство по стилю, исходники и спецификации для разработчиков.
Добавить макеты можно только из программы, в которой работал дизайнер.
В редакторе отсутствует возможность просмотра модульной сетки, поэтому она должна быть отдельным файлом или описана в техническом задании.
Есть блоге Zeplin , где они записывают видео по экспорту + скриншоты, а так же описывают, как подготовить ресурсы для экспорта.
Figma
Приложение можно назвать, как "смотри и делай", простой и понятный дизайн.
В Figma можно настроить права: от этого будет зависеть, можете ли вы менять что-то в макете или нет. Обычно разработчик получает права "read-only", чтобы смотреть шрифт, макет, цвета, размеры, отступы.
Макеты всегда находятся в той стадии, в какой их последний раз оставил дизайнер. Помимо этого, в приложение можно экспортировать любой .sketch файл, который преобразуются в необходимый формат для Фигмы.
Таким образом, если дизайнер работает в какой-то из этих программ, то вы сможете закачать свой макет в следующие редакторы:
Безусловно лучший способ просмотра макетов для верстальщиков.
И удобный способ делится макетами для дизайнеров.
Так уж повелось, что большинство веб-дизайнеров работает в программе Adobe Photoshop и присылают готовые макеты с расширением `.psd`. Что нам, верстальщикам, совершенно не удобно, но многие уже привыкли.
Таким образом приходится постоянно скачивать обновлённые дизайны, удалять старые (чтобы не перепутать), следить за изменениями.
Сейчас можно намного проще!
Дизайнер (или вы сами) публикует свои макеты в специальной программе и даёт доступ к проекту. Если что-то обновилось — появляются уведомления “что” и “где”.
Помимо всегда акута л ьной версии дизайна, преимущество таких программ в том, что не надо совершать лишних действий для просмотра стилей. Нажимаешь на кнопку или текст и тебе сразу отображает свойства элмента, а при наведении на соседние элементы — отступы.
Что ещё можно сделать в этих программах?
В общем, куча полезных функций, которые намного упрощают жизнь обычному разработчику.
Если дизайнер работает в:
1) программе Sketch (.sketch)— Zeplin / InVision / Figma / Avocode
2) программе Photoshop (.psd)— Zeplin / InVision / Avocode
3) программе Adobe XD (.xd) — Zeplin / Avocode / Adobe XD
4) программе Figma (.fg) — Figma / Zeplin / Avocode
Рассмотрим подробнее самые популярные сервисы.
Zeplin — сервис для просмотра дизайн-макетов. Работает он следующим образом: берет файл с дизайном и генерирует руководство по стилю, исходники и спецификации для разработчиков.
Есть десктопное приложение, но в браузере работает стабильнее. Добавить макеты можно только из программы, в которой работал дизайнер.
Имеется множество настроек, например:
- отключить отображение базовых стилей
- задать формат отображения цвета (HEX, RGB, HSL)
- добавить в Style Guide цвета и параметры шрифта, чтобы проще ориентироваться и быстрее задавать такие же стили к другим элементам
Из минусов стоит отметить, что здесь нет возможности просмотра модульной сетки, она должна быть либо отдельным файлом, либо описана в каком-то документе.
Чтобы залить макеты в Zeplin нужно скачать десктопное приложение, которое автоматически установит дополнительные плагины для программ Sketch / Photoshop / AdobeXD. В Zeplin уже должен быть создан проект. Далее:
- Photoshop выбираете инструмент “монтажная область”, выделяете макеты и отправляете в Zeplin (Window > Extensions > Zeplin)
- Sketch выдеялите все артборды, которые нужно передать разработчику, нажимаете Cmd + E (⌘E) или Plugins > Zeplin > Export Selected Artboards. Выбираете нужный проект и нажимаете Import
- AdobeXD выбираете артборды, нажимаете Cmd + Option + E (⌥⌘E) macOS / Ctrl + Alt + E Windows, либо меню >Export > Zeplin. Выбираете проект и нажимаете Import
- Figmaуже имеет встроенный функционал для работы с сервисом Zeplin. Чтобы включить экспорт открываете меню >Integrations > Zeplin. Потом выбираете артборды, нажимаете Option + E (⌥E) / Alt + E либо нажимаете кнопку экспорта (в правом верхнем углу) и выбираете Export to Zeplin и нужный проект
Ещё подробнее можете прочитать в самом блоге Zeplin — они записывают видео по экспорту + скриншоты, а так же описывают, как подготовить ресуры для экпорта.
InVision — сервис для быстрого преобразования дизайнов в кликабельные прототипы и макеты для совместной работы.
В InVision, в отличии от других программ, можно просматривать анимированные прототипы. Загрузить макеты и прототипы можно по такому же принципу как в Zeplin, то есть из исходной программы.
Очень удобно, что все картинки для скачивания находятся в одном месте. Имеется множество вариантов языков для просмотра стилей.
- слишком нагруженный интерфейс (показываются слои и их нельзя скрыть, переключатели режима и многое другое, что не зачастую не нужно простому разработчику)
- неудобная навигация по макетам
- нельзя растянуть панель стилей
- нет формата HSL(HSB) для цветов, зато есть UIColor для apple разработчиков
Figma — инструмент, в котором можно делать дизайн и напрямую смотреть стили из макета.
Интерфейс больше заточен именно под дизайнеров. Так же есть десктопное приложение. По стилям пока что можно выбрать только CSS, iOS, Android + они сразу логически разбиты.
Принцип работы Figma — индивидуальная настройка прав: приглашаете разработчика в проект, назначаете ему статус «read-only». Разработчик смотрит макеты, шрифт, цвета, размеры, отступы. Но если вам дали права с полным доступом, то постарайтесь не накосячить.
Свежесть версий обеспечивается неощутимым процессом синхронизации — все макеты в руках фронтендера находятся в той стадии, в какой их последний раз оставил дизайнер.
Помимо того, в приложение можно экспортировать любой .sketch файл, который преобразуются в необходимый формат для Фигмы.
Avocode — программа для работы с любыми макетами.
Макеты можно загрузить двумя способами:
- Подключив учетную запись Dropbox и выбрав оттуда необходимый файл
- Загрузка дизайна непосредственно с компьютера
Поддерживаемые разрешения: .sketch, .psd, .xd, .ai. Файлы из программы Figma можно загрузить через десктопное приложение.
Если дизайнер заранее не подготовил ресурсы для скачивания, то тут это не проблема — всю графику можно сохранить самостоятельно, просто выбрав нужный элемент и нажав кнопку экспорта.
Avocode настраивается под любые критерии и типы разработки (веб и мобильные приложения). Можно даже подключить библиотеки Compass или Bourbon, если выбрать стил кода Sass.
До Avocode ни в одной программе не было возможности выбрать просмотр стилей через CSS in JS. И что самое крутое — десктопная программа доступна для всех операционных систем! Так что они явно на шаг впереди всех остальных.
Следует заметить, что такие программы позволяют бесплатно делиться ограниченным числом проектов с одного аккаунта. Если вас приглашают, проектов может быть сколько угодно.
Zeplin — 1 проект. Платная версия 3 проекта и более от 17$ в месяц
Adobe XD — 1 проект. Стоимость платной подписки с безлимитным количество проектов от 9.99$
Figma — 3 проекта и 2 пользователя. Дальше от 12$ за каждого пользователя в месяц
Avocode —пробный период 14 дней. Сервис стоит от 10$ за пользователя в месяц
Читайте также: