Какой инструмент используют веб-дизайнеры для представления прототипа [закрыто]

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

Имея эти устройства? Adobe Edge также позволяет вам просматривать свою работу в реальном времени практически на любом устройстве.
Я прочитал некоторые подробности о предварительном просмотре в реальном времени, но что, если у меня нет этих устройств, например, у меня нет устройства Android или iOS для использования. Есть ли какой-либо инструмент, который может сделать это автоматически? @Йоханнес
Пока я занимался этим, я обнаружил инструмент под названием Screenfly, хотя он не включает изображение устройства, он, по крайней мере, показывает, как сайт выглядит на определенном разрешении экрана.
Да, лучший способ протестировать что-либо — изначально на устройстве. Кроме этого, я бы посмотрел на получение эмуляторов для Android/ios/и т. д. Наконец, вы можете получить надстройку для браузера, которая изменяет размер вашего окна до определенного размера для имитации определенного устройства.
В прошлый раз, когда я проверял, в Firefox был инструмент для тестирования адаптивных веб-сайтов. Dreamweaver также имеет регулируемое окно просмотра с предустановками для нескольких устройств и множество различных измерений форм-фактора, по крайней мере, в CC.
Опытный образец? Ты имеешь в виду функциональный, да? Потому что то, что вы показываете, это всего лишь макет, который вы можете легко получить из поиска Google.
Это не прототип. Это просто фото.
актуальна и попытка дать общий ответ: как сделать макет логотипа в реалистичной среде?

Ответы (3)

Существуют PSD-шаблоны, которые вы можете скачать и/или купить. Обычно они включают в себя действия, в которых размещается ваш дизайн (в вашем случае это три разных экрана с адаптивным дизайном). Просто выполните поиск в Google по запросу «шаблон макета psd», и вы сможете щелкнуть практически любой из первых нескольких результатов.

^ Именно то, что я имел в виду. Ржу не могу. Он наверняка хочет функциональный. Я не уверен.

У меня есть 2 решения для вас:

Первое: вы можете сделать это в Adobe Photoshop. Выберите рамку вашего устройства и поместите на нее скриншот.

Второе: если вы хотите инвестировать, попробуйте такие инструменты, как https://placeit.net/ или http://picapp.net/ . Все, что вам нужно сделать, это выбрать понравившуюся рамку из их галереи и загрузить свой скриншот.

Удачи !

Если ваш вопрос заключается в том, как отображать ваш веб-сайт на разных устройствах, если у вас их нет, то разумным решением является использование браузера Google Chrome.

Вот как это работает:

  1. Откройте свой сайт в Google Chrome.
  2. Щелкните верхний правый значок меню (с тремя горизонтальными линиями).
  3. Выберите «Дополнительные инструменты» —> «Инструменты разработчика».
  4. Щелкните маленький значок мобильного устройства на панели разработчика — появится панель инструментов «Устройство» в верхней части вашего веб-сайта.
  5. Выберите устройство, на котором вы хотите увидеть, как отображается ваш сайт.

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

Надеюсь это поможет!