Веб-шаблон PSD для мобильного и настольного просмотра

Делаю макет сайта в фотошопе.

Я создал домашнюю страницу и сохранил ее в png, так что теперь это полностраничный дизайн веб-сайта, показывающий домашнюю страницу для просмотра на рабочем столе.

Но я также хочу сделать его мобильным (например, чтобы показать адаптивный вид моей домашней страницы). Так есть ли плагин ant или что-то, что сделает мой psd в мобильном представлении, или мне нужно создать отдельный psd для мобильного просмотра?

Принято проектировать под разные экраны. Насколько мне известно, не существует «подключаемого модуля», который может принимать за вас эстетические решения.
хм, да, я тоже не знаю, как это сделать. Хорошо, значит, мне тоже нужно потратить некоторое время на мобильный просмотр. спасибо за очистку моего dbout.

Ответы (2)

Отзывчивый дизайн должен происходить в первую очередь в браузере. Причина этого в том, что внешний вид мобильного и рабочего стола сильно зависит от того, как вы разметите страницу. Предоставление разработчику двух PSD для двух представлений станет рецептом очень хакерской и не подлежащей повторному использованию разметки и JS. Лучше всего проектировать для одного представления (сначала мобильные устройства всегда хороши), а затем работать вместе с разработчиком, чтобы выяснить, что нужно настроить для другого представления.

Существует так много инструментов, которые помогут вам преобразовать файл дизайна в html и настроить его на адаптивный шаблон, совместимый с начальной загрузкой.

Я перечислю некоторые из них в качестве руководства.

  1. Вы можете перетащить PSD-файл в Dreamweaver CC2014, и Dreamweaver сделает всю работу за вас. преобразование вашего PDS в HTML5-совместимое, и когда вы хотите преобразовать его, появляется расширение dreamweaver для начальной загрузки под названием DMXzone Bootstrap 3 , существует бесплатная и платная версия этого расширения.
  2. второе решение — перетащить PSD-файл в Adobe Edge Reflow . Это отличный инструмент. и здесь вы можете найти, как подключить ваш Phtoshop к Edge Reflow
  3. некоторые онлайн-инструменты также являются решением, с помощью которого вы можете перемещаться между различными онлайн-инструментами, пожалуйста, проверьте онлайн-редакторы Bootstrap.
  4. некоторые решения для настольных ПК тоже потрясающие, например, бесплатный инструмент Pingendo и великолепный pinegrow.com.
  5. Некоторые платные сервисы также могут преобразовать ваш дизайн в адаптивный загрузочный HTML-код, например онлайн-сервисы psd-to-bootstrap и psdwizard.
  6. Наконец, есть несколько расширений для фотошопа, которые помогут вам в работе, например, velositey-v2.

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

Многие из этих предложений предназначены для перехода от PSD к HTML. Это хорошо и полдела, но на самом деле не решает проблемы и сложности адаптивного веб-дизайна. Хороший RWD требует работы на уровне представления. Либо напрямую, либо итеративно с разработчиком.
Веб-шаблон PSD для мобильного и настольного просмотра
СпросиСетьПолитика конфиденциальности1y, 0v