1. Не так давно узнал о таких инструментах как Figma, Zeplin и Avacode. Будет ли комфортно переходить на них после фотошопа?
Да, смысл есть, так как фотошоп не особо предназначен для верстальщика. Да, с поомщью фотошопа можно сверстать макет, но это как раз бедут не очень комфортно. Привыкнуть к Figma, Zeplin, Avocode вы сможете без каких-либо проблем.
Формат WebP сейчас поддерживается в 80% браузеров по миру и выигрывает у многих форматов по степени сжатия и сумме возможностей. Удобнее всего его экспортировать в инструменте Squoosh. Однако из-за неполной поддержки в браузерах, его чаще используют как дополнительный формат для контентных изображений. То есть к странице подключают картинку в JPG, PNG или подобных и, дополнительно, с помощью элемента <picture>, подключают версию в WebP. В стилях удобно использовать WebP, к сожалению, сложнее. Подобнее об этом мы рассказываем на втором уровне вёрстки.
В данной статье http://codeguide.academy/html-css.html есть такие пункты: 1 Для проверки HTML-кода используйте файл конфигурации .htmlhintrc для настройки валидатора HTMLHint. 2 Для проверки CSS-кода используйте конфигурацию для настройки валидатора stylelint. 3 Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb. Как это сделать? Например, по 2му пункту: я открыл конфигурацию https://github.com/htmlacademy/stylelint-config-htmlacademy а что дальше?
Приходите на второй уровень вёрстки, мы вам расскажем.
Можно ли обойтись без фотошопа? Почему в академии игнорируют FIGMA? Ведь гораздо удобней. Да и дизайнеры переходят на нее. Обучался в школе Солдаткина, так была проблема найти верстальщика, который может работать с фигмой, всем psd подавай.
Здравствуйте, просьба подробнее рассмотреть графический онлайн-редактор Figma.
Пока мы не видим достаточно широкого запроса на использование редактора Figma, чтобы перевести в него все макеты и забыть все остальные. На этом курсе мы рассматриваем редактор Sketch и инспекторы Avocode и Zeppelin, которые крайне похоже друг на друга и на Figma. Так что вы сможете по примеру понять, что делать для экспорта.
С нашей стороны было бы крайне легкомысленно научить вас новому и модному и не показать старое, непростое и всё ещё востребованное на рынке. Наша задача научить и показать, как оно в реальной жизни, а не чтобы было легко и приятно. Поэтому Photoshop, но не только.
Обязательно ли готовить варианты графики для ретины, или это зависит от ТЗ проекта?
Вообще всё зависит от ТЗ, вас могут попросить сверстать на бумаге с ножницами и клеем. И наверное могут сказать, что ретина не нужна. Но это будет достаточно редким случаем, в ситуации когда мобильных устройств с неретиновыми экранами почти не осталось, а такх десктопов всё больше.
В рамках обучения — обязательно, чтобы научиться. В реальных проектах — всегда, за редкими исключениями.
Вы или дизайнер можете экспортировать PSD из Photoshop в Zeppelin, для этого понадобится плагин. К сожалению, с Figma посложнее: сначала вам нужно получить из вашего PSD файл для Sketch, а потом открыть его в Figma. Открыть или импортировать в Figma PSD-файл не получится.
Доброго времени суток. Встала в абсолютный тупик с свг, а именно не могу понять ,по какому принципу создаются многоугольные фигуры (нет четкого понимания в координации), нашла дополнительные материалы ,но не особо помогло...может посоветуете какую-то литературу для "чайников", или объясните "на пальцах". Спасибо
В интерактивных курсах «Знакомство с SVG» есть отдельная часть, посвящённая многоугольникам — рекомендуем пройти все три главы. Также мы можем рекомендовать «Карманное руководство по написанию SVG» и руководство по SVG на MDN.
Проходя курс ФОНЫ ч. 1, когда нужно было расположить картинки либо начертить координатами линии либо фигуры (математически знаки и испытание CAT ACADEMY), подбирал значения вручную. Правильно ли я делал, либо есть более мудрые способы управлять расположением фонового изображения.
Самый удобный способ рисовать фонами — это писать код в инспекторе редактора, прямо в панели со стилями. Откройте DevTools в вашем браузере, найдите нужный элемент в инспекторе и напишите для него стили. Числовые значения фона удобно менять стрелками, удерживайте Shift, чтобы менять значения десятками и Alt, чтобы менять дробными частями.
Зависит от вашей задачи: есть редакторы графики, где вы создаёте макет или экспортируете графику, а есть инспекторы графики, где вы только экспортируете. В любом случае, для профессиональной работы верстальщику нужен редактор, не только инспектор. И этот редактор должен уметь редактировать и векторную, и растровую графику. Иногда удаётся обойтись только векторными редакторами, но бывают и задачи с растром — обрезать, уменьшить, перевести в монохром, размыть, создать растровую анимацию или паттерн.
В psd для Техномарта все изображения товаров
<img>разных размеров (на несколько десятков пикселей). Нужно их нарезать одинаковыми, или для каждого<img>прописывать в html уникальную длину и ширину? Важно ли в реальных проектах чтобы картинки к карточкам товаров были одинакового размера в пикселях?
Одна из задач верстальщика — нормализовать макет и уточнить требования. Если в ТЗ не сказано ничего про размеры картинок, лучше предполагать, что они могут быть разных размеров при вставке. И, соответственно, прописывать им разные размеры при вставке, с помощью атрибутов. Если это усложняет разработку или выглядит нелогичным, то можно уточнить у дизайнера или заказчика.
В реальных проектах бывает по-разному: какую картину загрузят, такая и выведется. Вам и вашей вёрстке нужно быть готовым ко всему, но если вы можете норпмализовать ситуацию и уточнить либо выяснить требования — сделайте это.
Здравствуйте! Не совсем ясен принцип расчета координат во viewBox в svg
Об этом есть отдельная глава в курсе «Знакомство с SVG», пройдите её.
Расскажите плз есть ли какое-то пакетное сжатие файлов? Когда нужно сжать например 100 джипегов. Или это все решается с помощью tinyjpg.com?
Контентные картинки обычно сжимаются на сервере при загрузке через админку сайта или самим редактором. В редких случаях, это происходит локально при сборке проекта с помощью консольных утилит. В любом случае — автоматически. Если вы экспортируете графику для оформления или графику с макета, то лучше воспользоваться сервисом Squoosh, в отличие от остальных пакетных сервисов, вы сможете осознанно настроить оптимальное сжатие и размеры для картинки и сравнить её с оригиналом.
Здравствуйте! Подскажите, может ли Figma полноценно заменить Photoshop на курсе?
Если вы откроете макет в формате Sketch в Figma (это работает) и у вас получится измерить и экспортировать всё, что вам нужно — да, значит у вас получится полноценно заменить Photoshop на Figma. Что касается нашего курса, то возможно мы начнём рассказывать про Figma на следующих потоках.
Умеет ли Photoshop формировать CSS код? Если да, то для каких элементов и насколько он применим для реальных проектов?
Да, вы можете скопировать стили слоя из панели со слоями, если этот слой нарисован с помощью векторных фигур или эффектов. Если он растровый, то никаких стилей вам не получить. Доверять таким стилям обычно можно, но только как основе — почти всегда их нужно править: менять формат цветов, единицы измерения и прочее.
Есть картинка ПНГ-формата с объектом на белом фоне. С помощью какого редактора, кроме Фотошопа можно разместив эту картинку сделать так, чтобы с помощью CSS сделать белый фон прозрачным, но объект при этом должен быть виден чётко?
Это непростая задача, которая требует растровый редактор. В Photoshop есть специальные инструменты для этого, но можно воспользоваться и онлайн-сервисами, вроде remove.bg, которые умеют отделять картинку от фона. Однако у них есть некоторые органичения и возможно вам придётся заплатить за графику больших размеров.
В каком редакторе можно собрать картинки в одну чтобы использовать их как спрайт?
В любом растровом редакторе вы можете расставить картинки рядом и сохранить их как одну картинку. Другое дело, что это гораздо удобнее делать автоматически при сборке проекта. Об этом мы рассказываем на втором уровне вёрстки.
Для этого есть инструмент «Text», вызывается клавишей T — нажмите им текст и скопируйте. В лекции мы рассмотрим это подробнее.
Для простого экспорта графики, самый лучший вариант для вас — воспользоваться либо Avocode, либо Zeplin. Если вам нужен редактор, то откройте в браузере Figma и импортируйте туда макет в формате Sketch.
Нет, у нас пока нет курсов для дизайнеров.
Векторные редакторы могут быть очень полезны для работы верстальшика. К счастью, кроме большого и сложного Adobe Illustrator, векторную графику поддерживают все современные редакторы, вроде Sketch или Figma. Другое дело, что Illustrator мощнее их всех для сложных задач, но с ними обычно сталкивается дизайнер.
Для большинства задач вам должно хватить возможностей Sketch или Figma.
Как легко и правильно подбирать размеры\отступы элементов? В каких случаях лучше использовать px, а в каких %?
В рамках первого уровня вёрстки, мы рекомендуем использовать пиксели и сосредоточиться на других аспектах вёрстки. Подробнее про резиновую и адаптивную вёрстку мы рассказываем на втором уровне.
Добрый день, при открытии в фотошопе макета выходит сообщение о том что некоторых шрифтов нет и предлагается заменить их на более подходящие? что с этим делать? Я как понял в проекте нужно выбирать шрифты которые в макете.
Об этом мы расскажем на лекции.
есть ли вариант получить бесплатно фотошоп, а лучше авокод на время обучения?
Если вы начнёте пробные версии сразу после лекции про графику, вам должно хватить времени, чтобы закончить ваш личный проект в рамках курса. Дополнительных предложений у нас, к сожалению, нет.
Достаточно ли сейчас для работы с графикой фотошопа cs5? Или обязательно стоит установить хотя бы пробную сс?
Мы рекомендуем использовать последние версии Photoshop для работы с макетами, с CS5 там появилось много возможностей для работы и экспорта графики, которые вам полезно будет попробовать и разобраться. Если установить пробную версию по какой-то причине не получится, используйте CS5 или попробуйте открыть макет в формате Sketch в Figma.
При разработке дизайна сайта, участвует ли в этом процессе верстальщик или frontend-разработчик на работе? Или он отвечает только за верстку макета?
Всё очень зависит от конкретной команды. Бывает, что дизайнер и верстальщик — это вообще один человек, а бывает, что верстальщик молча получает макет и вообще не видит дизайнера. В среднем, ситуация чаще ближе ко второму варианту — верстальщих создаёт интерфейс на основе макета и в разработке дизайна не участвует. Разве что косвенно, когда какие-то решения не были приняты или какие-то страницы не отрисованы.
Почему файл svg, экпортированный из фотошоп, заметно хуже качеством, чем изображение, скачанное с сайта академии ? И что с этим делать ?