Одна из самых больших тенденций на сегодняшний день – крошечный текст. Малые по размеру текстовые элементы стали популярной идеей, но вызывают и большее количество дебатов и споров.
Нет сомнений в том, что мелкий текст способен вызывать некоторые проблемы удобочитаемости. Впрочем, если сделать хорошо, то такие небольшие текстовые блоки с мелким шрифтом могут реально помочь в создании визуального акцента, ключевой части страницы. Соответственно, это привлекает внимание посетителей и, таким образом, они быстрее будут обращать внимание на более важную информацию. Иногда же крошечный текст используется в качестве фотоэффекта, превращая обычный рисунок в набор, казалось бы, бессмысленных слов. Но это не так.
Давайте посмотрим на тенденции крошечного текста с примерами использования и создадим один из самых непростых эффектов в Photoshop.
Иерархия
Крупный размер шрифта доминирует на домашних страницах и заголовках, хотя все больше возникает необходимость размещать очень много информации на холсте. И если для больших разрешений мониторов (популярность которых увеличивается с каждым годом) это нормально, то для малых разрешений беда настоящая. И тут на помощь приходит «крошечный» текст. При умелом сочетании разного размера шрифтов в текстовых блоках можно уместить гораздо больше текста. Если же создать нечто наподобие иерархии и создавать мелкий текст в 14-16 points, можно привлечь внимание пользователей.
Наглядно увидеть такое решение можно на проекте Максима Бонхомми, который использовал крошечный текст на всех страницах сайта и описал ими основные характеристики своих работ. Крупным шрифтом же он создал полноценное описание.
Эффективная навигация
Использование мелкого шрифта для текста в пунктах меню, в выпадающих списках - не ново. Но на фоне того, что в большинстве своем многие сайты используют навигацию в виде «гамбургера» и скрывают её, то возвращение к истокам может стать отличной идеей обновления и творчества. Да, использовать мелкий текст в навигации сложно только потому, что навигацию должны быть способны прочитать все. Если сделать её слишком мелкой – часть посетителей не смогут ознакомиться с пунктами меню, а значит им и сайт не понравится. Поэтому хорошее решение – простой шрифт, подходящий для чтения и отказ от эффектов.
Сайт Магия Лапландии – сказочный, волшебный, интересный. Весь его дизайн словно пытается заманить каждого в далекую страну к Санта-Клаусу на огонек. Но взгляните на верхнее горизонтальное меню. Оно имеет много пустого пространства между элементами, а шрифт не курсивный, без засечек, без эффектов. Он прост, и оттого выпадающие пункты легко прочесть, несмотря на крошечный размер шрифта.
Подчеркнуть пространство
Когда веб-дизайнер создает сайт с описанием услуг компании, деятельности, партнеров и прочее, то у него всегда возникает желание рассказать побольше и поподробнее. Да и заказчики хотят больше рассказать, дабы пользователи знали, что за компания такая есть. Но давайте задумаемся, а какова роль крошечного текста в таких проектах? Дело в том, что контраст пустого пространства и мелкого текста способен на многое. Если блоков текста много на одном холсте или они большие – их трудно читать, да и посетителям лень читать с мыслью: «ой, как много букв». Да, есть и такие. Но если сделать несколько небольших блоков, то эффект становится, разумеется, иной.
Перед тем как использовать крошечный текст в данном конкретном проекте задайтесь вопросом: почему я хочу видеть мелкий текст именно здесь? Какой вклад он сделает в смысл веб-дизайна данного проекта? И ответом не должно стать: я хочу; а почему бы и нет.
Лунный фермер прекрасно показывает, как мелкий текст способен рассказать о деятельности компании, услугах и прочем. На сайте использовано два уровня типографики и очень много свободного пространства, которое буквально манит собой и призывает посетителей прокрутить страницу, дабы ознакомиться с информацией дальше. Да, разумеется, мелкий текст – это только одна из деталей дизайна, но он удобен для чтения, поэтому не вызывает никаких проблем у разных посетителей.
Визуализация
Текстовые элементы, в первую очередь, существуют для чтения. Это логично и понятно еще с детства. Но иногда текст способен выступать и как часть визуального (графического контента). Это не означает, что он не важен или играет малую роль во всем дизайне. Наоборот, его даже создавать сложнее. Требуется планирование, обсуждение, сопоставление с общей концепцией.
На сайте HTML Burger можно увидеть до безобразия мало текста мелким шрифтом. Крупным шрифтом создано название. Но крошечный текст использовали на каждом логотипе раздела, благодаря чему создается классное визуальное оформление и информации становится немногим больше, чтобы понять, что именно предлагает компания.
Также мы подобрали и еще которые примеры использования крошечного текста в том или ином варианте. Это Accomplice, , Victory Advisors, Oozora de Dakishimete, Ragnar Lite, Camilla Bellini, Александр Гаджиев, Harajuku Dacci Pasta Labo, Mecenes du Sud
Огромные возможности Photoshop для творчества
Использовать крошечный текст можно и в качестве фотоэффекта, например, когда портреты или любые другие изображения выкладываются с помощью текста. Эффект сложен и не с каждой фотографией получается, но создать можно. Рассмотрим небольшой пример, чтобы понять принцип.
Возьмем фотографию улицы с домиками, например, для строительного сайта. Открываем в Photoshop и выбираем Выделение -> Цветовой диапазон -> Тени. У нас появится выделение. Копируем его (Ctrl+C) и нажимаем создание слоя Ctrl+J. Назовем его Тени.
Затем Редактирование -> Выполнить заливку -> Черным цветом и галочку ставим для сохранения прозрачности.
Теперь переходим на слой Фон и выбираем Выделение -> Цветовой диапазон -> Средние тона. Также копируем и создаём слой. Называем его «средние» и заливку выполняем в серые 50% с сохранением прозрачности.
Объединяем наши слои.
Создаем новый документ и подбираем нужный текст или набор слов. Мы взяли пару абзацев из Википедии и просто скопировали на новый слой нового документа. Выделили написанное и перешли Редактирование -> Определить кисть. Таким образом, у нас есть новая кисточка. Более данный документ нам не нужен.
.jpg)
Важно: оформление шрифта, тип вы определяете сразу здесь, при создании кисточек. Поэтому, если вы хотите, чтобы отдельные слова были разным шрифтом написаны или текст обладал каким-либо эффектом, то все это нужно создать сначала, а потом использовать как кисть.
Возвращаемся к нашему изображению, выделяем его (Ctrl+A) и копируем (Ctrl+C). Создаем два новых пустых слоя. Один полностью заливаем белым и отключаем. На втором слое мы выбираем нашу новую кисточку и аккуратно размещаем текст. Можно увеличивать кисть и уменьшать, можно сделать её под наклоном, с разбросом текста или слов и прочее. Тут уже ваша фантазия.
Создаем маску, кликаем по ней с зажатым Alt и заливаем белым цветом. Перед этим проверьте, чтобы в цветах в инструментарии белый был основным. И вставляем на маску нашу скопированную область. Снимаем выделение и инвертируем (Ctrl+I).
Если теперь перейти на слой с текстом, то можно видеть, как проявится изображение, а если подключить белый слой, то и еще явнее все станет.
Если вам не нравится, как разместился/нарисовался текст, то со слоя с текстом ластиком можно все стереть (маску не трогаем) и кисточкой вновь нанести надписи.
Дополнительно всё изображение можно украсить градиентом, прорисовать детали, наложить дополнительные фильтры или слой с заливкой под слой с теневыми диапазонами, снизить заливку такого слоя почти на минимум и, таким образом, прорисовать детали.
Идей и вариантов много. При желании можно создать кисточки с каждым словом (фундамент, дом, кровля) и, выбирая каждую по отдельности, прорисовывать ею контуры. Это сложнее, но и эффект иной. Вот еще варианты.
Секрет рисования в типографическом стиле – подбор шрифтов и размеров. Если изображение небольшое, а текст или слова крупные, то смотреться будет неказисто и чужеродно. В то же время мелкий текст на больших объектах может затеряться. Тогда удобнее использовать кисточки со словами. Также стоит помнить и о направлении и повороте кисти. Одно дело, когда весь текст написан по горизонтали, но совсем иной, если его развернуть. Тогда можно выложить уже контуры и объекты (руки, пальцы, крыши).
Заключение
Использовать крошечный текст или нет? Это может быть сложным решением, несмотря на то, что его достаточно часто используют в книгопечатании. Для хорошей работы мелкого текста в дизайне важно, чтобы у него было много свободного пространства и использовать такую гарнитуру, которая будет легко и удобно читаться. В тоже время окружающее пространство также должно помогать текстовым блокам находиться в центре внимания.
Тоже относится и к арт-эффектам. Можно зарисовать изображения словами, текстом, но пользы не будет как таковой, ибо человек не сможет увидеть смысла в этом. Смысл появится тогда, когда части текста можно будет прочитать. Когда, смотря на домик, он сможет видеть и различать отдельные слова, словосочетания. Тогда визуально изображение приобретет смысл.
Экспериментируя с крошечным шрифтом, используйте его разумно и в малых количествах, так как работает он наиболее эффективно только при небольшом объеме текста и целесообразном размещении.
