Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Почему PSD в HTML не умер (даже в эпоху WordPress)

  1. Что на самом деле означает «PSD to HTML»
  2. Почему он до сих пор жив
  3. PSD в HTML против затрат на разработку
  4. Что такое PSD для HTML все еще в силе
  5. Это делает ваш дизайн уникальным
  6. Делать это мелкомасштабно быстро
  7. Поменять местами стандартные рамки очень просто
  8. Проблемы с PSD в HTML
  9. Получение нарезанного PSD, которое сделано неправильно
  10. Возможные рабочие процессы
  11. 1. Традиционный рабочий процесс PSD в HTML
  12. 2. Проектирование в браузере
  13. 3. Использование программного обеспечения для веб-дизайна
  14. Заключение
Это гостевой пост Роберта Хапюка.Он был ответственным за разработку основного сайта CodeinWP.

«Давай, человек, которому нужно PSD в HTML, если я могу просто получить бесплатный WordPress тема и запустить сайт за считанные минуты ?! »- скорее всего, ответ, который вы получите от любого, кто работает с сайтами.

Но будут ли они правы? PSD в HTML действительно сделано?

Или, может быть, мы что-то здесь упускаем ...

Что на самом деле означает «PSD to HTML»

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

Некоторые из них считают это «нарезкой». Другие рассматривают это как естественный рабочий процесс и часть запуска веб-сайта. А предприниматели / владельцы бизнеса? Ну, им все равно, пока они получают свои результаты.

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

(Формат на самом деле не так уж важен. Это может быть .PSD, .AI, .PNG, даже файл .PDF.)

Почему он до сих пор жив

Хотя утверждение о том, что PSD для HTML все еще жива и здорова, может показаться странным, учитывая все доступные платформы, инструменты и начальные темы для платформ, таких как WordPress, это на самом деле не может быть более правдивым.

Дизайнеры используют это, я использую это, и я держу пари, даже Пол Ирландский использует его ежедневно.

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

Давайте посмотрим почему, и начнем с обращения к слону в комнате:

«А как насчет дизайна в браузере ?!» - кричал кто-то из задней части комнаты.

С помощью инструментов, доступных сегодня, вы можете легко перетаскивать объекты на холст, переупорядочивать их, а затем готовить конечный веб-сайт относительно быстро. Не покидая ваш веб-браузер.

Тем не менее, это требует определенного набора навыков.

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

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

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

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

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

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

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

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

Мой любимый такой инструмент Ара , Используя его, вы можете создать адаптивный веб-сайт и заставить его работать должным образом, используя инструмент, без необходимости заходить в Photoshop или другое подобное программное обеспечение. Когда вы закончите, Macaw напишет хорошие HTML и CSS для вас (хотя иногда вам, возможно, придется их оптимизировать). В этом сценарии все, что вам нужно сделать, это адаптировать сайт либо к WordPress (превратив его в тему), либо к какой-либо другой среде.

PSD в HTML против затрат на разработку

Нарезка или преобразование объектов из PSD в HTML - это процесс экспорта различных изображений и ресурсов из файла PSD (или другого файла дизайна) в отдельные файлы, которые затем можно использовать внутри структуры HTML. Эта часть обычно выполняется разработчиком интерфейса, но в некоторых случаях дизайнер экспортирует файлы для них.

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

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

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

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

Что такое PSD для HTML все еще в силе

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

Давайте рассмотрим пару возможных задач, которые PSD для HTML все еще эффективны:

Это делает ваш дизайн уникальным

Одна из проблем современных фреймворков (таких как Bootstrap) и популярных тем WordPress заключается в том, что веб-сайты, созданные на их основе, имеют тенденцию выглядеть одинаково. Поэтому трудно создать что-то, что выделяется.

С помощью различных форм PSD в HTML вы можете легко вводить уникальные элементы, которые можно размещать в различных разделах макета, чтобы сделать его уникальным.

Делать это мелкомасштабно быстро

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

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

Наличие любого из таких созданных на заказ творений на сайте добавляет к его оригинальности.

Поменять местами стандартные рамки очень просто

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

Зачем? Опять же, делает ваш дизайн уникальным.

Проблемы с PSD в HTML

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

Один в частности:

Получение нарезанного PSD, которое сделано неправильно

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

Так что вы должны вернуться и попросить повторить. Это еще час или два.

Как этого избежать? Не полагайтесь на способность дизайнера точно предсказать, что вам нужно. Дайте им черновик того, какие именно активы вам нужны и как они вам нужны. Хотя это потребует некоторых усилий с вашей стороны, это окупится позже.

Возможные рабочие процессы

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

1. Традиционный рабочий процесс PSD в HTML

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

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

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

2. Проектирование в браузере

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

Здесь необходим сознательный дизайн и хорошая организация работы в целом (способность переключаться с задач проектирования на задачи разработки).

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

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

3. Использование программного обеспечения для веб-дизайна

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

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

Заключение

Несмотря на то, что PSD to HTML давно миновал, он все еще здесь и все еще находится в процессе создания веб-сайта.

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

Но это только я. Как вы думаете? PSD к HTML все еще кое-что, с чем мы должны беспокоиться?

Об авторе: Роберт Хапюк - основатель агентства 9Pixels, небольшой команды разработчиков WordPress. Он увлечен WordPress и маркетингом.

Все правки и остроумные переписки Кароля К.

Похожие

Почему WordPress - лучший выбор после PSD в HTML?
... psd-v-html-1" alt="Когда вы закончите с дизайном PSD, следующий шаг - преобразовать его в HTML, а затем в любую CMS, чтобы оживить ваш сайт"> Когда вы закончите с дизайном PSD, следующий шаг - преобразовать его в HTML, а затем в любую CMS, чтобы оживить ваш сайт. Существует множество CMS и сред, доступных для создания веб-сайтов, и разные люди используют разные CMS. От ваших требований зависит также, какой веб-сайт вы собираетесь создать, например небольшой статический веб-сайт, динамический
PSD в HTML мертв?
... это рабочий процесс веб-разработки, которым многие люди сегодня беззастенчиво пренебрегают. С момента создания Всемирной паутины и влияния пользовательского опыта на процесс веб-дизайна этот извечный подход доминирует в создании веб-сайтов. Однако с распространением тем и различных фреймворков, особенно для больших веб-сайтов, веб-поток изменился, поэтому многие разработчики сегодня предпочитают выбирать более легкий путь. Итак, что же такое PSD для HTML, какие преимущества
Как делать акт сверки
... нажмите Отчеты / специализированные / акт сверки. Предварительно проверьте, все ли операции по данному контрагенту внесены в программу, внесена ли выписка банка. Программа предложит ввести период, за который вы составляете акт, а также выбрать контрагента. Акт сверки будет сформирован автоматически, после чего его можно распечатать или сохранить. Если у вас нет бухгалтерской программы, и вы ведете бухгалтерский учет вручную, то и акт сверки вам придется составить вручную. Найдите
Почему Гарамонд не спасет правительство 467 миллионов долларов в год
На прошлой неделе СМИ из CNN к Экономические времена рассказывал историю, в которой почти каждый мог чувствовать себя хорошо: 14-летний шрифт в Питтсбурге набросал некоторые цифры и выяснил, как спасти правительство США почти полмиллиарда
Шпаргалка HTML за 2019 год (включая новые теги HTML5) в PDF и JPG
... вал Google, чтобы узнать о том или ином HTML-теге, было по десять центов, он был бы очень богат. Нельзя сказать, что HTML является особенно сложным. Тем не менее, имея все важные теги в одном месте - чит-лист HTML, вы можете сэкономить много времени. Наличие правильной шпаргалки HTML со всеми важными атрибутами для списков, форм, форматирования текста и структуры документа может оказаться настоящим спасением жизни. Этот конкретный шпаргалка пригодится для любого
PM Bank ROR аккаунт
Детали предложения Сберегательный и платежный счет - это основной счет наших клиентов. Все, что вам нужно, это идентификационная карта, чтобы стать владельцем этой всеобъемлющей учетной записи, гарантирующей современные решения и неограниченные возможности. Мы предоставляем владельцам лицевых счетов ROR:
Что такое Google One и как работает Google Диск?
... это бесплатный способ сохранить ваши файлы в резервной копии в облаке и легко доступен с любого устройства. Вам нужен аккаунт Google, чтобы использовать Google Drive, и, для начала, Google предоставляет вам 15 ГБ памяти бесплатно, чтобы вы могли безопасно хранить фотографии, рассказы, рисунки, записи, видео, что угодно. Лучше всего то, что Google Диск зашифрован с использованием SSL, того же протокола безопасности, который используется в Gmail и других службах Google.
История аппаратного обеспечения Amiga - обзор моделей компьютеров Amiga
... найдете подробное обсуждение моделей Amig. Как вы, наверное, заметили, использовалась хронологическая система. Хронологический список официальных моделей Amiga Вначале я предлагаю вам ознакомиться с небольшой таблицей, в которой я собрал основную информацию о каждой модели компьютера вместе с краткой характерной информацией. Более подробная информация уже доступна по конкретным моделям. ГодМодельЧипсетПамятьПроцессорсистемыДополнительная
Анатомия мошенников: «Техническая поддержка Windows» изучена
... HTML со встроенным CSS. Не совсем профессиональный наряд; скорее классические признаки мошенничества. Следующим шагом, независимо от того, можно ли открыть окно «Выполнить», является установка программного обеспечения под названием AMMYY (который утверждает, что знать, что их программное обеспечение используется
Различия между сетью в Dreamweaver и сайтом в Wordpress.
... в основном для моих клиентов) о различиях между дизайном сайта в Adobe Dreamweaver (DW) или сделать это в WordPress (WP) - отныне мы будем использовать сокращения для обозначения этих двух программ"> В этой статье я намерен прояснить сомнения (в основном для моих клиентов) о различиях между дизайном сайта в Adobe Dreamweaver (DW) или сделать это в WordPress (WP) - отныне
Новый Dell XPS 15 9570 официально. Под капотом Core i9
Молитвенные окна со всего мира были услышаны. Одна из лучших машин, работающих под управлением Windows, и в то же время шедевр MacBook Pro 15 - Dell XPS 15 - только что получила новую версию. На первый взгляд изменений не видно. Dell неизменно придерживается стилистической линии, принятой этим летом, и вновь предлагает новый вариант флагмана XPS-15 в идентичном корпусе. Многие пользователи думают, что пришло время измениться; Я, в свою очередь, очень

Комментарии

Что такое PSD для HTML?
Что такое PSD для HTML? PSD в HTML - это процесс преобразования файлов PSD (сокращение от «Photoshop Document») и эскизов веб-дизайна в HTML (язык разметки гипертекста) для мобильных и настольных браузеров. Процесс проектирования происходит следующим образом: веб-дизайнеры рисуют веб-сайты (обычно шаблоны или макеты) в Photoshop или каком-либо другом инструменте обработки изображений, например Sketch, Adobe XD и т. Д., После чего веб-разработчики (обычно
Мэтью Хьюз ранее покрывал что нужно сделать немедленно Что вы должны сделать после того, как попали в поддельную аферу поддержки ИТ?
Почему тогда только один браузер в Модерне, а все остальные на Рабочем столе? Ответ Microsoft странный. «Создать единый пользовательский интерфейс». Я понятия не имею, что это значит. Этот ответ соответствует проблеме под заголовком «почему я не могу настроить свой браузер для запуска ссылок, нажимаемых на рабочем столе в современном режиме (или наоборот)». Это имеет смысл. Напротив, нажатие на плитку с закрепленным Chrome и наличие другого браузера по умолчанию для его запуска на рабочем
Какой URL откроет ваш WebView?
Какой URL откроет ваш WebView? Вам нужно будет отображать значок загрузки, пока URL-адрес полностью не загрузится внутри вашего WebView? Строки заголовка . По умолчанию ваше приложение может отображать строку заголовка. Но если вы используете стратегию WebView, вы можете написать код платформы, чтобы скрыть строку заголовка. Строка заголовка может быть написана внутри WebView с использованием HTML и CSS. Кнопка Назад . В Android вам, возможно,
Что такое EXE-файлы?
Что такое EXE-файлы? EXE («исполняемые») файлы, такие как smpackage.exe, представляют собой файлы, которые содержат пошаговые инструкции, которые выполняет компьютер для выполнения функции . После двойного щелчка по файлу EXE компьютер автоматически выполняет инструкции, предоставленные программистом (например, Stepmania Team), для запуска программы (например, Smpackage Application) на компьютере. Каждое приложение на компьютере использует исполняемый
Или вы получаете свои приложения из других источников и рискуете получить что-то, что не было проверено?
Или вы получаете свои приложения из других источников и рискуете получить что-то, что не было проверено? Какие приложения вы можете использовать из коробки? Даже без установки одного приложения наши смартфоны уже способны на многое. Вы можете совершать звонки, отправлять текстовые сообщения, делать фотографии, вести календарь, слушать музыку, решать математические задачи, делать заметки и просматривать веб-страницы без поиска дополнительного программного обеспечения.
Что такое Google One?
Что такое Google One? Все планы хранения на Google Диске теперь называются Google One Новый «Семейный план» включает до пяти членов семьи Google недавно переработан его потребительские планы хранения Google Drive. Google теперь называет платные планы Google One
Знаете, как все так безумны от ностальгии?
Знаете, как все так безумны от ностальгии? Возвращение в четверг - отличный способ (и оправдание) валяться в некоторых старых картинах. Короче говоря, вы публикуете свою фотографию, когда были моложе, и отмечаете ее #tbt или #throwbackthursday. Это почти все, что нужно сделать. Основная проблема с этим хэштегом заключается в том, что он иногда используется как часть этих списков хэштегов копирования и вставки, а фотографии, на которых он используется, не имеют никакого отношения к Throwback Thursday.
Совместим ли ваш компьютер с Windows 10 и можно ли выполнить обновление?
Совместим ли ваш компьютер с Windows 10 и можно ли выполнить обновление? Совместим ли ваш компьютер с Windows 10 и можно ли выполнить обновление? Windows 10 выходит, возможно, уже в июле. Вы хотите обновить и подойдет ли ваша система? Короче говоря, если ваш компьютер работает под управлением Windows 8, он также должен работать под управлением Windows 10. Но ...
Что такое открытый доступ?
Что такое открытый доступ? Научная литература в открытом доступе - это бесплатные онлайн-экземпляры рецензируемых журнальных статей, выступлений на конференциях, технических отчетов, диссертаций, исследовательских материалов. В основном для пользования ими не существует лицензионных оговорок для читателей - значит, их можно свободно использовать в исследовательских и учебных целях. Для чего авторам предоставлять открытый доступ к своим исследованиям? Научные
Что такое свадьба?
Что такое свадьба? Это самый счастливый момент жизни! Так ответит практически каждый, кто уже в клубе браке или только туда собирается. Но помимо прочего, свадьба - это марафон вызов, где нужно все предусмотреть. И здесь возникает ряд вопросов: Как правильно подобрать тему такого торжественного мероприятия? Какое платье выбрать? Как будет выглядеть свадебная фотокнига?
Почему тогда только один браузер в Модерне, а все остальные на Рабочем столе?
Почему тогда только один браузер в Модерне, а все остальные на Рабочем столе? Ответ Microsoft странный. «Создать единый пользовательский интерфейс». Я понятия не имею, что это значит. Этот ответ соответствует проблеме под заголовком «почему я не могу настроить свой браузер для запуска ссылок, нажимаемых на рабочем столе в современном режиме (или наоборот)». Это имеет смысл. Напротив, нажатие на плитку с закрепленным Chrome и наличие другого браузера по умолчанию для его запуска на рабочем

«Давай, человек, которому нужно PSD в HTML, если я могу просто получить бесплатный WordPress тема и запустить сайт за считанные минуты ?
Но будут ли они правы?
PSD в HTML действительно сделано?
А предприниматели / владельцы бизнеса?
Вы же хотите, чтобы ваш гардероб выглядел красиво, не так ли?
Зачем?
Как этого избежать?
Как вы думаете?
PSD к HTML все еще кое-что, с чем мы должны беспокоиться?
Что такое PSD для HTML?