Почему я не использую фотошоп для дизайна сайтов

28 ноября 2011, 15:41

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

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

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

Кто не в курсе, ребята придумали себе в Фотошопе костыль, якобы решающий проблему страниц. Это лейер компс. Такая палитра, которая умеет запоминать положение, видимость и свойства всех слоёв. То есть в одном файле можно хранить сколько угодно виртуальных страниц, каждая из которых запоминается в своём лейер компе:

Почему нельзя использовать фотошоп для дизайна сайтов


Почему нельзя использовать фотошоп для дизайна сайтов


Проблемы начнутся сразу же, как мы захотим сделать новую страницу. Нельзя продублировать страницу и поудалять всё ненужное — сломаются остальные. Нужно пойти и повыключать ненужные слои. То есть вместо работы над сайтом приходится заниматься обслуживанием слоёв, которых к третьей странице сайта накопится около миллиарда.

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

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

Нельзя просто написать на странице текст или положить кнопку. Нужно поместить их в нужную группу слоёв, иначе их нельзя будет переместить на другую страницу. Тупо потеряешь.

Ещё 20-страничный фотошопный файл нереально тормозит даже на 8 гигах оперативы. Элементарно нельзя подвинуть кнопку. Тормоза — несколько секунд.

Есть мнимый плюс лейер компсов. Типа, можно использовать повторяющиеся элементы, не дублируя, а просто меняя их положение на разных страницах. Это суперклёво, но дизайн превращается в одно большое программирование. Тут всё очень элегантно организовано, всё виртуально повторно используется, но нельзя ничего трогать, иначе всё остальное перестанет работать. Нельзя кусок страницы переместить или удалить, нужно придумать процедуру безопасного перенесения пикселей из одного места в другое. Ну бред же. Чтобы сложить два и два, не пишут класс с перегруженным плюсом. Это как использовать СУБД с таблицами в шестой нормальной форме вместо простой записной книжки в телефоне. Ну блин, это не нужно нормальным людям.

Иногда называют плюсом, что благодаря лейер компсам повторяемые части везде стоят ровно пиксель в пиксель, потому что страницы виртуальные и повторяемый объект на них на самом деле один. А в других программах, типа, контролцэ-контролвэ можно и криво кнопку поставить. Это не плюс, это случайный побочный эффект. И вообще, это ведь не вёрстка, не программирование. В конце концов, макет — это просто картинка. Нет никакой нужды в насаждении сисетмы отслеживания вылезания за пиксель. Никто никогда этого не заметит. Ну если ты педант, поставь направляющие, чё.

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

Я для дизайна использую индизайн, а фотошоп остаётся для рисования кнопочек. Индизайн — это записая книжка минус осязаемое удобство, плюс контролцэ-контролвэ, шаблоны и поля. Больше ничего для дизайна сайтов и не нужно. Да, инструмент определяет мышление, и индиз действительно приглашает делать всё проще, а это не всегда хорошо. Но вот использую я фотошоп, не делаю излишне просто, пользуюсь лишь одной программой. Суперкруто! А работать-то кто будет? Пушкин? Для меня выход простой: пользоваться индизайном и не забывать про всякое такое.

30 комментариев РСС

Maksim Shaihalov
Кстати, всегда интересовал вопрос с версткой страниц из Индизайна (не юзал, чесслово).
Верстальщики как относятся? Как это вообще там работает (с фотошопом то все ясно) ?
Валерий Попов
Вопрос предполагает, что кто-то верстает из фотошопа или из индизайна или из фаерворкса. Может, я фундаментально не прав, верстальщики, поправьте. Но мне кажется, что не верстают «из». Вроде бы отдаёшь верстальщикам джипеги страниц и всю нарезку впридачу. Где это было нарисовано — не важно. Хоть в пейнте. Мне кажется, некрасиво отдавать псд и надеяться, что верстальщик сам нарежет.

UPD: нарезка конечно же в ПСД.
Александр Сорокин
А меня интересует вопрос: чем не устраивает Илюстратор? Или даже так: в чем преимущество Индиза перед Люстрой? Я то, знаю, но хочется услышать ответ. Может, и привести свои доводы в пользу последнего.
Спасибо.
Валерий Попов
Я до индизайна фигачил сайты в иллюстраторе. Было почти ок. Щас пошла диалектика, внимание. Иллюстратор хорош тем, что он уже не фотошоп, но плох тем, что он пока не индизайн. Иллюстратор это недоиндизайн короче. Слишком ювелирный. Нужно ещё проще и тупее.

Ну и чисто технические предъявы. Люстра тормозит сильно, очень часто падает и при этом убивает файлы.
Сергей Сурганов
Хороший пост!
Денис Гомес
Давно хочу попрактиковать этот метод. Но всё как-то удерживает твоё же «я пользуюсь и мне заебись» Хотя всё правильно написал конечно.
Зануда Занудный
А как же ХАРДКОР?
Складываем основную страницу в одну папку, конкретно указываем где заканчивается футер и начинаем дублировать папку и изменять под свои нужды, а?
Василий Пуговкин
Присоединяюсь за Иллюстратор. Этот инструмент для меня вообще идеальное воплощение зум-волрд интерфейса для дизайна, можно в одном файле держать весь сайт/интерфейс в законченном виде, обрисовать все это стрелками переходов, комментариями на полях, заготовками и черновиками. Можно смотреть на все вместе страницы расположенные как угодно на общем полотне, зазумиться до нужной страницы или даже до кнопки и ее тут же подправить (сделал символ и все). Экспортировать одним движением в джипеги или пдфку. Также можно забить на пиксели и слои, а верстальщикам (понимающим) отсюда достать что-то вообще проблем нет.

Правда, Индизайн не использовал, а, как-то открыв, растерялся и продолжил работать в люстре. Может быть там все также.
Евгений Лазарев
Я верстальщик, и в Контуре приноровился верстать и *из* Индизайна.

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

Не понимаю, какие проблемы могут возникать при вёрстке по индизайновскому макету. Там так же можно измерить все расстояния, а некоторые действия даже удобнее (например, узнавание радиуса скругления уголков).
Валерий Попов
Вроде из ваших слов следует, что дизайнер может что-то нарезать не так, как надо и придётся перенарезать. А что можно сделать не так? Поделитесь опытом?
Александр Сорокин
Евгений Лазарев
Тоже пытался оказать такую медвежью услугу по вырезанию их Илюстратора. А мне сказали: «лучше не трогай!… но когда надо обратимся сами.» И мне не влом достать из Люстры какую-нибудь тень в пнг при необходимости.
В общем: мир, труд, май!
Максим Соловьёв
Евгений Лазарев, поддерживаю. Когда прочитал про то, что дизайнер высылает нарезку — очень удивился...
Артём Сапегин
«Чтобы сложить два и два, не пишут класс с перегруженным плюсом».

Примерно на таких примерах нам объясняли ООП в колледже :) Наверное, многие теперь думаю, что ООП — это способ написать страницу кода вместо двух строчек.
Вадим Макеев
> Вроде бы отдаёшь верстальщикам джипеги страниц и всю нарезку впридачу.
> Где это было нарисовано — не важно. Хоть в пейнте.
> Мне кажется, некрасиво отдавать псд и надеяться,
> что верстальщик сам нарежет.

Я тут спросил своих читателей в твиттере:

> Опрос: дорогие верстальщики, что бы вы сказали дизайнеру,
> если бы вместо PSD он выдал бы вам JPG
> и уже нарезанную им графику для вёрстки?

Штук 40 ответов, из которых всего два допускают возможность такой ситуации, но всё равно сомневаются, мол, надо сперва посмотреть. Все остальные — смело посылают такого дизайнера и требуют PSD. Все согласны, что тип методика нарезки очень сильно зависит от методики вёрстки. Мне кажется — это повод задуматься о широкой применимости такого подхода.
Валерий Попов
А что может быть плохого в нарезке? Как можно нарезать «не так»? В чём потенциальные проблемы и ошибки?
Ну вот нету псд. То есть он есть, но в нём всё по отдельности так же кусочками. Каждая фишечка в своём файлике. Ну или целый файл с одними только фишечками. А целиком страницы сайта в псд нету. Так проканает?

Я понимаю, что, наверное, у верстальщиков сложился какой-то подход к нарезке из цельного псд, но что ж теперь, прогресс остановить?
Вадим Макеев
Тут важно понимать, что PSD — это не просто набор плоских картинок, сложенных по слоям. Это макет именно в том виде, в котором его нарисовали. Значит можно пользоваться полупрозрачностями, отключать масочки, смотреть параметры градиентов и теней вживую (чтобы потом сделать их с помощью CSS), измерять размер шрифта не на глазок — а точно.

Даже два разных верстальщика сравнимой квалификации нарежут картинки по-разному, что уж говорить про дизайнера и верстальщика. Дизайнер всегда сделать что-нибудь, да не так. Не потому, что он плохой дизайнер, а потому, что он плохой верстальщик — ведь если бы он был хорошим, то он бы и верстал сам.

Или может быть я неправильно понимаю что значит «вся нарезка впридачу»?
Валерий Попов
«Вся нарезка впридачу» в случае с индизайном это такой большой ПСД с одними кнопочками и иконочками. Ничего там не слито и не потеряно, всё «как есть».

Я правильно понял? Псд хочется не потому, что хочется прям смотреть вес сайт в псд, а потому что каждый элемент хочется в псд?
Вадим Макеев
Да, думаю PSD хочется именно потому, что хочется исходники *всей* графики, которую нарисовал дизайнер, а не только той, что он посчитал уместным нарезать. Потому как случаи действительно бывают разные и проще иметь под рукой всё сразу.
Валерий Попов
С индизайном в ПСД будет именно вся графика. В самом индизайне пишется только текст, ну и максимум может быть полосочка какая-то нарисована будет.

А подготовить специальную страничку, где написано, мол,
H1 Arial 24 px/32px
H2 Arial 16px/22px
p Arial 13px/18px
так это вообще всегда надо делать, я считаю, даже если ты в Фотошопе сайт рисуешь.
Вадим Макеев
Я думаю описание работы с верстальщиками заслуживает отдельного поста, чтобы не возникало таких вот недоразумений, когда кажется, что верстальщикам отдаётся в руки не вся графика, да ещё и уже нарезанная.
Антон Иванов
«Если не используешь лейер компс, то остаётся либо хранить страницы в группах слоёв, что возвращает нас к ебле со слоями, либо придётся плодить файлы — по одному для каждой страницы. Ну это сами понимаете.»

Нет, не понимаю. В чем проблема то? Для каждой страницы отдельный файл. Это удобно и мозги у компьютера не засоряются лишним. Нужно отредактировать две страницы одновременно, скажем. Открываешь два файла. Можно таскать из одного в другой, можно снимок одного в два клика наложить на другую страницу. Очень удобный метод — рекомендую.
Глеб Калинин
Антон Иванов — представление об очень большом проекте у каждого своё, но когда psd-файлов становится больше, хм, 20, и их нужно держать более-менее синхронизированными друг с другом, это становится уже очень проблематично — все эти таскания, особенно когда изменения касаются небольших элементов, например, кнопок или форм.

Про себя скажу, что пока что пользуюсь Иллюстратором. У него есть довольно ощутимые минусы — нужно возиться с пикселями (смотреть, чтобы позиционирование и размеры были без дробных значений) и довольно фигово поставлена работа с растровой графикой. В остальном — работает в разы быстрее Фотошопа, не замечал, чтобы особо падал и тормозил. Плюс — я в нём ещё и прототипы рисую, миграция получается очень простой и удобной.
Максим Шайхалов
Антон, а если в портале с 40+ страницами надо размер шрифта поменять?
Довольно нетривиальное занятие, которое меня лично уже заставило задуматься о переходе на Индизайн.
Однако, как уже писал, признание ПСД «отраслевым стандартом» не дает прогрессу двигаться.
Валерий Попов
Мне кажется, вы сами придумали себе препятствие. Если кнопочки в псд (рисовать такое в индизайна просто незачем), то претензий у отрасли, по существу, нет.
Антон Иванов
Глеб, это плата за возможность на ходу работать со всякими маленькими растровыми элементами :)
Ну менял я шапку в 25 файлах, ну да неприятно, но не катастрофично. Медитативная работа на полчасика ))
Но думаю, что это время компенсируется за счёт того, что нет необходимости таскать графику из другой программы (я про метод графика в ФШ, верстка в Индизайне). Рисовать в одной проге, а потом принаравливать в другой — это ведь тоже трата времени. Я вот не умею так. Мне важно видеть как одна маленькая фигулинка влияет на всё изображение в целом.
Валерий Попов
Это потому что вы прогрессивеый джипег не умеете :)
Антон Иванов
По существу, одним удобно в одной проге, другим в другой. Отрасль то зачем баламутить и устраивать крестовые походы? Господа, признайтесь честно, вы просто не любите/ не умеете в других программах эффективно работать (а я тоже не умею).

Предлагаю всем попробовать пожить во всех программах. И учесть все плюсы, и минусы.

Валерий, а вот что тебя в Индизайне бесит? Что не устраивает? Неужели таких вещей нет?
Валерий Попов
Если примерить ваш призыв на себя, то скажу, что пробовал всё, даже корел. Лично для меня у индиза такие плюсы есть, которых нет больше ни у чего. Мне важно, чтобы была записная книжка для крупнокалиберных аппликаций.

В индизе меня не устраивает, что он до сих пор не научился сохранять в пнг. Ну и есть пара багов.
Максим Шайхалов
Я вижу, в принципе, приемлемое решение.
Макет до 3х страниц рисуется в фотошопе, все что больше идет в индизайн.
Сергей Саржевский
Сайт — не гипертекст, а приложение. Кто-то сказал, кого я уважаю.
Спроектируется ли тот же звукью.ру в индизайне?
Валерий Попов
Вот, кстати, хороший вопрос. Это то, о чём говорит Серёжа Сурганов — «Инструмент определяет мышление» и одна из главных предъяв Миши Танского «Это не сайт, а хуева туча ссылок» (не уверен, что точно процитировал). Вопрос хороший и сложный. Думаю, он заслуживает отдельной заметки.

Сейчас пока могу сказать, что это вовсе не повод сомневаться в нужности индиза. Как бы сначала решаем, что, неплохо было бы перестать рисовать сайты палкой на песке, а потом уже думаем, как быть, если всё-таки понадобилась хорошая текстура песка.
Перно Андрей
возможно дизайнерам будет интересно посмотреть процесс верстки на видео http://psd2cms.ru/
Роман Верник
Чтобы не делать дизайн сайтов в Фотошопе и Иллюстраторе достаточно понять происхождение названий этих программ.
Саша Реушкин
@Роман, тогда остается Fireworks. Но никак не InDesign.
Валерий Попов
Fireworks code name «svistelki, perdelki, blackjack and whores. Oh, and a couple of instruments to make a design».
Сергей Лукьянов
Друзья, кто-нибудь встречал толковые обзоры-сравнения Индизайна и Фаерворкса?
Пытаюсь понять, на что спрыгивать с Фотошопа, но мнения как-то сильно расходятся.
Заранее спасибо.
Саша Реушкин
@Сергей, думаю ни один обзор вам не даст представления пока вы сами не попробуете обе программы на реальных проектах. Так как в каждой программе есть свои плюсы и минусы, с которыми придется жить.
Сергей Саржевский
Я тоже начал немного использовать индизайн. Достойный противник тетрадному листу и ручке, скажу я.
Сергей Альбов
Не так давно начал проектировать сайты в индизайне. Именно конечный вариант, а не то, что называют «прототип».
Из очень приятных и удобных моментов:
1) Объекты вместо слоев, это реально удобнее, тупо выбирать мышкой, копировать и таскать, не беспокоясь на каком слое находишься.
2) Стили для текстовых объектов. Я сделал себе набор стилей H1, H3, псевдоссылка, подзаголовок, и т. п. Во-первых удобнее и быстрее рисовать контентные страницы (кто бы что ни говорил, а наполнение все равно нужно показывать, хотя все понимают что наполнение будет на самом деле создаваться в CMS). Во-вторых, очень удобно менять параметры этих заголовков, ссылок и прочего, изменил стиль — поменялось на всех страницах сразу.
3) Мастерпейджи. Сделал мастерпейдж для хедера главной, для внутренней, и опять же, можно его изменить, и изменения отразятся на всех страницах сразу. Это честнее и надежнее лэйер компсов. Ну и удобно что все страницы в одном файле, не нужно переживать за синхронное положение объектов на всех PSD.

Графика (кнопки, тени под фотками, изображения в шапке), делается в фотошопе, и линкуется на страницу. Опять же, при изменении одной тени (кнопки) меняются все копии сразу. И кстати, возможно всяческие скругленные прямоугольники со градиентом и тенью можно рисовать прямо в индизе, а рядом просто давать коммент со свойствами CSS, чтобы верстальщик делал его не графикой.

Да, скакать между двумя программами действительно приходится, и определенные неудобства присутствуют. Но если сайт сложный и многостраничный, плюсы индиза перевешивают, как мне кажется.
Андрей Петров
Фаерворкс подкупает одновременной хорошей работой с вектором и растром. Готовой библиотечкой HTML элементов: заголовков, ссылок, элементов форм.

Из недостатков: плохая работа с текстом (относительно Индизайна, конечно); при большом количестве страниц и объектов начитаются небольшие тормоза, а затем и переполнение памяти.

В общем, я организую работу в Фаерворксе так: каждый новая страница сайта — это page; каждая модификация той же самой страницы — это новый state; стандартные, часто используемые элементы — это symbols. Слои так же есть, но я их не применяю.

Вот неплохая статья: http://www.adobe.com/devnet/fireworks/articles/fireworks_web_design_css.html

P.S. Недавно попробовал использовать Корел — ну что же, тоже можно жить, по сравнению с Фотошопом ;)
Саша Трегуб
Fireworks решает. Страницы + стейты, моментальная обратная связь, легкие файлы. Если закрыть глаза на мелкие баги, изумительная вещь.

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter