Большинство из нас были брошены для петли, когда реагировать дизайн появилась на свет.Мы пытались глушить его в наших существующих, с точностью до пиксела, старые-как-в-WEB-себе-процессов.Это было крутой кривой обучения (и остается) .
В моей предыдущей статье “ следующего поколения средств проектирования Отзывчивый Веб: WebFlow, пограничный оплавления, Macaw 1 ” для Smashing Magazine, я didn’ т иметь достаточно места, чтобы погрузиться так глубоко в техинструменты, как я хотел.Таким образом, в этой статье, я собираюсь погрузиться в просто один из тех инструментов: Adobe Край оплавления ЦК .
Край оплавления является одним лавиной инструментов, которые вышли, которые позволяют визуально проектировать отзывчивый сайт.Что вы делаете с этой конструкции является до вас (и возможностей инструмента).Край оплавления был создан для решения, как реагировать дизайн изменил наши веб-технологические процессы .
Оплавления принимает ваши статические Photoshop (PSD) файлы и дышит реагирования в них.Вместо того, чтобы создавать 3, 7, 14 или сколько Photoshop привилегии для каждого необходимого устройства или размера, вы можете позволить оплавления преобразовать содержимое Photoshop в HTML и CSS, а затем визуально корректировать проект, используя точки останова в оплавления .
Где ли оплавлением Fit в нашем веб-Workflow
Это вопрос, я получаю чаще всего.Как Adobe государств, оплавления имеется в виду “начать ответные конструкции быстрее и создавать высококачественные верности прототипы через средства массовой информации останова запросов, точных макетов CSS, группировки и многое другое.” Большим плюсом является то, что он подключается непосредственно с Photoshop, так мысль, что выможет перейти от статического дизайна для отзывчивой прототипа (или, по крайней мере, отправной точкой) в несколько ходов .
2 Что вы можете использовать оплавления прямо сейчас?Я видел оплавления используется в качестве простого способа импровизировать на одной странице концепцию для клиента, который может хорошо работать.Оплавления также можно использовать, чтобы визуально решить проблему дизайна сайта.It’ са отличный инструмент для wireframing.Если вы хотите построить полный отзывчивый сайт без получения пальцы грязные с кодом, однако, you’ будете слишком много работать, чтобы достичь цели, что и другие инструменты лучше в меньшее время .
Оплавления может быть частью веб-developer’ сек панели инструментов, ноit’ ы не предназначены для одной остановки инструмент для создания веб-сайтов.Вы должны будете решить, если это может (или должен), играют определенную роль в рабочем процессе на основе того, что она может и can’ т делать.Если вы работаете с дизайнерами вверх по течению, или вы дизайнер, то это может соответствовать.Как разработчик сам I’ LL в погоню и добавить также, что код генерирует не так, как я хотел бы сделать это.Во-первых, он использует идентификаторы для имен стилей и только оптимизирован для WebKit браузерах.Означает ли это, что вы бросаете код в мусорное ведро?Не обязательно, как you’ увидите .
Вы можете начать с Photoshop
В настоящее время оплавления позиционируется в качестве визуального средства проектирования, а значит, вы можете перетащить контент и сделать форматирование изменений с помощью панели, но это требует некоторого знания HTML и CSS (хотя бы основы).Если вы входите в оплавления не зная, что поплавок или как поля влияют на макет, затем кривая обучения будет круче .
Есть несколько способов, чтобы начать реагировать дизайн-проект в крае оплавления.Вы могли вскрывать оплавления и выберите Файл → новый проект и начать помех на чистом холсте, потянув содержимое из Photoshop или нажав содержимого из Photoshop для оплавления (или сочетание этих методов).Adobe фокусируется на связи Photoshop, потому что это, как большинство дизайнеров используется для запуска своих проектов (и, возможно, до сих пор, в зависимости от их рабочего процесса и отвращение к коду), так что мы будем делать то же .
4 Много людей, которых я говорить о начале проектирования в Photoshop, а затем нажмите (или экспорта) для оплавления.Таким образом, они используют одни и те же конструктивные особенности и знания Photoshop, что they’ ве было всегда.Тем не менее, вот несколько лучшие практики для работы с Photoshop, если вы планируете поехать в оплавления от него .
- Использование смарт-objectsСмарт-объекты являются полезными, поскольку они связывают общее содержимое, такие как навигация и нижний колонтитул, в файл Photoshop.Смарт-объекты для изображения также позволяют вам сохранить версии с высоким разрешением для последующего редактирования (думаю неразрушающего редактирования) .
- Будьте осторожны linked смарт-objectsСразу после я сказал, чтобы использовать их, не так ли?Очень подозреваю, что Брайан.В настоящее время, все связанные Smart Objects (PSB) файлы в Photoshop будет просто плоский при экспорте в оплавления.Предположим, что вы поделились навигацию с текстом —, который станет растрируются .
- Настройка правоsizeЭто на самом деле не нужно быть сказано, но начать в Photoshop с размером, что вы стремитесь, будь то мобильный первый или что-то еще .
- Настройка Экстракт AssetsЭто необходимо, если вы планируете экспортировать из Photoshop, чтобы оплавления.→ Выписка активов в Photoshop будет генерировать оптимизированные активы (вы узнаете об этом чуть позже) .
- Круглый вашего numbersКак и все вещи Интернете, мы стараемся не держать наши ценности форматирования на вещи, как
12.347655893pt. - Использование формы, не заполнены layersФормы стать
<div>ы в оплавления, и заполнены слои не станут ничего (они упали при экспорте) . - Организуйте свой layersHTML, который генерируется следующим образом порядок наложения в палитре слоев.Содержимое в верхней части панели Layers появится в верхней части HTML документа.Другими словами, убедитесь, что ваш контент подвал не верхний слой в панели Layers, в противном случае это будет ближе к отверстию
<body>тега, и вы будете иметь, чтобы использовать некоторые сомнительные методы для его размещения на днестраницы в HTML . - Ум слоистых imagesИзображения с содержанием слоистых поверх них рассматриваются в качестве фонового изображения в
<div>в оплавления . - Подумайте об именовании layersЕсли вы называете слой что-то вроде image.png, 200% image@2x.png, то два изображения будут генерироваться.Первое изображение в списке будут помещены в конструкции в оплавления, и другие будут генерироваться и болтаться в assets папки .
- Ум текст objectsТекстовые объекты, которые оформлены в Photoshop территории типа будет иметь размер в оплавления.Если вы просто щелкните инструментом Туре в Photoshop, а затем пункт в оплавления не будет иметь ширину .
Photoshop Экстракт Assets
Adobe Photoshop CC имеет функцию под названием Извлечение активы (File → Извлечение активам), которое использует Adobe Generator.Вы можете создавать JPEG, PNG, GIF, или изображение активы SVG от содержимого слоя или группы слоев в PSD-файла при экспорте в оплавления.Выбор → Извлечь Активы позволяет оптимизировать активы, устанавливая размеры, форматы и многое другое.После настройки параметров оптимизации, ваши имена слоев изменяются, добавив, поддерживаемый расширение для формата изображения (PNG, GIF, JPG, или SVG) на имени слоя или имени группы слоев.Генератор создаст изображения, используемые в оплавления и освободить нас от того, чтобы нарезать в большинстве случаев (ура!).Даже если Вы завершаете не используется оплавления Выписка Активы стоит посмотреть.Затем вы можете экспортировать в оплавления и оптимизированные средства будут автоматически .
6 При содержании имени в палитре слоев, можно, наконец, дышать реагирования в файл Photoshop, экспортируя в файл проекта оплавления (→ Создать → Пограничный оплавлением проекта).Когда он будет завершен, папка будет создан в той же папке, что и PSD.Эта папка содержит проект оплавлением ( .rflw), а также созданные активы в assets папка .
Бросок его на Reflow
После экспорта из Photoshop, вы можете открыть файл проекта оплавлением ( .rflw) в крае оплавления, чтобы увидеть то, что было создано.Если какие-либо шрифты отсутствуют, оплавления покажет приглашение позволяет исправить их с Typekit шрифтов, EDGE Web Fonts, веб-безопасных шрифтов или местных шрифты .
7 Содержание Photoshop был преобразован в HTML и CSS в соответствии с оригинальной контент (текст, вектор, растр) и структуры слоя в Photoshop.Если вы щелкните значок на панели Элементы справа, вы увидите код (DOM) для HTML, который был сгенерирован.Если вы посмотрите на структуру и наименование, вы увидите, что это по мотивам панели слоев в Photoshop.Вы увидите, что скрытое содержание игнорируется и группы (папок) также игнорируются, но содержание в нет.Кроме того, текст остается редактируемым (в большинстве случаев), и назвал вектор содержание и растровых содержание теперь растровые изображения .
9 Код, который генерируется использует HTML5 Шаблонный для CSS “нормализовать” лист, но расположение действительно не на основе существующей структуры, такие, как в Twitter Bootstrap.Ниже пример кода, сформированного для <head> страницы в при экспорте .
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="boilerplate.css">
<link rel="stylesheet" href="page.css">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
</head>
<body>
…
Содержание изображения, который генерируется из ваших названных слоев в Photoshop находится в assets папки (как мы видели ранее) и могут быть найдены в панели библиотеки активов справа в оплавления.Панель библиотека активов показывает all изображения в assets папки, даже тех, кто не в настоящее время в разработке, и это работает аналогично панели ссылок в InDesign и Illustrator.Вы можете сказать, какие изображения не используются в вашем дизайне, потому что они имеют ряд 0 справа от их имени в панели.В этой панели, вы можете искать активов, заменить активы, обновление активов и более .
11 Photoshop CC Connection
Когда вы экспортируете из Photoshop CC, подключение к вашему дизайну Photoshop еще несколько живых в оплавления.Я говорю “несколько”, потому что любые изменения в генерируемый контент изображения, сделанные в Photoshop (и что вы назвали в панели Layers) может быть обновлен в оплавления.Текст, элементы страницы и другие неназванный содержимое не будет .
В оплавления, панель Photoshop CC Connect (справа), где вы увидите подключение к Photoshop.Если Photoshop CC открыто, то панель покажет вам, что оплавления подключен к тому, что файл открыт в Photoshop.Это привело меня в первую очередь.Вы могли бы PSD, открытых в Photoshop, который не имеет ничего общего с дизайном оплавления, и он все равно будет показать вам, что это связано .
“Connected” может означать несколько вещей.Вы можете открыть файл PSD, что проект оплавления был создан из и обновлять, что, в свою очередь, будет обновлять соответствующую контента в оплавления.Вы можете открыть другой PSD (или даже показать другую Композиция слоев) — сказать, новой страницы на сайте — и создать новую страницу из этого PSD раздела, нажав на кнопку “Создать новую страницу” в оплавления.Вы даже можете открыть PSD файл и просто генерировать имениСодержание слой и сохраните его в assets папки (может быть, из PSD, который содержит иконки или другие элементы), нажав на кнопку “Импорт стоимости активов» оплавления .
13 Для внесения изменений в конструкцию в Photoshop и обновить проект оплавлением, сначала нужно включить “Photoshop Asset Sync” (стрелка указывает на него в следующем скриншоте).Затем вы можете открыть PSD в Photoshop и внести изменения в дизайн, и любой названный содержание слой, который генерируется Photoshop генератора должны быть обновлены в панели библиотеки активов в оплавления (обведено ниже) .
15 Добавление и редактирование Breakpoints
По умолчанию, ваш проект в оплавления не содержит точек останова (т.е. запросы средств массовой информации) и дизайн чисто жидкости (набор для процентных ширины, без максимумов или минимумов).Это ваша работа, чтобы добавить точки останова, где вы видите fit (обычно там, где дизайн разваливается).Нажав на кнопку “” (плюс) в верхнем правом углу будет добавить начальный останова (который является хорошей идеей).Если нажать и удерживать нажатой “” в правом верхнем углу, появится меню, где перечислены все точки останова.Здесь вы можете редактировать существующую точку прерывания (значение или этикетку) или удалить точку останова.Вы также можете установить точки останова (запросы СМИ), чтобы быть как минимумы или максимумы (один или другой) .
Мне действительно жаль, оплавления бы запросы средств массовой информации дальше, позволяя смеси макс / мин или других видов средств массовой информации запросов (думаю, сетчатки), но по своей сути, it’ са визуальный реагировать дизайн инструмент, предназначенный дляПрототип .
17 Если вы перетащите ползунок захватный на правом краю содержания страницы вправо или влево, вы увидите, как дизайн отвечает.Если вам необходимо внести изменения дизайна, нажмите “”, чтобы установить новую точку.Нажмите на цветной баров выше правителя (с указанием в точке останова), чтобы изменить размер дизайна для этой точки останова .
19 Добавление и удаление точек останова легко, но есть улов оплавления (и других подобных программах).Если вы идете, чтобы сделать изменения в конструкции, не забудьте выбрать правильный останова!Если нет, то укушу тебя в какой-то момент, потому что погубило в оплавления (Edit → Undo) по-прежнему нуждается в некоторой доработке .
Как оплавления интерпретирует дизайн (поплавки, <div> ы, т.д.)
С помощью инструмента Selection, выбранной в панели инструментов (по умолчанию), вы можете выбрать контент на странице.Все содержание вашей страницы находится в пределах первого контейнера (3 ~ |), который установлен по центру в горизонтальном направлении и имеет ширину 100%.Формы в Photoshop как правило, становятся <div> ы в оплавления;текст становится <p> элементы с стилей, примененных;изображения становятся либо обычный изображений или фоновые изображения, и так далее.Почти все содержимое в вашем оплавления проекта будет позиционироваться с помощью свойств CSS float: left и margin.Зная это важно, когда вы пытаетесь изменить дизайн в оплавления, просто перетащив содержание.Я видел много людей получают споткнулся, если они еще не научились основам компоновки, в том числе полей, отступов, так и плавающие .
Редактирования текста и форматирования управления располагаются в макете и стиль панелей слева.Компоновка панели, где вы будетенайти типичные свойства CSS, как размеров (в том числе максимальные и минимальные ширины и высоты), поля и отступы, позиционирование, плавает, очищает и многое другое.Более продвинутые варианты форматирования скрыты первоначально в разделе Дополнительно панели макета.В оплавления, большинство людей либо используйте комбинацию из перетаскивание и растяжение содержание вручную или настраивать параметры разметки “по числам” в панели макета .
21 Варианты укладки для форматирования текста, фоны, тени, закругленные углы и более находятся в Styling панели слева.Форматирование текста относительно проста, и оплавления позволяет использовать веб-шрифты EDGE, веб-безопасные шрифты, шрифты на вашем жестком диске, и шрифты с помощью комплекта Typekit, который вы создаете.Стайлинг панели можно также перейти, чтобы добавить закругленные углы, границы и падение теней и редактировать непрозрачность других объектов, а также .
23 Если вы создали в сетку в Photoshop или вы знаете, что цель проекта заключается в работе с конкретной сети ил …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров