10 заметок с тегом

знания

Горячие клавиши

16 марта 2017, 16:41

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

Бывают даже пасхалки с горячими клавишами. Например если в фотошопе (CS6) зажать пробел и нажимать F, то будет меняться цвет фона (то, что за пределами редактируемой области). А если зажать пробел и C, то включится антилупа — инструмент, который помогает передвигаться по большому документу. Это довольно полезные штуки. Но бывают и странные. Например есть комбинация ⌘+B, которая вызывает панель цветового баланса. Удивительно, но эту панель можно вызвать, если одновременно нажать ⌘+-+0 (команд, дефис, ноль).

Ненависть наступает, когда начинаешь привыкать к горячим клавишам в одной программе, а потом приходится работать в другой, а там всё по-другому. Вот казалось бы, у Адоби есть Фотошоп, Иллюстратор и Индизайн. Можно было бы сделать чтобы большинство горячих клавиш совпадало — переключение между программами было бы почти незаметным. Но производители компьютерных программ не ищут легких путей. Поэтому в Иллюстраторе и Индизайне можно сохранить редактируемый текст, нажав Esc. Но если нажать Esc при редактировании текста в Фотошопе, то всё пропадёт. Это сильно мешает, когда целый день работаешь в Индизайне, а потом переключаешься в Фотошоп. Первые разы всегда по привычке нажимаешь Esc и теряешь изменения в тексте, а иногда и весь текст. Другой пример. Инструмент рисования фигур в фотошопе — это клавиша U. При помощи Shift+U пролистываются все фигуры, которые можно рисовать. В иллюстраторе на разные фигуры своя клавиша: для круга L, для прямоугольника M. Shift+M не листает по фигурам, а включает ВНЕЗАПНО! Shape Builder. В Индизайне похоже на иллюстратор. Но Shift+M ничего не делает. В Фотошопе параметры сохраняются по ⌘+Enter. В Индизайне это сочетание вызывает панель быстрого присвоения стиля. Казалось бы, программы выпускаются под общим именем, но выглядят как совсем разные продукты и ничего друг о друге не знают.

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

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

Визуальные раздражители

15 марта 2017, 17:12

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

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

Наведите, чтобы проверить, что вы тоже лягушка

Хотите ли вы этого или нет, а мозг, пользуясь зрением, сразу замечает, где появились движущиеся кружки, даже если они возникли на периферии — вне локуса внимания. И новый появившийся объект в тот же момент овладевает вашим вниманием. Поэтому любые «неспокойные» изображения и состояния нужно использовать с особой осторожностью. Многие это уже поняли и чтобы привлечь внимание к определенному месту, например, в интерфейсе слегка пошатывают кнопку или пару раз мигнут элементом, на который нужно обратить внимание.

Примеры хорошего применения с учетом рефлекса:
— иконка программы в Маке начинает выпрыгивать из дока, если в ней что-то случилось;
— редактор codepen.io в несохранённом проекте трясёт кнопкой Save;
— бета Яндекс.Браузера проигрывает анимацию на вкладке, в которой что-то произошло;
— «поворотники» в автомобиле мигают, чтобы их было заметно среди остальных огней;
— стоп-сигналы в некоторых автомобилях мигают, если срабатывает антиблокировочная система при торможении.

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

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

Дефис в сложных словах

24 января 2017, 15:35

Сложные слова состоят из нескольких корней. И чтобы они не были просто двумя словами, стоящими рядом, их соединяют дефисом. Катастрофически часто этот дефис забывают. Взять хотя бы вот эту упаковку:

«30 минутный» читается как «тридцать минутный» — это же бред и два несогласованных слова. Должно быть «30-минутный», то есть «тридцатиминутный».

Самая частая ошибка со словом «интернет». Всюду «интернет магазин», «интернет торговля», «интернет приёмная» и так далее, хотя правильно написать через дефис. Стоит только вчитаться, чтобы понять, что части этих словосочетаний — два несогласованных существительных. Ещё хуже, когда падеж не именительный: «разработка интернет магазина». Чей интернет? Интернет магазина? Разработка интернет? Или часто пишут «веб сайт». Мало того, что нормально будет написать просто «сайт», так ещё и пишут раздельно. Правильно: «веб-сайт», «интернет-магазин».

Если один из корней на другом языке, то просто обязательно надо ставить дефис. DOM-структура, fish-технология, mural-граффити, IT-индустрия. То же самое, если присутствует цифра: 5-минутный, 6-дневный, 7-полосный. Но цифры в таких случаях лучше всего писать словами: пятиминутный, семиполосный.

Простое правило — сложные слова пишутся через дефис или слитно (то есть через соединительную букву, например «шарикоподшипник»). Но не раздельно. Просто прочитайте. Если два существительных читаются как одно — перед вами сложное слово, и скорее всего вам нужен дефис.

Примеры:
интернет-магазин,
пресс-релиз,
бизнес-класс,
обер-прокурор,
веб-дизайн,
дип-техно,
клей-карандаш,
дизайн-студия
и так далее.

Подробное правило на Зерулсе

Напряжение в дизайне. Что дальше?

29 декабря 2016, 22:18

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

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

Наденем резиновые перчатки и усилим ещё.

Как и с композицией, тут важно чувствовать границу. За этой чертой форма побеждает функцию. Это не значит «плохо». Это значит, что можно балансировать между формой и функцией. Можно подчинять одно другому, кидаться в крайности и управлять вниманием.

А можно и черным по черному написать:

Маркерная графика

14 мая 2014, 16:30

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

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

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

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

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

Фотошоп

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

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

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

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

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

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

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

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

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

⌘ + V

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

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

Или так:

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

Леттеринг всем. Завершение

28 декабря 2013, 20:52

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

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

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

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

Книга «Как читать архитектуру»

23 декабря 2013, 18:16

Длительное гуляние по магазину «Республика» дало свои плоды. Я заметил и не задумываясь купил книжку «Как читать архитектуру». Очень хотел познать, как различаются архитектурные стили, куда смотреть, и какие мысли должны в голове появляться, когда видишь колонну.

Самое что мне понравилось, это формат вёрстки. Каждый разворот на протяжении всей книги выглядит так же как и все остальные. Небольшое описание и пять примеров с картинками.

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

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

Надо сказать, что информация довольно базовая и глубокая. Некоторых современных стилей не встречается в полном объёме, как, например, описаный мельком постмодернизм. Нет там и национальных (русских, восточных) стилей, что понятно, так как автор родом из США. Но этой базы вполне хватает, чтобы дальше быстро разбираться в других стилях.

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

Дизайнерские заморочки

Хоть это и карманный справочник в мягкой обложке, но у этой обложки есть клапаны, что делает её крепче. Зачем-то весь основной текст набран мелким кеглем гарнитурой Бодони. За первые три разворота чуть глаза не сломал. Потом привык.

Интересные места на ютубе

25 ноября 2013, 21:34

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

Сначала видео-затравка, а потом ссылка на канал и описание

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

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

Хед Сквиз — настоящая информационная бомба — в хорошем смысле. Ребята (в том числе Джеймс Мэй из «Топ Гира») рассказывают и показывают совершенно различные научные факты и размышления. Очень полезно для подпитки серого вещества. Из их видео можно узнать, как жидким азотом сжать бочку или почему люди пукают. Можно даже задать им интересный вопрос про любой процесс, который можно объяснить научно, и возможно они ответят в следующем видео.

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

Надел! — гитарная программа Сергея Табачникова. Гитаристам — обязательная подписка и просмотр всех роликов. Куча полезной информации по всему гитарному, и всё это в уникальном сергеетабачниковском стиле. Записывает свои передачи исключительно в трусах.

Брайан и Мария — молодая пара, снимают забавные ролики. Одни из тех, кого интересно и забавно смотреть. И не стыдно подписаться.

Бушкрафт — парень снимает как он ходит в поход. Там он рассказывает, как построить укрытие, развести огонь и готовит печенье с изюмом на костре.

затравочного видео не будет, они все у него слишком длинные
Александр Гордон — тот самый Гордон с первого канала. У него свой канал на ютубе, где есть его (наверно) все передачи. Очень много про науку, да и вообще контент у него интересный.

Брайтаник — дуэт Брайана и Ника. Совершенно уморительные видео с нелепостями и шутками. Можно смело смотреть и подписываться.

Вот, пока так. Делитесь своими интересными ютуб-подписками — это то, что нельзя узнать, пока не спросишь.

Как сделать длинный скриншот в Макоси

12 октября 2013, 1:57

Коля Товеровский показывает способ сделать длинный скриншот. Но способ этот только для макбука. Да и ограничивается шириной экрана (которая становится высотой).

Да, есть приложения и виджеты для этого, но кажется, что такой скриншот сделать должно быть просто. А это так, даже стандартными средствами Макоси.

Тащим окно вниз, потом растягиваем его по вертикали с зажатым альтом ⌥ (чтобы растягивалось в обе стороны — так быстрее). Сколько растягивать — на глаз. Да, максимальный размер 3 × (максимальный обычный размер окна)

Далее жмём ⌘ + Shift + Ctrl + 4 (режим скриншота области) и пробелом переключаем в режим скриншота окна (курсор превратится в фотоаппаратик). Нажимаем на окно. Затвор хруснет, и в буфере окажется пнг-скриншот окна с его тенью. Без контрола скриншот окажется на рабочем столе.

Вот так (10% масштаб, некликабельно):

Мягкая текстура

22 июня 2013, 22:34

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

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

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

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

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

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

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