Художественная Типографика Для Веб-Дизайна В Photoshop / WAYUP
И вновь типографика. Эта тема настолько горячая и непростая, что о ней можно и нужно говорить много. И дело даже вовсе не в том, что причина разговоров в понимании и поиске идей для правильного или красивого подбора шрифтов для какого-либо интернет-проекта. Просто стилистика и тренды постоянно меняются. Даже более того, меняются взгляды и мнения о том, художественным должен быть шрифт или строгим. Иными словами, речь идет не о том, что меняются технические требования, а о том, насколько меняются взгляды и мнения касательно художественности типографики.
Таким образом, подчиняясь общим правилам и аксиомам по размеру букв, их овальности, х-высоте и прочему, сами шрифты могут быть самого разного вида: от каллиграфических до декоративных и моноширинных. При этом визуально их сочетания будут смотреться невероятно красиво, будто дизайнеры использовали даже не отдельный готовый шрифт, а просто создали отдельное изображение, леттеринг.
Сегодня мы хотим уделить внимание именно декорированию шрифтов и интересным идеям того, как сочетать их или украсить в Photoshop. Возможно, материал получит продолжение, ибо идей декоративности очень много, а использования их еще больше.
Декорирование шрифтаДекоративные шрифты имеют сложную популярность в среде веб-дизайна. Дело в том, что, с одной стороны – выглядят они простенько, с другой – слишком уж творческими. Так или иначе, но такой шрифт использовать сложно и надо хорошо представлять, какой именно вид декоративности подойдет для конкретного проекта.
Например, дизайнеры detheme, tequila mockingbird, moetbius, .earls использовали совершенно разные по стилистике декоративные шрифты. Какие-то из них сами по себе красивые, а какие-то были созданы, как изображение, а как самостоятельный шрифт не существуют. Но, тем не менее, надписи выглядят красиво и не создается впечатления, что стиль веб-дизайна несовременен и уныл.
ЛеттерингЕще один красивый стиль для типографики – леттеринг.
Заметьте, не каллиграфия, а именно леттеринг, который создается только для данного конкретного изображения надписи и все. То есть, если обычный шрифт представляет собой набор букв, написание которых осуществляется по правилам для данного набора, то в леттеринге, наоборот, художником рисуется по отдельности каждая буква. При этом каждая такая буква может иметь множественные линии, украшательства и быть совершенно не похожей на прочие буквы, что используются в общем изображении.
В веб-дизайне леттеринг в чистом виде используется редко для оформления контента. Чаще его можно видеть в логотипах или в качестве оформления домашней страницы. Дизайнеры подменяют леттеринг на рукописный шрифт, который в большинстве тоже рисуется на бумаге, сканируется и обрабатывается или используется шрифт попросту похожий на рукописный.
Например, это goldfront., brancottestate, rilke, hiddensocksclub.
Slab serifs
Тонкие, строгие шрифты с засечками олицетворяют собой мощь и силу проекта, поэтому обычно их стараются смешивать с похожими шрифтами, а никак не с противоположными.
Более того, смотрятся они излишне строго и даже могут навеять чувство тревоги. Тем не менее, в последние годы такие шрифты используется все чаще и даже немного украшаются.
Посмотрите на madeinthefuture, nitwinski, grkfresh. На каждом из них строгие, плотные и серьезные шрифты выглядят весьма интересно. Они придают даже больше читабельности контенту, чем какой-либо иной стиль.
ScriptsКаллиграфический шрифт или рукописный становится с каждым годом известнее. Он красив сам по себе вне зависимости от стилистики, он придает немного шарма и изящества веб-дизайну, он также хорошо сочетается со строгими и брусковыми шрифтами, тем самым создавая интересные декоративные решения. Для наглядности montagebook, johnfrieda, candyscupcakes.
Художественные приемы типографикиНо и кроме того, что разные виды шрифтов используются по отдельности, можно увидеть веб-дизайн, где разные стили смешиваются друг с другом. Например, рукописный со строгим с засечками (amandaconti), жирный брусковый обретает сам по себе глянцевый эффект и дополняется как обычным шрифтом, там и каллиграфическим (eco-rating).
Но сам по себе шрифт и текст на холсте выглядят скучно, строго. Порой так хочется или нужно по тематике придать немного художественности: легкой и ненавязчивой (мы не говорим о тяжёлом 3D-эффекте). Тогда и появляются интересные решения, как на 3on Web Agency, Juste Debout, Baku City Circuit, Okkapi Agency (смотреть лучше самостоятельно, анимация превосходна), Bear Grylls.
Можно приводить еще много примеров, но смысл сводится к тому, что каким бы декоративным шрифт не был бы сам по себе, его можно интересным образом украсить, сочетать с другим по стилю, его также можно изменить. При этом аляповатости или безвкусицы навряд ли получится сделать, ибо даже если у дизайнера маловато фантазии, он будет видеть, что у него получается, а что нет, что лично ему нравится, а что начинает вызывать неприязнь.
Приемы PhotoshopВот и подошли к торту.
По сути, создавать художественное оформление для шрифтовой пары не так и сложно, если представлять, как и что должно получиться в итоге.
Например, частенько можно видеть, как текст становится частью сюжетного изображения, оплетая собой объекты и одновременно с этим переплетаются с другим шрифтом. Да, делается это с помощью масок, но и не только.
Для самого простого примера мы выбираем город, точнее, небоскребы. Наш текст будет оплетать небоскребы, проходить за зданиями и перед ними, но также он будет парить, а легкие и витиеватые элементы, уподобляясь лозе, оплетут всю композицию, оставляя при этом строгую стилистику художественного произведения. Поэтому стилистику шрифта также нужно продумать. Для такого изображения, например, шрифты готические или с засечками будут не слишком хорошо выглядеть. Нужно что-то более строгое и каллиграфическое. Почему? Город, улицы, реклама… а как обычно выглядят неоновые вывески, что являются неотъемлемым атрибутом мегаполисов? Именно, рукописный стиль. Такие вот небольшие подсказки по ассоциациям и соответствию стилистике.
Открываем Photoshop и создаем новый чистый слой
И создаем два слоя с текстом, например, «город будущего» и «уже не за горами».
При этом для первого текста шрифт можно выбрать более строгий, стилистически подходящий для городской тематики. Но вторую фразу можно написать рукописным стилем. Обратите внимание, что обычный арт-рукописный шрифт не подойдет, по той причине, что ему оплетать нечем. Нет у него дополнительных элементов, завиточков, окружностей и прочего.
После того как подобрали стили, переходим в «Свободное трансформирование» (Ctrl+T) и изменяем размер надписей, ширину, высоту так, как уже конкретно хочется и нужно именно вам.
По общему размеру они должны быть на весь размер нашего холста и одинаковой длины, дабы создать действительно красивое переплетение. Что касается цветов, то они выбираются не только разными, но и контрастными по отношению друг к другу. Например, мы выбрали чуть голубой и морской волны.
Теперь слой с рукописный текстом переместите в начало списка слоев, расположите поверх слоя с надписью «город» и, выбрав Свободное трансформирование, разверните ненамного текст, таким образом, чтобы элементы рукописного проходили сквозь строгие буквы нижнего слоя.
Представьте себе, как это могло бы быть, если бы один текст оплетал бы собой другой.
Назовем слой с рукописным текстом – Слой 1 и второй слой – Слой 2.
К Слою 1 добавим Маску, затем зажмем Ctrl и кликнем по Слою 2. Текст «город будущего» выделится, но, не снимая выделения, переходим на маску и нажимаем Alt+Backspace, чтобы наше выделение залилось черным цветом. Снимаем выделение Ctrl+D. Таким образом, несмотря на то, что Слой 1 является первым, само его изображение оказалось за Слоем 2.
Увеличиваем все изображение и двигаем его в начало. Выбираем инструмент Кисть небольшого размера твердую с белым цветом. Находясь на активном слое-маске начинаем прокрашивать те детали и части текста, которые нам бы хотелось, чтобы были видимыми. То есть, те детали, что должны быть по задумке на переднем плане, мы и прокрашиваем по маске.
Некоторые буквы уместно прорисовать полностью, а некоторые просто созданы для того, чтобы обвить что-то собой.
Иногда возможны варианты лишних кусочков. Тогда удобно выбрать Перо и выделить такой кусочек. Затем кликаем ПКМ по контуру и выбираем «Залить контур», черным цветом. Удаляем оставшийся контур. Это гораздо удобнее, чем выбирать размер кисточки, переключаться на белый цвет и прокрашивать детали Слоя 2.
Кроме того, суть прорисовки не только в том, чтобы создать оплетение, но и чтобы любой человек без труда мог при беглом взгляде прочитать то, что написано и не задумываться, какая же буква скрывается.
По факту весь художественный эффект завершён, но давайте взглянем, как это можно использовать на фотографиях для оформления дизайна сайта. Мы подобрали обычную фотографию города, специально контрастную для нашего текста для наглядности. Но сам текст, разумеется, может иметь совсем иные цвета на ваш вкус.
Объединяем наши текстовые слои в группу, а фоновому слою даем название «город». Для группы временно уменьшаем непрозрачность на 50%, чтобы слой с городом был виден и подбираем наилучшее расположение по вертикали.
Можно также использовать для группы Свободное трансформирование и увеличить или уменьшить размер надписи. Двигая текст, таким образом, можно увидеть новые идеи для художественного оформления, поскольку переплетение двух надписей слишком простое и несложное само по себе.
Теперь…
Например, пусть небоскреб будет виден. Добавляем маску к группе текстовых слоев, выбираем Перо, обводим контур небоскреба и, кликая ПКМ по контуру, заливаем черным. Вроде все ОК, но вот незадача.
Хорошо бы, чтобы текст еще и читался. Выбираем нужный текстовой слой из группы, кликаем по нему с зажатым Ctrl и видим выделение. Переходим на слой-маску к группе, выбираем кисточку с черным цветом и по выделению прорисовываем детали. В случае, если нужны элементы букв другого слоя, то аналогично также делаем выделение и по общей маске проходимся кисточкой. Такой способ проще и быстрее, чем выбирать удаление и добавление выделения и прочее.
Замысловато, но наш текст все еще имеет слишком неподходящий вид для конкретного фона и вся композиция для использования в веб-дизайне еще не готова.
Поэтому выбираем каждый текстовой слой по отдельности, дважды кликаем по нему и в открывшемся окне наложения выбираем «Наложение цвета» и остальное под настроение. Что касается цветов, то поскольку фотография создана в коричневых оттенках, то добавление даже красного или синего превратит все произведение в аляповатость. Остановимся на таких же бежевых тонах.
Заключение
Художественные эффекты в типографике не так часто используются веб-мастерами в силу самых разных причин. Для одних – это слишком вычурно и не отвечает трендам, для других – сложно и утомительно в создании, для третьих – нет требований со стороны заказчика/клиента. С другой стороны, использование художественной типографики предполагает, что и весь сайт, как минимум, будет кое-где, но иметь отдельные элементы аналогичного оформления. Например, первые буквы заголовка окажутся переплетенные или уголок фонового изображения будет украшен стилизованной буквицей.
Также можно видеть и иные по стилю веб-дизайны, когда начальная страница оформляется до безобразия художественно, а внутренние страницы минималистичны, скромны, плоски и безумно трендово могут выглядеть.
Почему именно так? Начальная страница сайта, домашняя, загрузочная – как обложка для книги. Как часто обложки для книг создаются привлекательно красивыми? А как часто на страницах существует интересный именно для нас текст? Вкусы разные у всех, да, но если подумать об этом обобщенно?…
С веб-дизайном то же самое. Начальные страницы создаются всегда привлекательными и красивыми. Поэтому у кого-то на сайтах красивые каллиграфические надписи, логотипы в ретро-гранж-стиле, художественные сочетания, анимация или даже мини-игры. Но что касается типографики, то творить красоту для нее гораздо сложнее. Здесь мало обойтись наложениями и смешиванием слоев, добавлением фильтров и прочего.
А то касается тематики или уместности использования «художественности», то… красивые элементы уместны всегда. Другое дело подобрать подходящее для темы, для общей наполненности контента. А по сути, и интернет-магазин можно украсить… не всегда же создавать логотипы и заголовки с обычными строгими жирными шрифтами в стиле Arial.
20 красивых бесплатных художественных шрифтов
Pin
Главная » Шрифты » 20 красивых бесплатных художественных шрифтов
Ищете вдохновение или ресурсы, которые помогут вам создать действительно уникальный и художественный проект? Эти красивые бесплатные художественные шрифты доступны во всех формах, стилях и размерах и содержат множество художественных деталей, которые делают их единственными в своем роде!
В этом списке вы найдете множество красивых бесплатных художественных шрифтов . Выберите шрифты, которые вам больше всего нравятся, и добавьте их в свою коллекцию бесплатных шрифтов. Они обязательно понадобятся вам для ваших будущих проектов!
Curely — это декоративный шрифт ручной работы, вдохновленный девчачьими штучками и избытком привлекательности. Не стесняйтесь использовать его в любых ваших проектах.
Pin
Это креативный текстовый шрифт, готовый к использованию! Он привлекает внимание, поэтому его лучше всего использовать в заголовках или логотипах. Скачать по ссылке выше!
Pin
Hipster Viral Blackletter — это источник, заново изобретающий традиционный европейский готский шрифт с 1150 года до 17 века.
Штифт
Это новое семейство бесплатных шрифтов с 12 стилями и 317 глифами. Все они представлены в 4 форматах шрифтов, включая веб-шрифты. Бесплатно для личного и коммерческого использования.
Pin
«Redpower» — это бесплатный шрифт. Это новый веселый и игривый шрифт, который вы можете скачать бесплатно! Получи это сейчас!
Pin
Это бесплатное семейство шрифтов без засечек, содержащее семь стилей. Этот шрифт чистый и профессиональный, но, прежде всего, симпатичный и приятный для глаз.
Pin
Это бесплатный шрифт в стиле гранж, вдохновленный чернилами/татуировками. Он доступен только для личного использования, без коммерческого использования.
Pin
Этот шрифт имеет интересные детали и будет отлично смотреться в различных дизайнерских проектах. Бесплатное использование везде, где вы хотите!
Pin
Это потрясающий шрифт для иллюстраций. Его широкий спектр стилей охватывает множество возможностей использования, от заголовков до принтов и логотипов.
Pin
Это вдохновленный детьми бесплатный шрифт с милыми фигурками пришельцев. Попросите разрешения дизайнера, если вы собираетесь использовать этот шрифт в коммерческих целях.
Контакт
Это шероховатый бесплатный шрифт с заглавными буквами. Он уникален и особенный, и вы можете использовать его для различных проектов.
Pin
Это еще один шероховатый бесплатный шрифт. Он доступен только для личного использования, без коммерческого использования.
Булавка
Ряд символов, включенных в мечтательный стиль, делает этот шрифт потенциально полезным для различных проектов. Это отличный шрифт для добавления в вашу художественную коллекцию бесплатных шрифтов.
Pin
Очень интересный, жирный бесплатный шрифт. Лучше всего он смотрится в логотипах и полиграфических проектах, в заголовках. Он имеет большие детали и закругленные края.
Pin
Этот бесплатный шрифт Back To School сделан из цветных карандашей, он художественный и уникальный. Может использоваться для многих типов проектов. Бесплатно для личного использования.
Булавка
Шрифт SIMPLIFICA — это слегка сжатый шрифт без засечек, отличающийся равномерной и тонкой толщиной линий. Это прекрасный, простой и понятный шрифт.
Pin
Это простой, но очень красивый шрифт без засечек для любого использования. На данный момент это БЕТА-версия, которую можно бесплатно загрузить и протестировать.
Pin
ARCA — бесплатный простой, тяжелый, только заглавный и геометрический шрифт без засечек.
Pin
Мадариага родился в 2004 году в качестве студенческого проекта в «Tipografía 2» на кафедре Лонгинотти в Университете Буэнос-Айреса.
Это отличный бесплатный художественный шрифт, который можно добавить в вашу художественную коллекцию бесплатных шрифтов.
Штифт
119 бесплатных шрифтов в стиле ар-деко » Fontsc
Размер: defaultsmalllargeNameSort By PopularRecentList 10 Fonts2550 Только без рекламы
Неизвестная лицензия 1 файл шрифта Скачать
Бесплатное ПО — личное и коммерческое использование 2 файла шрифта Скачать
Бесплатное ПО — личное и коммерческое использование 1 файл шрифта Скачать
Бесплатное ПО — личное и коммерческое использование 1 файл шрифта Скачать
SIL OFL (бесплатно для коммерческого использования) 1 файл шрифта Скачать
SIL OFL (бесплатно для коммерческого использования) 1 файл шрифта Скачать
Бесплатное ПО — личное и коммерческое использование 1 файл шрифта Скачать
SIL OFL (бесплатно для коммерческого использования) 2 файла шрифта Скачать
CC BY (бесплатно для коммерческого использования) 1 файл шрифта Скачать
Бесплатное ПО — личное и коммерческое использование 1 файл шрифта Скачать
Просмотр категорий шрифтов
- Serif
- Без засечек
- Сценарий
- Декоративный
- Дингбаты
- пикселей, растровое изображение
- Черное письмо
- Международный
Теги со случайным шрифтом
- детские книги
- современный
- гальярда
- панджаби
- смешанная буква
- магазин
- дискотека
- цепь
- футбол
- официальный
- армия
- западный
- покупки
- щенков
- вырез
- готика
- восьмиугольник
- каллиграфический
- книжник
- слон
- итк анна
- цифра
- бросок-граффити
- ракета
- 9px
- самолет
- египтянин
- дракон
- угловой
- единорог
Популярные теги шрифта
- день рождения
- пасха
- яйца
- свадьба
- люкс
- неоновые огни
- гонки
- арабский
Follow Fontsc
