Как верстать сайт из psd: Как научится верстать из PSD макетов в html+css? — Хабр Q&A

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

Преобразование PSD-файла в HTML включает в себя разделение файла дизайна на отдельные изображения и последующее их кодирование в HTML, CSS и JavaScript для создания полностью адаптивного и интерактивного веб-сайта.

Программный конвертер PSD в HTML используется для преобразования дизайнов, созданных в Photoshop, в код HTML и CSS. Используя программный конвертер, дизайнеры могут быстро и легко преобразовывать свои проекты в функциональные веб-сайты без необходимости писать код с нуля. Это экономит время и усилия, позволяя дизайнерам сосредоточиться на творческих аспектах своей работы.

1. Экономия времени : Преобразование PSD в HTML вручную может занять много времени, но с помощью программного конвертера этот процесс можно выполнить быстро и легко.
2. Экономичность : Наем веб-разработчика для преобразования файлов PSD в HTML может быть дорогостоящим. Программный конвертер является более экономичным решением.
3. Высококачественный вывод : Программное обеспечение преобразует файлы PSD в HTML с высокой точностью, обеспечивая высокое качество вывода.
4. Простота использования : Многие программные конвертеры просты в использовании и не требуют каких-либо знаний в области программирования.

1. Ограниченная настройка : Программное обеспечение может не поддерживать сложные элементы дизайна и настройки, требующие ручного кодирования.
2. Кривая обучения : Некоторое программное обеспечение может иметь кривую обучения, требующую от пользователей изучения того, как использовать программное обеспечение, прежде чем они смогут эффективно его использовать.
3. Неверный вывод : Некоторые программные конвертеры PSD в HTML могут не создавать точный код HTML и CSS, что приводит к несоответствиям дизайна и ошибкам.
4. Отсутствие контроля : Использование программного обеспечения для преобразования может ограничить контроль над выходными данными и затруднить достижение желаемого результата проектирования.

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

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

Вот несколько преимуществ преобразования PSD в HTML, которые демонстрируют его необходимость:

1. Высококачественный код, соответствующий стандартам и пиксельный.
2. Веб-сайты с оптимизированным кодом оптимизированы для поисковых систем.
3. Уникальные и персонализированные веб-страницы.
4. Веб-сайты, которые быстро реагируют и загружаются.

Для начала нужны соответствующие инструменты, как и для любой другой работы. Нет ничего более разочаровывающего, чем создание веб-сайта с ужасными инструментами, которые на самом деле не справляются с поставленной задачей. Прежде чем приступить к преобразованию PSD в HTML, мы советуем вам загрузить и купить следующие инструменты:

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

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

Эта облачная программа превращает ваши слои Adobe Photoshop в CSS3, но работает аналогично CSS Hat.

Файлы PSD созданы программой Photoshop. Эта программа доступна за единовременную фиксированную плату или всего за 19 долларов в месяц. По сравнению с прошлыми годами это значительно дешевле для фронтенд-дизайнеров.

Этот веб-сайт экспортирует сжатые фотографии для более быстрой загрузки без ущерба для качества изображения.

Это приложение является улучшением по сравнению с популярным Notepad++ (еще один вариант, если вам не нравится Sublime). В отличие от других текстовых редакторов, этот кодирует ваш контент цветом в соответствии с вашим языком, и его легче переключать между Apple и Windows в Sublime text.

1.

Файлы PSD следует поддерживать и хранить продуманным и безошибочным образом при преобразовании в HTML и CSS. Поиск определенного слоя шрифта, графического слоя или любого другого компонента, который вы хотите обнаружить или просмотреть для справки, был бы намного проще, если бы PSD-файлы были организованы. Слои можно упорядочить, дав им определенные имена, сгруппировав их и т. д. Учитывая организацию документов Photoshop, также рекомендуется сохранять группы слоев.

2.

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

3.

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

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

5.

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

В наши дни востребованы интерфейсные среды разработки. Они облегчают развитие, не требуя нового старта, в чем причина. Три основных аспекта дизайна, на которых в первую очередь концентрируются интерфейсные фреймворки, — это фреймворки CSS, HTML и JavaScript.

1. Выбор фреймворка — серьезная проблема. Вы должны научиться использовать код для реализации своего выбора, если он вам незнаком. В результате срок реализации проекта увеличивается.
2. Самое известное использование фреймворков — минимизировать объем кода на странице. Но если вы все еще знакомитесь с грамматикой или с тем, как работает фреймворк в приложении, они могут усложнить ваш проект.
3. На рынке существует множество фреймворков, позволяющих взглянуть на обратную сторону медали. Поэтому изучение каждого из них, а затем применение его в процессе проектирования является сложной задачей.

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

Перед началом процедуры преобразования необходимо выбрать макет. Обычно на выбор предлагается четыре основных типа макета:

Немногие приложения плохо работают на ПК. Поэтому им требуется дизайн, который будет работать с планшетом или смартфоном (преобразование PSD в HTML для мобильных устройств).

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

Термин «адаптивный» тесно связан с миром дизайна из-за художественного качества, которое он придает веб-сайтам при загрузке на устройствах различного размера. Адаптивный дизайн изменяет макет веб-страницы в соответствии с экраном.

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

Простое преобразование PSD в HTML

Простое преобразование PSD в HTML — пошаговое руководство

1. Разбить PSD на части
2. Создать каталоги
3. Создать HTML
4. Создание файлов стилей
5. Организация набора веб-дизайна
6. Взаимодействие Java Script
7. Сделать адаптивным

Преобразование PSD (документа Photoshop) в HTML (язык разметки гипертекста) — это процесс кодирования дизайна, созданного в Photoshop, для просмотра в Интернете. Для этого требуется нарезка и экспорт изображений из Photoshop, а также написание кода HTML, CSS и JavaScript. После завершения у вас будет чистая семантическая разметка вашего дизайна для использования на различных устройствах.

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

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

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

1. Вы найдете свой сайт в главной папке.
2. В основной папке, которую вы указали на своем веб-сайте, будет папка с именем «изображения». Он используется для хранения всех фотографий, которые вы в конечном итоге добавите.
3. Наконец, в главной папке каталога есть отдельная папка с названием «styles» для таблиц стилей или файлов CSS.

На этом этапе создается HTML-страница. Используйте конструкторы HTML-страниц, такие как Komposer, Amaya или Adobe Dreamweaver. Вы должны создать новый файл в редакторе, сохранить файл, а затем поместить его в основную папку, созданную на шаге 1. Затем, используя HTML5, разделить коды на разделы, как показано ниже:

1. Раздел заголовка всегда отображается в верхней части страницы.
2. Самая важная часть страницы — следующая, Герой. Этот абзац будет обозначать конкретное изображение на вашем сайте.
3. Третий раздел кода — это компонент слайд-шоу, который покажет список изображений, которые будут изменяться сами по себе.
4. И, наконец, нижний колонтитул. Это раздел внизу страницы, где расположены ссылки на социальные сети.

Прежде чем писать HTML-код, необходимо создать файлы стилей для веб-страницы. Затем вы должны преобразовать файлы в CSS; это требование. Однако для создания файлов стилей можно использовать фреймворк. Самым популярным предложением для его реализации является bootstrap. Даже после этого, если вы хотите, вы можете придать ей форму.

Вскоре вы дойдете до завершения процесса. На этот раз вам нужно создать набор веб-дизайна. Простое соединение всех компонентов позволит вам собрать набор. Опять же, вам потребуется редактор кода, и Adobe Dreamweaver, несомненно, является хорошим выбором. Этот редактор всегда будет рекомендовать лучший редактор кода, потому что вы можете использовать его для создания как HTML-кода, так и дизайна сайта.

Пришло время управлять JavaScript и включить взаимодействие с ним. После завершения HTML и CSS вы должны принять во внимание JavaScript. Создание jQuery и других эквивалентных фреймворков будет полезным. Эти рамки необходимы для самых разных задач.

Использование различных фреймворков, таких как Twitter Bootstrap, Less, Foundation и Fluid Baseline Grid, хорошо подходит для эффективного преобразования PSD в адаптивный HTML. Медиа-запросы CSS хорошо работают при добавлении адаптивной функции в дизайн.

Видеоролики, иллюстрирующие определенное явление, помогают взрослым учащимся понять весь процесс, особенно если это сложный метод. Я считаю, что нет лучшего способа узнать, как это сделать, чем просмотр видео, потому что преобразование PSD в код HTML сложно. Вам могут быть полезны следующие вводные руководства:

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

Помимо обучения правильному преобразованию PSD в HTML, это руководство также содержит информацию о веб-дизайне и процессе разработки.

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

Это еще одно отличное руководство по преобразованию PSD в HTML.

Вы пройдете процесс преобразования PSD в XHTML и CSS.

Стоимость преобразования PSD в HTML не может быть определена заранее. Это потому, что стоимость зависит от множества вещей. Кроме того, разные поставщики услуг взимают разную плату в разных местах. Основные элементы, которые могут влиять на стоимость и быть оценены, включают:

1. Количество веб-страниц: Веб-сайт представляет собой набор взаимосвязанных веб-страниц. Количество веб-страниц может варьироваться в зависимости от ваших требований. Кроме того, продукты, которые вы продаете, или услуги, которые вы предлагаете, также влияют на количество веб-страниц. Стоимость преобразования PSD в HTML веб-сайта сильно зависит от количества веб-страниц, присутствующих на вашем веб-сайте.
2. Ниша веб-сайта: Тип рынка, на который вы ориентируетесь, и цель вашего веб-сайта также влияют на стоимость конверсии. Например, стоимость создания веб-сайта электронной коммерции будет выше по сравнению с веб-сайтом для ведения блога.
3. Уровень сложности: сложность PSD напрямую влияет на сложность HTML кода. Если ваш PSD сложный, то стоимость также увеличится из-за сложности HTML-кода.
4. Крайний срок проекта: Крайний срок проекта также влияет на стоимость преобразования. Если срок реализации проекта приближается, стоимость конверсии будет выше.

ПОЛУЧИТЕ ЖИВЫЕ И ОТЗЫВЧИВЫЕ ВЕБ-СТРАНИЦЫ С НАШИМ ПРЕОБРАЗОВАНИЕМ PSD В HTML !

Свяжитесь с нами, предоставьте подробную информацию о проекте и получите предложение СЕЙЧАС!!!!.

БЫСТРАЯ ЦЕНА

В: Могу ли я преобразовать Bootstrap PSD в HTML?

Ответ. Да, конвертировать Bootstrap в HTML просто. Вы должны сначала оценить файл PSD для этого, прежде чем создавать каталоги. Второй шаг — преобразовать PSD в HTML и CSS, чтобы можно было включить компоненты Bootstrap. С помощью этого метода легко преобразовать Bootstrap в HTML. Со временем станет необходимым сделать HTML адаптивным.

В: Когда мне не следует преобразовывать PSD в HTML?

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

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

В: Почему преобразование PSD в HTML в последнее время стало сложнее?

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

В: Сколько времени требуется для преобразования PSD в HTML

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

В: Сложно ли преобразовать PSD в HTML?

Преобразование дизайна Photoshop в веб-сайт с использованием кода языка гипертекстовой разметки (HTML) может быть сложной задачей, но это не обязательно. С помощью правильных инструментов и рекомендаций любой, кто разбирается в HTML, CSS и JavaScript, может научиться преобразовывать PSD-файлы в работающие веб-сайты.

В: Чем хорош аутсорсинг PSD для HTML?

Ответ. Доверив преобразование Photoshop в HTML профессионалу, вы освободите свое время и обеспечите качество работы. Кроме того, намного проще поручить преобразование PSD в HTML компании, чем поддерживать внутреннюю рабочую силу.

Надеюсь, вы поняли каждый этап преобразования PSD в HTML. Чтобы преобразовать PSD в HTML, вы должны обратить внимание на каждое понятие. Вам не понадобится все именно так, как показано. Процесс должен быть завершен как можно быстрее. Это вдохновляет нас на разработку фундаментального HTML, необходимого для простых страниц. Мы проведем вас через процесс преобразования от начала до конца.

Первоначально опубликовано 21 сентября 2016 г. и обновлено 14 ноября 2022 г.

ПОДЕЛИТЬСЯ ЭТОЙ СТАТЬЕЙ НА

ПОДПИСАТЬСЯ НА НАШУ НОВОСТИ

Подпишитесь сейчас на Получите скидку 15% на на свой первый проект.

Преобразование PSD в адаптивный HTML и CSS

Преобразование PSD в адаптивный HTML и CSS с помощью Export Kit. Настройте свой PSD в HTML и адаптивный вывод CSS для любого устройства и браузера, используя настраиваемые целевые экраны CSS. Используйте неограниченное количество PSD для адаптивных целевых экранов CSS, чтобы персонализировать адаптивный экспорт.

Прежде чем преобразовывать PSD в адаптивный HTML и CSS, прочтите Включение адаптивного CSS и изображений, Экспорт страниц с динамической высотой и Теги экрана CSS, чтобы получить общее представление об адаптивных экранах и динамической высоте.

Пошаговое видео

Смотрите другие обучающие видео.

Прежде чем начать

НЕ создавать папки экрана css ДО вы утвердили общий дизайн ВСЕХ страниц, включенных в вывод. Это сэкономит вам много времени на редактирование.

  ВАЖНО:  На этом этапе вы должны  сохранить копию вашего текущего файла [.psd] , это всего лишь резервная копия. 

  ПРИМЕЧАНИЕ.  Прочтите наше руководство по использованию нескольких PSD-файлов в одном проекте, если у вас есть много PSD-файлов, которые вы планируете конвертировать в адаптивный HTML и CSS.  

Правила адаптивного дизайна

 1. Вы разрабатываете адаптивный CSS-экран, а не мы! 

Export Kit не будет предполагать, что вам нужен элемент в определенном положении или размере при выводе вашего адаптивного экрана css. Ваш дизайн — это просто ваш дизайн! Export Kit позволяет настроить каждый целевой экран, чтобы вы могли персонализировать свой вывод для этого экрана.

Ваш адаптивный дизайн должен выглядеть так, как вы хотите, а не так, как мы думаем!

 2. Вы  ДОЛЖНЫ  создать тег  ${css|screen:default}  

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

Вы можете сделать это быстро, сгруппировав весь документ PSD и назвав группу папок « ${css|экран:по умолчанию} ».

  ПРИМЕЧАНИЕ.  Экраны по умолчанию  не требуются  для Android. 

 3. Вам нужна 1 папка экрана на каждый целевой экран 

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

 4. Вы можете изменить  размер, положение и эффекты  слоев 

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

 5. Вы  НЕ МОЖЕТЕ  изменить  имя слоя  

Это правило CSS3, согласно которому экраны мультимедиа должны отражать один и тот же элемент на HTML-странице.

НЕ изменять имена слоев в папках экрана css!

Общие размеры адаптивного экрана

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

 ${css|экран:160} Смартфон Все 

 ${css|экран:240} Смартфон Портрет 

 ${css|экран:321} Смартфон Пейзаж 

 ${css|экран:760} Планшет 

 ${css|экран:768} iPad 

 ${css|экран:1224} Рабочий стол/ноутбук 

 $ {css|screen:1824} Широкоэкранный 

Вам не нужно создавать все эти экранные папки. Это только список распространенных размеров экрана для использования.

Скорее всего, для одного проекта вам потребуется настроить таргетинг только на 2 или 3 размера экрана, а для Android, возможно, больше — просмотрите стандартные размеры экрана.

  ПРИМЕЧАНИЕ.  Экраны по умолчанию  не требуются  для Android. 

Закройте все папки. Сгруппируйте все свои папки, включая папки с тегами страниц, и назовите новую группу слоев « ${css|экран:по умолчанию} экран по умолчанию ». Это создаст ваш адаптивный вид по умолчанию на основе размера вашего PSD-документа.

Сгруппируйте все свои слои, даже если у вас нет тегов страницы.

Мы рекомендуем начать с КРУПНЕЙШЕГО адаптивного целевого размера экрана и работа вниз в размере при создании папок экрана css. Это сэкономит вам много времени при создании дополнительных экранов css.

Работа со стилями CSS

CSS компилируется по порядку – последний вошел, последний вышел . Это означает, что вы ДОЛЖНЫ добавить свои пользовательские стили в TOP вашего PSD-документа, иначе элементы слоя сохранят свои эффекты/стили слоя без изменений. Это включает в себя адаптивный дизайн, держите стили CSS в самом верху ваших слоев.

  ПРИМЕЧАНИЕ:  Вы не обязаны   делать это с Android. 

 Узнайте больше об использовании тега стилей CSS. 

Скопируйте размер экрана css из списка выше, например. ${css|экран:760} Планшет . Выберите папку экрана по умолчанию, ${css|screen:defulat} и продублируйте группу папок.

Затем вставьте экран css, который вы скопировали сверху, например. ${css|screen:760} Tablet в новое имя папки. Это создаст целевой экран на основе размера папки тегов экрана CSS.

Меньшие экраны Ниже

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

Скрыть предыдущий экран

Чтобы упростить редактирование PSD, вы должны скрыть предыдущий экран, который вы только что продублировали. Вы можете скрыть экран перед экспортом вывода.

Измените дизайн экрана

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

  ВАЖНО:  Вы можете изменить  ЛЮБОЕ свойство слоя , включая цвет, размер и эффекты; но   НЕ  менять имена слоев  в папках экрана css! 

Добавление дополнительных целевых экранов

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

Существует множество способов управления дополнительными целевыми экранами при использовании параметров «Выровнять вывод» и «Скрыть переполнение» при экспорте. Это позволит вам использовать меньше целевых экранов для поддержки нескольких размеров.

  ПРАВИЛО CSS3:  Вы  ДОЛЖНЫ  размещать   меньшие целевые экраны CSS НИЖЕ  больших экранов, иначе результаты будут неожиданными.
 

Добавить минимальный целевой размер

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

  ПРИМЕЧАНИЕ : Export Kit не ограничивает количество используемых папок css экрана, но чем больше слоев и папок в вашем PSD, тем дольше время экспорта. 

Минимальная ошибка цели

  ПРИМЕР:   ${css|screen:1080}  сработает, только если экран  минимум 1080 пикселей шириной . Это означает, что любой экран  ниже 1080px НЕ БУДЕТ отображать  - потому что CSS требует этого целевого размера! 

Когда вы добавляете минимальную цель, вы можете охватить все устройства, которые больше минимума; например. ${css|screen:320} будет нацелен на наиболее распространенные устройства и будет отображаться на этом экране, пока устройство шире, чем 320 пикселей .

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

Использование нескольких PSD-файлов

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

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

Элементы одного экрана

  СКРЫТЫЕ СЛОИ:  Если вы активируете Включить скрытые слои при экспорте, вы можете скрыть свой элемент. 

  ПРОЗРАЧНЫЙ:  Вы можете изменить непрозрачность элемента на 0. 

  ЦВЕТ ФОНА:  Вы можете изменить цвет элемента, чтобы он соответствовал цвету фона. 

 1. Вы  ДОЛЖНЫ  добавить элемент в  ${css|screen:default}  first 

 2. Вы  ДОЛЖЕН  скопировать элемент во ВСЕ папки экрана css