Инструкции по верстке PSD макетов повсюду в интернете. На самом деле, многие люди спрашивают меня почему на Threehouse до сих пор нет инструкции по верстке PSD макетов. В добавок к инструкциям есть множество компаний, которые принимают PSD и отдают веб-страницу примерно за $100.
Google возвращает более 48 миллионов результатов на запрос «psd to html». Это популярный, но не самый лучший способ делать веб-сайты.
Если это так популярно, то как можно сказать, что это умерло? Что ж… Хотел бы я, чтоб каждая проблема веб дизайна уместилась бы в 140-символьный твит, но это нечеткий вопрос, который требует более членораздельного объяснения. Давайте зароемся поглубже.
Что такое верстка PSD макета?
В общем, верстка это рабочий процесс. Первым, веб-страница создается в Photoshop документе (PSD), а затем конвертируется в код (используя HTML, CSS и JavaScript). Вы можете заменить Photoshop любым другим редактором изображений (такими как Pixelmator, GIMP, и тд.), но принцип тот же. Вот немного более подробное пошаговое объяснение:
- Нарисуйте высоко четкий макет в Photoshop с точностью до пикселя так, как вы хотели бы видеть ваш сайт.
- Используйте инструмент нарезки изображений для экспорта макета в веб.
- Напишите HTML и CSS, которые используют стилистику экспортированного макета.
На первый взгляд, это может показаться хорошей идеей. Может быть трудным начать кодить, если вы не знаете как должен выглядеть финальный результат, по этому эксперементы сперва в Photoshop, а затем «экспорт» этого в HTML звучит разумно.
Принимая эту идею, многие веб-компании использовали верстки HTML в качестве шаблона для рабочих процессов команды. Другими словами, дизайнер создает макет Photoshop, а затем передает его разработчику, который пишет весь код. В наше время, работа веб-дизайнера, как правило, охватывают эстетику так же как и кодинг HTML и CSS.
Была лы вообще верстка PSD хорешей идеей?
Да, процесс верски PSD в HTML был одним из лучших способов создания веб-сайтов. Есть две больших причины почему верстка макетов была хорошей идеей.
Первая причина — ценные качества картинок. До того, как браузеры поддерживали все замечательные возможности CSS (тени, скругленные бока, градиенты, и другие) было очень тяжело создавать кросс-браузерные эффекты без использования картинок. Дизайнеры должны были создавать тени и скрунленные углы как картинки, когда хитрые хаки в коде использовались для размещения картинок на странице. Эти качества нужны были для создания чего угодно, по этому создание их как высоко точный макет экономило время.
Второе (и возможно самое важное) веб использовалось только на десктопных браузерах и не присутствовало на телефонах и планшетах так, как сегодня. Разработка под одно фиксированное разрешение 1024х768 был вполне рабочим вариантом.
По этим двум причинам становится понятно почему дизайнеры смотрели на Photoshop как на свой главный инструмент. Картинки нужны были для одного разрешения экрана.
Что не так с версткой PSD сейчас?
В сравнении с другими сферами искусства и технологий, веб относительно молодо и быстро развивается. Я сделал десятки веб-сайтов используя некоторые вариации верстки PSD в HTML и я уверен, что многие люди, читающее это делали то же самое. Вот главные причины почему я верю, что время верстки PSD в HTML умерло.
Адаптивный веб дизайн
Во-первых, сейчас существует множество способов серфинга в интернете. Телефоны, планшеты, настольные компьютеры, ноутбуки, телевизоры, и другие. Нет единого разрешения экрана, на ктором дизайнер может сосредоточится. Смотря на эту мысль, на самом деле уже не существует конкретного числа разрешений экранов, на которых может сосредоточится дизайнер.
Я не собираюсь углубляться в тонкости адаптивного дизайна, но дело в том, что Photoshop базируется на пикселях. Веб страницы подвижны и постоянно изменяются.
CSS дизайн
Во-торых, новые возможности CSS сейчас стали общедоступны. Есть еще несколько вопросов, оставшихся здесь, и там, но поддержка значительно выросла за последние несколько лет. Общие эффекты такие как тени, градиенты, скругленные углы могут быть выполнены в CSS и зачастую больше не требуют никаких картинок.
Завершеннось
В-третьих, веб индустрия сильно выросла. Мы имели достаточно времени, чтоб усовершенствовать наше нынешнее понимание того, что работает, а что нет. Нынешние компании скорее примут дизайнера, знающего CSS и HTML так же хорошо, как и эстетику.
Это так же означает, что на много лучше поддерживать современные процессы. CSS фреймворки как Bootstrap и Foundation дают больше возможностей для дизайна в браузере. Приложения такие как Balsamiq и Omnigraffle помогают быстро прототипировать сайт. Макеты, нарисованные на бумаге карандашем так же выдержали испытание временем так как позволяют очень быструю итерацию.
Означает ли это, что Photoshop умер?
Нет! И даже не близко! Photoshop остается очень важен для веб дизайна. Проблема возникает когда Photoshop используется для решения всего без мысли о более высоких задачах (дизайна сайтов). Photoshop прекрасен для редактирования и экспорта фотографий для веб. Еще остались ситуации, когда есть смысл в генерации полнодетального макета (в Photoshop, Illustrator, или других) как часть более законченных процессов. Вот несколько примеров:
- Макеты с высокой точностью могут быть критически важным средством при коммуникации с заказчиком дизайна. Может показаться, что быстрее пропустить создание высоко точного макета, но это может дать о себе знать позже, потому что не все заказчики могут понять как прототип (каркас) сайта потом может быть переведен в браузер. Макет может служить как инструмент во время дискуссии перед написанием кода (только исследовать это не то, что хочет клиент).
- Макеты могут быть очень важны, когда работа идет в средних или больших командах. Мы часто будем создавать макеты высокого разрешения на Threehouse, когда будем планировать новые курсы или дизайнить новые возможности сайта, потому что это мощный способ синхронизировать умственную модель каждого на том как будет выглядеть новый функционал или как будет выглядеть проект когда он будет закончен.
Эти два примера имеют ключевую разницу при когда верстается PSD макет. Высоко детализированные макеты еще продолжают иногда создаваться, но не то чтобы они стали преодолением преграды для команды разработчиков или как-то внедрены в код. Макеты Photoshop могут больше использоваться как визуальное дополнение для обсуждение идей. В процессе верстки PSD-макета, документ Photoshop представляет финальный вид сайта и он должен смотреться так же в браузере. Это тонкая, но важная разница.
Разные приемы
Рабочие процессы у всех разные, и никто не знает, как сделать идеальный веб-сайт. Вы всегда должны делать все, что является наиболее эффективным для Вас и Ваших коллег. Помыкать пиксели в Photoshop предоставляет массу удовольствия, но я могу признаться многих случаях, когда я помыкал пиксели слишком сильно. Ключ в том, что нужно знать себя и то, что заставляет вас работать в полную силу.
Автор: rodion_arr
