Avocode что это: Первый взгляд на Avocode / Хабр

Первый взгляд на Avocode / Хабр

Доброго времени суток, Хабр!

Так уж завелось, что подавляющее большинство веб-дизайнеров создают макеты сайтов в Adobe Photoshop. И каждый раз, мы, бедные верстальщики, испытываем на себе все минусы и проблемы PS. И нам всегда приходилось с ними мириться, либо использовать всяческие плагины костыли, и сторонние приложения костыли. Даже новомодный и перспективный Sketch создан, в первую очередь, для создания макетов, а не для извлечения информации для верстки.

Но темные времена прошли, и тучи начинают рассеиваться над миром фронтенд-разработчиков. Итак, встречайте: Avocode!

Avocode – это продукт от компании Source, созданный специально для измученных верстальщиков. Сами Source называют его “Мост между дизайнерами и разработчиками”. Работать это будет так: дизайнер нарисовал макет, кликнул по кнопке в плагине, и макет улетел прямо в Avocode к верстальщику.

Проект сейчас находится в статусе private beta, и еще очень сырой, но он уже обладает достаточным количеством фич, о которых я сейчас и расскажу.

(Некоторые изображения кликабельны)

Последняя бета (0.4.0) вышла 23 июля 2014. В ней добавили одну из самых главных фич: экспорт в SVG.

Avocode 0.4.0 Beta Changelog:

• Добавлена возможность экспорта векторных слоёв в SVG
• Улучшена поддержка текстовых слоёв – underline, uppercase, smallcaps, line through.
• Баг фиксы, улучшения UI

Известные баги и недостающий функционал:

• Автоматические апдейты еще не работают
• Пока что не достаточно хороший UX панели экспорта
• Не оттестирован функционал “двойного клика по слою”
• Нет поддержки SASS
• Нет Windows / Linux версий
• Selection by dragging

Новые беты Avocode выходят каждые 14 дней.

На данный момент, чтобы импортировать дизайн-макет, нужно иметь PS, с установленным плагином Avocode. В будущем планируется возможность импортировать макеты другими способами: Dropbox, Layervault, либо прямо с жесткого диска.

Открываем любимый макет в PS (ребята обещают поддержку Sketch в будущем), вызываем окно плагина, логинимся с аккаунтом Source (да, да, почти все действия завязаны на этот аккаунт), и клацаем по кнопке Sync To Avocode.

Начинается загрузка всех слоёв на их сервера, и вот, наш макет доступен в Avocode, и мы можем выбрать его из списка, и… он крэшится, и мы понимаем что Avocode – это веб-приложение, написанное на JS, и запущенное в WebKit.

В общем, другой макет мне все-таки удалось благополучно открыть в Avocode.

Рабочее пространство поделено на 3 части: панель слоёв (слева), область с нашим макетом, и мульти-панель (справа) с 4 вкладками (инспектор, библиотека, проекты, и справка). Левая панель сворачивается. Также (пока) доступны 4 инструмента: выбор, линейка, пипетка, рука.

Панель слоёв довольно проста, в ней отображаются все слои в макете, есть возможность скрыть слой, и контекстное меню. Под этой панелью располагаются инструменты.

Если панель слоёв скрыть, панель инструментов останется слева по центру.

В правой панели, в первой вкладке располагается замечательный инспектор.
Тут можно скопировать текст одним кликом, увидеть размеры, скопировать стили (CSS либо LESS, SASS пока нет). Также есть возможность быстрого экспорта изображения, хоть SVG, хоть JPG, хоть PNG.
Умный и удобный colorpicker, который умеет запоминать цвета, тоже присутствует.

Еще Avocode очень хорошо справляется с экспортом SVG, и даже генерирует HTML для изображений (крайне бесполезная фича).

Также можно экспортировать сразу все изображения, в 1 клик.

Тоже самое и с цветовой схемой.

Еще в Avocode есть Command Palette, позаимствованная у Sublime Text, и, я так понял, будет возможность устанавливать сторонние расширения.

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

Что касаемо оплаты, скорее всего это будет месячная подписка.

Если я что-либо пропустил, пишите вопросы в комментариях, с удовольствием на них отвечу, и дополню обзор.

Source обещали Public Beta @ Summer 2014, так что совсем скоро, вы сможете сами пощупать его.

UPD: Вышла новая бета (0.5.0). Появилась поддержка SASS.

Использование Avocode для верстки сайтов. Обзор для новичков. Бонус — регистрируем 30-дневный пробный период

Как мы все знаем, верстка сайта — это фактически кодирование макета дизайна, а чтобы нам было комфортнее мы используем различные программы для работы с макетами. Photoshop? Sketch? Zeplin? Да, это все отличные инструменты, но сегодня мы поговорим о продукте, с помощью которого делать верстку сайта стало действительно приятно. Речь пойдет об Avocode.

Перейдя на сайт Avocode, нам сразу предлагают оформить бесплатный 14-дневный период, но не спеши, я покажу как зарегистрировать 30-дневный крутой тарифный план. Обо всем по порядку.

Работать можно прямо тут на сайте, но я рекомендую скачать программку на комп. Находим вкладку download, выбираем систему, качаем.

Открыв программу мы должны авторизироваться, но мы еще не зарегистрированы в системе. Как говорил выше, нужно сделать это максимально выгодно.

Регистрация пробного периода на 30 дней.

Итак, возвращаемся на сайт. Крутим вниз и ищем ссылку

Avocode vs. Zeplin

и жмем на нее. Zeplin – это некая альтернатива Avocode.

Нас же интересует самый низ страницы, крутим ищем этот блок. Тут написано, что по этой ссылке можно получить авакод бесплатно на 30 дней, и у нас спрашивают «Чего же мы ждем?» и правда чего? Отбросив все сомнения жмем на кнопку и заполняем форму.

И тут я сразу намекну тебе что, если ты не успеешь насладиться программой за месяц, то эту процедуру можно повторить зарегистрировав другой email. Очевидно, повторять эти действия можно бесконечно). Но лично я за авокод плачу и тебе советую. С другой стороны, пока ты новичок можно и сэкономить. Решать тебе.

Подтверждаем наш email кликнув на ссылку в письме и заходим в приложение. Сразу переходим в меню и жмем на свой ник, далее во вкладку

billing, видим что у нас 30 шаровых дней, да еще и крутой дорогой тарифный план Company, стоит такой 100$\месяц между прочим. Радуемся. Основная фишка этого тарифа в том, что он рассчитан на 5 человек, то есть ты можешь пригласить еще четверых бездельников в свою команду. Cделать это можно во вкладке members. Подробнее о тарифах читай на сайте программы.

Кстати, если надумаешь оплачивать программу, то не забудь сменить тарифный план на попроще. Заходим в billing – change plan и вот самый дешевый вполне подойдет. После этого нужно добавить кредитку и отваливать 168 зеленых в год. Но опять же не спеши, после 30-дневного периода Avocode обычно предлагает продлить ознакомление за 1$ на тот же email. По крайней мере это работает на сегодняшний день.

Так что же мы получаем за эти деньги? И почему Avocode настолько крут. Пришло время посмотреть что он умеет.

Работа с программой

Создадим наш тестовый проект. Жмем

New Project

.

Итак, одной из главных преимуществ авокода для верстальщика — это поддерживаемые форматы без всяких плагинов. А это, на секундочку, Photoshop (PSD), Sketch, Adobe XD и Illustrator. А так же частичная интеграция с Figma. Ну чем не универсальный комбайн?

Помимо того, что файлы можно грузить напрямую, авокод можно синхронизировать через плагины в самих графических редакторах, а также с помощью dropbox. Я как-то привык грузить файлы.

Итак, добавим любой макет, для этого можно как перетащить файл на эту область так и выбрать его на диске. После загрузки мы можем открыть файл и поговорить об интерфейсе программы, но начну я с общих настроек. Жмем нашу Аватарку — App preferences.

Первым делом я переключусь на темную сторону силы Theme Dark. Далее я могу выбрать папку для экспорта картинок по умолчанию, а также отключить оптимизацию изображений, отключить сглаживание при зуме макета, включить перезапись экспортируемой картинки.

И еще ряд второстепенных настроек, которыми я не пользуюсь. На самом деле тут я только влючаю темную тему, все остальное оставляю как есть.

Интерфейс программы

Для работы с макетом нам нужна вкладка Inspect. Слева мы видим что-то наподобие слоев как в Photoshop, их можно скрыть и показать нажимая на глазик. Еще левее мы видим панель инструментов и использую я все два — это линейка и пипетка. Вот почему:

Рука (hand) – позволяет нам двигать макет зажав правую клавишу мышки. Но линейка умеет то же самое с зажатым пробелом.

Стрелочка (select выделение)

— позволяет выделить несколько слоев. Но линейка умеет абсолютно то же самое.

Ножик (slice) – умеет выделять произвольную область с последующим экспортом картинки, но как-то я этим так ни рaзу и не пользовался.

Пипетка иногда нужна — она копирует код цвета выбранного участка.

И, наконец, линейка. При выборе этого инструмента начинается магия.
Например, мне нужно узнать размер объекта, а также расстояния от него до других элементов.

Для этого я просто кликаю на объект, сразу вижу его размеры в пикселях, при наведении мышкой на соседние объекты сразу вижу различные расстояния, что невероятно удобно во время верстки.
Если по неким причинам расстояния не появляются, мы можем замерять их вручную, зажав левую клавишу мыши и протянув между нужными объектами. Высота и ширина выбранной области отобразиться справа в информационном окне.

Плавно переходим к правой части программы. Для начала щелкнем на самый верхний уровень наших слоев, фактически по названию файла. Справа мы увидим:
Картинку всего макета, его размеры. Возможность выгрузить скриншот макета, что удобно для портфолио. Общая информация: что, где, когда. Далее список всех цветов используемых в макете, что полезно, но еще полезней список всех используемых шрифтов в макете.

Шрифты обычно предоставляются дизайнером вместе с макетом, но так бывает не всегда, поэтому этот список поможет нам найти нужные шрифты самостоятельно.

Далее, для более продвинутых пользователей, есть возможность настроить под себя различные переменные.

Нижняя полоска хоть и мала по размеру, но не менее полезна. Тут у тебя есть масштаб макета. Также его можно менять зажав контрол и крутя колесо мыши. Далее у нас инструмент проверки верстки на Pixel Perfect, то есть пиксель в пиксель. С его помощью мы можем накладывать полупрозрачный макет на верстку и сверять размеры и отступы. У инструмента есть ряд полезных настроек, таких как прозрачность и отключение фона макета.

Последний пункт — это направляющие Guides. Тут ты можешь влючить направляющие дизайнера либо добавить свои. Между ними тоже можно замерять расстояния.

Итак, панель для всего макета разобрали, теперь давай посмотрим что нам предложит панель для отдельного объекта. Жмем, например, на картинку. Справа мы видим выбраный объект, его размер и кнопку для экспорта картинки.

Жмем. Тут мы можем задать имя файла, масштаб, суфикс и формат PNG JPEG SVG и WEBP. Ниже ты можешь выбрать папку куда сохранится картинка. Выгрузить можно несколько картинок в один файл, выделив их мышью либо нажав на нужные с зажатым shift. Также можно нажать на картинке левую клавишу мыши и выбрать нужный пункт.

Теперь самое интересное — текст и прочие элементы дизайна. Щелкаем например на текст. Справа в окне Styles мы видим святая святых — весь готовый CSS код нашего элемента! Мы можем скопировать все, скопировать только один параметр нажав на нем, а также настроить вид и тип нашего кода. А для того, чтобы скопировать наш текст достаточно просто дважды кликнуть на нем мышью.

Один авокод способен почти полностью заменить родные графические редакторы для каждого из форматов. С помощью этой программки работа с макетом приносит одно удовольствие и экономит кучу времени!

По мотивам выпуска «Avocode для верстальщика. Как пользоваться Avocode 30 дней бесплатно», из серии «Программы и инструменты для верстки сайтов», на YouTube канале «Фрилансер по жизни».

Первый взгляд на Avocode

Доброго времени суток!

Так уж завелось, что подавляющее большинство веб-дизайнеров создают макеты сайтов в Adobe Photoshop. И каждый раз, мы, бедные верстальщики, испытываем на себе все минусы и проблемы PS. И нам всегда приходилось с ними мириться, либо использовать всяческие плагины костыли, и сторонние приложения костыли. Даже новомодный и перспективный Sketch создан, в первую очередь, для создания макетов, а не для извлечения информации для верстки.

Но темные времена прошли, и тучи начинают рассеиваться над миром фронтенд-разработчиков. Итак, встречайте: Avocode!

Avocode – это продукт от компании Source, созданный специально для измученных верстальщиков. Сами Source называют его “Мост между дизайнерами и разработчиками”. Работать это будет так: дизайнер нарисовал макет, кликнул по кнопке в плагине, и макет улетел прямо в Avocode к верстальщику.

Проект сейчас находится в статусе private beta, и еще очень сырой, но он уже обладает достаточным количеством фич, о которых я сейчас и расскажу.

(Некоторые изображения кликабельны)

Последняя бета (0.4.0) вышла 23 июля 2014. В ней добавили одну из самых главных фич: экспорт в SVG.

Avocode 0.4.0 Beta Changelog:

• Добавлена возможность экспорта векторных слоёв в SVG
• Улучшена поддержка текстовых слоёв – underline, uppercase, smallcaps, line through.
• Баг фиксы, улучшения UI

Известные баги и недостающий функционал:

• Автоматические апдейты еще не работают
• Пока что не достаточно хороший UX панели експорта
• Не оттестирован функционал “двойного клика по слою”
• Нет поддержки SASS
• Нет Windows / Linux версий
• Selection by dragging

Новые беты Avocode выходят каждые 14 дней.

На данный момент, чтобы импортировать дизайн-макет, нужно иметь PS, с установленным плагином Avocode. В будущем планируется возможность импортировать макеты другими способами: Dropbox, Layervault, либо прямо с жесткого диска.

Открываем любимый макет в PS (ребята обещают поддержку Sketch в будущем), вызываем окно плагина, логинимся с аккаунтом Source (да, да, почти все действия завязаны на этот аккаунт), и клацаем по кнопке Sync To Avocode.

Начинается загрузка всех слоёв на их сервера, и вот, наш макет доступен в Avocode, и мы можем выбрать его из списка, и… он крэшится, и мы понимаем что Avocode – это веб-приложение, написанное на JS, и запущенное в WebKit.

В общем, другой макет мне все-таки удалось благополучно открыть в Avocode.

Рабочее пространство поделено на 3 части: панель слоёв (слева), область с нашим макетом, и мульти-панель (справа) с 4 вкладками (инспектор, библиотека, проекты, и справка). Левая панель сворачивается. Также (пока) доступны 4 инструмента: выбор, линейка, пипетка, рука.

Панель слоёв довольно проста, в ней отображаются все слои в макете, есть возможность скрыть слой, и контекстное меню. Под этой панелью располагаются инструменты. Если панель слоёв скрыть, панель инструментов останется слева по центру.

В правой панели, в первой вкладке располагается замечательный инспектор.
Тут можно скопировать текст одним кликом, увидеть размеры, скопировать стили (CSS либо LESS, SASS пока нет). Также есть возможность быстрого экспорта изображения, хоть SVG, хоть JPG, хоть PNG.
Умный и удобный colorpicker, который умеет запоминать цвета, тоже присутствует.

Еще Avocode очень хорошо справляется с экспортом SVG, и даже генерирует HTML для изображений (крайне бесполезная фича).

Также можно экспортировать сразу все изображения, в 1 клик.

Тоже самое и с цветовой схемой.

Еще в Avocode есть Command Palette, позаимствованная у Sublime Text, и, я так понял, будет возможность устанавливать сторонние расширения.

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

Что касаемо оплаты, скорее всего это будет месячная подписка.

Если я что-либо пропустил, пишите вопросы в комментариях, с удовольствием на них отвечу, и дополню обзор.

Source обещали Public Beta @ Summer 2014, так что совсем скоро, вы сможете сами пощупать его.

Автор: Rudeshock

Источник

Установка Avocode под Linux

Краткий мануал по установке десктопной версии Avocode на Ubuntu или Debian-подобную систему.

Установка в Ubuntu

1. Добавьте GPG ключ Avocode:

curl https://linux.avocode.com/avocode_pub.gpg | sudo apt-key add -

2. Добавьте репозиторий Avocode:

echo deb http://linux.avocode.com/apt all main >> /etc/apt/sources.list

Если во время выполнения этой команды вы получили ошибку Permission denied, попробуйте добавить репозиторий в отдельный файл /etc/apt/sources.list. d/avocode.list, для чего введите:

echo "deb http://linux.avocode.com/apt all main" | sudo tee /etc/apt/sources.list.d/avocode.list

3. Обновите список доступных пакетов:

sudo apt-get update

4. Установите Avocode

sudo apt-get install avocode

5. «Поехали!» ?. Теперь можно запустить Avocode.

Обновление в Ubuntu

1. Проверьте последние обновления пакетов:

sudo apt-get update

2. Установите новую версию Avocode:

sudo apt-get install avocode

Установка в Arch

1. Слейте себе файлы для сборки из AUR:

git clone https://aur.archlinux.org/avocode.git && cd avocode

2. Соберите пакет:

makepkg -si

Обновление в Arch:

1. Стяните последнюю версию с AUR:

git pull origin master

2. Пересоберите пакет:

makepkg -si

В будущем планируется собрать пакеты для RPM/YUM, а пока можно использовать zip версии.

Ссылки

ВКонтакте

Twitter

Facebook

Одноклассники

Telegram

Поделиться

Avocode Kubuntu Linux Lubuntu Ubuntu

Немного о сервисе Marsy

Каждый, кому доводилось заниматься версткой html страниц, знает, что работа с макетом дизайна занимает довольно большое время, и чем сложнее макет, тем больше.

Некоторое время назад, когда не было ни avocode, ни zeplin, приходилось всю нужную информация о слоях и о самом макете получать из программ, не предусматривающих легкую конвертацию данных в представление необходимое для верстальщика, в данном случае- это Photoshop.

Позже на арену вышли выше названные продукты и жизнь разработчиков стала налаживаться, но появилась такая проблема как монополия в этом сегменте (посмотрите стоимость avocode и вы поймете о чем я), но даже не это побудило меня создать сервис Marsy.

В какой-то момент я понял, что мне не хватает возможностей, которые дают имеющиеся инструменты, мне хотелось оптимизировать тут, добавить возможностей там, но ведь это невозможно, обычно у таких компаний есть четкий план, по которому они следуют.

Следствием таких мыслей стала самая первая версия Marsy:

Это была десктопная программа для частного пользования. Но мне захотелось поделится с людьми, зачем зря пропадать труду.

И на удивление люди тепло встретили эту «поделку». Тогда я понял, что не нужно останавливаться на достигнутом, можно и дальше развивать то, что получилось.

После долгой работы была готова версия, в которой уже был «настоящий» парсинг psd, и выяснилось, что потребляет он ресурсов немногим больше, чем работающий Photoshop, меня такой результат не удовлетворил. Переписав большую часть кода я получил онлайн-сервис, который все сложные операции выполняет на удаленном сервере, тем самым разгружая ПК пользователя:

Вот такой вид получил мой сервис. Функционал уже довольно обширен, но все же уступает в некоторых моментах avocode и zeplin, но на то они и крупные компании, да и я стараюсь не останавливаться в развитии.

Из особенностей хотел бы выделить прототип визуального редактора, который представляет собой что-то вроде оочень простого аналога Tilda, но с доступом ко всем данным из макета: цветам, шрифтам, текстам и прочее. И одним кликом мыши можно, например, из слоя создать кнопку, которая получит все необходимые стили и текст.

Также разрабатывается система для генерации всей страницы или ее элементов на основе макета.

Marsy доступен абсолютно бесплатно, после недолгой регистрации. Проект разрабатывается одним человеком, и я стараюсь быть максимально близко к пользователям моего сервиса, благодаря чему многие их предложения о новых возможностях и доработках уже попали в сервис.

Marsy живет за счет добровольных донатов пользователей, и если вы захотите помочь, я буду Вам очень благодарен.

Если у Вас есть вопросы,то я с удовольствием на них отвечу тут или в группе vk

Всем кто осилил этот текст, большое спасибо, Вы молодец!

Почему мы поменяли «Фотошоп» на «Фигму»: плюсы и минусы

Раньше все дизайнеры Email Soldiers использовали «Фотошоп» как основной рабочий инструмент. Много лет он казался удобной программой, но мы просто не знали ничего лучше. : ) 

В прошлом году я посмотрела мастер-класс арт-директора Red Collar и обратила внимание на программу, в которой она работала. Я не единственная ей заинтересовалась: в чате было много вопросов, что это за зверь такой. Оказалось, это «Фигма». Я её изучила и поняла, что это то, что нам нужно.

Предложила новый инструмент команде: большинством голосов мы решили, что надо попробовать. И назначили «Фигме» испытательный срок.

Как мы переносили проекты в «Фигму»

С того момента мы заводили все новые проекты в «Фигме» и параллельно разбирались с интерфейсом. Это было легко, так как он простой и интуитивно понятный.

Макеты, начатые в «Фотошопе», переносили с помощью сервиса Avocode. Для этого приходилось сначала переводить их в формат «Скетча», а уже потом импортировать в «Фигму». Перенести макет сразу из «Фотошопа» в «Фигму», к сожалению, невозможно.

Иногда слетали изображения и ориентация шрифта, но это легко поправить. Так за неделю мы перетащили 50 проектов. Если бы нам пришлось собирать макеты с нуля, это точно бы заняло в десятки раз больше времени. 

Мы быстро поняли, что «Фигма» значительно удобнее. Она решила часть проблем, связанных с особенностями «Фотошопа». Некоторые из них я раньше даже не осознавала — просто не знала, что процесс можно настроить по-другому.

Чем «Фигма» удобнее «Фотошопа»

Исходники хранятся в облаке

Основная проблема «Фотошопа» в том, что исходники много весят. Хранить их на компьютере проблематично: приходится покупать SSD-диск, перекидывать макеты в облачное хранилище или просто удалять их.

Мы заливали исходники на корпоративный Google Диск, но и там были свои проблемы. Загрузка файлов занимала много времени. Мы раскладывали всё по отдельным папкам, ставили даты, но менеджерам всё равно было сложно находить нужные макеты. Плюс этим диском пользуется всё агентство: порой кто-то заливал файл с таким же именем или создавал дублирующуюся папку. Просто папочный ад.

В «Фигме» все макеты хранятся в облаке и вообще не занимают место на компьютере. Создаешь папку проекта и все материалы сохраняются туда, в том числе последняя версия макета.

Все изменения сохраняются автоматически

Файл в «Фотошопе» нужно постоянно сохранять. Иначе, если что-то случится, — привет, макет с нуля! При этом он хранит только определённое количество итераций в макете, так что отменить кучу последних действий и «откатиться»  далеко назад не выйдет.

В «Фигме» макет сохраняется автоматически, и вы можете возвращаться назад бесконечно. Можно даже открыть историю, выбрать конкретный день и сделать дубликат этой версии.

Над макетом могут работать несколько человек одновременно

В «Фотошопе», чтобы два дизайнера работали над одним макетом (например, в случае жёсткого дедлайна), приходилось скидывать исходник, вносить изменения, вновь скидывать исходник, а потом соединять две версии в одну.

В «Фигме» над проектом может работать хоть вся команда. Каждый будет отвечать за свою область, а результат видно в режиме реального времени. Это экономит кучу времени, я не представляю, как мы жили без этого раньше.

 

Работает в браузере, доступна на Windows и Mac OS

Уникальная особенность «Фигмы» в том, что она работает в браузере, причём со всем функционалом. Правда, я всё равно пользуюсь десктопной версией, потому что у меня обычно и так сто вкладок открыто.

А ещё «Фигма», в отличие от того же «Скетча», доступна и на Windows, и на Mac OS. Мы в команде пользуемся обеими системами, поэтому для нас это важное условие.

Читайте также

HTML вёрстка писем — полная инструкция

Удобно передавать макеты на вёрстку

В «Фигме» проще передавать макеты на вёрстку: не нужно ничего никуда заливать или сохранять. Достаточно дать доступ для просмотра, и верстальщик увидит вкладку с режимом «Код». Чтобы экспортировать элемент макета, достаточно одного клика, в «Фотошопе» это занимало гораздо больше времени.

 

Александр Гурков, верстальщик Email Soldiers:

Главный плюс «Фигмы» в том, что всё хранится в облаке и нам не нужно ничего скачивать. Макеты «нарезаются» раза в два быстрее, чем через «Фотошоп». Удобнее вычислять отступы между элементами (размер показывается при наведении). Легко вытащить градиент или тень в виде CSS — я сразу вижу их в виде кода на боковой панели.

Прототипирование

В «Фигме» можно настроить ссылки и переходы между страницами. Открываете макет в режиме презентации и — вуаля! — всё кликабельно и наглядно. Это безумно полезный инструмент: с ним вы сразу понимаете, как пользователь будет взаимодействовать с интерфейсом.

Иван Дудин, руководитель IT-направления Email Soldiers:

До «Фигмы» я всё рисовал в Фотошопе, в том числе прототипы.

Услышал от дизайнеров про новый инструмент, попробовал. И сразу начали получаться крутые вещи. Скорость прототипирования выросла многократно, и продолжает расти до сих пор.

Сначала мне не хватало динамики в прототипах: всякие попапы и выпадающие меню приходилось делать через костыли. Я уже начал искать другой сервис, как вдруг в «Фигме» появился Overlay. И вот она снова закрывает 100% моих потребностей.

Сейчас многие пробуют или переходят на «Фигму» (Intercom, Uber, Twitter…). Не удивлюсь даже, если команды Facebook сменят Framer на «Фигму».

Фигма синхронизируется с Google шрифтами

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

Правда, в «Фигме» есть свой косяк: шрифты, которых нет на Google Fonts, не отображаются. Но они сами решили эту проблему с помощью утилиты Figma Font Helper. С ней можно ставить любые нестандартные шрифты и всё будет работать корректно.

Горячие клавиши показываются в интерфейсе

Ребята добавили подсказки с горячими клавишами прямо в интерфейс — они собраны в одном месте и удобно разбиты по категориям. Синим подсвечиваются комбинации, которыми вы пользуетесь.

Мокапы устройств

Недавняя потрясающая фича «Фигмы» — теперь там есть мокапы разных устройств. Вы можете посмотреть как ваш макет будет смотреться на айфоне, планшете, Apple Watch и т. д. Можно выбрать мокап, цвет устройства и фон.

Режим комментирования

Еще одна уникальная функция «Фигмы» — комментарии в макете. Полезно, когда надо дать фидбек — я беру макет на ревью и оставляю пометки сразу на блоках.

Там же можно вести диалог с участниками проекта. Это удобно, потому что дизайнерам не надо переключаться между экранами и пользоваться другими мессенджерами, чтобы обсудить макет.

Иногда я оставляю комментарии сама себе, чтобы не забыть, что хотела сделать.

Читайте также

Дизайн email-рассылок: полная инструкция

Автоматический подсчёт отступов и расстояний между объектами

Функция Smart Selection позволяет автоматически настраивать отступы, менять расстояния между несколькими объектами и их расположение. Это тоже экономит кучу времени, чем если бы вы считали отступы вручную.

Стили

В «Фигме» можно создавать стили цвета, текста и даже тени для каждого проекта индивидуально. Причём стили текста можно применять отдельно от стиля цвета.

Если вы измените стиль, он обновится на всех элементах. И все, кто пользуются этим стилем, смогут обновить его в своих макетах. Это избавляет от необходимости кликать на каждый элемент отдельно и вручную менять цвет, шрифт или тени.

Это преимущества, которые мы ощутили сразу после перехода. На деле в «Фигме» много-много фич, рассказать обо всех в одной статье просто невозможно.

Подводные камни (точнее, один большой дорогой камень)

Сначала мы раздавали доступ на редактирование макета всем, кто работал над проектом — менеджерам, копирайтерам, верстальщикам. Удобно же, когда они могут сами исправить опечатку или обновить текст в письме.

В конце месяца пришёл счёт: мы должны были 350 долларов вместо запланированных 50. В 7 раз больше! Потому что планировали дать доступ 8 людям, а на деле их вышло аж 22 🙂

Теперь режим редактирования доступен только дизайнерам, остальным — исключительно просмотр. Верстальщикам этого достаточно, потому что код макета прописан в отдельной вкладке.

Что в итоге

Сейчас мы делаем в «Фигме» 90% работы, что значительно ускорило процесс. Правда, и «Фотошоп» не ушёл полностью: ретачить фотографии всё равно приходится в нём.

Во внутренней Вики мы собираем статьи и видео о возможностях программы — это полезно новичкам, которые будут с нуля осваивать программу. Мы продолжаем делиться разными фишками друг с другом: мы получаем эстетическое удовольствие от работы в «Фигме» и о каждой находке хочется рассказать.

Если вы ещё не пользуетесь «Фигмой», я советую попробовать. Ребята развивают свой продукт с огромной скоростью и продумывают каждую деталь интерфейса. Думаю, в скором времени она вытеснит всех своих конкурентов. «Фигма» — ван лав.

Порекомендуйте несколько полезных инструментов веб-дизайна

 

Сегодня я порекомендую всем несколько полезных инструментов веб-дизайна, с помощью которых дизайнеры смогут легче выполнять свою работу.

 

С быстрым развитием Интернета веб-сайты быстро выросли и стали основной опорой Интернета, поэтому веб-дизайн стал любимцем многих дизайнеров. Сегодня я порекомендую всем несколько полезных инструментов веб-дизайна, с которыми дизайнерам будет проще выполнять свою работу.

 

Один, Авокод

 

Avocode — это интерфейсный артефакт для обрезки изображений, который реализует переход от видения к коду и автоматически генерирует код для экспорта изображений.

совместимый: Sketch, Photoshop, Adobe XD, иллюстратор и Figma.

 

Передача и осмотр — разработка и получение спецификаций

Переключите и проверьте любой дизайн.

Avocode — это платформенно-независимый инструмент, который может помочь командам преобразовать проекты Sketch, PSD, XD, AI и Figma в код Web, React Native, iOS или Android.

Легко импортируйте файлы, просто перетащите их, чтобы импортировать файлы дизайна в Avocode.

 

Управление дизайном — синхронизация версий дизайна

Отслеживайте изменения в дизайне и наблюдайте за развитием вашего проекта.

Храните ваши файлы дизайна организованными, синхронизируемыми и сохраняйте резервные копии в облаке, чтобы ваша команда могла продолжать получать доступ к последней версии дизайна.

 

Прототипы — делитесь, играйте и проверяйте прототипы

Охватывает рабочий процесс от прототипа до кода Avocode.

Легко импортируйте все прототипы дизайна в Avocode, позволяя другим членам команды видеть экран, комментировать и проверять взаимосвязь.

 

Совместная работа — обсуждение изменений и ускорение работы

С Avocode ваша команда, клиенты и подрядчики могут, наконец, просмотреть любую версию дизайна, которой вы с ними поделились, обсудить изменения и продолжить продвижение вашего проекта.

 

Официальный сайт:https://avocode.com/

 

Два, Pixlr

 

Pixlr Editor — это супер бесплатный онлайн-инструмент для обработки изображений, который может удовлетворить все ваши потребности в редактировании. Полный контроль над вашим изображением, включая слои и эффекты. Проще говоря, Pixlr Editor — это веб-программа, похожая на Photoshop, подходящая для обработки изображений.

 

Pixlr также запустила Pixlr X, бесплатный онлайн-инструмент для редактирования фотографий. Встроенные различные спецэффекты и фильтры, регулировка контраста экспозиции, фоторамки и специальный свет и т. Д.

 

Официальный сайт:https://pixlr.com/

 

Три, Webydo

 

Webydo — это онлайн-платформа для дизайна и хостинга веб-сайтов, которая помогает веб-дизайнерам избавиться от традиционного процесса создания веб-сайтов. Инструменты Webydo могут автоматически преобразовывать их дизайн в веб-сайты HTML5. Дизайнерам не нужно прикасаться к ручному программированию в этом процессе. Так Webydo быстро стал излюбленным инструментом веб-дизайна некоторых дизайнеров.

 

Официальный сайт:https://www.webydo.com/

 

Четыре, трясогузка

 

Wagtail — это отзывчивая CMS с открытым исходным кодом, предназначенная для ускорения веб-разработки. Он обеспечивает многоязычную и многосайтовую поддержку. CMS использует интуитивно понятную структуру контента и поддерживает все основные компоненты сложного веб-сайта.

 

StreamField

Вы можете создавать и размещать блоки кода с разными типами содержимого в любом порядке.

 

Фрагмент кода

Вы можете добавить существующий контент на другую страницу. Его можно скопировать в разных форматах в разные места на сайте.

 

Менеджер ресурсов

Его функции и компоненты организованы в модульную структуру для обеспечения простой навигации по содержимому.

 

Обрезка изображения

CMS автоматически определяет лица и другие особенности изображения и соответствующим образом обрезает их. Вы также можете отменить автоматическое обнаружение и определить фокус вашего собственного изображения.

 

Конструктор форм

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

 

Официальный сайт:https://wagtail.io/

 

Пять, Мобирис

 

Mobirise — это бесплатное офлайн-приложение для Windows и Mac, с помощью которого можно легко создавать веб-сайты малого и среднего размера, целевые страницы, онлайн-резюме и портфолио. Более 1500 красивых блоков веб-сайтов, шаблонов и тем помогут вам легко начать работу.

Он идеально подходит для нетехнических людей, не знакомых с тонкостями веб-разработки, и дизайнеров, которым нравится работать как можно более визуально, без необходимости бороться с кодом. Это также полезно для программистов, работающих над быстрым прототипированием и небольшими клиентскими проектами.

 

Отзывчивый характер

Пользовательский интерфейс очень удобный. Вы можете предварительно просмотреть эффект отображения веб-сайта на экранах разных устройств в визуальном редакторе.

 

Простой в использовании, не требует программирования

Mobirise — это простой и легкий в использовании бесплатный конструктор веб-сайтов. Просто перетащите элементы веб-сайта на свою страницу, добавьте контент и установите его стиль в соответствии с вашим любимым стилем — никаких технических навыков не требуется.

 

Готовый кодовый блок

Mobirise предоставляет множество готовых блоков кода, включая липкий заголовок, гамбургер-меню, иммерсивный полноэкранный режим, видео-фон, плагин карусели Bootstrap, слайдер контента, гибкую библиотеку изображений веб-страниц с плагином лайтбокса и т. Д.

 

Неограниченная емкость хостинга

Веб-сайт, созданный с помощью Mobirise, можно разместить где угодно, будь то Amazon S3, Github, Google Drive, FTP или локальный диск.

 

Официальный сайт:https://mobirise.com/

 

Шесть, КАРТОЧКИ UX FLOWCHART

 

Карты UX Flowchart (UX FLOWCHART CARDS), мощный инструмент планирования структуры веб-сайта, профессиональный конструктор веб-сайтов, охватывающий 54 часто используемых UX-шаблона, позволяющий дизайнерам быстро создавать профессиональные блок-схемы взаимодействия с пользователем, экономя много времени и имея четкую структуру. Помогите дизайнерам и менеджерам по продукту понять общую картину продукта, подумать о пользовательском опыте и сосредоточиться на важных ссылках.

 

Объяснение прототипа, визуализация спроса

Карта процесса — очень эффективный инструмент мышления для преобразования требований в конкретные проекты проектов.

 

Обсуждение предложения, корректировка в любое время

Его легко изменять, перемещать и настраивать, что значительно экономит временные затраты на создание и изменение.

 

Проведите мозговой штурм и быстро создайте модели мышления

Операция проста, помогает дизайнерам и менеджерам по продукции быстро записывать идеи.

 

Официальный сайт:https://www.uxdock.com/

 

Семерка, Фигма

 

Figma — это инструмент для совместного проектирования интерфейсов в реальном времени. У него есть три достойных похвалы функции: сотрудничество в реальном времени, векторная сеть и контроль версий. Figma похожа на браузер Sketch с возможностями совместной работы в реальном времени.

 

Сотрудничество в реальном времени

Команда может обсуждать прямо в интерфейсе дизайна, чтобы сделать совместную работу более удобной.

Figma может работать на Mac, Windows, Linux и даже на мобильных устройствах (только предварительная версия). Это значительно изменит экологию команды и позволит дизайнерам и разработчикам лучше сотрудничать. Кто угодно может войти и увидеть все детали: шрифт, цвет, размер, интервал и т. Д. Разработчики также могут легко увидеть, как макет всего пользовательского интерфейса адаптируется к разным размерам экрана.

Функция комментариев является встроенной. Члены команды могут оставить сообщение для вашего дизайна, и вам также будет напоминать, когда появятся новые комментарии или новые ответы. Когда вы закончите, вы можете нажать «Решено», чтобы скрыть комментарии.

 

контроль версий

Контроль версий легче просматривать в Figma, поэтому вы можете быстрее сравнивать разные версии. Это намного проще в использовании, чем управление версиями Sketch.

Каждая версия каждого файла находится на своем сервере, что делает итерацию легкой и беспроблемной.

Адаптивная компоновка — незаменимая функция современных инструментов дизайна. Вы можете объединить все свои ограничения, установив элементы близко к краям или позволив элементам отображаться в центре. Это похоже на «Прикрепить к углу» и увеличить объекты в Sketch. Я должен признать, что версия Figma более наглядна и интуитивно понятна в использовании.

 

Векторная сеть

Векторная сетка — это прорыв, это не просто перемещение точек привязки, вы можете перемещать линии напрямую, и точки соединения будут автоматически перемещаться вместе с ней. Это связано с тем, что в Figma несколько линий могут быть соединены, чтобы сформировать сетку векторной решетки, а не просто начальную и конечную точки. Это невероятная простота использования, вы знаете это с самого начала.

 

Официальный сайт:https://www. figma.com/

 

Выше приведены несколько полезных инструментов веб-дизайна, которые я скомпилировал. Существуют веб-инструменты, программные инструменты и физические инструменты. Вы можете попробовать это, если вам это нужно ~ Добро пожаловать, чтобы добавить ~

Превратите веб-дизайн в код с помощью Avocode в два раза быстрее | Матуш Росковец

Стенограммы

1. Введение. Чему вы научитесь?: хорошо. Есть время, драгоценное. Ну тогда не зря. Меня зовут девиз, и я здесь креативный руководитель, и менее чем за час я могу показать вам, как превратить файл дизайна, подобный этому, в веб-сайт, подобный этому. Вы когда-нибудь хотели открыть дизайн, который был создан в эскизе яиц в PhotoshopD или Illustrator и просто покрыт без инструментов дизайна? Я покажу вам, как это возможно.И на самом деле не имеет значения, если вы на Mac. Windows over просто работает везде. На самом деле все, что вам нужно, это просто браузер и какой-нибудь текстовый редактор. Кстати, вы также узнаете, как перейти к нам, чтобы мы много помогали и как экспортировать изображения и текст, просто дважды щелкнув. На самом деле, к концу этого курса он мог бы кодировать в два раза быстрее. Так давайте сэкономим вам немного времени, хорошо? Кстати А если вы дизайнер и привыкли готовить слои на экспорт или может даже лежать, то дизайн через разработчика бы это понял.Вам больше не нужно этого делать. На самом деле Абакос позаботится обо всем, так что вы можете просто сидеть сложа руки, вот так 2. Начните свой дизайн для проекта кода: Нет, вы все еще здесь. Здорово. Ты сделал это. Придет на первом уроке. Ладно, начни, пожалуйста, Дональд. Они падают по ссылке в описании этого класса? Теперь перейдите в папку Downloads и разархивируйте ее внутри. Вы увидите, что он содержит файл дизайна, который будет преобразован в пальто, и предварительно процитированную HTML-структуру веб-сайта, чтобы вы могли программировать вместе со мной.Кстати, если вы не хотите использовать предварительно закодированный файл или хотите использовать свой собственный дизайн, созданный и набросанный в фотоателье BXD или у иллюстратора, вы, безусловно, можете это сделать. Итак, как только вы откроете файл, Дональд, откройте браузер. Кстати, я собираюсь использовать хром и зайти по этому адресу abaco two dot com. Здесь давайте создадим учетную запись. Так что давайте записываться прямо сейчас. Вы можете использовать настольное приложение Дональда или использовать браузер. Теперь давайте продолжим делать то, что прямо здесь, вы увидите окно с надписью Давайте создадим ваш первый проект в нашем коде.Итак, я назову его Coffee Bar, и здесь мы можем увидеть некоторые настройки, так что вы можете выбрать платформу, например, IOS или приложение для Android. Вы также можете видеть, что размеры цветов, цветовой формат меняются в зависимости от того, что выбрать Play for me. Поскольку мы собираемся кодировать веб-сайт, вы можете просто проверить, есть ли у нас код CSS. Сказал это. Если вы используете некоторые предварительные процессоры CSS, такие как Sinus или Stella’s less, вы можете выбрать те, которые мы собираемся использовать с обычным CSS. Итак, давайте создадим этот проект земли. Итак, теперь мы внутри кода. Хорошо, так что прямо сейчас вы можете перейти к примеру, предназначенному для того, чтобы увидеть, в чем заключается наше добро. Или вы можете просто импортировать сюда свой собственный файл дизайна. Кстати, вы можете видеть, что у вас есть код, работающий с Photoshopped Illustrator, а также 60 Sketch Sigma и добавление любого другого графического актива. Итак, давайте просто импортируем ошибку скетча прямо сейчас. Итак, давайте возьмем веб-сайт кофейни, который у вас есть в доминирующей папке, и просто перетащим его в ваш проект. Ладно, так он передал эскиз дизайнерам и получил пальто.Eso просто дважды щелкните, чтобы открыть его, и внутри вы должны увидеть все художественные доски, которые являются частью этого найденного эскиза. Поскольку наш веб-сайт относительно прост, мы видим здесь только одну руку. Итак, еще раз, просто дважды щелкните, чтобы открыть его, и вы увидите эскиз дизайна в коде ABBA. Хорошо, это довольно легко. А теперь давайте посмотрим, что еще у нас тут есть. Итак, я упомянул предварительно закодированный файл HTML. Теперь давайте откроем его. Это в каком-то текстовом редакторе. Я собираюсь использовать код Visual Studio. Тем не менее, вы можете использовать практически любой другой текстовый редактор, который вам нравится, например, дома или где-то еще.И, кстати, bs кодус бесплатный. Ссылку тоже вставлю в описание. Итак, теперь давайте возьмем найденный HTM и откроем его в слое S, чтобы увидеть, что мы на самом деле покрываем. Нам также нужно открыть HTML в браузере. Итак, давайте просто откроем Google Chrome, и он у него есть прямо сейчас. Это выглядит довольно уродливо, потому что, очевидно, это еще не стиль. Это просто простая структура HTML. Итак, в конце этого урока у вас должен быть открыт html-файл в браузере, а также html-файл, открытый в текстовом редакторе, а также дизайн пальто ABBA.Хорошо, 3. Обзор интерфейса Avocode: хорошо, в этом уроке мы рассмотрим пользовательский интерфейс Abaco two. Итак, как видите, интерфейс разделен на несколько разделов. Итак, слева у вас есть инструменты с ключевым возрастом, выбрав инструмент, который вы можете выбрать вручную, что в основном позволяет вам перемещать комментарии на Mac. Кстати, вы также можете использовать тачпад в любом другом инструменте вверх. Затем у вас есть инструмент выбора KIIS me, который позволяет вам выбирать разные слои, подобные этому, или вы также можете выбрать несколько.Следующий. Есть инструмент измерения, что очень важно. Итак, если вы выбрали что-то, что вы можете сравнить с другими слоями, подобными этому, хорошо, далее у нас есть инструмент цвета, который позволяет вам выделять цвета из отдельных пикселей, так что вы можете либо просто щелкнуть по большим, разным цветам, и вы можете увидеть они все собраны прямо здесь. Если вы хотите добиться идеального пикселя, скажем, для сыра какого-то определенного цветового оттенка. Просто держите мышь и перетащите, осмотрите отдельные пиксели, и вы увидите, что цветовой код снова меняется, когда он выпускает цветовой код ISS, компьютер очищает порт, и Пит может просто пойти туда, куда вам нужно. И последний инструмент — инструмент срезов, который позволяет вам снова создавать определенные срезы дизайна. Вы можете видеть, что эта область меняется контекстно. Вы можете создать несколько классов одновременно, и просто нажав клавишу удаления, вы можете избавиться от них. Хорошо, далее у нас есть панель слоев, в которой есть вся структура слоев, конкурировать ресурсы в файле эскиза, чтобы вы могли видеть, что группы на самом деле вложены, и у вас есть пути здесь. Знаете, у нас есть текстовые слои? И если хотите, вы можете, например, скрыть слой.Таким образом, просто нажав на I, вы можете скрыть его, чтобы проверить что-то, что может быть ниже слоя. Так что это на самом деле очень полезно. Гм, если вы хотите избавиться от слоев, просто нажмите на эту кнопку. Хорошо? Давайте немного поговорим об этой контекстной панели инспектора. Вы, наверное, заметили, что когда я нажимаю на разные элементы, они постоянно меняются. Поэтому, когда он выбирает изображение, изображения фактически просматриваются здесь, поэтому вы можете экспортировать их, а также видеть размеры изображения. Вы выбираете текстовый слой, например, вы можете увидеть весь текст и просто скопировать его в свой отчет.Гм, а ниже вы можете увидеть пальто от фактического слоя. Это пальто в настоящее время находится в CSS и создается на основе стилей этого слоя, поэтому вы можете видеть ширину, вы знаете, высоту, цвет этого текстового слоя, семейство телефонов, размер телефона в зависимости от веса, разные IHS и скрытие ума. между строк здесь. Хорошо, если вы хотите взглянуть только на стили слоя, вы можете сделать это, просто переключившись на стили. И снова здесь представлены все стили. Кстати, здесь вы можете дополнительно переключаться между различными языками кода или также настраивать параметры кода по своему вкусу.Если вы хотите скопировать код, вы можете либо выбрать конкретное значение, либо просто щелкнуть строку. Вы можете скопировать строку, перетащив несколько строк. Вы можете указать несколько строк и запросов или просто скопировать весь фрагмент кода ниже. Вы увидите переменные. Эта функция очень удобна, если вы используете переменные в своем стеке смерти и хотите в основном настроить свой вывод. Например, вы знаете, что у вас есть переменная, потому что я люблю все, что желтого цвета в вашем коде, поэтому вы можете создать такую ​​​​переменную.Или вы можете просто импортировать список ваших текущих переменных ниже. Вы можете видеть, что на самом деле вы можете просто спроектировать комнату на основе дизайна, но вы также можете увеличивать и уменьшать масштаб просто с помощью мыши. Далее вы можете увидеть настройки дизайна, которые мы уже частично установили, когда настраивали проект. Итак, давайте просто быстро пройдемся по этому. Масштаб дизайна. Нам действительно не нужно это менять, потому что этот дизайн был в одном X, и давайте возьмем его. Посмотрите на единицы интерфейса, чтобы единицы измерения были установлены в пикселях.Это правильно. Мы также могли бы использовать точки или независимые от плотности пиксели, но пиксели подходят для Интернета, и формат цвета также будет шестнадцатеричным. Вы можете видеть, что он может выбрать RGB A и многие другие. Хорошо, скажем так. И последнее, но не менее важное: вы можете использовать руководства для дизайнеров, а также создавать своих собственных парней, чтобы лучше измерять элементы. Так что здесь вы можете, например, показать парней, которые уже были в эскизе, и вы можете просто снять этот флажок, чтобы снова скрыть их. Дополнительно можно попробовать, если их скрипт в этой конструкции скорее всего нет.А как насчет разыграться? Хорошо. Итак, на борту есть фактическая раскладка для этого, так что вы также можете переключать это. И если вы хотите создать свои собственные линейки или направляющие, давайте проверим мои направляющие и перетащим определенную линию отсюда или просто перетащите ее в сторону вверх. Это избавление от этого. Хорошо, так что это в значительной степени это. О, и последнее. Если вы щелкнете за пределами камер дизайна, вы сможете увидеть все стили, общие для этой артборды. Итак, здесь у нас есть список всех цветов, и мы можем просто скопировать их, просто нажав на них.Или вы также можете увидеть телефоны на даре, которые появляются в этом дизайне. Так вот он, источник на шпорах полужирный и сыновья источника, бро. И вы также можете найти его на телефонах Google здесь, в вашем наборе шрифтов. И просто нажав на Показать слои, он покажет вам все эти слои, которые имеют один и тот же стиль. Кстати, это работает и для цветов. Таким образом, он покажет вам, что есть только один слой, желтый или белый, и противопоставленный вашим слоям. Это покажет вам, что несколько наследников не ждут появления.У вас есть список всех наших досок в этом файле, но вы уже знаете, что у far есть только одна рукоятка, так что нет необходимости переключаться. Следующий. У вас есть функция версий, которая позволяет вам проходить различные итерации дизайна. Кстати, если вы хотите добавить новую версию этого файла дизайна или любого другого файла, просто перетащите его. Отредактированный файл дизайна поверх этого вида или обратно в менеджере проектов. Хорошо, если вам что-то непонятно в дизайне, вы можете переключить форму комментария и, знаете, просто нажмите, напечатайте и создайте аннотацию. Или вы также можете просто выбрать какую-то область и снова, просто, вы знаете, прокомментировать ее. довольно просто. Затем вы можете поделиться файлом дизайна. Итак, вы знаете, просто скопируйте ссылку и вставьте ее в свою хронику. Затем вы также можете отредактировать настройки дизайна, чтобы вы могли переключаться между масштабами дизайна, если изображения плотности из файла дизайна отличаются. Этот дизайн был разработан в Monix. Так что мы сохраним это. И если вы хотите изменить единицы измерения с пикселей на две точки или независимые пиксели, вы можете услышать здесь, что вы можете переключаться между цветами.Мы собираемся держать его в гексе. Право на. Дух. Вы также можете скачать файл эскиза и так далее. Вам нравится искать другие файлы, используйте поиск прямо здесь. А допустим он бар и вы увидите, что моментально находит все наши водопады, которые соответствуют этому имени. Вы убегаете и возвращаетесь. Э-э, вот вам, Вы знаете всю информацию. Так что вам все еще нужно подтвердить свою электронную почту и все остальное, что касается вашей учетной записи пальто. Итак, теперь, когда мы разобрались с адекватным интерфейсом, мы можем запустить Коди. Так что увидимся на следующем уроке.4. Экспорт текстовых и графических ресурсов с помощью Avocode. Хорошо, отлично. Какие? Приходите на урок. Номер три. Я очень рад, что вы сделали это так далеко, так что вы можете видеть, что наш веб-сайт все еще не очень хорошо выглядит. Итак, давайте возьмем текст и изображения. Итак, как мы узнаем, где мы должны добавить благодарность, понимаете? Итак, давайте просто используем хром для проверки такого элемента. Нажмите на эту область и перейдите сюда. Итак, например, логотип, и вы можете видеть, что он находится прямо здесь, в атаке H. Итак, чтобы проверить это, это в коде, просто подойдите сюда, и он увидит, что вот этот маленький парень.Итак, давайте откроем это код. И давайте осмотрим этот текстовый слой. Так, кстати, просто дважды щелкнув по нему, он может скопировать текст, вернуться и вставить вот так. Если вы сохраните его, вернетесь к своему коду и обновите его, вы увидите, что Маунт говорит «кофе-бар». Итак, давайте посмотрим на эти предметы здесь. Итак, это в основном говорит о том, что эти предметы заканчиваются здесь. Итак, еще раз, просто проверьте этот код. Вы можете видеть, что это элементы навигации по меню. Правильно? Итак, мы возьмем этот текст из Abacos, просто дважды щелкнув его.Так про батон тут, то чайники тут. Я думаю, связаться прямо здесь. И последнее, это надзиратель, но такой плотный. Вы уже можете видеть. Это довольно просто. Итак, вы видите, что это вот эта кнопка. Если вы не знаете, как узнать снова, просто перейдите сюда. Инспектор Ломонд, нажмите на эту кнопку, и вы увидите, что это жесткая кнопка с приказом класса. Так что у нас все в порядке. Изменено почти все в навигации. Итак, давайте снова сохраним его. Вернитесь, освежите информацию обо всем Техасе прямо здесь.Итак, вот так, мы собираемся скопировать остальную часть текста прямо с веб-сайта. Итак, вы можете видеть, что все дубли здесь указаны правильно. Теперь давайте добавим несколько изображений. Увеличьте немного здесь и выберите. Вы знаете, вы можете видеть, что этот логотип на самом деле состоит из нескольких путей. Таким образом, вы можете либо взять все доказательство, либо просто перетащить его, чтобы выбрать. Вы можете видеть, выбрали ли мы шесть слоев. Теперь он экспортируется, и мы просто назовем его логотипом, и он будет находиться в форме селектора. Мы собираемся использовать право SV G, Export K.Кстати, мы можем видеть, что это был Дональд через папку Дональда. Так что скоро нам придется перемещать активы. Теперь давайте экспортируем этот чайник. Итак, снова вы можете просто повторить текст, дважды щелкнув по нему, чтобы экспортировать его. Вы можете видеть, что это уже холодный чайник, так как слой называется чайником. Мы собираемся использовать p и G для этой растровой карты, чтобы вы могли просто экспортировать снова. Актив загружен, и у нас есть еще несколько активов прямо здесь. Итак, давайте посмотрим, что произойдет, когда мы переместимся, чтобы выбрать все эти lharris одновременно, чтобы он мог видеть, что он выбрал четыре слоя, что также учитывает группу слоев. Итак, давайте просто выберем эти три, теперь нажмите экспорт. Но, вы знаете, мы, очевидно, не хотим, чтобы все эти значки были вместе, чтобы вы могли на слоях цыпленка марта, так как каждый путь — это отдельный слой. Итак, когда вы нажимаете, чтобы переименовать эти активы, вы знаете, что предварительный просмотр покажет вам, какие активы, которые мы так часто называли, я могу использовать на Facebook. О, этот будет. Я прихожу. Я тоже тебя. Это будет Icon Tweeter, и мы будем использовать SPG для всех них, верно? Хит, экспорт. И вы не можете разрешить Тео Дональду несколько файлов одновременно, чтобы избавиться от всех этих Айкенов, загрузите их в свою папку, чтобы мы не могли закрыть это прямо сейчас.Перейдите к загрузкам и давайте возьмем все эти значки и переместим их в эту папку. Так что все эти активы изображений в настоящее время находятся в той же папке, что и наш индексный html-фол. Это верно. Итак, теперь давайте посмотрим, что происходит через наш сайт. Поэтому, даже если мы обновляемся, ничего не происходит. Итак, давайте просто вернемся к коду визуальной студии, и здесь вы можете видеть, что резервуар для исходного логотипа изображения SVG уже есть. Но Unite взяла на себя обязательство. Таким образом, вы можете либо избавиться от них. И теперь, когда вы сохраните его и вернетесь, нажмите «Обновить», изображение будет здесь.Итак, теперь давайте сделаем это для остальной части файла. Кстати, он также может нажать косую черту команды shift на un. Прокомментировал так. Здесь. Вы можете взять все это. Я не могу. И они такие. Хорошо, это безопасно. Вернитесь к обновлению браузера, и все изображения здесь. Хорошо, Эм, вот и все, что нужно для этого урока. А дальше мы добавим немного CSS, чтобы это выглядело так же хорошо, как исходный дизайн. 5. Классы CSS, Flexbox, методология БЭМ и модули REM: прежде чем мы начнем создавать стили, давайте я просто быстро пройдусь по тому, как создать класс и что такое ISS. Если вы уже это знаете, не стесняйтесь переходить к следующему. урок.В основном я буду говорить о классах об использовании гибких блоков, о, знаете ли, об использовании or am в них и обо всех этих других соглашениях. Так что, если вы хотите прыгнуть вперед, не стесняйтесь. Это Джастин Экстра класс. Вы знаете, класс CSS — это тип селектора, который описывает, как выглядит определенная часть веб-сайта. Итак, как только вы определили, какой размер цвета или другие свойства должен иметь какой-либо элемент, вы можете выбрать его, например, в HTML. Вы знаете, вы можете увидеть это здесь. Я выбираю какую-то достаточную часть навигационного класса, например, или тут надо конкурировать классом и так далее.Гм, так что, очевидно, записанный HTM, я могу дать вам ключ к тому, как назвать ваши классы остановки. Итак, если вы посмотрите на эту команду в файле, вы увидите, что на первый взгляд у нас есть root и flex books. Так что давай просто создадим историю очень быстро, хорошо? А на самом деле это флаги, койки. Гм, ну, вы знаете, гибкие книги — это эффективный способ сделать макет и пространство между строками между элементами в контейнере. Итак, вы знаете, расходы на гибкий контейнер. Это контейнер и эти аппаратные элементы. Таким образом, элементы расходов гибкого контейнера заполняют доступное свободное пространство или сжимают их, но предотвращают их переполнение. Так что, знаете ли, эта площадь не переполнилась бы этим. Так что же делает этот класс с фруктами? На самом деле, это селектор, который соответствует корневому элементу документа, в данном случае это HTML. Итак, причина, по которой я на самом деле использую flex, заключается в том, что вы можете установить направление макета. Ты? Нет, нет, просто используйте блок или очередь, но вы можете делать почти все, что хотите. Так установить многие основные аварии над элементами.Вы знаете, если вы просмотрите этот документ прямо здесь, вы увидите, что элементы могут быть отсортированы в разных направлениях, и что направление может быть колонкой ро-ро-рек и полемикой. Так что я на самом деле собираюсь использовать колонку. Я только что получил эту базу возврата в большинстве случаев, так как я редактирую этот класс, который я на самом деле собираюсь сделать, и 70%. Вы заполняете дыру в каждом выключенном браузере? Поскольку у меня есть направление элементов, теперь я хочу центрировать элементы внутри этих контейнеров. Итак, если вы посмотрите на HTML здесь, вы увидите, что я использую flask.Это называется Центр Альянса. А внутри я просто наберу боль в центре предметов. По сути, это определяет поведение по умолчанию в зависимости от того, как расположены гибкие элементы. И на самом деле, если вы внимательно изучите мое первое электронное письмо, вы можете удивиться, почему я использую, знаете ли, эти тире в Интернете, чтобы назвать свои классы? Ну, я использую модификатор блочного элемента. Это своего рода соглашение называть ваши классы. Это также известно как БМ или БАМ, и в основном убедитесь, что я не придумываю свои уроки или не перебарщиваю их.Кроме того, когда кто-то, как вы знаете, читает ваш код, просматривает его или редактирует, его гораздо легче читать, если вы придерживаетесь чего-то вроде Ben Convention. Еще одна вещь, которую нам нужно установить, прежде чем мы начнем вырезать стили, — это единица измерения размера нашего телефона, поэтому, очевидно, вы можете использовать пиксели. Но когда вы определяете размер телефона в пикселях, он всегда остается неизменным. Когда кто-то борется с чтением текста в браузере, ему может понадобиться только размер телефона. Итак, если мы собираемся использовать обода всех телефонов, ну, масштабируйте относительно некоторой базовой единицы, которую мы установили. Итак, самый распространенный пример, и это то, что я собираюсь сделать, это, скажем, часто устанавливать HTM. размер в 10 пикселей, а затем абзац в 12 пикселей, на самом деле, и Тайбэй в переднем размере.Я упоминал об этом, так как мы собираемся использовать оперативную память в наших следующих уроках для экспорта кода CSS. Давайте просто быстро перейдем к добавлению кода и просто настроек. Так что просто шесть и слой и нажмите на это колесо, перейдите к настройкам пальто, нажмите на дополнительные настройки и выберите RAM. Это единицы, а базовое значение составляет 10 пикселей. Мы можем закрыть, что это автоматически сохранено. А теперь вернемся. Хорошо. И последнее, прежде чем мы закончим этот урок, это то, что вы знаете, где-то браузеры часто добавляют поля и отступы, и мне нужно убедиться, что я тот, кто на самом деле устанавливает правила для моего CSS. Так что я добавлю это как маленький селектор. Верхняя часть файла CSS. Это печатает марш в евро. Этот ноль и то, что он делает, в основном гарантирует, что по умолчанию маржа и похлопывание нуля по отношению к тому, как мы устанавливаем их для своих собственных в наших классах. Итак, если вы хотите узнать больше о бане, оперативной памяти или гибком блоке, обязательно перейдите по ссылкам в описании. 6. Скопируйте код CSS из Avocode, чтобы оформить свой веб-сайт: В нашем предыдущем уроке мы добавили гибкие книги и установили их из модулей.Итак, давайте посмотрим, как на самом деле выглядит сайт прямо сейчас. Итак, когда он пройдется по отдельным элементам, вы увидите, что вся эта область посвящена Монро. Навигация также в соответствии с нижним колонтитулом также в соответствии. Замечательно. Итак, давайте начнем писать CSS. Я уже упоминал, что HTML будет для нас своего рода руководством по именам или классам, чтобы они могли работать с HTML-файлом в том виде, в котором он есть сейчас. Поэтому, прежде чем мы создадим больше классов, просто выберите женское тело и скажите им, что у них высота на 100% меньше, чем в браузере. И мы также собираемся стилизовать восьмерку. Повеселитесь с этим классом, поставьте текстовое оформление. Нет. Таким образом, длина не будет на самом деле подчеркнута, как это было. Итак, теперь мы готовы создать наш первый класс с помощью кода. Итак, начнем с тела. Очевидно, нам понадобится бекон по цвету для всего веб-сайта. Итак, давайте увеличим этот цвет из кода Ахмеда. Это хорошо. Выбор цвета. Нажмите на фон, вернитесь назад, вставьте его, сохраните, пролистайте наш сайт, и вы увидите, что фон уже есть.Идеально. Итак, далее нам нужно будет определить семейство телефонов для всего нашего текста. Если щелкнуть снаружи, то можно увидеть, что здесь сломаны только s или sons. Итак, давайте выберем этот фонд. Нажмите на строку назад. А также возьмем высоту строки. Просто нажмите на строку, теперь они соревнуются. Сохраните его. Теперь вернитесь. Тебе холодно. Обновить. Давайте посмотрим на HTML, и здесь мы видим, что у нас есть контейнер, но он все еще не запускается. Итак, этот контейнер на самом деле весит меньше всего веб-сайта. Мне не нужно возвращаться, чтобы получить код, поэтому мера, если вы включите то, что выше, является ориентиром. Вы можете в основном выбрать один и измерить для другого, и вы можете видеть, что вся эта область между кофейной стойкой и кнопкой заказа IHS 1000 и 70 пикселей в ширину. Давай вернемся. А также применим margin auto, проверяем его. Вы можете видеть, что вся эта область имеет 1000 и 70 пикселей света. Дальше этого дело не идет. Теперь давайте откроем наш HTML, чтобы увидеть, какой еще класс мы должны здесь определить. Мы знаем, что у нас уже есть тело.Контейнер и фрукты изгибаются по центру, поэтому мы как бы забыли здесь о панели навигации. Если мы нажмем на навигацию, мы увидим, что она имеет некоторую высоту, некоторые с тенями электронной книги на цвете фона. Прежде всего, вы можете видеть, что Graham ISS здесь и по ширине, и по высоте. Это не совсем идеально, потому что мы сделали это только для телефонов. Итак, снова давайте перейдем к настройкам, расширенным настройкам, которые быстро изменили единицы измерения. Не все в пикселях, и нам действительно не нужна ширина, потому что нам не нужна навигация, чтобы пройти весь путь слева направо.Итак, мы просто возьмем высоту и эти два свойства, хорошо. Похоже, что это было скопировано, а теперь вставлено. Вот так. Итак, нам нужно, чтобы Тео создал стиль для этого заголовка. Итак, просто создадим любой пункт, чтобы начать барабанить обратно в код Abbott, и давайте выберем логотип, текст логотипа. А так как нам это на самом деле не нужно, знаете ли, мы уже бросили вызов семейству телефонов. Нам просто нужна наука о телефоне и точка. Ждать. Так что давайте просто коснемся и, э-э, подойдем к ним.Хорошо? Сохрани это. Взгляните, как здесь все выглядит, ладно? И вы можете видеть, что это довольно сжато вместе. Таким образом, вам может понадобиться Тео какой-то запас между этими двумя. Итак, снова давайте сюда. Ну, увеличьте немного. Просто выберите этот слой и измерьте логотип, и вы увидите, что поле в шесть пикселей, если вы сохраните его, вернетесь и обновите, увидите, что оно больше не сжато. Теперь нам нужно что-то с этим сделать, потому что это снова так, и нам это нужно прямо здесь.Итак, давайте вернемся к коду, и вы увидите, что у нас есть вот этот правильный столбец. Затем у нас есть гибкий блок с кнопкой навигации. Итак, нам нужно создать эти два класса. Итак, прежде всего, давайте сделаем это, которое создаст запуск в левом альте, чтобы сделать код, и вы можете видеть, что эти элементы теперь находятся с правой стороны. Это здорово, вернемся к пальто и давайте создадим навигацию. Возможна не дальняя навигация. Итак, вернемся к коду Анны. Итак, опять же, нам нужен размер телефона.Энди, нам также нужен цвет. Скопируем все. Вернитесь, вставьте это. Будьте известны. Действительно нужно что-нибудь из этого? Давайте посмотрим, как это выглядит в коде, чтобы вы могли видеть, что эти элементы уже стилизованы, так как они наследуют цвет атаки. Нам нужно вернуться сюда в целости и сохранности. Вернитесь в браузер и обновите, и вы увидите, что теперь они все черные. Здорово. А еще нам понадобится вот такая большая вот эта кнопка. Итак, перейдите к коду Alma, например, к этой области или этой области, и измерьте этот элемент.И это как 66 пикселей. Хорошо, и кое-что, что нам нужно сделать здесь, ISS, применяя гибкие баксы. Так что просто введите эту игру в строку Flex, чтобы подумать. Хорошо, если вы заметили, что эта кнопка IHS отличается, когда она активна. Так что нам тоже нужен этот камень. Итак, давайте просто скопируем передний вес, вернемся назад, не будем перемещаться дальше и вставим, чтобы вы могли проверить, что у этого есть активный класс about item. И когда вы вернетесь к коду и обновитесь, это уже Bolt. Ты так думаешь? Последней частью навигации является кнопка со словом.Итак, мы собираемся заблокировать кнопку, и мы собираемся заблокировать ее как для этой области, так и для этой области. И давайте посмотрим, какой класс использовать для кнопки повторного использования кнопки заказа. Так что давайте скопируем этот переключатель в CSS и сюда. Это счастливо. Этот ноутбук должен быть здесь. А что такое трейд или класс кнопки? Выберите кнопку вкл. Итак, что нам здесь нужно? Нам нужен радиус границы и цвет фона. Итак, давайте просто выберем эти два. А также нам понадобится телефонный размер текста внутри, который составляет 20 пикселей.И хотя этот налог уже написан прописными буквами, давайте просто позаботимся о том, чтобы он всегда использовался. Даже когда HTML здесь будет в нижнем регистре, на самом деле код будет преобразован. Верхний случай кажется идеальным. Хорошо, давайте просто возьмем это обратно. Они видят, что приказ по-прежнему синий, потому что он наследует атаку. Так что вам нужно избавиться от лишнего создания Может быть это. Хорошо, создайте еще один класс с вернувшимся к Эмме пальто. Это непохоже на сформированное. Скопируйте цвет. И поскольку текст в этой кнопке немного плохо оформлен, вы можете видеть, что вы не можете измерить заголовки между текстом и границей кнопки.Э-э, вам придется использовать кто Нас. И это было только здесь и другой. Итак, где здесь, когда он выбирает линейку, а затем вы измеряете до края кнопки, это 13 пикселей, а здесь 28 пикселей. Итак, вернитесь к коду при планировании набора текста. Но на фотках нас и много пикселей. Если не добавить высоту строки. Поэтому, когда вы обновитесь, вы увидите, что у нас есть навигация и кнопки. Теперь пришло время закодировать всю эту локацию. Так что, в основном, этот чайник в смерти.Вот и есть жесткость. Итак, нам нужно выделить этот контент, затем левый цвет класса, а затем правый столбец класса. Так что давайте просто создадим их очень быстро. Я верю что смогу. Я перемещаю это вверху, чтобы оно нас здесь не беспокоило, и это отличный контент, и нам нужно его позиционировать. Итак, пойдем сюда. Итак, как у чайника и мерки todo панель навигации это 173 пикселя. Итак, вернемся к коду и напечатаем margin top. Итак, давайте скажем левому столбцу вернуться к нашему добру, и вы можете видеть, что слева есть небольшой запас, который должен быть здесь.Так что мы и дизайнеры Гида избрали меры против него. Итак, сейчас это 48 пикселей. Давайте введем 50, чтобы оно было красивым и округленным, так что напечатайте поля и давайте сделаем правую колонку. Итак, здесь у нас есть текст, который нам действительно понадобится. А зачем задавать эти текстовые поля, чтобы танки никогда не пересекались? Нет, заголовок. Таким образом, вы можете видеть, что оно имеет ширину 450 пикселей, поэтому здесь также есть интервал, чтобы узнать отступ до верхней части этого изображения. Так что это не идеальное выравнивание, чтобы выбрать изображение, навести курсор на текст и увидеть 96 больших соусов прямо здесь.Так что я не хотел вас народ. 96 пикселей и что? Так что мы уже начали этот пункт, но вы можете видеть, что этот заголовок находится в танке H one, а затем в этом Texas in the park graftech. Так что нам придется, знаете ли, принять этот пункт. Континенты свободы и каждый здесь. Да и потом здорово. Еще один с абзацем. Правильно. Итак, давайте откроемся, наденем пальто и проверим этот заголовок. На самом деле мы хотим, чтобы все инсайдеры были рядом, поэтому просто быстро вернитесь в действие. Итак, госпожа возьми передние песни, тогда нам, очевидно, понадобится цвет, а также высота строки. Итак, это выглядит довольно хорошо. Хорошо, теперь давайте продадим абзац. Вернись к я козел. Как абзац. Будь цветом. Да, вам понадобится передний размер в ободке, а затем не плевать на расстояние между абзацем и этим заголовком. Так вот 13 пикселей на поля ушло. Может быть, это будет 56. Давайте вернемся назад, и вы увидите, что этот абзац остановился. Хорошо, теперь снова нам нужно запустить этот горшок в этот горшок и еду, верно? Нет, у нас есть цирк.Итак, вот некоторый порядок содержания растений. И это на самом деле, ммм, также для абзаца. Так что мы по-прежнему это тоже. Итак, вернемся к коду. Итак, как этот, размер телефона и цвет, никто не знал, что цвет — это, знаете, просто размер телефона. А также есть преобразование текста в верхний регистр. Просто будьте уверены. Кроме того, нам нужно расстояние между полем выбора цвета и этим абзацем. Итак, 47 пикселей. Вы знаете, началось. Он может вы согласитесь измерить это? Нравится? Выберите даже этот горшок.И сколько год стоил эту часть? Тем не менее, здесь, чтобы увидеть 47 6 месяцев вверх. Следующий. Что у нас есть следующий контент или выбор? Вероятно, это будут маленькие разноцветные круги. А также у нас есть круг Выберите круг, и пока что это будет все, чтобы сделать его кругом. Радиус границы 50%. Итак, в коде вы можете видеть, что у нас есть четыре идеально закругленные фигуры, и каждой нужен свой цвет. Итак, нам нужно создать модификатор вне круга. Итак, давайте проверим. Это здесь, так как белый.Хорошо. А теперь давайте выберем эти цвета. Это здесь, в цвете фона для этого, но этого на самом деле не должно быть здесь. Должно быть на пути. Вот этот. Видишь ли, оглянись назад, и все кассиры уже здесь. Хорошо? Таким образом, вы можете видеть, что между ними должно быть некоторое пространство. Эти круги, на самом деле, возвращаются, чтобы добавить код, мистер Дик. Расстояние. Хорошо, 30 делает души вашим mac-кодом и маршем, прямо в пикселях. Хорошо. И нам на самом деле понадобится еще несколько. Итак, расстояние между этой частью и этой частью Итак, поля заняли 16 пикселей, и на самом деле, для чего контент или выбор? Итак, Мартин Том, 16 пикселей. Хорошо, это выглядит довольно хорошо. И нам нужно немного места прямо здесь. На самом деле нам понадобится еще один класс для этого, чтобы он мог видеть, что у нас есть круги, которые добавляют секунды прямо здесь. Совесть. Правильно. И это должно быть 36 х 30 пикселей, и вы можете видеть, что это было довольно хорошо. Последнее, что нам нужно сделать, это нижний колонтитул. Итак, давайте лайкнем это и сравним с этим. Итак, это 18 пикселей, и пиксели, и марш в разговоре, вы знаете, оставьте это в стороне, вверх Далее, у нас будут эти социальные иконки, возможно, так что это будет нижний колонтитул.Итак, расстояние между этими иконками составляет 30 пикселей, и мы будем использовать отображение онлайн Flex. Это вполне нормально. Последний бит — это цвет этих танков. Слишком рано Это не очень хорошо. Давайте посмотрим, как это делается. Да, наверное, это нижний колонтитул и тег P. Так что просто скоро. Возьмем цвет, и у него есть некоторая емкость. Итак, давайте возьмем и то, и другое в забавном размере, сохраним его, вернемся к вашему свежему, и это выглядит довольно хорошо. Однако есть одна вещь, которую я на самом деле забыл, и что они задерживают эту черную кнопку.Знаешь, если помнишь в дизайне, то он шикарно выглядел иначе, чем этот. Он имеет тот же размер и тот же радиус границы. Однако у него другой цвет и обводка. Итак, вернемся к нашему HTML. И здесь вы можете видеть, что он использует это предложение. Итак, давайте быстро создадим этот класс, и нам просто нужна только граница. И мы также собираемся установить слишком прозрачный цвет фона. И на самом деле есть еще одна вещь. Если вы увеличите масштаб, вы увидите, что у белого круга есть тень от других.Не надо. Итак, мы быстро исправим это в CSS, чтобы найти круг. Посмотрите тень, удалите ее, а затем просто нанесите ее на белое обновление. И вы можете видеть, что теперь только у белого есть тень, а у других нет. Когда вы обновляете и сравниваете закодированный результат с дизайном, я думаю, что он выглядит неплохо. Хорошо. Здорово. Он только что научился программировать веб-сайт намного Фостера. Надеюсь, вы хорошо провели время. И еще раз спасибо за этот урок. Любые вопросы. Не стесняйтесь спрашивать меня здесь.Просто пришлите мне письмо. Еще раз спасибо 7. Бонус — Интеграция с кодом VS — проверьте дизайн рядом с кодом: Хорошо, этот бонус будет очень быстрым. ID хотел бы показать вам, как проверить дизайн рядом с вашим кодом. В настоящее время Abaco обеспечивает интеграцию с кодом Atom и Visual Studio. Я покажу вам, как установить интеграцию кода V. Итак, начните с открытия кода Bs. Перейдите к расширениям и введите код Alva, нажмите, установите, а затем перезагрузите для активации. Итак, вы видите, что интеграция Abaco была установлена ​​в коде V s.Мы можем закрыть это прямо здесь, а затем перейти к просмотру палитры команд или просто нажать Command Shift Be или Control Shift. Будьте, если ваши собственные и окна и печатание имеют удар пальто, входите и имейте добрую волю. Откройте в своем коде V s. Теперь вам нужно войти в свою учетную запись, а затем открыть свой проект. Вы также можете перетащить это, чтобы немного решить, чтобы увидеть все, что я код. А теперь откройте конструкцию. Хорошо, здесь вы можете видеть, что у нас есть все слои, все, что вы могли видеть на среднем пальто на веб-дорожке, рядом с вашим кодом.Так, например, вы можете выбрать этот круг, и вы увидите, что у него есть выступ на 36 пикселей. Итак, что вы можете сделать прямо сейчас, так это перейти сюда в свой CSS и ввести with. И пока вы печатаете, вы видите, что код V дает вам рекомендацию. У меня есть корт в основном без заливки, который находится в выбранном слое. Итак, еще раз, если вы наберете высоту, вы увидите, что Дьякон просто идет сюда, выбирает значение, и оно находится в вашем CSS. Вам не нужно, знаете ли, копировать и вставлять это.Вы можете просто начать печатать и бум. Вот оно. Итак, вот как вы можете проверить Ларри рядом со своими стилями CSS. Я думаю, что эта функция очень удобна, когда вы хотите ускорить кодирование, а также увидеть дизайн во время кодирования. Кстати, аналогичная интеграция доступна бесплатно и для осеннего редактора. Поэтому, если вы заинтересованы в адекватных интеграциях, просто перейдите на эту интеграцию с косой чертой euro abaco dot com, а затем нажмите либо на атом, либо на код визуальной студии. 8. Бонус — Зачем использовать настольное приложение Avocode: и я чуть не забыл.Есть еще один бонус, так что давайте заглянем внутрь. До сих пор мы кодировали с помощью других хороших веб-приложений, которые открываются в браузере. В этом классе я хотел бы немного рассказать вам о преимуществах использования рабочего стола Abaco. Поэтому, если вы хотите загрузить другое настольное приложение co, просто дайте Abaco косую черту, загрузите и выберите платформу. Если вы участвуете в Windows Mac Olympics, я сейчас на Mac. Так что я оставлю это на Макбул с. И прежде чем мы, Дональд, вы можете увидеть, что настольное приложение также работает с некоторыми плагинами.У нас есть подключаемый модуль для фотошоу в Sketch Blufgan и иллюстрированный подключаемый модуль. Очевидно, вы уже видели, что вы можете импортировать дизайн, фонды в Abaco напрямую, просто отслеживая и удаляя. Но если хотите, вы также можете спеть их прямо из иллюстратора эскизов фотошопа, а также из 60 и figment. Итак, давайте продолжим загрузку следующей папки Koto Downloads, и здесь вы можете увидеть, что вы загрузили этот файл, только что опубликовали его, а затем переместите его в свои приложения. Хорошо, есть комитет теперь в вашей папке приложений, так что просто дважды подумайте, чтобы открыть его, а затем Логан, вы также можете заглянуть с помощью браузера.Поскольку вы были заблокированы, прежде чем сказать авторизованное приложение, вы можете видеть, что наш дизайн уже здесь. Когда он открыл дизайн финала, то можно увидеть, что он довольно популярен, чем в Сети. Кроме того, если вы вернетесь и он уже открыл его, вы увидите маленький значок, который доступен в автономном режиме. Таким образом, даже если вы потеряете подключение к Интернету, вы сможете открыть его. Проверьте свои дизайнерские веера, которые уже были загружены. Еще одним преимуществом африканского пути является то, что вы можете изменить путь эксперта для своих графических ресурсов.Обычно он настроен на доминирование, но вы можете изменить его, перейдя в проект. Это настройки, и здесь вы можете настроить его на путь, когда наш проект ISS по умолчанию, то есть открытый дизайн. Затем, когда вы дважды щелкнете по активу, чтобы экспортировать его, вы увидите, что экспорт идет в Интернет с кодом alma, и вы даже можете указать это дальше. Собственно, на уровне каждого экспортируемого актива. Просто нажмите на эту кнопку, и вы увидите, что я создал эту маленькую папку под названием Time G, которая выбрана открытой.И когда он нажмет на экспорт, актив будет в Цфате. Там вы можете видеть, что это уже здесь. Дефицит. Итак, поскольку вы уже установили код alma, когда у вас есть рабочий стол и у вас установлен эскиз, когда ваш компьютер также автоматически устанавливает подключаемый модуль. Так что просто выберите произведение и нажмите Comanche, и вы увидите, что оно будет отправлено в проект. Это его кофейня. Здесь вы действительно можете изменить название проекта, и, поскольку этот дизайн уже существует, он говорит, что один дизайн будет обновлен.Если вам нужно было добавить снятое, сожженное, дизайн будет автоматически импортирован, и вы также можете создать новый проект, в который вы сможете импортировать дизайн. Так что давайте назовем это персиковым проектом. Когда вы вернетесь к проекту PCI, вы увидите, что дизайн уже существует. Вы можете просто открыть его, и он уже здесь, как и в скетче в 60, вы можете экспортировать все художественные слова сразу. Но если вы хотите исключить какой-то рисунок, скажем, этот, например, вы можете просто удалить его, добавив пакет или подчеркивание перед его названием.Это означает, что этот наш бот не будет отправлен с остальными файлами. Теперь просто грудной вариант команды Е у хорошего откроется. И так как мы уже были в проекте PCI, он предложит вам добавить бесчестие и сюда. Итак, давайте сильно ударим, и вы увидите, что дизайн уже импортируется. Итак, загрузка завершена. Дизайн здесь, и вы можете видеть, что все наши слова импортированы должным образом. Когда вы дважды щелкнете по произведению, оно откроется, и вы сможете начать его осматривать.Вы также можете импортировать. Я не отфотошоплен, и это будут иллюстративные файлы. В конце концов, вам решать, решите ли вы перетащить дизайн, чтобы импортировать его, или если вы хотите поглотить его из инструмента дизайна. Последняя функция из другого настольного приложения, которую я хотел бы вам показать, — это инструмент, который называется проверкой пикселей. Вы можете найти его прямо здесь и, нажав на эту кнопку, я код. Мы покажем вам расширяемое окно дизайна. Он прозрачный, так что вы можете, знаете ли, видеть, что находится внизу.Он может изменить его размер. Вы можете отключить фон и включить его, и вы можете закрепить его. Эта функция очень полезна, когда вы хотите сравнить дизайн с вашим кодом. Это результат. Надеюсь, этот урок был для вас полезен. А если вы хотите воспользоваться преимуществами настольного приложения Abaco, просто перейдите на страницу загрузки abaco dot com slash.

ТЕХНИЧЕСКИЕ ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ · Avocode

Здесь вы найдете некоторые основные шаги по устранению неполадок, которые вы можете попробовать самостоятельно. Также посетите https://help.avocode.com для дальнейших руководств и подробных объяснений нашего продукта.

ОБЩИЕ ПРОБЛЕМЫ ПРОИЗВОДИТЕЛЬНОСТИ: Если вы чувствуете, что ваш Avocode работает медленно, часто дает сбои или у вас возникают другие проблемы, связанные с производительностью, выполните следующие действия по устранению неполадок:

• убедитесь, что ваш компьютер соответствует требованиям аппаратного обеспечения. требования для запуска Avocode — требования к аппаратному обеспечению можно найти здесь — https://help.avocode.com/en/articles/1326937-updating-avocode-desktop-app
• попробуйте запустить Avocode без каких-либо других приложений, работающих в фоновом режиме
• проверьте, происходит ли такое поведение как в настольном, так и в веб-приложении — если это только веб-приложение, попробуйте очистить файлы cookie и кэш/открыть веб-приложение в окне в режиме инкогнито или попробуйте переключиться на другой браузер
• , если проблема возникает только в настольном приложении, попробуйте удерживать нажатой клавишу Windows/Command (в зависимости от вашей ОС) и перейти к Справка-> Устранение неполадок-> Очистить данные пользователя
• , если очистка данных пользователя не помогает, попробуйте переустановить все приложение
• , если вы Выполнив все вышеперечисленное, но проблемы с производительностью все еще сохраняются, посмотрите это видео, в котором показано, как получить файлы, необходимые для дальнейшего устранения неполадок (конкретный снимок экрана и файл JSON), а затем отправить их нам по адресу [email protected ]

ОШИБКА ОБРАБОТКИ. ПОЖАЛУЙСТА, ОБРАЩАЙТЕСЬ В ПОДДЕРЖКУ: Если вы столкнулись с этой проблемой с вашим файлом Sketch, вы можете сделать несколько вещей самостоятельно, прежде чем обращаться к нам:

• много раз, эта проблема вызвана комбинированными фигурами с большим числом подформ внутри(+-60/70 и выше). В большинстве случаев это небольшие фигуры на заднем плане, создающие большую картину. Если вы обнаружите такой(е) слой(и) в своем дизайне, обходной путь состоит в том, чтобы объединить все слои пути, которые формируют дизайн, для экспорта в один слой с помощью Layer -> Combine -> Union
• , если вы используете более старую версию Sketch. , попробуйте пересохранить ваш файл в новейшей версии.

AVOCODE АВАРИЙНО РАБОТАЕТ С ОШИБКОЙ WEBGL: Если ваш Avocode аварийно завершает работу с ошибкой WebGL в качестве темы, скорее всего, у вас либо не включен WebGL, либо ваша графическая карта не поддерживает его.Чтобы проверить совместимость с WebGL, вы можете посетить этот веб-сайт в нашем справочном центре, где мы более подробно освещаем эту тему: https://help. avocode.com/en/articles/1016645-avocode-web-app- web-gl-requirements

ОБЛЕГЧЕННЫЙ РЕЖИМ: если вы находитесь в облегченном режиме в Avocode, возможно, это связано с одной из следующих причин: см. модальное окно «Загрузка шрифта». Чтобы загрузить свои шрифты, вы можете либо выбрать их в файловом менеджере, либо просто перетащить файлы.Обратите внимание, что загружая шрифты, вы соглашаетесь с нашими условиями.

Если это не помогло, вам может понадобиться вручную найти шрифт на вашем компьютере и перетащить его в модальное окно:

Mac:

1) Откройте Finder и нажмите «Перейти» и «Перейти к папка» опция 2) Вставьте это по пути /Users//Library/Application Support/Adobe/CoreSync/plugins/livetype/.r (замените имя пользователя своим именем пользователя) 3) Загляните в папку — там должны быть файлы шрифтов (Font files .otf)

Windows:

1) Перейдите в AppData\Roaming\Adobe\CoreSync\plugins\livetype\r\ 2)Загляните в папку и там должны быть файлы шрифтов (файлы шрифтов . otf) 3) Перетащите все эти файлы в модальное окно с отсутствующими шрифтами и дождитесь всплывающего уведомления

ПРОБЛЕМЫ С ФАЙЛАМИ ADOBE ILLUSTRATOR. как сбой обработки, неправильные цвета и т. д. Для некоторых случаев у нас есть обходные пути, например, когда каждая текстовая строка абзаца отображается как отдельный слой, поэтому высота строки не включается в экспорт кода.В этом случае используйте инструмент измерения, чтобы получить высоту строки текста.

ЭСКИЗ НЕПРАВИЛЬНАЯ ВЫСОТА ЛИНИИ, КОГДА ТЕКСТОВОЕ ПОЛЕ УСТАНОВЛЕНО НА АВТОМАТИЧЕСКИЙ: Когда для текстового поля установлено значение Авто, это может привести к тому, что текстовое поле будет выглядеть иначе в Avocode, поскольку с автоматическими границами размеры могут быть произвольными. Когда это изменено на Фиксированное и повторно загружено в Avocode, оно отображается правильно.

Не нашли то, что искали? Попробуйте задать свой вопрос в разделе «Помощь» на этой странице или свяжитесь с нашей командой по адресу [email protected], мы будем рады помочь!

Авокод, Инк.

Информация | Avocode, Inc. Профиль

Мы установили стандарт для поиска электронных писем

Нам доверяют более 10,1 миллиона пользователей и 95% участников S&P 500.

---

Нам не с чего было начинать. Прочесывание сети в любое время ночи не поможет.RocketReach дал нам отличное место для старта. Наш рабочий процесс теперь имеет четкое направление — у нас есть процесс, который начинается с RocketReach и заканчивается огромным списком контактов для нашей команды продаж. Это, вероятно, экономит Feedtrail около 3 месяцев работы с точки зрения сбора потенциальных клиентов. Теперь мы можем отвлечь наше внимание на то, чтобы на самом деле преследовать клиента!

Отлично подходит для создания списка лидов.Мне понравилась возможность определять личные электронные письма практически любого человека в Интернете с помощью RocketReach. Недавно мне поручили проект, который касался связей с общественностью, партнерства и информационно-разъяснительной работы, и RocketReach не только связал меня с потенциальными людьми, но и позволил оптимизировать мой подход к поиску на основе местоположения, набора навыков и ключевого слова.

— Брайан Рэй , Менеджер по продажам @ Google

До RocketReach мы обращались к людям через профессиональные сетевые сайты, такие как Linkedln. Но нас раздражало то, что нам приходилось ждать, пока люди примут наши запросы на подключение (если они вообще их принимали), а отправка обходится слишком дорого. огромное количество контактов, которые мы смогли найти с помощью RocketReach, платформа, вероятно, сэкономила нам почти пять лет ожидания.

Это лучшая и самая эффективная поисковая система электронной почты, которую я когда-либо использовал, и я пробовал несколько.Как по объему поиска, так и по количеству найденных электронных писем я считаю, что он превосходит другие. Мне также нравится макет, который удобен для глаз, более привлекателен и эффективен. Суть в том, что это был эффективный инструмент в моей работе как некоммерческой организации, направленной на руководство.

До RocketReach процесс поиска адресов электронной почты состоял из поиска в Интернете, опроса общих друзей или поиска в LinkedIn. Больше всего разочаровывало то, сколько времени все это занимало. Впервые я воспользовался RocketReach, когда понял, что принял правильное решение. Поиск электронных писем для контактов превратился в разовый процесс, а не в недельный процесс.

Поиск электронных писем для целевого охвата был ручным и отнимал очень много времени. Когда я попробовал RocketReach и нашел бизнес-информацию о ключевых людях за считанные секунды в простом и беспроблемном процессе, я попался на крючок! Инструмент сократил время установления контакта с новыми потенциальными клиентами почти на 90%.

Ceros объявляет о приобретении платформы Design-to-Code Avocode

НЬЮ-ЙОРК (NEW YORK), 20 октября 2021 г. /PRNewswire/ —   Ceros, облачная платформа для проектирования без кода, обеспечивающая исключительное интерактивное цифровое содержимое, сегодня объявила о приобретении пражской Avocode, революционной дизайнерской компании. Платформа для кодирования, используемая такими компаниями, как eBay, Panasonic и Tesla. Покупка позволяет Ceros улучшить интеграцию Avocode Open Design API и устранить слишком знакомую проблему для дизайнеров — как перенести файлы дизайна с одной платформы на другую.

Технология

Avocode, с которой Ceros ранее интегрировалась, экономит время дизайнеров за счет преобразования файлов дизайна из таких источников, как Adobe Illustrator, Adobe Photoshop и Sketch, в интерактивный онлайн-контент через Ceros Studio. Этот процесс взятия оригинальных файлов дизайна и воплощения их в жизнь в Интернете не вызывает затруднений. Он не требует кодирования со стороны дизайнера, что является отличительной чертой продуктов Ceros.

По словам генерального директора Ceros Саймона Берга, технология

Avocode идеально подходит для выполнения миссии Ceros по оказанию помощи миру в раскрытии творческих способностей.

«Мы безумно рады, что команда Avocode и технология станут частью семейства Ceros, — сказал Берг. «Наш бизнес и культура не могут быть более согласованы, и наше общее видение будущего ощутимо».

Генеральный директор Avocode Ву Хоанг Ань считает Ceros лидером в творческой индустрии и на собственном опыте убедился, что Ceros поддерживает API Open Design компании. Команда Avocode считает, что Ceros предлагает лучший способ развития технологии и доведения ее до более широкой аудитории.

«Мы очень рады присоединиться к Ceros сегодня и еще больше рады возможности продолжить нашу совместную миссию по открытию дизайна для всех. Ceros, несомненно, является правильным домом и лучшей командой, к которой можно присоединиться», — сказал он. «Мы не только можем вывести нашу миссию на новый уровень, но, что наиболее важно, обе компании разделяют одни и те же ценности. Нам не терпится увидеть, какие потрясающие продукты мы создадим вместе».

Ceros сохраняет и расширяет состав команды Avocode в Праге, многие из которых сосредоточатся на использовании Open Design API для дальнейшего масштабирования Ceros Studio, помогая пользователям увеличить время окупаемости и сократить время выхода на рынок.

Добавляя в свой стек открытый API дизайна, Ceros ускоряет усилия по удалению кодирования из творческого процесса. Это открывает захватывающие возможности для полуавтономного, «безголового» дизайна, когда контент появляется через API для отображения на разных устройствах. В планы также входит использование искусственного интеллекта и машинного обучения для устранения трудоемких и повторяющихся задач с целью раскрытия творческого потенциала клиентов Ceros и более широкого сообщества.

«Как клиент и партнер Ceros, я очень рад такому шагу, — сказал Питер Орловски, старший вице-президент по стратегическому партнерству Getty Images.«Getty известна своим творческим и инновационным подходом к бизнесу и технологиям. Ceros разделяет эти ценности. Это приобретение еще раз подтверждает этот факт. Я с нетерпением жду, что будет дальше».

Ceros планирует создать дорожную карту, которая полностью реализует возможности межплатформенного перемещения файлов дизайна. Видение компании заключается в том, чтобы перенести любой такой файл — будь то из Adobe, Canva, Sketch или откуда-то еще — в Ceros Studio для быстрого и простого создания интерактивного онлайн-контента.

«Дизайнеры думают не о форматах файлов и коде, а о творческих и художественных способах мышления. Ключевым моментом является устранение барьеров для раскрытия этого творческого потенциала», — сказал Берг. «Мир в целом недооценивает важность дизайна и творчества, и Ceros полна решимости изменить это. Благодаря API-интерфейсу открытого дизайна Avocode мы на шаг ближе к более связанному, открытому и эффективному миру дизайна для бизнеса и креативщиков во всем мире».

Приобретение следует за более чем 18 месяцами важных вех для Ceros, включая запуск в январе 2020 года инструмента визуального комментирования MarkUp, который недавно достиг 150 000 пользователей; объявление в июле 2020 года о финансировании в размере 100 миллионов долларов США под руководством Sumeru Equity Partners; и революционная версия 7 в ноябре 2020 года.

Для получения дополнительной информации о Ceros посетите сайт ceros.com.

О Ceros
Ceros — это облачная платформа для создания экспериментального контента, которая позволяет маркетологам и дизайнерам создавать насыщенный интерактивный контент без написания кода или традиционной веб-разработки. Ceros Studio — единственная в своем роде платформа, способная создавать творческий контент в любом масштабе. Компания Ceros, основанная в 2012 году, имеет офисы в Нью-Йорке и Лондоне и используется многими ведущими мировыми брендами.Узнайте больше о Ceros на сайте ceros.com и следите за новостями на сайте @cerosdotcom.

О компании SEP
Sumeru Equity Partners («SEP») — компания, ориентированная на развитие технологий, которая инвестирует в компании, предоставляя программное обеспечение, технологические услуги и оборудование. Фирма использует ориентированную на рост модель партнерства с технологическими компаниями и обычно инвестирует от 25 до 200 миллионов долларов в каждую транзакцию. Фирма была основана в 2014 году опытной командой из Silver Lake Sumeru, фонда прямых инвестиций, основанного в 2007 году в Silver Lake.SEP имеет давнюю историю инвестирования и партнерства с основателями и управленческими командами для создания лидеров роста. SEP поддерживает ведущие компании-разработчики программного обеспечения, такие как Azuga, Ceros, GoGuardian, MDSL, Social Chorus, Blackline, Talend, Kyriba и Buildium. Для получения дополнительной информации о SEP и его полном портфолио посетите сайт www.sumeruequity.com.

Контакт со СМИ
Эрин МакКриди
BLASTmedia для Ceros
[электронная почта защищена]
317.806.1900 x155

ИСТОЧНИК Ceros

Найдите баланс, чтобы облегчить когнитивную нагрузку вашей аудитории с помощью Avocode

Этот выпуск FF спонсировался emfluence.Свяжитесь с маркетологом, чтобы увидеть, как ваша стратегия будет работать в маркетинговой платформе emfluence.

---

📋 TL;DR основные выводы из этого выпуска:

1. Сократите количество различий в тексте, дизайне, цвете и т. д. ИЛИ убедитесь, что различия в дизайне работают.

2. Нахождение баланса в стилях текста (например, заголовок, за которым следует меньший текст абзаца) может иметь большое значение для когнитивной нагрузки вашей аудитории.

3. Следите за мерой, количеством символов в строке.Избегайте сирот, слова в конце абзаца, которое появляется само по себе, и тестируйте макет на мобильном устройстве. Используйте адаптивный код, чтобы подтянуть текст.

---

Мэтью Смит: Привет, фанаты электронной почты. Это еще один выпуск Feedback Friday. Я надеюсь, что вы делаете фантастические сегодня. Пришло время улучшить дизайн, никогда не спамить. Это то, что мы делаем здесь, в Feedback Friday. Мы знакомим с этикой электронной почты и дизайном электронной почты всех наших друзей-электронщиков. Сегодня мы рассмотрим электронные письма Avocode.Это одни из моих фаворитов за их тип графического мастерства. Я в предвкушении. Итак, давайте сначала поговорим о том, чего эти электронные письма пытаются достичь?

У меня есть пара вариантов, но Avocode делает процесс создания вашего дизайна более плавным. Они хотят очень быстро донести свое уникальное торговое предложение и донести его до своих пользователей, помочь им понять, для чего предназначено электронное письмо, быстро обслужить их, а затем заставить их совершить действие.

Давайте рассмотрим это письмо в качестве примера. Это то, что мне нравится в Avocode. Содержание просто очень прямо и по делу. «Завершайте свой следующий проект быстрее с новым приложением Avocode» Я хочу заканчивать проекты быстрее, верно? Так что они дают мне обещание, которое я считаю действительно захватывающим. Это действительно интересно.

Овал 25 + Прямоугольник 1 Копия 1300 Сохранить электронную почту

Перезапустить пробную версию Avocode

Это не просто использование Avocode для запуска вашего нового приложения, но и «завершение его быстрее».И я думаю, что когда у нас есть возможность продавать это как предложение, мы можем продвигать вперед дела наших клиентов. Они понимают, почему они нанимают Avocode. Я бы нанял его, чтобы он был более эффективным с моим дизайном для процесса запуска, и я думаю, что это довольно круто, как они это сделали.

Они проделывают фантастическую работу, я думаю, они просто очень милые и большие со своим контентом и не мешают. Мне нравится много говорить о дизайне гольфа в этих эпизодах, и они проделали фантастическую работу, оставаясь очень простыми и сводя к наименьшему общему знаменателю различные доступные элементы шрифта.

Итак, у вас есть заголовок и размер шрифта. И в этом случае он белый, но здесь используется тот же размер шрифта. И такая разница в конечном итоге имеет большое значение с точки зрения когнитивной нагрузки для ваших пользователей. Итак, все, что вы можете сделать, чтобы уменьшить количество различий, которые у вас есть, или убедиться, что каждое из них работает.

Например, мы добавили сюда значки. А эти маленькие описания к иконам.Они делают работу. У них есть цель, да. Используя образы, например, мой взгляд сначала обращает внимание на эти образы, поэтому я действительно хочу знать, о, ладно. Я узнаю Фигму. Прохладный. Он работает с Figma, а потом О, отлично. Например, я могу делать заметки и описывать изменения в моих файлах дизайна.

Фантастика. Хорошо. И тогда я могу перезапустить пробную версию, потому что в моем случае это не является частью того, чем я занимаюсь как дизайнер и режиссер. Итак, у меня был пробный период, и я не стал его продолжать, но я действительно думаю, что они делают действительно хорошую работу, просто чтобы вернуть меня и понять, что я могу сделать.

Также посмотрите на их мобильный. Я думаю, что они проделали хорошую работу здесь. Одна из вещей, которые я обнаружил, это то, что люди часто быстро переходят к одной колонке из двух колонок. Две колонки по-прежнему хорошо читаются на мобильных устройствах, и я думаю, что они проделали хорошую работу по поддержанию этого. Одна вещь, которую я бы изменил, это то, что называется мерой.

Это типографский термин, но мера от «экспорта» до «от» довольно длинная для выравнивания текста по центру и приводит к некоторым сиротам. Итак, в этом случае у нас есть это «из», а затем «Фигма» сама по себе и «файлы дизайна» сами по себе.Вы знаете, вы пытаетесь избежать этого. Так что протестируйте это, например, в приложениях, таких как Litmus или Email on Acid, и, возможно, внесите небольшое изменение в адаптивный код, чтобы, когда он отображается в мобильном представлении, вы немного подтянули его.

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

Итак, давайте еще раз перейдем к следующему письму. Действительно мило. Чистый, легко читаемый, и их призыв к действию такой: у них есть только один красивый большой призыв к действию, и он говорит: «Сэкономьте 20%» на Avocode. Я люблю это. Это так ясно. Я бы сказал, что с точки зрения удобочитаемости или доступности эти минус 20%, вероятно, будут немного сложными.

Овал 25 + Прямоугольник 1 Копия 1300 Сохранить письмо

Скидка для всех студентов и выпускников

Что это письмо пытается сделать в первую очередь? Мы понимаем, что это попытка дать людям понять, что есть что-то особенное, есть распродажа, и я думаю, что они проделали хорошую работу, используя этот розовый, чтобы действительно привлечь внимание и помочь людям понять, что он должен быть особенным. Больше похоже на продажу.

Возможность рассказать эту информацию, получить эту информацию, а затем переместить людей в центр внимания, который является CTA. Я думаю, что минус 20% чувствует себя хорошо, но опять же, может быть более доступным. Дайте мне знать, что это недельная распродажа «Снова в школу». Прохладный. Получите это очень быстро. Это немного вспомогательного текста, а затем прямо к призыву к действию.

Это интересный инструмент, использующий время для стимулирования продаж. Так что я видел, как это работает довольно хорошо, и я думаю, что это тоже может быть динамичным.Я думаю, что это немного сложно, когда это не согласуется между клиентами, но я думаю, что вы можете персонализировать его на основе некоторых действий, которые они недавно предприняли.

И пока вы создаете такое ощущение, оно имеет смысл и не является бесполезным для пользователя. Я думаю, что это может работать очень хорошо и помочь людям действовать. Мне нравится этот небольшой компонент отзыва, который они добавляют сюда. Я думаю, что этот тип компонента можно было бы использовать и в других версиях, а также в том последнем письме.

Овал 25 + Прямоугольник 1 Копия 1300 Сохранить по электронной почте

Публичный запуск: интеграция Jira

Кроме того, у них также есть дополнительный компонент — другие группы, использующие Avocode. В этом случае вы в хорошей компании. А потом здесь написано, я бы, наверное, сказал, а также эти компании, так что @AODM, то есть здесь представлен Максим, но я хотел бы немного больше контекста по этим логотипам здесь внизу, но в целом, я просто почувствуйте себя еще одним фантастическим электронным письмом.

Наконец, третий.Давайте посмотрим на это. «Возвращайтесь за JIRA и другими новыми функциями». Итак, это еще одно обновление для них, которое позволяет людям узнать, что в Avocode есть новые функции, которые вы можете проверить, и, возможно, это то, что заставляет меня захотеть вернуться. Правильно? Так что это попытка уменьшить отток.

Вот для чего предназначено это письмо. Вернись. И затем новая функция — JIRA. Я думаю, это очень полезно. Наглядное изображение JIRA здесь чрезвычайно полезно и позволяет мне узнать немного больше об этом инструменте.Итак, я представляю, что они сегментировали меня в ситуации, когда я упал, а затем, может быть, я тот, кто может быть заинтересован в таком инструменте, как JIRA, или, может быть, это для всех людей, которые упали, а затем пытаются заставить людей реинтегрироваться таким образом.

Это умно. Я думаю, что это работает очень хорошо. С точки зрения дизайна, у этого письма есть некоторые проблемы. Я думаю, что он перемещается от выравнивания по левому краю к центру. То тут, то там опять по центру, помогает этот разделитель, визуальный разделитель черного и белого.Но если можете, будьте последовательны. Итак, если мы вернемся сюда, вы увидите, что они делают вещи в гораздо более левой манере, и это работает намного более последовательно, и это чувствуется немного лучше.

В то время как это начинает казаться зазубренным. Ладно, ушел. Выровнено. О, по центру. И мы переключаем передачи. Так что просто знайте об этом. Это немного придирка, потому что у них есть этот делитель, но имейте в виду, что это то, на что вы можете обратить внимание. Это просто хорошая дизайнерская обработка.Но в целом, я думаю, они проделали хорошую работу.

Хорошая работа Avocode. Что они могли бы улучшить? Что, если я действительно забыл, что делает Avocode или как я могу его использовать. Я думаю, что небольшой тизер внизу: «Нужен обзор того, что Avocode может сделать для вас и вашего следующего проекта?» И отправьте меня на сайт, чтобы узнать больше, может быть, о пробной версии, дайте мне немного больше информации о том, что включено в пробную версию, или могу ли я получить еще 14 дней или что-то в этом роде, может быть интересно попробовать.Есть несколько разных вещей.

Сообщите нам @reallygoodemail, если у вас есть идеи о том, как Avocode может улучшить то, что они делают, или если у вас есть какие-либо вопросы и отзывы. Мы также хотели бы получить некоторую информацию от команды Avocode.

Спасибо, что пришли. Я с нетерпением жду возможности пригласить своих детей сегодня вечером и провести с ними приятные длинные выходные. У всех есть замечательный. Постарайтесь оставаться в здравом уме там. Люблю тебя, скоро поговорим.

Интеллектуальные методы и инструменты для веб-дизайна

Этот год действительно очень активен, когда мы говорим о разработке инструментов, появляющихся на рынке.Photoshop больше не единственный выход, хотя он и один из лучших, но есть множество других инструментов и оружия, которые используются дизайнерами для создания высокой промышленной репутации.

Линия различия между конструктором и разработчиком , кажется, становится размытой, поскольку статические макеты потеряли свое значение. Таким образом, работая вместе, инструменты также должны быть соответствующим образом адаптированы для наилучшего использования. Наступил год экрана Hi Dpi, и он захватил арену дизайнеров, которые искали возможность создания дизайнов, легко доступных на различных устройствах.

пиксейт — Pixate как инструмент был разработан для создания интерактивной парадигмы для iOS и Android. Что отличает его от других вариантов перетаскивания элементов и панели взаимодействия.

Близость — Affinity, созданная Sherif, очень похожа на Photoshop, и приложение безупречно спроектировано. Работая с Affinity, вы чувствуете, что он разработан специально для веб-дизайнеров и графических дизайнеров. Такие функции, как регулируемые и неразрушающие изображения, позволяют настраивать изображения или изображения плоского дизайна, не искажая их.Высокий уровень масштабирования 1 000 000% — это как благословение для дизайнеров, тогда как Photoshop предлагает только 32 000. Это более полезно при использовании векторных рисунков. Простая обработка истории и отмена делают приложение действительно удобным инструментом, и, в довершение всего, оно позволяет отменять до 8000 шагов.

Авокод — Специально создан для удобства фронтенд-разработчика для кодирования веб-сайтов из формата, созданного в Photoshop или скетче. Выведен на рынок командой разработчиков, которая предоставила нам CSS Hat, так что вполне можно догадаться, что они сделали метод экспорта на следующий более простой уровень.Тем не менее, предыдущий инструмент позволяет экспортировать активы, но что лучше всего в Avocode, так это то, что он может использовать плагин Photoshop для синхронизации PSD-файла с Avocode всего одним щелчком мыши. Он настолько продвинут, чтобы интерпретировать и анализировать файл PSD, который безупречно превращается в дизайн пользовательского интерфейса.

Ара — Macaw был создан полностью с точки зрения дизайнеров. И это потому, что он предлагает создание отзывчивого веб-дизайна без изменения даже прикосновения к коду, обеспечивая правильное отображение для мобильных устройств.Учебное видео позволит вам использовать и создать адаптивный макет в течение часа, который может очень послужить для этой цели.

Заключение: Хотя у вас есть так много инструментов для упрощения и улучшения процесса проектирования, их изучение может быть интересным, как это было для меня. Если вам еще предстоит проверить эффективные инструменты и методы, просто попробуйте.

Как конвертировать файлы Photoshop в Figma — 2021 | Дин Шмид

Взаимодействие между UI и UX инструментами стало для меня предметом большого любопытства.Мне больше всего интересно, почему это так ужасно.

Пришлите мне файл Sketch или файл Figma, и я великолепен. Проблема в том, что я работаю с агентствами и вижу МНОГО различных рабочих процессов.

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

Файл не поддерживается. Буооо!

Я видел, как лучшие команды и самые замечательные дизайнеры делают всю свою работу в Photoshop.Команды, с которыми я хотел бы продолжить работу. Примерно в начале этого года я наконец решился и решил найти способ конвертировать файлы PSD в Figma.

Отказ от ответственности — «Я немного болтаю. Если хотите, пропустите этот момент. Там есть большой заголовок, который сделает очевидным, когда я буду готов рассказать вам о решениях».

Мы не можем просто экспортировать дизайн в формате png, svg или jpeg из Photoshop и открыть его в Figma.

То есть можно, но мы потеряем всю информацию о приложении.

До свидания, слои и папки и доступ к стилям, штрихам и цветам. Буквально всего, что позволяло редактировать изображение в фотошопе, теперь уже нет. Невозможно изменить эти файлы без их переделки с нуля или значительной доработки.

Чтобы назвать что-то преобразованием Photoshop в Figma, должен быть способ редактирования отдельных штрихов и заливок. Преобразование должно копировать слои фотошопа в Figma как кадры. 🖍️🖋️✏️✒️

Figma была создана для веб-дизайна, а Photoshop — нет.

Если бы мне пришлось свести это к трем вещам, я бы сказал:

• Легкость
• Возможности прототипирования
• Плагины
• Непревзойденное сотрудничество

Одинокие миньоны

Поскольку это физически невозможно сделать нужно вручную перерисовывать каждый прямоугольник, перекрашивать каждый градиент и перегруппировывать каждый компонент.

Если честно, это звучит как очень скучная и трудоемкая задача, и я предпочитаю освобождать свой рабочий день для больших мозговых задач.У меня был успешный аутсорсинг на Upwork и в группах Facebook специально для дизайна.

Чем сложнее ваши дизайнерские файлы, тем сложнее их нанять и тем дороже продолжать получать качество от фрилансеров; все веские причины, по которым вы можете захотеть изучить этот следующий вариант.

Преобразование Photoshop в Figma

XD2Sketch.com

XD2Sketch все еще является бета-версией программного обеспечения, или, по крайней мере, их преобразование Photoshop в Figma. Название выдает это, но они также конвертируют другие файлы дизайна.

С января я несколько раз использовал XD2Sketch, чтобы открывать проекты Photoshop в Figma.

Отлично работает. Позвольте мне показать вам, как это сделать.

Давайте посмотрим, что XD2Sketch может сделать с этим набором пользовательского интерфейса.

Найдите конвертер PSD в Figma на их веб-сайте. Вот как это должно выглядеть, когда вы находитесь в нужном месте.

Загрузите файл.

Вам нужно подождать от 20 секунд до пятнадцати минут в зависимости от размера ваших файлов, количества монтажных областей и вашего интернет-соединения.

Превью выглядит многообещающе.

Оплатить конвертацию.

Я покупаю кредиты, чтобы снизить среднюю себестоимость файла. Это составляет около 50 долларов в месяц в течение 8,3 месяцев. Я думаю, что это разумно, учитывая, сколько времени это экономит мне. Ручной экспорт svgs и png из Photoshop и воссоздание дизайна в Figma занимает очень много времени. Для этого преобразования у меня есть бесплатный купон.

Как только я открыл конвертированный файл, Figma начала говорить мне, что у меня нет шрифта SFUIText размера Medium.

Я нашел эту статью XD2Sketch, которая поможет вам восстановить шрифты в Figma, если у вас возникнет аналогичная проблема.

Отлично! Посмотрите на слои.

Photoshop выглядит как пытка рядом с разумными рамками Figma.

Avocode — еще один платный инструмент, который может конвертировать Photoshop в файлы Figma. Это делается через Sketch.

Figma может открывать файлы Sketch.

Avocode сначала преобразует Photoshop в Sketch, а затем вы можете открыть файл Sketch в Figma.

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

Затем я нажимаю преобразовать, и он просит меня заплатить 5 долларов за преобразование.

Вам также необходимо подписаться на один из планов Avocode, прежде чем вы сможете заплатить 5 долларов за преобразование файла. Плата за первый месяц не взимается до окончания пробного периода.

Я сделал все это и преобразовал файл.

Откроем преобразованный файл Sketch в Figma.

Кажется, я только что потратил 5 долларов впустую.Но давайте посмотрим поближе.

Все элементы исчезли.

Уцелели только мои кнопки.

Одинокие пуговицы

Так что же пошло не так? Ну при ближайшем рассмотрении все на месте, просто все цвета фона изменены на белые.