Category: искусство

Category was added automatically. Read all entries about "искусство".

Плохой верстальщик

В ведре одного из старых бюрошных проектов есть картинка, которую я использую, когда мне надо объяснить, что такое плохой верстальщик:

Реклама Системы Кадры

Плохой верстальщик же не может просто посмотреть на пнг и сделать, как нарисовано. Ему, блять, надо объяснить каждый отступ: «Вот тут 10 пикселей нарисовано, значит,  дорогой, надо сделать отступ 10 пикселей». И так по всему макету. 

Рисование таких картинок трата времени. Конечно, лучше взять нормального чувака, которые сразу всё сделает правильно. 

Но даже если вам не повезло, советую такие картинки не рисовать. Человек, который не может измерить картинку, проебёт и подписи. Поэтому технология такая. Пусть сначала чувак верстает, как сможет, а потом ему надо сказать, где он проебал: «вторую надпись на три пикселя вверх». 

P. S. Многолетние наблюдения показали, что некоторые верстальщики просто не понимают, как сравнить две картинки. Реально на глаз делают вместо того, чтобы сделать скриншот и наложить на макет с прозрачностью. Таким помогает программа Pixel Perfect.

Расфлексил ванную

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

Рад сообщить, что вторая итерация закончена:


Плитки нужного размера не нашлось, поэтому поломанную закрыл мозаикой:


Шторка тоже нашлась в похожий квадратик:


В следующей итерации предстоит всё отмыть и проект закончен.

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

Их страница на Юду:
https://youdo.com/u1993036

Бюджет: 10000 ₽ за работу и примерно 5000 ₽ на материалы, которые я купил сам.

Умение «продать»

Вот насколько важно уметь «продать» свою работу:



Если бы художник рисовал обычным образом, максимум бы сказали: «ну, ок, прикольно». А так все разговоры о том, как они были удивлены и восхищены и до последнего момента думали, что это картошка. О том, что сама картина довольно примитивная, уже речь не идёт.

Купил Pixelmator

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

Во-первых, сука, клёвенький. Иконочки, кнопочки, штучки. Всё отпидорашено до блеска. Хуже делать становится стыдно. Во-вторырх, всего 15 баксов и у тебя есть легальный и приятный способ открыть фотошопный файл без запуска мострячего фотошопа. И еще круто, что есть уроки. Может теперь научусь сам красивые кнопочки делать.

Кстати, крутых интерфейсных решений там полно. 

Про фильтры с ниточками все уже знают.



Еще в панели фильтров сразу превью эффекта можно посмотреть. Прямо водишь туда-сюда, а превьюшка изменяется.


А чего стоит сохранение для веба? Просто иконочку перетаскиваешь куда нужно и — вуаля, окно сохранения не нужно.


Важна, всё-таки, для людей клёвость и крутость :)

http://www.pixelmator.com/

Фотошоп без палитры инструментов

Вот adrior наехал в прошлом посте:
Просто трендеть про то, что «всё отстой, не удобно, где вообще единороги?» — каждый горазд. Скажи, как бы ты реализовал инструменты в фотошопе?

Ну давайте тогда думать Фотошоп без модальных иструментов. Я начну.

Инструменты эти видать из обычного мира были позаимствованы. Вот есть доска:


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

Если подумать, действия с доской состоят из двух частей. 1) выбираем место на деревяшке, 2) что-то с этим местом делаем. Действие зависит от инструмента. 
 
Чтобы не было модальности инструмент должен быть только один. Такой супер-мега швейцарский нож, который и пилит и сверлит и красит и всё что угодно делает. Тогда мы могли выбрать место на деревяшке, взять этот один иструмент, скомандовать ему: «пили!», — и он стал бы пилить. Или сверлить. Или красить.
 
В реальном мире такой инструмент хер сделаешь. Если сделают, скорее всего это будет какой-то гель с нанороботами. Полил на деревяшку гель, крикнул «пили» и роботы по молекулам разобрали древесину. :)
 
Зато на компе нехуй делать такую штуку замутить. Показал где надо что-то сделать.
 
 
 

А потом скомандовал:  пили! И он отпилил.

 

Перенесёмся в Фотошоп.
Со всеми инструментами мы работаем одинаково: нажали левую кнопку мыши, поводили курсором (или не поводили, то есть поводили на 0 пикселей), отпустили. То есть для каждого действия есть координата нажатия, путь курсора и координата отпускания. Назовем эту штуку элементарным объектом.

Дальше просто. У элементарного объекта может быть множество состояний. Каждое состояние эквивалентно инструменту.

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

В теории круто, на практике не будет работать. Во-первых, все привыкли к инструментам. От Фотошопа отвыкнуть еще можно, но от реального мира с молотком и пилой невозможно. Второе, и главное, нет обратной связи. Когда я рисую круг я хочу круг видеть, а не ебучую красную полоску.

Окей, добавляем этой системе то, чего все хотят. То есть перед началом рисования объекта я могу указать состояние. То есть если я выбрал состояние квадрат, то новый элементарный объект рисуется в этом состоянии.

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

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




Сценарий
Рассмотрим типичный сценарий: Ты хочешь нарисовать квадрат. Хуйнул U. Нарисовал.

Дальше нужно круг, но ты забыл, что у тебя квадрат. Начинаешь рисовать, видишь — жопа, квадрат вместо круга рисуется. Прямо не отпуская мышки хуйнул O (или какой там хоткей?), квадрат стал кругом, ты его дотянул куда нужно. Готово.

Или не так. Ты опять же круг стал рисовать, а у тебя квадрат. Ты испугался, мышку бросил. У тебя создался квадрать. Ты O нажал, квадрат кругом стал, ты его смасштабировал как нужно. Готово.

Дальше в круге надо дырку резинкой протереть. Начинаем тереть... Бля, круг рисуется. Давим E. Там где мы уже навазюкали мышкой стирается. А если B нажать, то это закрашивается кистью.

Дальше вы :)

P. S.
Я думал, думал, я всё понял. Это Пунтосвитчер для Фотошопа получился. Точная копия, только в пунто два состояния (две раскладки), а в Фотошопе их куча.

Стерильный серый

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

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


Стерильный





Подкрашенный




Стерильный



Подкрашенный




Всякие серые плашки почти всегда стоит подкрашивать, они выглядят гораздо лучше:



Подкрашенные плашки в
посте Артемия Лебедева.


Как известно, на цветовой палитре по модели HSB (Hue Saturation Brightness) по оси абсцисс отложена насыщенность, по оси ординат светлота, а оттенок изменяется отдельным параметром.

В палитре HSB  подкрашенные серые «живут» ближе к левому краю квадрата.




Исаак Ильич Левитан

Короче, Левитан (вики) — это никакой не диктор, который: «Внимание, внимание! Говорит Москва...». Это художник такой.

Родился Исаак Ильич в 1860 году. С самого детства и большую часть оставшейся жизни Исаак Ильич нишебродстовал. Его папа служил на железной дороге и постоянно менял место работы, причем так удачно, что каждый раз в финансовом плане становилось все хуже и хуже. Баблос появился у Левитана только под конец жизни, но к тому времени у него уже был сильно больной мотор, и много радости деньги не принесли.

Интересно что одним из его главных учителей художника был Перов (о котором я писал в прошлый раз), в натурный класс которого попал Исаак, когда поступил в МУЖВИЗ.



Автопортрет, 1880 (20 лет)


Исаак рисовал пейзажи, которые сами по себе не особо интересны, потому что не меняются столетиями.

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


Дубовая роща. Осень, 1880 (20 лет)


Но это не так. Умел. Нужно просто отойти подальше и картинка проясняется, как в книжках с трехмерными рисунками, для просмотра которых нужно смотреть в даль.


Солнечный день. Весна, 1877 (17 лет) Отъехать от монитора надо метра на два.

Или наоборот в юзерпиковском формате нужно смотреть.



Мостик. Саввинская слобода, 1884 (24 года)

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

Забавно, но жена этого Кувшинникова, Софья Петровна Кувшинникова, хотя такого понятия тогда не было состояла с мужем, эм, в открытом браке.

Короче Исаак и Софья, которая была значительно старше художника, свалили в путешествие по Волге.

Картины этого периода доставляют больше всего.


Вечер. Золотой Плёс, 1889 (29 лет)



После дождя. Плёс, 1889 (29 лет)

Еще крутая картина — Владимирка.


Владимирка, 1892 (32 года)

На ней изображена Владимирская дорога, по которой в Сибирь отправляли каторжников.

В том же году, когда была написана «Владимирка» вышел рассказ Чехова (надо сказать Исаак с Чеховым очень дружил) «Попрыгунья», прототипом героини которого стала та самая Софья Кувшинникова. Под влиянием Софьи Левитан успешно пересрался с Чеховым.

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


Март, 1895 (35 лет)

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


Сумерки, 1899 (39 лет)

Исаак Ильич умер в 1900 году .


P. S.
А, да, забавная история еще с МУЖВИЗом. Под конец обучения Исаака (1884), умер Перов и в училище начались интриги, да такие, что Исааку не дали диплом из-за прогулов (дали диплом «неклассного» художника), хотя он и сдал все экзамены.

А через 14 лет, в 1898 году, Исааку, который уже стал известным, присудили звание академика и пригласили преподавать в том же МУЖВИЗе. И преподавал он классно, понавез в мастерскую кучу деревьев в кадках из Подмосковья, кустарников, веток, мха и травы и учил студентов видеть прекрасное в повседневных вещах.

Проектирование интерфейсов

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

Проводить интервью нужно правильно. Как — рассказывает Алан Купер, проводивший их не один раз. Как именно проводить интервью лучше читать в книге, тут запишу, какую информацию нужно попытаться получить у интервьюируемых.

Заинтересованные лица (заказчики и пр.)
  • Предварительное видение продукта.
  • Бюджет и график продукта.
  • Технические возможности и ограничения.
  • Потребности бизнеса.
  • Представления заинтересованных лиц о пользователях.

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

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



Покупатели (не путать с пользователями)
  • Каковы цели в контексте приобретения продукта.
  • Что не устраивает в существующих решениях.
  • Каков процесс принятия решения при покупке подобных продуктов.
  • Роль покупателей в установке, обслуживании и управлении продуктом.
  • Каковы проблемы предметной области и особенности используемой терминологии.

Пользователи
  • Нужно понять каков контекст интеграции продукта в жизнь или рабочий процесс (когда, почему и как применяется продукт или его аналоги).
  • Какова осведомленность в предметной области. Что нужно знать пользователям (с точки зрения самих пользователей), чтобы делать работу.
  • Существующие задачи и виды деятельности.
  • Цели и мотивы использования продукта.
  • Ментальная модель. Как пользователь думает о своей работе и чего они ожидают от продукта.
  • Проблемы и сложности при работе с продуктом.

Еще про палитры

Начало — см. «Уменьшение модальности при использовании палитр».

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

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

1. Клик на палитре должен выдавать сообщение о том, что «нехер тыкать по палитре, учите шорткаты». Естественно, сообщение должно быть человеческим, а не модальным окном.

2. Возле иконок на палитре должны быть подписаны шорткаты.



3. Палитра должна реагировать на нажатие управляющих клавиш подобно клавиатуре Оптимус Максимус. То есть, нажал контрол — увидел шорткаты, которые работают с контролом.

4. Иконки на палитре должны «вытираться» по мере использования. Это как черный пояс. В начале пути он белый, а потом с годами запачкивается, становясь черным, а в нашем случае серым (полез проверить в вики, оказалось, что про пояс — это пиздеж).




Вопрос в следующем: а есть ли в фотошопе АПИ, который бы позволил это реализовать?


UPD

Вариант Айсика. Вместо палитры клавиатура с инструментами подсказками, ведет себя как Оптимус.