Какой редактор на ваш взгляд самый популярный и удобный в данный момент? На одной из лекций видел сообщения, что ФШ используется все реже и реже, да и вообще, для верстальщика он не очень удобный. Что скажете на этот счет? На перспективу лучше использовать Zeppelin, например?
Какой инструмент выбрать для начала, фотошоп, фигма, зеплин может другие еще есть? на слуху только фотошоп был. из вашей академии узнал о другух редакторах. Поспрашивал знакомых верстальщиков. мнения разделились Одному без разницы какой инструмент другой сказал фотошоп не предназначен для удобной работы для извлечения контента. В Видео на youtube сказали что лучше с фотошопа начать и не в коем случае не зеплина и авакода. якобы не дадут полного представления о работе с графикой. так что лучше?
Будет ли обзор Adobe XD? Насколько он актуален для верстальщика? В некоторых вакансиях требуется знания целого зоопарка графических программ (Photoshop, Illustrator, Adobe XD и т.д.), с чем это связано и как с этим бороться?
Фотошоп по-прежнему популярен среди дизайнеров, но на смену ему приходят Sketch, Figma, Adobe XD и другие. Лучше всего будет, если вы будете одинаково хорошо знать все их них или, как минимум, две основные группы: 1. Adobe Photoshop и Illustrator, 2. Sketch, Figma, Adobe XD. Отдельно про Adobe XD — продукт пока молодой и достаточной популярности не получил, чтобы говорить о нём отдельно.
Любой код в графическом редакторе — это подсказка, помощь вам, но никак не готовый финальный код. Внимательно на него смотрите, прежде чем переносить в ваш код.
Посмотрел макеты в photoshop и zelpin. В макетах photoshop есть колонки и разделение по слоям (если автор это предусмотрел). В макетах zeplin включить колонки не удается. В инструкции сказано как можно включить колонки. В правой панели на вкладке информация должен быть переключатель "grid". В предоставленных макетах такого переключателя нет. Вопрос 1. В процессе создания верстки мне потребуются колонки в макете? Если да, то как их можно включить в макете zeplin? Вопрос 2. В макетах zeplin имеется возможность разделять объекты по слоям, как photoshop? Это должен реализовывать автор или эту возможность где-то включить?
Колонки — это полезная часть макета, которая позволяет вам понять локику расположения блоков на сетке и правильно измерить расстояния. Но это не единственная возможность понять макет и измерить расстояния. Если вам всё же будет не хватать направляющих, скачайте и откройте макеты в Photoshop или Avocode.
Вопрос следующий: в фотошопе, частенько дизайнеры внедряют элемент, сделанный в другой программе, ну например илюстратором. Когда его пытаешься скачать, то он качается с расширением этой программы, в данном случаи расширение .ai. Что в таком случае делать?
Вам не обязательно открывать встроенный объект, вы можете экспортировать этот слой в SVG прямо из Фотошопа: из контекстного меню в списке слоёв — Export Contents…
Добрый день! Как посмотреть свойства объекта в Photoshop CC (будь то тип и размер шрифта для текста, или размеры изображения для фотографии)?
Мы подробно рассмотрели это на лекции :)
Фотошоп поддерживает шрифты — их нужно установить в вашу систему. Если у вас что-то не работает, спросите у наставника.
Да, вам будет достаточно Zeplin для экспорта графики и замера параметров макета.
Имеет ли смысл для картинки размером 50 х 50 рх подготавливать изображение 100х100 рх, а потом ужимать через width и height до 50х50 рх, чтобы на ретине-дисплее она смотрелась как нужно?
Нужно ли делать картинки разных размеров для адаптивной страницы или просто сжимать одну и ту же средствами CSS?
Да, готовить отдельную графику для ретиновых экранов нужно. Таких экранов становится всё больше: их подавляющее большинство на мобильных и планшетах и становится всё больше на десктопе. Мы рассказываем про ретиновую графику подробнее на втором уровне вёрстки. Уменьшать вдвое большую картинку — это только один из способов.
Иногда возникают сложности при экспорте из фотошопа. Например при экспорте комбинированного логотипа (состоящего из изображения и текста). В этом случае в SVG файле отсутствуют стили оформления текстовой части. например жирность или межстрочный интервал. И приходится дописывать эти стили в стилевом файле. Дизайнер говорит что в этом случае требуется преобразовывать текст в кривые, и лишь потом экспортировть в SVG, но для этого требуется программа Adobe illustratior. Может быть есть более простой способ объединения текстовой и графической частей логотипа в один SVG?
Можно обойтись без Illustrator: из меню со слоями в Photoshop можно сделать текстовому слою Convert to Shapes и тогда он станет кривыми.
Правильно понимаю, что нарезать графику мы можем по скинутой нам ссылке на Zeplin (при наведении на элементы там появляется их css код)? Нам не помешает, что для Нёрдс в Zeplin нет Styleguide (у всех других проектов он есть, а в Нёрдс его нет)?
Добрый вечер! Не разобралась, как вытащить из zepelin картинки и иконки? Сохранять по одной не очень удобно. Или все таки стоит установить фотошоп?
У Nerds есть стайлгайд. Более того у всех проектов есть стайлгайд. В Zeplin нет группового экспорта картинок, но это не сильно усложняет процесс экспортирования, ведь экспорт в Zeplin это два клика: клинкуть на иконку, кликнуть экспортировать.
Почему в разметке примера Барбершоп, логотип вставили в начала тега nav, хотя если делать разметку он идет после меню.
Если посмотреть на остальные страницы Барбершопа, то можно заметить, что логотип находится вначали шапки сайт. То есть получается, что только на одной странице(главной) логотип находится после навигации. В этом случае удобне сделать, чтобы логотип шёл до навигации.
В дополнительных критериях есть следующий пункт: "У всех изображений в теге
<img>прописан размер". Почему такое требование? Если можно сделать у тегов img в стилях "max-width: 100%", и тогда картинка будет масштабироваться в зависимости от ширины контейнера
Тут разница в том, где мы указываем размеры. Если CSS-стили не загрузятся, то получается и правила max-width: 100% не будет, а значит картинка может вылететь и сломать весь интерфейс.
Также это нужно для того, чтобы интерфейс не прыгал пока загружаются стили. У картинки уже есть размер и он может улучшиться, а не наоборот размеров нет и он появляется, тогда появится резкий скачок интерфейса.
- Если background-image окружают декоративные элементы (треугольники и т.п.) нужно ли добавлять эти элементы отдельно или лучше "склеивать" их вместе с фоновой картинкой и загружать цельным куском? Речь о Седоне, главная картинка с каньоном и белые перекрывающие треугольники внизу.
- Иконки твиттер, фейсбук и т.п. нужно загружать как картинки с макета или как иконочные шрифты?
- Лучше иметь в отдельных файлах. Если основная картинка изменится, то нужно будет поменять только её и при этом не нужно будет заново заходить в редактор графики.
- Как картинки - самый верный выбор. Иконочные шрифты уже не актуальный формат. От иконочных шрифтов больше проблем, чем пользы.
Прям какого-то стандарта не существует.
Почему при background-position с одним значением (например background-position: 10px;) картинка выравнивается по центру по оси y?
Потому что background-position принимает два значения. background-position: x y, когда вы не указаете второе значение, то браузер автоматически подставляет значение по умолчанию 50%
То есть указав background-position: 10px;, для браузера это выглядит как background-position: 10px 50%
Можно ли установить в background одновременно полупрозрачный градиент и фоновое изображение вместе?
Да, без проблем. Для этого нужно указать фоны через запятую.
.element {
background-image: url("image1.jpg"),
url("image2.png"),
linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}Фоны накладываются друг на друга и только последний может иметь цвет.
Почему при современных технологиях и графических редакторах сложные картинки пишутся кодом? Можно ли их нарисовать в редакторе и позже конвертировать в код?
Если я правильно понял ваш вопрос, то такая возможность есть. Прямо сейчас можно нарисовать векторную картинку в Adobe Illustrator и экспортировать её в SVG. Браузеры прекрасно понимают этот формат. SVG внутри выглядить как код и поэтому удобен тем, что картинку можно отредактировать не только в графическом редакторе,но и текстовом.
Изображения(фотографии) экспортировать из фотошопа с размерами заданными с помошщью маски слоя или экпортировать исходные изображения больших размеров, а с помощью стилей подгонять размеры?
Можно экспортировать с размерами заданными с помощью маски, но если будет такая ситуация, когда потребуется изменить картинку, то можно будет взять исходную картинку. Почему лучше не подгонять размеры с помощью стилей. Дело в том, что исходная картинка может иметь другие пропорции, тогда подгонка расположения картинки на сайте будет достаточно трудоемким процессом.
Здравствуйте! Стоит ли потратится на подписку Photoshop для того чтобы сразу получить навыки работы с самым популярным графическим редактором и потом только улучшать их, не меняя графический редактор?
Если говорить со стороны верстальщика, то вы обязательно встретитесь с другими грфическими редакторами в своей работе. Поэтому делать ставку только на Photoshop не получится.
Для
<img>нам рекомендуется указывать фиксированную ширину и высоту. Как можно быстро проверить размер графического элемента в .psd файле макета? Обязательно ли сначала его "нарезать" в отдельны?
- Если не отображается вкладка
Properties, то включить в Window -> Properties - Выбрать инструмент
Move tool - Кликнуть в картинку
- На вкладке
Propertiesпосмотреть размеры картикни
Используются ли сейчас спрайты и если да, то как часто и для каких элементов? Просто для иконок можно использовать иконочные шрифты.
Вопрос про спрайты. Туда только иконки добавляют или все фоновые изображения? На каком этапе работы его обычно делают?
От иконочных шрифтов сейчас отказываются. От них больше проблем, чем пользы. Спрайтами пользуются, когда занимаются оптимизациями, для сокращения http-запросов, и только для иконок(небольших изображений).
В описании формата JPEG сказано: "Формат JPEG не поддерживает прозрачность, поэтому изображение в JPEG - это всегда прямоугольник." Как связана прозрачность с формой?
Если вы видите изображение с формой отличной прямоугольника - то это точно не jpg. Подразумевается, что для придания формы используется прозрачность, которой нет в jpg. Прямой связи, конечно же нет.
Чем более свежее версия, тем лучше. Добавляется новая более полезная функциональсноть для верстальщика. Тем более сейчас фотошоп приопретается по подписке, а значит обновления бесконечные в рамках подписки. Со старыми версиями могут быть небольшие проблемы. Например, не будет функции "Export as", а только "Save for web". Что не так критично, но различия всё же есть.
Всегда стараюсь прогонять графику из макета через Squoosh для максимального адекватного сжатия. Есть ли подобные Squoosh плагины для ФШ, чтобы экономить время при экспорте графики из макета?
К сожалению, нет.
Как определить лишние элементы в SVG Файле и удалить их (оптимизировать svg-файл)? Например лишние стили, лишние именования классов и объекты, которые порой попадают в SVG при экспорте? Ведь дизайнер не всегда правильно готовит макет?
Только попрактиковавшись. Удалил одно свойство, посмотрели результат, если ничего не сломалось - продолжаем.
Лучше конечно же использовать SVGOMG и проверять это на уровне проставленных галочек и просмотра результата экспорта.
Есть ли смысл уменьшать исходный размер иконок в формате svg, если в макете используется в размере 32 на 32, а в исходном состоянии у них размеры 520 на 520?? Это повлияет на вес файла? нужно ли это вообще проверять?
Какой объём всех изображений считается приемлемым, в рамках одной страницы? Влияет ли на скорость загрузки страницы использование кода svg из photoshop?
Если коротко, то чем меньше, тем лучше.
Конкретного объёма приемлемости нет. Всё зависит от скорости отклика вашего интерфейса. Ведь можно сделать так, что загрузится только первая главная картинка, а все остальные загрузятся потом и фоном. общий объём может быть при этом большим, но интерфейс вполне себе рабочим.
А можно использовать для этого символы: ▲,▼? Или их отрисовка тоже отличается от браузера к браузеру?