Фотошоп не пригоден для дизайна сайтов

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

Сейчас, после плотной работы с веб в Фотошопе, я могу утверждать, что Фотошоп действительно Фотошоп, а не Вебшоп. Делать сайты в нем не удобно. Все ухищрения по сути являются костылями. Единственная толковая штука для работы с сайтами — стили слоев. Все остальное заточено под что угодно, только не под сайты. Панель слоев идеально адаптирована под ретушь, под фото-монтаж, но является настоящим адом для создания элементов сайта. Особенно когда речь заходит о элементах с мульти состояниями. Кнопочки с хувером, акшеном и линком приходится организовывать самому, руками. Никакого подобия организации по типу Fireworks или Flash, где кнопку можно создать общим элементом, и в ней организовать все состояния нет и в помине. Но самый ад начинается, когда заказчик хочет изменить кнопку. А к ней нарисовано 3 состояния. Плюс сама область, где находится кнопка, тоже является реагируемой.

В современной веб разработке хуверными являются крупные области с контентом. При этом на самих этих областях находятся свои хуверные объекты. Кнопки, ссылки, прочие элементы. Многие из них имеют по 3 состояния. Организовать все это в фотошопе не возможно. То есть возможно, тупо папками. А потом переделывать все папки все кнопки в случае незначительной правки. И сразу скажу. Использование Смарт объекта для кнопок возможно, как костыль. Но так же неудобно. Не для того смарт объекты были созданы, что бы собирать в них состояния кнопок. А для того, чтобы создавать внешние манипуляции слоя, без повреждения исходника.

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

Еще хуже дело обстоит с прототипами. В сложных макетах надо постоянно показывать разные состояния, момент нажатия, хувер локальный, хувер глобальный, выпадающие меню, хуверы на выпадающих меню, клики на меню, хувер скрола, хувер элемента на скроле и так далее. Показать все на 100 скринах с подставленными стрелками не возможно. Организовать при этом все слои так что бы все было понятно тоже не просто. При этом есть панель Comps, которая частично решает эту проблему, но пользоваться ею не не умеют верстальщики. Мало кто знает о её существовании, придется постоянно объяснять через посредников, что это за панель и как она работает.

Вот например мне надо показать ссылку. Я выделяю текст, крашу его в синий. Это ссылка. При этом, если у ссылки есть подчеркивание, надо рисовать вектором отдельно, так как подчеркивание часто смазывается в режимах сглаживания. Но у ссылки есть хувер. Ссылка без хувера сегодня прошлый век. Придется вынести ссылку отдельно в папку. Туда же положить второе состояние. Ссылку продублировать. Кроме ссылки может быть и экшен, состояние при клике. На панели слоев уже 3 папки, набитые слоями. Все, чтобы показать пару подмигиваний. Потом верстальщику нужно во всем этом рыться. Подмигивания не интерактивны. То есть нельзя их увидеть прототипно. Надо рыть слои, переговариваться с посредником, а если дизайнер работает неопрятно, найти что-то не возможно.

И это только часть проблем при разработке грамотного сайта в Фотошопе. При этом, я вовсе не критикую Фотошоп в сравнении с Фаерворксом. Год назад для Хронофага перевели одну популярную в определенных кругах статью сравнение Фотошопа против Фаерворкса в контексте разработки сайтов. Весь Фаерворск, понятно, заточен под веб, а Фотошоп — некая мультиварка для всего. Так вот, сразу скажу, я не агитирую перебегать на Фаерворкс или куда-то еще. Тем более сейчас, когда Фаерворкс закрывается и обновлений не будет. Знаю я о том что Fireworks заточен под веб и даже учился им пользоваться. Но полноценно сайты не нам я не делал. Так, изучал для кругозора. Работу на него не переводил. А совсем раздумал переводить, когда один знакомый дизайнер сказал что проблем с исходниками не оберешься. Верстальщики в принципе не понимают что это, как это работает, и как им от туда что-то порезать. Заказчики тоже часто хотят в PDS. Что такое Fireworks и на западе знают только хипстеры-дизайнеры, а у нас просто никто. Вот и приходится вначале работать в Fireworks, а после, импортировать фаилы в Фотошоп и перелопачивать все слои.

Но такова ситуация во фрилансе, где проектной организации не существует в принципе. А вот в рамках компании использовать Fireworks имеет большой смысл. Однако сейчас не о нем. Сейчас о том, что Фотошоп для разработки веб сайтов страшно неудобный и костыльный инструмент.

4 Comments Фотошоп не пригоден для дизайна сайтов

  1. Лилу

    Во многом согласна. Сама когда-то работала в файрворксе, но в итоге всё равно вернулась к родному фотошопу, несмотря на то, что он заточен больше под фото. Просто есть вещи, которые средствами файрворкса не сделать. Ведь веб-дизайн — это не только кнопочки, типографика и математика, это творчество. Чтобы сделать красивую картинку в баннере, часто приходится использовать и ту же ретушь фото с корректирующими слоями, масками и т.п. Чтобы красиво вписать объект или человека в фон, нужно рисовать грамотные тени, рефлексы и т.п. В файрворксе недостаточно для всего этого средств. А бегать из программы в программу надоедает) В фотошопе да, всё организовывается с помощью папок, но как-то пока это не напрягало ни разу, то ли руку набила уже за 7 лет, то ли просто не придавала значение, то ли просто не было таких ситуаций, чтобы клиенты просили много переделывать. А вообще конечно хотелось бы ждать улучшений в фотошопе для веб-дизайнеров, думаю когда-нибудь это таки случится)
    Но пишу я вот чего) Насчет подчеркивания ссылок и размытости этого самого подчеркивания) Несколько долгих и мучительных лет я не знала этой фишки в фотошопе, но когда узнала — моей радости не было предела) Делается это, как говорится, в два клика. Сначала увеличиваете масштаб, и при увеличенном масштабе (и выделенном слое со ссылкой конечно) нажимаете Ctrl+T. А потом двигаете с помощью стрелочки на клавиатуре на один пиксел вниз. Или вверх:) Как вам больше нравится. Эффект одинаков. В 90% случаев достаточно эту самую стрелочку нажать один раз, но если вы уж совсем сильно увеличили масштаб, то возможно два) И всё. Размытое подчеркивание становится идеальным)
    Попробуйте — может вы чуточку больше полюбите фотошоп)

    Reply
    1. Дмит&#

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

      Reply
  2. Лилу

    Во многом согласна. Сама когда-то работала в файрворксе, но в итоге всё равно вернулась к родному фотошопу, несмотря на то, что он заточен больше под фото. Просто есть вещи, которые средствами файрворкса не сделать. Ведь веб-дизайн — это не только кнопочки, типографика и математика, это творчество. Чтобы сделать красивую картинку в баннере, часто приходится использовать и ту же ретушь фото с корректирующими слоями, масками и т.п. Чтобы красиво вписать объект или человека в фон, нужно рисовать грамотные тени, рефлексы и т.п. В файрворксе недостаточно для всего этого средств. А бегать из программы в программу надоедает) В фотошопе да, всё организовывается с помощью папок, но как-то пока это не напрягало ни разу, то ли руку набила уже за 7 лет, то ли просто не придавала значение, то ли просто не было таких ситуаций, чтобы клиенты просили много переделывать. А вообще конечно хотелось бы ждать улучшений в фотошопе для веб-дизайнеров, думаю когда-нибудь это таки случится)
    Но пишу я вот чего) Насчет подчеркивания ссылок и размытости этого самого подчеркивания) Несколько долгих и мучительных лет я не знала этой фишки в фотошопе, но когда узнала — моей радости не было предела) Делается это, как говорится, в два клика. Сначала увеличиваете масштаб, и при увеличенном масштабе (и выделенном слое со ссылкой конечно) нажимаете Ctrl+T. А потом двигаете с помощью стрелочки на клавиатуре на один пиксел вниз. Или вверх:) Как вам больше нравится. Эффект одинаков. В 90% случаев достаточно эту самую стрелочку нажать один раз, но если вы уж совсем сильно увеличили масштаб, то возможно два) И всё. Размытое подчеркивание становится идеальным)
    Попробуйте — может вы чуточку больше полюбите фотошоп)

    Reply
    1. Дмитрий Веровски

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

      Reply

Добавить комментарий для Лилу Отменить ответ

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