Pixso. Бесплатный аналог Figma с режимом DEV MODE. Уроки для новичков.

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

• Альтернативой является китайская копия фирмы - пиксу.  

• Пиксу поддерживает русский язык, работает с множественными форматами и имеет ряд преимуществ по сравнению с фирмой.  

• Регистрация в пиксу возможна через гугл, невер или по старинке.  

• Интерфейс пиксу прост и понятен, содержит все необходимые инструменты для работы с макетом.  

• Импорт файлов возможен через меню "Импорт файл" или перетаскиванием файла в окно пиксу.  

• Импорт по ссылке также возможен, но может возникнуть проблема с действительностью ссылки.  

• В видео объясняется, как импортировать и сохранить макет в Пиксе.  

• Если макет не удается импортировать напрямую, можно сохранить локальную копию и открыть ее в Пиксе.  

• В макете можно перемещаться с помощью скролов, колеса мыши, клавиши "пробел" и "эйч".  

• Для изменения масштаба можно использовать клавиши "плюс" и "минус" или комбинацию "контрол" и "ноль".  

• В макете можно создавать иерархию страниц и папок для удобства работы.  

• Слои могут быть разными, включая фреймы, векторные фигуры, изображения и текст.  

• Слои можно скрывать, блокировать и переименовывать.  

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

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

• Зажатие клавиши Control и клик по элементу также позволяет быстро перейти к нужному слою.  

• Группировка слоев позволяет объединить несколько слоев в один, что упрощает работу с ними.  

• Группировка слоев может быть полезна для создания кнопок и других элементов.  

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

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

• В макете обнаружены проблемы со шрифтами, отсутствует шрифт "Вора", "Оксиген" и "Оксиген" начертания "Регуа".  

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

• Размеры элементов можно узнать, нажав на элемент и посмотрев его размеры в панели справа или в режиме разработчика.  

• Для измерения расстояний между элементами можно использовать режим разработчика или режим дизайна, зажав клавиши "альт" и "контр".  

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

• В видео объясняется, как создать сетку в Pixu для макетов.  

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

• Сетки могут быть разными, но чаще всего используется сетка от Bootstrap.  

• В видео показано, как экспортировать графику из Pixu в различных форматах, включая PNG, JPG, SVG и PDF.  

• Объясняется, как сохранить изображение в формате PNG, JPG или PDF, а также как сохранить группу слоев или векторную графику в формате SVG.  

• Демонстрируется, как экспортировать векторную графику, состоящую из множества слоев, в формате SVG.  

• В видео обсуждается работа с векторной графикой в программе Adobe Illustrator.  

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

• В программе Adobe Illustrator можно выбрать конкретную группу слоев для сохранения, чтобы сохранить все элементы правильно.  

• В видео показано, как сохранить несколько иконок в формате SVG.  

• Для этого нужно выбрать все иконки, которые нужно сохранить, и нажать на "Экспорт".  

• Затем выбрать формат SVG и сохранить файл.  

• В видео объясняется, что такое ретина экраны и как они работают.  

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

• В программе Adobe Illustrator можно выбрать формат изображения для ретина экранов, чтобы сохранить его в нужном качестве.  

• В видео объясняется, как сохранить изображение под рети на экраны, используя свойства изображения.  

• Показано, как увеличить изображение в два и три раза, чтобы оно соответствовало экранам с разным разрешением.  

• Объясняется, как использовать эффекты прозрачности и затемнения для улучшения читаемости текста на изображении.  

• Показано, как отключить затемнение и сохранить изображение без него.  

• Демонстрируется, как сохранять изображения из реального боевого макета, отключая ненужные слои и используя функцию сжатия изображения.  

• Объясняется, как использовать функцию сжатия изображения для уменьшения размера изображения без потери качества.  

• В этом уроке автор научит вас копировать все свойства из Pix в ваш проект.  

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

• Он также объясняет, как использовать вкладку "Код" для просмотра и копирования свойств.  

• Автор демонстрирует, как копировать свойства внешней тени и отступов для изображений.  

• Он также показывает, как копировать свойства кнопок, включая отступы, скругления и цвета.  

• Автор объясняет, как измерить размеры блоков и других элементов в режиме разработчика.  

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