Сообщений в теме: 83

[KOT2s]

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

[KOT2s]

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

 k_all.jpg   150,17К   19 Количество загрузок:

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

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

 k1.jpg   67,45К   14 Количество загрузок:

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

 k2.jpg   178,62К   11 Количество загрузок:

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

 k3.jpg   238,47К   17 Количество загрузок:

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

 k4.jpg   145,99К   12 Количество загрузок:

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

 k_all.jpg   150,17К   19 Количество загрузок:

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

Сообщение отредактировал KOT2s: 16 Октябрь 2011 - 01:31

[Skif]

Повторил часть.
 Урок.jpg   61,4К   3 Количество загрузок:
Тут, наверное, надо дать пояснения лля самых начинающих.
1. Самый простой способ удлинить фрагменты букв - выделить прямоугольником (либо лассо) часть буквы и потом стрелкой потянуть в нужном направлении. А можно выделить, скопировать, вставить и поместить чуть выше или ниже.
2. Цвет фона не однороден, и потому лучше, если цвет для "почти" взять именно в том месте, где "и" будет контактировать с фоном. Здесь залитые градентом оттенки близки. Но если бы разнились, для трафаретности "почти" следовало бы создать новый слой, написать "почти" любым цветом, выделить волшебной палочкой пространство вокруг букв и внутри "о", сделать обратное выделение, перейти на слой с надписью белым и кликнуть Del.

[lasna]

У меня вот так получилось.
Правда буква "В" не такой формы почему то.

Прикрепленные файлы

•  1.jpg   4,63К   1 Количество загрузок:

[Dann]

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

lasna (17 Октябрь 2011 - 22:03) писал:

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

Объяснение скрыто на картинке из пункта 2, где подбирался шрифт.
Да, этот товарищ вечно придумывает какие-то скрытые загадки, я согласен.
Там комментарий: "Хорошо, но заглавные буквы не нравятся. Нужно использовать строчные вместо капителей."

[lasna]

Да, пошла переделывать. И как я пропустила.
Это, оказывается, очень интересно.
Жду еще уроки.

[KOT2s]

Цитата

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

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

[lasna]

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

Прикрепленные файлы

•  3.jpg   11,49К   2 Количество загрузок:

[Skif]

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

KOT2s сказал:

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

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

[KOT2s]

Цитата

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

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

Сообщение отредактировал KOT2s: 19 Октябрь 2011 - 15:40

[lasna]

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

Прикрепленные файлы

•  nnn3.jpg   22,08К   7 Количество загрузок:

[Dann]

lasna (28 Октябрь 2011 - 21:26) писал:

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

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

[lasna]

Шрифт Scriptorama

[Dann]

lasna (28 Октябрь 2011 - 23:00) писал:

Шрифт Scriptorama

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

[KOT2s]

Цитата

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

Игра букв С и Р ... получилось неплохо..
Заинтересовался, в результате отрисовал, и немного поправил (совсем чуть-чуть): Очень сложно работать с рукописными шрифтами, поскольку у них есть несколько своих правил применения, главное из которых это — «движения» каллиграфии.. Имею ввиду то как эта же надпись была бы написана/нарисована от руки.
 87.jpg   119,78К   21 Количество загрузок:
В варианте слева (тот который я воссоздал исходя из обсуждаемой работы), символы стоят на мой взгляд немного вразнобой, это не ошибка автора работы .. Скорее, это определенный умысел иллюстратора-шрифтовика, который когда-то придумал правило расстановки символов относительно друг друга. Как говориться: «на вкус и цвет...» Я немного дополнил логику «движения» каллиграфии (см. правый вариант).

[lasna]

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

[KOT2s]

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

 sm_what_is_hiding_behind_it7_up.jpg   183,21К   23 Количество загрузок:

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

Оффтоп

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

Теперь о тексте: Поскольку, сама иллюстрация (композиция девушка и смайл) достаточно абстрактная, мною было принято решение добавить заголовочный текст что бы подчеркнуть главную идею: «Что скрывается за ним?» Но, для того что бы оставить вариативность и многогранность прочтения я специально воспользовался фразой на английском языке, поскольку:
а) Прочтений может быть несколько (об этом подробнее в пункте «оформление»).
б) Английский язык сейчас очень распространен, его понимают везде и он является основным языком в сети.
В итоге получил заголовочную фразу: «What is hiding behind it?», и далее работал с ней.
1. Поиск и анализ шрифтовой гарнитуры подходящей для визуализации фразы:

 txt_1.jpg   272,3К   26 Количество загрузок:

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

 txt_2.jpg   261,52К   23 Количество загрузок:

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

 txt_3.jpg   328,43К   24 Количество загрузок:

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

Сообщение отредактировал Yezhishe: 02 Ноябрь 2011 - 14:32

[KOT2s]

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

[Teddy_Bear]

 1.JPG   14,62К   8 Количество загрузок:

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

[Skif]

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

Прикрепленные файлы

•  Мыло.jpg   157,09К   8 Количество загрузок:

[Dann]

KOT2s (01 Ноябрь 2011 - 16:12) писал:

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

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

[KOT2s]

Цитата

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

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

[lasna]

Цитата

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

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

[Skif]

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

Прикрепленные файлы

•  Мыло2.jpg   59,34К   10 Количество загрузок:

[lasna]

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

Прикрепленные файлы

•  Prosto.jpg   82,8К   11 Количество загрузок:

[lasna]

«Что скрывается за ним?»

Вот так получилось.

Прикрепленные файлы

•  fin3.jpg   64,16К   17 Количество загрузок:

[Skif]

lasna сказал:

Вот так получилось.

Ласна, а ты уже готовый кубик нашла или сама укладывала фото на грани?

[Skif]

lasna сказал:

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

Не удержался, чтобы не сделать своё видение твоего видения.

Прикрепленные файлы

•  ПП.jpg   69,49К   13 Количество загрузок:

[lasna]

Skif сказал:

Ласна, а ты уже готовый кубик нашла или сама укладывала фото на грани?

Укладывала. Мне вообще хотелось побыстрее к тесту перейти.Может и нужно более тщательно.

[Skif]

lasna сказал:

Может и нужно более тщательно.

Да нет. Хорошо получилось. Потому и спросил.

Кот, где же обсуждение и добродушный спор? Неужели ниже критики?