Редизайн Meebo для самых маленьких

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

Сегодня я расскажу о любительском (в хорошем смысле этого слова) редизайне. Расставляя точки над i, нужно учитывать, что настоящий, взрослый редизайн, всегда идёт рука об руку с прототипированием, re-thinking’ом, инжинирингом, планированием… и ещё целым набором добротной софистицированной мути. И я это отрицать не пытаюсь. Всё это исключительно важно и нужно. Моя статья — пример того, как вы можете, ухватившись за краешек готовой аппликации, перекроить этот краешек на радость своему глазу. Разобраться, из чего всё это состоит, как сделано и как переделать (поправить), если очень хочется.

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

Как пример рассмотрим Meebo‘вское окошко, которое пугает нас, при желании уйти из таба, где запущен коммуникатор:

Итак, представим себе, что мы — создатели этого коммуникатора. А с ним и этого окна. И на нас напала блажь: сделать это окошко… ну не то чтобы красивым (есть «общий стиль аппликации»; речь не о красоте вообще, об этом нужно не забывать!), а хотя бы… ммм… аккуратным. Мы вооружаемся Клиптунетом. Вырезаем нужный нам кусочек скрина. И копипастим его в Фотошоп. Вот как это выглядит с добавлением гайдов, которые подскажут нам границы при перерисовке:

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

Для формы окошка используем Rounded Rectangle Tool, настроив его как редактируемый векторный шэйп, с радиусом скругления углов в 3 пиксела:

Я использую редактируемые векторные шэйпы везде, где только возможно. Чуть позже станет очевидно, что это неспроста, и что только так и нужно. Пока что мы, строго по гайдам, нарисовали форму окошка. И получилось вот так:

Ничего особенного, не так ли? Сейчас начнём наводить скромную «красоту». Идём в панель слоёв. К иконке, вызывающей выбор эффектов:

Эффекты нам понадобятся. И даже несколько одновременно. Мы начнём с заливки цветом (предварительно позаимствовав нужный тон у скриншота; здесь нам в первый (из ста) раз понадобилось быстрое и удобное переключение между видимым и невидимым оригинальным изображением):

Теперь время для контура. По умолчанию это отвратительные три красных пиксела наружу от объекта. Нам нужно что-то потоньше, в тон окна. И обязательно внутрь! В дальнейшем это поможет сохранить падающую тень девственно нежной и однопиксельной:

Один из важных принципов Фотошопа: его составляющие (фильтры, эффекты) не обязательно делают то, что должны были бы, судя по названию. Время для живого примера. Нам на самом деле нужно два контура. Один наружу, другой внутрь. Так вот, для того, который «внутрь», мы, за неимением лучшей возможности, с лёгкостью используем эффект внутреннего свечения, слегка доработанный, и лишённый размытия и гламура:

Последний штрих — та самая лёгкая и скромная тень. В тон, в рифму:

В панели слоёв получим вот такую красоту (именуйте слои, господа! Уважайте верстальщиков, они тоже люди, хоть иногда в это и сложно поверить):

Пришло время разметить внутреннюю часть окна. Потаскаем гайды:

Внутренняя часть — также Rectangle Tool, также векторная и редактируемая форма, только на этот раз без скругления по углам. Отрисуем по выверенным гайдам, применим тот же сет эффектов, что и у основы, только сменим окраску на оттенок серого (заимствуем из подложки-скриншота) и сделаем внутреннее свечение (в нашем случае выступающее в роли внутреннего контура, кто не забыл) несколько пожёстче. По вкусу:

Добавим форму для своей версии закрывающей кнопки:

Применим к ней всё тот же стиль, изменив его всего чуть-чуть (с этим нужно играть, пробовать; лучше понаделать несколько слоёв с вариантами, и переключаться между ними, доводя себя до истерики в момент, когда всё начнёт казаться одинаковым и одинаково же неподходящим):

Тень здесь выглядит «дурацкой» и лишней. Нам бы вдавить кнопку в панель, а не отрывать её, так ведь? Нет ничего невозможного! Более того, нам даже не понадобится менять тень, на что-нибудь иное. Маленький хак:

Победа над разумом. Обманутая тень, «вдавила» кнопку на отличненько:

Время для крестика и окноназвания:

И можем переходить к разработке кнопок. Несколько раз благодарим создателей Фотошопа (с его загрузочной таблички), за то, что есть векторные элементы, позволяющие нам сделать буквально следующее: 1. набросать вчерне форму кнопки, не заботясь о точном размере по ширине; 2. отредактировать размер после применения необходимого стиля; 3. скопировать кнопку и легко привести её в соответствие с шириной нового текста на ней. Наглядно:

Теперь применим стиль. Как ни странно — всё тот же, базовый стиль, изменённый и обтёсанный под текущие нужды. Без тени, с градиентом вместо заливки цветом:

Редактируем ширину в векторе, спец-инструментом (Direct Selection Tool):

Результат:

Копируем, изменяем текст и снова подгоняем под нужную ширину:

Любуемся результатом:

Вписываем страшные слова системных угроз, и окно (а вернее — его «мокап») готово:

Можно смело отдавать в вёрстку, использовать как основу для стилей схожих окон, пугать коллег псевдоскриншотами с ещё более страшными сообщениями… Поистине неограниченные возможности. А можно поизвращаться, и на основе кропотливо заделанного окошка, наваять что-нибудь неизбывно-душевное для любимой Лирушечки:

Симпы и лафки — обеспечены. Миша Квакин гарантирует.

Надеюсь, было интересно. Вопросы и попытки — приветствуются. Удачного вам редизайна!