понеділок, 9 листопада 2009 р.

Глава 2. Элегантность и простота

Как видно, совершенство достигается не тогда, когда уже нечего прибавить, но когда уже ничего нельзя отнять.
Антуан Де Сент Экзюпери

Термин "Элегантность" (в русском переводе точнее Изящество) происходит от латинского "eligere" — в значении "выбирать" или "внимательно подбирать". Тот-же латинский корень слова обнаруживается также в английских словах elect и select — которые несут такой-же подтекст осторожного принятия решения. Чуть позже термин приобрел знакомое всем значение утонченности и грации, отражая внимательность (к деталям) и хороший вкус.
Визуальный дизайн сильно связан с аккуратным принятием решений и рассудительным отбором формальных элементов. Решения, принимаемые в задачах визуального дизайна затрагивают саму суть концепции продукта. Дизайнер визуальных средств (взаимодействия) улучшает средства коммуникации осторожно подбирая либо добавляя ключевые элементы с гарантией того, что они будут самыми заметными при восприятии.

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

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

Доступность. Простой дизайн становится настролько быстро понятен, что может быть немедленно использован или побуждает пользователя для дальнейшего исследования.
Радиоприемник Belmont имеет всего три набора элементов управления - регулятор громкости, регулятор настройки радиостанций и кнопки предустановленных радиостанций. Функции каждой группы элементов управления очевидны из-за отсутствия дублирующих элементов. Любой человек практически "с первого взгляда" сможет понять как управлять устройством со столь про
стым дизайном.

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



Наиболее сильные символы в человеческой культуре всегда имеют абсолютную минимальную форму. (тут вспоминается крест, звезда, знак инь-янь...)

Юзабилити (удобство и простота использования). Улучшение доступности и запоминаемости продукта обязательно повышает также и его юзабилити. Простой дизайн, который исключает ненужные вариации или детали, более заметен и информативен. Фактически, практически невозможно неправильно пользоваться устройствами со столь простым дизайном, как радиоприемник Belmont.

субота, 31 жовтня 2009 р.

Перевод книги "Designing Visual Interfaces: Communication Oriented Techniques"

Взялась за чтение и перевод некоторых глав замечательной книги Кэвина Маллета и Дэррела Сано, которую хотела прочитать практически с того времени, как стала заниматься дизайном.

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

В скором времени планирую выложить по частям перевод второй главы под названием "Элегантность и простота".

вівторок, 28 липня 2009 р.

Куча всего для нашей игры!!!

Делаем с другом игру. Он программит, а я рисую. Все это безобразие сделано в иллюстраторе.
...вообще всего еще больше. Но пока секрет.

четвер, 30 квітня 2009 р.

Практикум: отрисовка иконки с фотографии.

Как я уже говорила в одном из предыдущих постов – рисование иконок, хоть и кропотливая, но весьма интересная работа, требующая от дизайнера аккуратности и усидчивости. Вы можете задать вопрос: если у нас уже есть фотография неплохого качества, разве нельзя ее уменьшить до размера иконки и добавить/убрать некоторые детали? Ответ: можно и нужно, если вы уверены, что такоие действия не займут больше времени и иконка в результате будет иметь аккуратный вид (как нарисованная вручную, а не как уменьшенная фотография).

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

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

  1. Для рисования иконки, как правило, нам нужна исходная фотография. Ищется она обычно в images.google.com по ключевому слову (в нашем случае piggy bank). Не берите первую попавшуюся, внимательно просмотрите все картинки и выберите наиболее подходящую по ракурсу или просто ту, которая вам больше нравится. Не нужно без надобности искать картинки со множеством деталей (на маленькой иконке они все равно превратятся в мусор либо будут не заметны).
  2. На выбоанной каритнке с помощью pen tool обрисуем контур свинки, чтоб затем уменьшить его до нужных размеров, как показано на картинке (для создания угловых точек – как на кончике носа у свиньи нажимаем Alt).
  3. Готовый замкнутый контур с помощью команды Free Transform +t – на Маке или Ctrl+t уменьшаем до нужного нам размера.
  4. На вкладочке Paths (она обычно соседствует с вкладкой Layers) и включается из меню Window – Paths нажимаем кнопочку Load Path as Selection (другой вариант – щелкаем правой кнопкой мыши на названии контура – в нашем случае по умолчанию он называется Work Path – и выбираем из появившегося меню Make Selection). В результате выполненных действий наш путь превратится в выделение, которое мы заливаем нужным нам цветом (в случае, если иконка по цвету будет совпадать с фотографией, берем цвет с участка, среднего по освещенности – не блик и не тень).
  5. Дальнейшие наши действия призваны придать свинке объемность. В Фотошопе для этого существует множество методов. Возможно, те, которыми пользуюсь я не совсем идеальны, однако я к ним привыкла и они дают неплохой результат. Возможно, они станут полезны дизайнерам, которые не пользуются планшетом. Итак используя Pоlygonal Lasso Tool со значением Feather (размытие) приблизительно равным 4рх для свинки размерами 70х50рх (для бОльших размеров иконки естественно нужно выбрать бОльшее размытие) выделяем нижнюю часть свинки, сверяясь с исходной фотографией, там, где мы будем ее затенять. Затенять можно с помощью настройки уровней (Image – Adjustments – Levels или +l) так, как показано на картинке. Подвигайте черный ползунок на линеечке Input Levels уровней и добейтесь приблизительно такого затенения, как на фотографии. С помощью этого-же метода можно создавать и освещенные области объекта (двигая белый ползунок).
  6. Похожим образом затеняем и ножки поросенка (но здесь, чтоб избежать перенасыщенного розового цвета лучше двигать белый ползунок Output Levels – он затеняет, но не добавляет контраст)
  7. Живот поросенка на фотографии сильно затенен. Воспользуемся другим способом его закраски. Он полезен, когда сложно на глаз определить какой значение Feather при выделении лучше выбрать, ну и также он позволяет в дальнейшем внести небольшие правки (ведь мы будем работать с новым слоем).
  8. Теперь выделим (без размытия – Feather: 0px), создадим новый слой и закрасим живот свинки. Не страшно что закрашенные области выступают за границы иконки. Со временем мы все исправим.
  9. Filter – Blur – Gaussian Blur – размоем тень на животе. Но как быть с выступающими за контур кусочками закраски?
  10. Помните, у нас еще сохранился путь (Path), который мы выделяли и закрашивали? Вернемся к п. 4 и опять создадим выделение по пути (Load Path as Selection). Теперь найдем в верхнем меню пункт Select - Inverse. Сохраним наше выделение и назовем его как-нибудь (Select – Save Selection). По нему и обрежем выступающие области (Backspace или Delete)
  11. Аналогичным образом создадим полупрозрачный рефлекс на боку свинки. (Обязателен, если свинка будет размещена на светлом фоне и не нужен, если на темном). После размытия и обрезки добавим слою рефлекса прозрачности (Opacity на вкладке Layers).
  12. Сверяясь с фотографией добавляем и добавляем затенения (пользуемся вышеперечисленными методами). Это можно делать очень долго, доводя иконку до совершенства, но не переусердствуйте! Мелкие складочки на ногах и завитушку на хвосте удобно рисовать карандашом (Pencil Tool) а затем растушевывать (Gaussian Blur) и обрезать выделением. Совсем мелкие детали (глаза, прорезь для монеты) не нужно растушевывать. При маленьком размере иконки они не будут казаться нам угловатыми.
  13. Предпоследний штрих – добавим блик на спинку свиньи – чтоб она блестела как конфета. Просто выделяем овал, создаем новый слой и заливаем градиентом от белого к прозрачному. Делаем слой полупрозрачным – чтоб сквозь блик просвечивала розовая спина.
  14. Способом, описанным в пп 8,9 нарисуем и растушуем тень под свинкой.
  15. В итоге получим что-то похожее на то, что получилось у меня (Или может лучше?)

понеділок, 27 квітня 2009 р.

Практикум: создание бесшовной текстуры в Adobe Photoshop.

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

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

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

Это изображение нам не подходит, так как верх картинки имеет блик, при том что низ находится в тени.






А вот это в самый раз! Его и возьмем для примера.





2. Выбрав нужное изображение, приступаем к работе. Прежде чем начать, замечу, что чем больше по размеру вы возьмете изображение и чем мельче при этом будут на нем детали, тем более неоднородной получится наша текстура, и тем сложнее будет догадаться о периодичности повторов ее элементов. Итак, в фотошопе выбираем меню Filter затем подменю Other и, наконец, Offset. В этом меню можно настроить сдвиг каритнки по горизонтали (линейка Horizontal) и вертикали (линейка Vertical). Не забудьте отметить чекбокс Preview что позволяет нам сразу просмотреть результат наших действий, а также Wrap Around для Undefined Areas (повтор текстуры при сдвиге). Двигая ползунок линейки добейтесь того чтоб горизонтальный и вертикальный стыки находились приблизительно по центру картинки.


3. Используя Clone Stamp Tool с кисточкой мягкостью приблизительно 50% либо Patch tool (хотя это как правило дает худший результат), добейтесь однородности текстуры на стыках – т.е. сделайте так, чтоб стыки не были заметны. Прищурьтесь и оцените, действительно ли однородна текстура, нет ли на ней явно заметных пятен или следов ретуши. Еще раз используйте фильтр Offset и подвигайте текстуру, чтобы убедиться что все стыки замазаны. Наша текстура готова.



4. Осталось лишь сохранить текстуру чтобы использовать ее для заливки. Это делается с помощью меню Edit и подменю Define Pattern. В дальнейшем применить заливку этой текстурой можно с помощью Paint Bucket с опцией Pattern, а для использования на веб-страничке, просто сохраните получившееся изображение в нужном формате.

середа, 1 квітня 2009 р.

Порывшись в закладках (часть 2)

Итак, продолжим. По каким-то мне неизвестным причинам в Фотошопе отсутствует возможность сохранять картинки в формате ico. Для чего эта возможность нам нужна, я думаю, не секрет – для создания favicon-ов. Но неприятность эту мы естественно переживем, так как в интернете существует множество сайтов, которые позволяют этот самый фавикон сгенерировать, и даже нарисовать.

Я думаю, что рисовать лучше все-таки в привычном графическом редакторе, а вот переводить в формат ico можно например здесь http://www.favicon.cc или здесь http://favicon-generator.org.
Почему именно эти два сайта? Просто они не перегружены всякой ерундой типа объяснения что такое фавикон и галереей уже созданных иконок на одной странице. А удобстово и неперегруженность интерфейса для меня вещь немаловажная.

Итак, ваш сайт уже создан. Благополучно сверстан и готов показаться во всей красе заказчику. Но вот незадача: у заказчика ужасно устаревший MSIE 5.5. А может, он поклонник яблок и пользуется только Safari? Хорошо когда в наличии имеется хотя-бы две операционные системы и пятерка различных браузеров. Но если дела совсем плохи, не стоит отчаиваться. Сервис http://browsershots.org делает скриншоты сайтов практически во всех известных браузерах на четырех платформах. Скажу честно – сервисом пользовалась только один раз, и получила не все скриншоты, которые заказывала, но сервис-то бесплатный – и на том спасибо.

http://www.blog.spoongraphics.co.uk - блог с большим количеством интересных туторов по дизайну, эффектам и обработке фотографий. А следить за трендами в веб-дизайне и черпать вдохновение лучше всего здесь: http://www.webdesignerwall.com. Но если уж есть свободная минутка, советую почитать http://www.smashingmagazine.com. Куча полезной информации и советов.

вівторок, 24 березня 2009 р.

Порывшись в закладках.

Как говорил один преподаватель (погуглите, если интересно), куки, закладки и троянские кони – это очень опасные злоумышленники, основная цель которых – уничтожить информацию.

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

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

Цвета для сайтов я всегда подбираю на глаз. Плохо это или хорошо – не знаю. Однако в закладках обнаружился преинтереснейший адобовский сервис. Кулер назвыается http://kuler.adobe.com/#. Он позволяет сгенерировать свою цветовую схему, используя палитру, либо на основе какой-нибудь фотографии. Также имеется огромное количество уже готовых схем, любезно предоставленных другими юзверями. Вобщем, интересно и полезно.

Наш дизайнер-фрилансер особо падок на шаровые клипарты. Нет, я конечно не сомневаюсь, что существуют редкие индивидуумы, следующие лебедевским указаниям ходить на фотоохоту за клипартами с целью затем применить свои уникальные фотографии вместо уже тысячу раз использованных бесплатных. Но чаще всего на это не хватает ни времени дизайнера, ни денег заказчика. Поэтому вот парочка ссылок на шару.
Хорошие качественные текстуры http://www.smashingmagazine.com/2009/02/06/100-beautiful-free-textures/

Бесплатные клипарты: 
www.sxc.hu

Для киевлян, оформляющих сайты для местного заказчика – фотографии и панорамы Киева: 
www.archunion.com.ua/foto-kiev.shtml

Еще для любителей шары – бесплатные иконки. Правда здесь я бы посоветовала рисовать свои. Во-первых преинтереснейшее занятие, иногда захватывающее всерьез и надолго. Во-вторых, хорошо тренирует усидчивость и умение даже столь мелкую работу доводить до совершенства. Но опять-же в некоторых случаях сроки поджимают и time is money.
http://sweetie.sublink.ca/
и просто лавина иконок на http://www.famfamfam.com/lab/icons/silk/previews/index_abc.png
Кстати, на этом-же фамфамфаме есть флаги стран http://www.famfamfam.com/lab/icons/flags/

А теперь тулзы для рутинной работы. 

Не секрет, что размер шрифта в сss желательно задавать в эмах (em). Это помогает быстро его масштабировать и бла бла бла (википедия наш друг). Короче, я пользуюсь вот этим сервисом для пересчета понятных мне пикселей в не очень понятные эмы:
http://riddle.pl/emcalc/

Больше ссылок – в следующем посте.

Добрый день, огромный мир!

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