Zeplin Tutorial in 15 minutes for web designers and web developers
ฝัง
- เผยแพร่เมื่อ 26 ก.ย. 2024
- The marathon "SVG for Websites" - tpverstak.ru/sv...
A short guide and review of Zeplin. I'll tell you about cool features of the application, consider how to use the layout in practice with extensions and briefly compare with Avocode. 15 minutes of valuable information.
Official Zeplin website - zeplin.io
__
Buy a PDF version of the Frontend Book diary - tpverstak.ru/f...
Ask a question to the front-end for free - frontendhelp.m...
__
Website - tpverstak.ru
VK - tpverstak
Instagram - / tpverstak
Telegram - t.me/tpverstak
Telegram Chat - t.me/tpverstak...
__
Courses and marathons - tpverstak.ru/co...
Reviews - topic-1...
Вау, вы такая красоточка😍 еще и подача материала на уровне! Спасибо, получила удовольствие от просмотра
Зачем показывать регистрацию, говорить про подтверждение почты и показывать как скачивается? Можно было меньше времени тратить на фигню, больше на фичи самого редактора. ИМХО целевая аудитория этого видоса должна сама уметь ставить софт
Почему-то не позволяет Zeplin картинки экспортировать
Надо в фотошопе выделить все слои и перед тем как экспортировать проект в зеплин выделив все слои нажать Mark as asset и тогда всё ок будет
@@ivankasl3452 а с фигмы?
@@ivankasl3452 Спасибо, добрый человек. Уже думал, что может подписку нужно покупать, чтобы картинки можно было в зеплине выгружать...
Правда на 85 слоях мой фотошоп намертво завис при импорте ))
Я тоже слушаю Леда Зеплина, иногда.
Horosh
Я тоже летаю на Зеплине, иногда
Капец. А я то думал, что это она так похожа на тебя. Даже рок футболки есть, манера речи очень похожа, аутентичная, взгляд необычный.
UPD: еще и фон был такой же в одном из ее видео.
А иногда и Pink Floid.😉
Лучшая подача на эту тему, очень динамично и понятно.
Спасибо 😊👍🏻
в чем прикол экспортировать в зеплин если все тоже самое доступно в фигме ?
Спасибо, хороший плейлист обзора графических редакторов. Установил Zeplin - в винде редактор не работает со скетч файлами :)
Установил бесплатную Lunacy, пока полёт нормальный.
Figma тоже открыла скетч.
Adobe XD упал при установке)))
ух ты, новый дизайн на канале
Все верно :)
@@annblok_webdev Класс ;)
В Zeplin, я так понимаю, что бы вырезать картинку, нужно что то указать в фотошопе, на каждом слое. Если честно ,я не понял как это? А если у меня много картинок в макете, мне каждую нужно так сказать, "отмаркировать"?
хотя прошло и не так много времени чтобы так изменился интерфейс, но у меня нет чекбокса Grid. и при нажатии на иконку нет опция для ее сохранения в png и прочее что Вы показывали. так же читал что авокод показывает расстояния между блоками, а тут этого не заметил. или зеплин того не умеет? тогда он точно не альтернатива авокода. единственно зачем подобные программы полезны это сразу цвет, расстояния и размеры показывать. остальное руками удобнее.
Спасибо!!!!! Очень интересная информация
Установил. Всё работает норм. Спасибо!
В авокоде можно любые слои объединять в изображение и скачивать картинкой, тут только те, что уже как картинки предусмотрены.
Можно сделать как в авокоде?
Анна, вопрос, можно ли экспортировать макет ИЗ зеплина? дали макет в зеплине но залили его неправильно вырезать фотки из негоо не могу, дизайнера нет как быть?
установил Zeplin, но почему то не могу сохранять картинки. Просто нет этой строки в программе, хотя все плагины поскачивал. Экпортировал из Фотошопа. CSS отображается, плагин HTML скачал, но он тоже не отображается в Zeplin (((
аналогично. может у автора платная версия?
Не получается. Просит експортировать с Фотошопа. У меня его нет. Я хочу аплоуднуть файл ПСД с компа.
Да, мне тоже это надо. За 5 месяцев нашел ответ?
@@slaio8605 нет, перешел на авакод и не жалею. Там нет такой проблемы.
Не получается проинспектировать текст как в фигма. Получается только по одной букве, где можно определить только его цвет. Что не так? обьясни плиз)
а что сразу не сказали что figma в бесплатном режиме не поддерживает psd формат от фотошопа
какроч я понял что начинающий верстальщик это гиблое дело .. за авокод они требуют более 2к рублей в месяц как будто его бережно делали японские девственницы .. те кто делал зеплин им вообще надо оторвать руки , живем в 20 году почему там нету простого переноса файла , что за бред с интеграцией из фотошопа который тоже надо покупать , потом интеграция не работает если есть косяки в макете
Спасибо за контент!
Скажите пожалуйста, как понять бесплатно только один проект? А после завершения верстки одного проекта можно добавить следующий для работы и как это сделать?
Подскажите... при выделении елемента показывает размер в процентах, а не в пикселях. Как это можно исправить?
и насколько этот инструмент на сегодня актуален учитывая современные возможности Figma
заметил, что Zeplin не видит верхний регистр (text-transform: uppercase;)
Печаль беда.
Супер! Спасибо большое!
Там на полке есть комикс «бетмен. Тихо!» вышел полнометражный мультфильм по мотивам . Второе: планируется ли верстка реального сайта ? Я бы с удовольствием посмотрел бы на твой подход
Уже смотрела его :) Верстка реального макета есть, но в виде небольшого курса. Сейчас мы его обновили, это Супер Старт 2.0 - tpverstak.ru/super-start/ там я показываю как верстать сайт из Figma с нуля до адаптива. Стоимость курса всего 149 рублей.
Типичный Верстальщик • Анна Блок пойду посмотрю тогда сейчас ) за ранее благодарю )
че за косплей на Цириллу?)
Спасибо Анна, посмотрел и про Авокод и про Зеплин, все таки, что лучше, на ваш взгляд?
Каждому своё, но постараюсь сделать видео-сравнение в будущем
@@annblok_webdev Было бы замечательно!
Авакод лучше, но его на халяву не найти. Zeplin можно использовать бесплатно для одного проекта одновременно, то есть можно его перезаливать каждый раз.
@@Realing29 авокод тоже можно на халяву там 14 дневная пробная версия но по истечению срока можно зарегать новую почту и снова взять пробку и так снова и снова
unstoppable ` такое уже не катит
у меня в зеплине в макете нет скачки изображений
Где скачать фул версию ни где не могу найти
Это что ж за SASS такой кривой в этом Zeplin))
Ребята видимо в упор ранее не видели синтаксис SASS...
препроцессор никогда не пропустит такой код...
Спасибо!
Авокод намного лучше жоплина, вообще без вариантов.
Спасибо большое!
Ещё бы он был бесплатным. Если раньше можно было просто создать новый акк, используя временную почту, то сейчас это сделать нельзя.
@@sadHamster можно
@@astrotrain , я месяца два назад перепробовал около 6-8 сервисов одноразовой почты, но при попытке её использовать меня слало лесом.
@@astrotrain , лол. А сейчас сработало и почту приняло. Вот только теперь появилось сообщение о нарушении условий соглашения и бане ip на 10 дней, но это фигня. Это хорошая новость, т.к. Zeplin у меня работать не хочет. Чтобы перенести в него проект, нужно извращаться. Плагин в PS у меня не работает, а Фигма творит дичь.
Не, нифига. Аккаунт тут же палят и блочат.
Если делать выводы из обзора на зеплин, то достаточно бестолковая штука. Она только выдает цвет, размеры, а отступы не умеет считать. слабенько. Я пока по старинке, все в фотошопе и плагин пиксель перфект для хрома.
Figma + Avocode = Zeplin, дизайн похож на фигму, структура авокодская)
Не совсем похоже на авокод, имхо
Добрый день Анна, не могу понять почему у меня в фигме не кликабельное меню для расширения. Вот сыылка скрина. что уже не делал, осталось только заново переустановить фигму www.evernote.com/l/AI7wqf7V4QNHvbXf3Vh9S0D7Mfh8S5MGhII
Жаль, что не сравнила левые панели. Меня больше интересовало сравнение таких инструментов как линейка или пипетка.
Нрпммииоо
Хюзхххххззх
Анна, добрый день! У меня проблема с установкой Zeplin. С оф. сайта получаю файл Zeplin.app.zip и если распаковать то установщика там нет. Если переименовать в Zeplin.app то выходит ошибка этот файл не поддерживается этим типом компьютеров. Стоит Catalina. Подскажите, как установить Zeplin?
Значит сайт неофициальный
а если я не вейп дизайнер, то можно использовать?
хоть кому можно
А слои есть в этом зеплине, можно по отдельности скрывать их?
да
нет
классные линзы у меня аж мурашки побежали от страха
Мне как ux ui дизигнеру это надо учить, или это программистам?
Не сказала бы, что вам это актуально, но в качестве расширения кругозора не помешает.
@@annblok_webdev расширяйте, Анечка, Фигму, СММ, Сео и линкедин. Кстати, как Вас там именовать
Вообще ничего не понять! А кто использует photoshop например
можно просто открыть psd файл без экспорта? у меня не получается
не можно , в этом и минус)
@@РоманКиевский а нахой тогда нужен этот зеплин?)
@@nivabul7871 в нём удобней смотреть стили чем в Фотошопе и это будет быстрее , с таким же успехом можно сказать нафиг авокод если он платный)
РЕбятки помогите. У меня есть файл в формате PSD я его изменил в файл Sketch.Загрузил файл скетч. Текст есть , а картинок нет. Что делать?
Попробуйте открыть PSD в Zeplin
@@annblok_webdev спасибо) Сейчас попробую
@@annblok_webdev тю блин... это нужно что бы фотошоп был на компе. зря время потратил с этим зепленом . но всеравно спасибо
Придется переходить на это. Лавочку с авокодом прикрыли.
В смысле что случилось с авокодом?
@@holyholy413 больше нельзя повторно активировать триал. Выскакивает сообщение, что IP-адрес будет забанен через 10 дней.
@@DmitriyVereschagin а через впн ?
@@holyholy413 это первое (и единственное), что я решил попробовать после предупреждения. Опять получил предупреждение.
@@DmitriyVereschagin а временные почты пробывал?
Кстати предлагаю сделать обзор на prepros
Установи плагин live sass compiler и препрос нахуй не будет нужен
Ты такая красивая)
Анют, а какой у тебя рост?
Ана ты красавчик жи есть
(не по теме)
Я начал заниматься кросбраузерной вёрсткой...
У меня один лишь вопрос. Почему Microsoft всё равно на современные нормы IT сферы.
Да да я говорю именно про IE. Раньше я думал что это супер корпорация (Microsoft). Но после обучение web-разработке... я увидел её настоящее лицо (да прибудет с нами Linux и MacOS).
Может все web-разработчики и обладатели своих сайтов объявят забастовку IE. Оно ведь всех тянут на дно.
И часть моего комментария было взято из сайтов и форумов. Не один я так считаю.
Ладно html и css я кое как подстроил под IE, но скрипты в некоторых местах перестают работать, вот тут я зашёл в тупик. Нигде нет информации как прописывать js что-бы IE его правильно интерпретировал...
Намёк понял. Но информацию как писать под IE на js мало.
Да есть такой способ как:
Но этот способ не работает. Причина неизвестна.
Просто... один вопрос... зачем нам IE?
@@Алексей-у4е5п JQuery в помощь, бро. Это победитель IE которому нет равных. Пруф в конце подкаста Веб Стандартов и ссылка в описании на статью на Хабре. Как для тебя старались:) th-cam.com/video/8qNvlo2wPo4/w-d-xo.html
@@shifronim8950 большое спасибо за ссылку, я заинтересовался этим канал.
Я могу выделить час на решение проблем, что-то и найду.
Вопрос в другом, зачем нам IE. Всё когда-то уходит, был такой офигенный язык как BASIC, FORTRAN. Их время уже прошло. А IE и также Safari просто ужасный продукт. Что их держит? Кому это выгодно?
Надеюсь крупные корпорации решат этот вопрос (Google).
@@shifronim8950 спасибо за указание на JQuery как раз с ним и верстаю. Только я впервые слышу что он победитель IE, буду копать в этом направление.
Спасибо за вектор направления.👍👍👍
Топ ролики, целую в щёчку...
@@yurok1991 непонял
@@yurok1991 хуйню сказал
Красатоша
Костыль, а не что то удобное.
Это всё понятно, нооооо.....шо с глазами?)))
Ещё один костыль
Очень классная фича которая конвертит сразу из божественного CSS во всякие ущербные препроцев от которых тошнит просто
Учить людей и показывать, повторять то что вы уже умеете, это разные вещи, не имеющие отношения к обучению людей. Хотя ролик у вас и называется обзор.
Анечка, на фига мне фигма? Я хочу ФОТОШОП...
Слушай ну это просто пиздец - сколько можно инструменты из ящика в ящик перекладывать - где реальные проекты, где верстка ? Фронт/Бэк ? Еще про Paint и Excel расскажи.....
Слово "фича " резжет слух, у Вас есть другие слова
ля аниме, а не девушка
Можна ли просто открить PDF?