Текст — тоже Графика

[KOT2s]

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

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

[KOT2s]

Итак, рассмотрим следующий пример:

Вводная: данная работа создавалась для одного из новогодних конкурсов софтфорума.

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

Для таких работ очень важно понимать, зачем та или иная визуализация делается.. так сказать, какой подтекст и/или акцент будет содержать в себе планируемая визуализация (рисунок идеи).

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

Теперь самое интересное — как это делалось:

0. Была придумана сама концепция и необходимый текст

1. Грубое макетирование, при котором определились размеры и позиция расположения основных элементов.

2. Поиск необходимой шрифтовой гарнитуры. Этот этап является очень важным, поскольку правильный выбор начертания задает необходимый ритм. Если, к примеру выбрать очень тяжелое начертание, в результате получится достаточно неприятный эффект «недоделанности» или «недодуманности». А если слишком легкое начертание - то это будет смотреться слишком воздушно.. В моем случае я искал «афишное» не тяжелое начертание, которое задает ритм.. Концепция такая: весело, со вкусом.. немного «элитарности». (выбранная шрифтовая гарнитура называется: HighWayC)

3. Поиск цветовой гаммы и предварительная компоновка согласно придуманному в пункте 1.

Я использовал светлые оттенки оранжевого в качестве фона. В основном данное решение я принял исходя из ассоциации нового года и апельсиново-мандариновых новогодних угощений.

4. Работа с деталями. Данный этап самый творческий. Поэтому, у каждого получается по своему. Основной смысл заключается в том что бы оживить рисунок, нестандартным рукотворным приемом. Все знают как выглядит текст если его написать в одной строке, одним размером и формой. Это просто, привычно и скучно. Так что, для того что бы собрать оригинальную текстовую графику нужно немного пофантазировать и поэкспериментировать. Важной и ключевой особенностью таких экспериментов, является наличие правил работы с символами. Символ шрифта сам по себе является уже законченным рисунком. Каждый символ любой шрифтовой гарнитуры когда-то рисовался специальным художником-шрифтовиком. И поверьте, нарисован хорошо.

Главное НЕ: не сжимайте и не растягивайте символы, если на то нет веской и осмысленной причины. Символ, который необдуманно растянут или сплющен смотрится калекой и ужасным моветоном.

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

Приведу несколько примеров:

Примерно те же манипуляции происходят и со словом «разгадка».

5. Немного корректируем форму указателя. + возвращаемся к фону и цвету. Получаем готовый результат.

Затраченное время около 30 минут.

Изменено 15 октября, 2011 пользователем KOT2s

[Skif]

Повторил часть. :)

Тут, наверное, надо дать пояснения лля самых начинающих.

1. Самый простой способ удлинить фрагменты букв - выделить прямоугольником (либо лассо) часть буквы и потом стрелкой потянуть в нужном направлении. А можно выделить, скопировать, вставить и поместить чуть выше или ниже.

2. Цвет фона не однороден, и потому лучше, если цвет для "почти" взять именно в том месте, где "и" будет контактировать с фоном. Здесь залитые градентом оттенки близки. Но если бы разнились, для трафаретности "почти" следовало бы создать новый слой, написать "почти" любым цветом, выделить волшебной палочкой пространство вокруг букв и внутри "о", сделать обратное выделение, перейти на слой с надписью белым и кликнуть Del.

[lasna]

У меня вот так получилось.

Правда буква "В" не такой формы почему то.

[Dann]

Здорово, товарищи!

Правда буква "В" не такой формы почему то.

Объяснение скрыто на картинке из пункта 2, где подбирался шрифт.

Да, этот товарищ вечно придумывает какие-то скрытые загадки, я согласен. :)

Там комментарий: "Хорошо, но заглавные буквы не нравятся. Нужно использовать строчные вместо капителей."

[lasna]

Да, пошла переделывать. И как я пропустила. :blushing:

Это, оказывается, очень интересно.

Жду еще уроки.

[KOT2s]

Жду еще уроки.

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

[lasna]

Вторая попытка. :)

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

[Skif]

Ласна, красивее (мне кажется), когда "почти" соприкасается с фоном.

Когда желающие обретут необходимые навыки, устроим небольшое соревнование.

Здорово. А соревноваться будем в композиции или можно будет эффекты применять?

[KOT2s]

Здорово. А соревноваться будем в композиции или можно будет эффекты применять?

Не только в композиции, но и в оформлении. Более подробно об оформлении я расскажу в следующих уроках.

Изменено 19 октября, 2011 пользователем KOT2s

[lasna]

Вот такой эксперимент со шрифтом у меня получился.:)

[Dann]

Вот такой эксперимент со шрифтом у меня получился.:)

Ласна, здорово! А что это за шрифт?

[lasna]

Шрифт Scriptorama

[Dann]

Шрифт Scriptorama

Спасибо! Нашел: Scriptorama.

[KOT2s]

Вот такой эксперимент со шрифтом у меня получился

Игра букв С и Р :)... получилось неплохо..

Заинтересовался, в результате отрисовал, и немного поправил (совсем чуть-чуть): Очень сложно работать с рукописными шрифтами, поскольку у них есть несколько своих правил применения, главное из которых это — «движения» каллиграфии.. Имею ввиду то как эта же надпись была бы написана/нарисована от руки.

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

[lasna]

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

Все стало по другому. Спасибо.

[KOT2s]

Тема: Композиция и оформление

Рассмотрю следующий пример конкурсной работы, а точнее — работу с текстом, от идеи до ее реализации:

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

Я специально нарисовал смайл огромным (в первоначальном варианте он был больше в 3 раза): для того что бы сыграть на противоречиях, все привыкли к миниатюрности и малозначительности этого всеобщего сетевого красавца..

Оффтоп

Более подробно могу рассказать/обсудить/поспорить об идее при наличии желающих послушать/обсудить/поспорить.

Теперь о тексте: Поскольку, сама иллюстрация (композиция девушка и смайл) достаточно абстрактная, мною было принято решение добавить заголовочный текст что бы подчеркнуть главную идею: «Что скрывается за ним?» Но, для того что бы оставить вариативность и многогранность прочтения я специально воспользовался фразой на английском языке, поскольку:

а) Прочтений может быть несколько (об этом подробнее в пункте «оформление»).

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

В итоге получил заголовочную фразу: «What is hiding behind it?», и далее работал с ней.

1. Поиск и анализ шрифтовой гарнитуры подходящей для визуализации фразы:

На данном этапе я определил необходимое начертание, и проанализировал дальнейшее применение. Сам процесс очень похож на тот который я приводил в первом уроке в этой теме: несколько стадий поиска и анализ символов и их взаимного расположения. Данный этап так же можно назвать творческим, поскольку подбор нужного начертания и возможные мысленно-образные зарисовки дальнейших манипуляций и оформления у каждого в голове отличаются. «На вкус и цвет..» Но, хочу еще раз подчеркнуть — подбор нужного шрифта является фундаментом для гармоничного и красивого результата, по этому необходимо придумать и далее безапелляционно применять правило (направление).. В моем (данном) случае это: «утонченность». Шрифтовая гарнитура: MartenCyr Grotesque MartenCyr Grotesque.zip

2. Работа с формой (макетирование)

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

3. Оформление

С одной стороны здесь все просто, с другой ничего не просто.. Очень много зависит от настроения, привычек и общего образа того чего хотелось бы получить в итоге. Данный пункт можно смело назвать самым творческим. Начнем с цветового решения: цвет я выбрал из основной гаммы иллюстрации. Грязновато-желтый это цвет смайла нарисованного мной. Оттенки серого как цвет теней,.. как выделение первостепенной и второстепенной темы. Обратите внимание что слова «behind it?» немного светлее чем слово «What». Это выделение внутри подфразы сделано специально что бы поставить ударение именно на вопрос «what». Кроме того, фраза «behind it?» в грубом переводе значит «за ним», ассоциативно — спрятано..

Время исполнения 30 минут.

MartenCyr Grotesque.zip

Изменено 2 ноября, 2011 пользователем Yezhishe

[KOT2s]

Внимание задание!

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

Совет: старайтесь отстранится от решений придуманных мной, в том числе и разбиением на подфразы, цветового выделения конкретных слов и естественно размеров. Экспериментируйте!

Да пребудет с вами дизайнерская сила!

[Teddy_Bear]

По свежим следам :)

[Skif]

На скорую руку.

[Dann]

3. Офрмление

С одной стороны здесь все просто, с другой ничего не просто..

Кот, а можешь в двух словах объяснить, как ты делал формы вот в этом пункте "Несколько абстрактных полупрозрачных объектов, расположение и форма которых отдаленно напоминает основную форму фразы." Спасибо!

[KOT2s]

Кот, а можешь в двух словах объяснить, как ты делал формы вот в этом пункте "Несколько абстрактных полупрозрачных объектов, расположение и форма которых отдаленно напоминает основную форму фразы." Спасибо!

Вечером сделаю небольшой туториал на эту тему. Расскажу как это можно сделать в фотошопе. Сразу скажу — это очень просто, но нужно поработать руками и применить немного фантазии и творчества. Вся работа займет примерно 5-10 минут (максимум).

[lasna]

Вечером сделаю небольшой туториал на эту тему.

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

[Skif]

Поэксперементировал немного с пятнами. Но мне по замыслу мыльные пузыри больше подходят. :)

[lasna]

Запомнилась тема из конкурсной работы одного из участников.

Попробовала представить себе, как я вижу эту тему.:)