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

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

Источник

Источник

Фильм

Фильм

Источник

Ещё раз посмотрим, что висит сейчас:

Оглядываясь на примеры, попробуем разные шрифты.

Вариант с полным написанием:

Можно сократить «дом культуры»:

А лучше всего — сделать леттеринг:

На площадь перед домом культуры выходят праздновать, выражать гражданскую позицию и просто гулять возле фонтана. В самом ДК дают концерты исполнители от местных до зарубежных, занимаются кружки и ансамбли. Первый «Джазоворот» состоялся на крыльце этого здания. Очень жаль, что у такого места нет качественной и захватывающей дух вывески.

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

В 2014 году на протви́нском доме культуры сменили вывеску. Фактически, это самая главная вывеска в городе.

Раньше это были металлические объемные буквы, заготовленные под неоновое освещение.

Была и полная надпись «дом культуры». Буквы составляли с оформлением фасада единую стилистическую картину.

Установили вот такое:

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

Настало время отделить надпись от фона и посмотреть на неё детально.

Кажется, что шрифт растянут в ширину. Уберем жуткие обводки, чтобы посмотреть на настоящую форму букв:

Если сжать надпись, то проступят истинные пропорции (за исключением испорченных Д и К):

Шрифты нельзя растягивать в одну сторону. Пропорции буквы священны.

Есть проблемы со знаками, рассмотрим подробно:

Такое небрежное отношение к формам наводит на мысль, что автор этой работы не интересуется буквами и не понимает их строения. Это подтверждает и непонятно зачем нужное подчеркивание, которое ломает буквы ДК и не согласуется с толщиной штрихов. «Шахматное» раскрашивание ничем не оправдано и выглядит несерьёзно. Букву К стошнило и всё это потекло под надпись. А разные характерами слово и аббревиатура набраны одинаковым размером и начертанием.

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

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

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

Сейчас я покажу, как с помощью фотошопа и других средств сделать так:

Рисунок и фотография

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

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

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

Фотошоп

Кратко — берём нужный кусок фотографии и, работая уровнями, делаем из него маску на новом цветном слое. Это всё. Подробно ниже.

Фотография отправляется в фотошоп. Кадрируем (C):

Удерживая ⌘/Ctrl + Shift, нажимаем U, L — так картинка обесцветится и выровняются уровни.

Далее теми же уровнями (⌘ + L) надо добиться такого результата:

Фон вытравился, стало контрастней

Обычно надо только подвинуть крайние ползунки ближе к центру, средний — по необходимости.

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

Дальше
⌘ + A
⌘ + C — выделяем всё и копируем
⌘ + Alt + Shift + N — новый слой

Заливаем его каким-нибудь цветом. Создаём на этом новом слое маску и кликаем в панели слоёв по ней с альтом.

⌘ + V

Жмём на нижний слой и заливаем его белым, он нам уже не нужен. И получается вот так:

Это уже слой с хорошей прозрачностью и настоящей текстурой. Надо только его раскрасить. Любыми
цветами водим кистью по слою с маской и получается вот так:

Или так:

Это дешевый и простой способ делать сочные и рукотворные картинки.

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

Открылась выставка

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

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

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

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

Есть замечательное правило — если какое-то действие требует повторений, запиши его в экшен. И простые задачи станут ещё проще, точнее, менее затратней.

А главное, что экшены довольно просто записать и потом использовать. Можно указывать какие действия требуют ввода параметров, можно даже после записи поменять порядок действий или удалить лишние (так что нестрашно ошибиться и почистить неудачные дубли). Так ещё можно и повесить экшен на F-клавишу (или сочетание).

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

Скачать два экшена

slice and save вырезает экспортирует выделение в файл. То есть, фактически, это ⌘+Shift+C, ⌘+Shift+N, ⌘+⌥+Shift+S и закрытие нового файла, созданного во втором действии. На выходе — сохранённый выделенный кусок, там, где скажете.

export layers — почти то же самое, но вместо выделения экспортируется выбранный слой или группа. В новом файле делается Trim по прозрачным пикселям, так что объекты с тенью-эффектом смогут без потерь превратиться в png.

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

Кто подпишется на мой твитор в августе, и скажет заветные слова «хочу надпись», получит векторный леттеринг со своим именем или псевдонимом. Сразу оговаривайте, на каком языке хотите надпись. И вообще отлично, если ещё приложите картинку со стилем, в котором хотелось бы надпись.

Подписывайтесь, получайте леттеринг, а я в свою очередь буду делать так, чтобы не хотелось отписаться =)

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

Первый шаг — заливаем каким-нибудь цветом:

Второй — добавляем много шума:

Блюрим примерно на 1рх

Хочется поставить 0,3—0,5, но лучше заблюрить, чтобы получить более разнообразную текстуру.

Шарпим раза четыре:

Можно например так использовать:

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

И тут происходит странная вещь.

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

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

А вообще, активации в таком виде быть не должно.