Красивые обводки для текста: Добавить текст на фото с обводкой надпись красивым шрифтом с эффектом обводки

Как сделать обводку текста в фотошопе — бесплатный онлайн урок для чайников

Каждый веб дизайнер знает, что сложнее всего поддается отрисовке шапка сайта. И, соответственно, именно к этой части работы клиент предъявляет больше всего требований. Порой, поймать нужную волну удается далеко не с первого раза. А чем больше багаж ваших знаний, тем больше может разгуляться ваша фантазия. Чем скорее вы выкатываете клиенту удачный вариант, тем меньше тратите время на разработку. А это выгодно. Будьте готовы к тому, что вам следует удержать в голове сотни вариаций обработки текста и фото. Некоторые из них используются практически постоянно. К ним относится обводка текста.

Добавление обводки тексту в фотошопе — одна из самых простых, но, в то же время одна из самых востребованных операций. Потому, знать, как ее выполнять просто необходимо любому веб дизайнеру. Приступим же.

Начнем с самого простого. Как сделать обводку текста одинарную. Создаем новый документ. Пишем текст. Я выберу крупный шрифт и жирное начертание. На фоновый слой я добавила градиент. Если уже делать, то красиво.

Делаем обводку черным цветом. Переходим к окну слоев. Выбираем наш, с текстом. Кликаем по нему левой клавишей мыши.

Нам нужно найти «параметры наложения».

Выбираем пункт «обводка» и задаем настройки.

Результат:

Настройки можно менять на ваше усмотрение. Ширина обводки. Ее цвет и тип.

Давайте несколько усложним задачу. И сделаем двойную обводку. Но! К сожалению, фотошоп не дает возможности сделать двойную обводку тем же способом. Потому, следует прибегнуть к хитрости. И перевести нашу надпись в смарт-объект. Правда, тут есть один недостаток. Ваша надпись становится уже картинкой. То есть, отредактировать ее в режиме текста уже не получится. В том же окне слоев вызываем левой клавишей мышки тот же список операций. И выбираем «преобразовать в смарт-объект». Он будет располагаться чуть ниже параметров наложения.

Слой примет подобный вид:

Теперь возвращаемся к параметрам наложения и обводке. Задаем следующие настройки.

Вуаля! Теперь обводка двойная.

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

Я изменила фоновый слой, дабы наш текст смотрелся лучше. И добавила тексту вот такой градиент:

Плюс простая черная обводка. Исходное изображение у меня выглядит так:

Теперь преобразовываю его в смарт-объект и добавляю ему обводку градиентом. Для этого в параметрах наложения во вкладке обводка в выпадающем списке выбираем «градиент»

Задаем настройки:

И вот, что имеем. Текст с обводкой градиентом. Благодаря игре цветов мы создали эффект светящейся надписи.

Выглядит очень интересно, не находите?

Благодаря парочке инструментов у нас получилось создать классную надпись, которая вполне может подойти для создания шапки сайта.

Вам следует запомнить несколько вещей.

1. Обводку текста нельзя делать бесконечно. Всему есть предел. Либо вы делаете множество тонких обводок, либо парочку, но толстых.
2. Обводка бывает как внешней, так и внутренней. У внутренней есть существенный недостаток. Она «съедает» обводимый объект.
3. С помощью обводок вы можете создать иллюзию объема. Все дело в цветах. При подборе нужной комбинации вы запросто достигните подобного эффекта.
4. Обводка текста не увеличивается пропорционально тексту. Допустим, вы сделали обводку шрифта с кеглем 20px и обводку в 2 px. Если вы увеличите кегль до 40 px, обводка останется того же размера. То есть, выглядеть она будет совершенно иначе.

Как сделать красивый шрифт

Здравствуйте уважаемые начинающие веб-мастера.

В этом уроке я покажу как сделать не только красивый, а и уникальный шрифт для своего сайта.

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

Итак, начнём с создания шрифта.

Для создания оригинального шрифта используем сервис typetester.org

Заходим по ссылке.

У сервиса две версии — англоязычная и русскоязычная, но кнопки переключения нет, а по умолчанию открывается англоязычный вариант, поэтому используем переводчик и создаём аккаунт.

Аккаунт необходим потому, что после создания своего шрифта, вам будет выдана ссылка на него с указанием названия шрифта.

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

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

Для начала выберем вариант из имеющихся.

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

Можно его крутить-вертеть, менять цвет и размер, сжимать-растягивать, и ещё много чего.

Очень интересная функция — это создание новых слоёв.

С её помощью можно одну букву, слово, или словосочетание сделать в одном стиле, а следующую уже в другом.

Короче полёт фантазии для творчества.

Можно так-же создать свой проект. В интерфейсе все опции доступно показаны в боковых панелях.

После создания проекта переходим в Экcпорт HTML+CSS и получаем коды, для вставки шрифта на сайт.

Линк вставляется в head сайта, туда где все линки, CSS — в файл стилей, а HTNL — на страницу, туда где надо отобразить созданный шрифт.

И ещё один нюанс — текст в HTML, тот который вы использовали при создании шрифта, можно будет редактировать прямо в коде, в зависимости от потребности.

Единственно, что в этом сервисе пока не доработано — это то, что работает он только с библиотекой Google Fonts.

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

Вот полный список русскоязычных шрифтов, имеющихся на данный момент в Google Fonts. Это вам для того, чтоб проще было выбрать из огромного списка в сервисе typetester.org, только русскоязычные.

• Roboto
• IBM Plex Serif
• Open Sans
• Montserrat
• IBM Plex Mono
• Roboto Condensed
• Oswald
• Source Sans Pro
• IBM Plex Sans
• PT Sans
• Roboto Slab
• Merriweather
• Open Sans Condensed
• Ubuntu
• Noto Sans
• Playfair Display
• Lora
• PT Serif
• Arimo
• Roboto Mono
• PT Sans Narrow
• Noto Serif
• Fira Sans
• Lobster
• Yanone Kaffeesatz
• Exo 2
• Rubik
• Pacifico
• Cormorant Garamond
• Ubuntu Condensed
• Amatic SC
• Play
• EB Garamond
• PT Sans Caption
• Comfortaa
• Cuprum
• Vollkorn
• Poiret One
• Alegreya Sans
• Alegreya
• Old Standard TT
• Philosopher
• Russo One
• Istok Web
• Tinos
• Didact Gothic
• Fira Sans Condensed
• Jura
• Playfair Display SC
• Caveat
• Marck Script
• Fira Sans Extra Condensed
• Prosto One
• Forum
• Arsenal
• PT Mono
• Neucha
• Scada
• Alice
• Prata
• Bad Script
• Alegreya Sans SC
• Montserrat Alternates
• Ubuntu Mono
• Press Start 2P
• PT Serif Caption
• Marmelad
• Cousine
• Oranienbaum
• Cormorant
• Anonymous Pro
• Alegreya SC
• El Messiri
• Kurale
• Tenor Sans
• Kelly Slab
• Spectral SC
• Andika
• Spectral
• Yeseva One
• Fira Mono
• Gabriela
• Vollkorn SC
• Rubik Mono One
• Pangolin
• Podkova
• Pattaya
• Ledger
• Cormorant Infant
• Ruslan Display
• Cormorant SC
• Underdog
• Seymour One
• Stalinist One
• Cormorant Unicase

Есть в этом списке и оригинальные и рукописные шрифты, но должен признать, таковых не много.

На этом по сервису всё.

Как сделать обводку текста.

Обводка текста без фотошопа, делается свойством CSS — text-shadow которое создаёт тени.

Чтобы вокруг каждой буквы получилась ровная обводка используется следующая комбинация теней.


p{
text-shadow: -1px -1px #EE8A08,


-2px -2px #EE8A08,
-1px 1px #EE8A08,
-2px 2px #EE8A08,
1px 1px #EE8A08,
2px 2px #EE8A08,
1px -1px #EE8A08,
2px -2px #EE8A08;
}


Это так сказать каркас, а вот ширина цвет и вид обводки подбирается индивидуально путём изменений значений в text-shadow.

Структуру обводки можно менять как душе угодно. Можно у самой обводки сделать границы, можно увеличить или уменьшить отдельные полосы составляющие обводку.

Если кто не в курсе, как это сделать, то инструкция по теням в статье Как делается тень

Пример.

Обводка текста

На этом пока всё. Теперь вы в курсе Как сделать красивый шрифт.

Желаю творческих успехов.

Шрифты для сайта < < < В раздел

15 лучших примеров текстовых эффектов обводки CSS — WebTopic

Написание текстов довольно распространено. Однако со временем в технологической сфере появилось множество нововведений, помогающих улучшить общий вид текстов. И один из распространенных эффектов — текстовые эффекты обводки CSS. Различные разработчики придумали разные эффекты, позволяющие пользователям выбирать наиболее предпочтительные варианты. В этой статье рассказывается о 15 лучших текстовых эффектах обводки CSS, которые вы можете использовать. Читай дальше!

Лучший текстовый эффект обводки CSS Примеры

Лучший текстовый эффект обводки CSS Примеры

See the Pen Выделите любой шрифт с помощью этого текстового эффекта CSS от Bekah McDonald (@bekahmcdonald) на CodePen.

Грамотно прорисованные тексты делают ваш контент привлекательным, в результате чего его просматривает множество людей. В результате текстовый эффект обводки CSS очень важен. Это пример Bekah McDonald, написанный на HTML и CSS. Он уникально обводит текст удивительной каллиграфией, которая подходит для различных заголовков.

ПОЛУЧИТЬ КОД

2. Текстовый эффект градиентной обводки CSS3

См. текстовый эффект градиентной обводки пера CSS3! Автор: wilsmex (@wilsmex) на CodePen.

Вы ищете уникальный текстовый эффект и привлекает внимание? Если да, то лучшим вариантом будет текстовый эффект градиентной обводки CSS3. Это текстовый эффект, который адаптирует несколько цветов, создавая интересный вид. Стиль каллиграфии также смелый. Пример обводки CSS создан пользователем Codepen, Wilsmex с использованием HTML, CSS и JS.

ПОЛУЧИТЬ КОД

3. Фон с коническим градиентом CSS

См. Фон конического градиента Pen CSS от Peter Bartholomew (@pjbartholomew) на CodePen.

Этот эффект обводки текста CSS является одним из лучших благодаря фону с коническим градиентом. Он обеспечивает перекрывающийся текст на великолепном фоне, что привлекает много людей к контенту. Текстовый эффект — отличный выбор для открытия страницы. Кроме того, код написан разработчиком Питером Варфоломеем, который использует HTML и CSS.

ПОЛУЧИТЬ КОД

4. Обводка текста и тень

См. обводку текста пером и тень от gc-nomade (@gc-nomade) на CodePen.

Текстовый эффект обводки текста и тени довольно популярен благодаря своему элегантному дизайну. Это пример, созданный Gc-nomade с использованием HTML и CSS. Большой размер шрифта и светло-зеленый цвет шрифта выделяют текст среди других доступных вариантов. Кроме того, фон отзывчивый и включает в себя уникальную конструкцию.

ПОЛУЧИТЬ КОД

5. Собственная обводка текста CSS — Текстовый эффект обводки CSS Примеры

См. обводку текста Pen CSS Native Text Stroke от Elad Shechter (@elad2412) на CodePen.

Эффекты обводки текста — лучший способ донести сообщение, особенно когда вы делаете акцент на важном вопросе. Этот встроенный в CSS эффект обводки текста — отличный выбор для постеров, особенно если вы хотите, чтобы они привлекли внимание многих людей. Он включает в себя красный фон и желтый цвет шрифта для придания интересного вида. Обратите внимание, что текстовый эффект создан пользователем Codepen, Эладом Шехтером, который использует CSS и HTML.

ПОЛУЧИТЕ КОД

6. Градиентная обводка

См. Градиентную обводку пера Марко Бидерманна (@marcobiedermann) на CodePen.

При поиске правильного эффекта обводки текста с помощью CSS важно выбрать вариант, который передает ваше сообщение. И этот Градиентный штрих имеет особенности для создания настроения, привлекающего внимание людей. Это код Марко Бидерманна, использующий HTML и CSS. Многоцветная настройка обеспечивает уникальный и элегантный вид.

ПОЛУЧИТЕ КОД

7. Эффект CSS-маски обводки текста

См. Эффект CSS-маски обводки текста пером Патрика Фридом Майера (@freedommayer) на CodePen.

Получите этот текстовый штрих, совместимый с несколькими браузерами, такими как Chrome, Edge, Firefox, Safari и Opera. Это пример текстового эффекта от Патрика Фридом Майера, который использует HTML и CSS. Фон уникален и интересен, улучшая внешний вид текста.

ПОЛУЧИТЬ КОД

8. Эффект ретро-текста

См. текстовый эффект Pen Retro (чистый CSS) Йоава Кадоша (@ykadosh) на CodePen.

Этот текстовый эффект обводки CSS имеет высокое качество с правильным изображением маски, фоновым клипом и обводкой текста. Это пример Йоава Кадоша на двух распространенных языках программирования, HTML и CSS. Это адаптивный эффект с несколькими уникальными цветовыми смесями, которые обеспечивают необычайный баланс всего образа.

ПОЛУЧИТЕ КОД

9. Тройной текстовый эффект TYPO

См. Triple Typo от creatz (@creatz) на CodePen.

Текстовые эффекты CSS Stroke — лучшие помощники, когда вы хотите, чтобы ваш текст выделялся среди других. Тем не менее, среди множества доступных вариантов довольно сложно остановиться на правильном варианте. Текстовый эффект TYPO Triple — отличный выбор для плакатов или рекламы. Размер и цвет шрифта бросаются в глаза, привлекая внимание всех, кто сталкивается с ним. Кроме того, он включает в себя правильный фоновый шрифт и стиль текста. Обратите внимание, что текстовый эффект создан пользователем Codepen, Creatz, и использует чистый CSS.

ПОЛУЧИТЕ КОД

10. Телефон с большой кнопкой Western Electric

См. Телефон с большой кнопкой Pen Western Electric от Алекса (@alexgoff) на CodePen.

Текстовый эффект западного электрического телефона с большими кнопками повторяет идею старых телефонов с большими кнопками. Он включает в себя ручку, которая имитирует стиль телефона с большими кнопками, а также текстовые тени и штрихи. Текстовый эффект отличается и творческий. Это пример пользователя Codepen Алекса, использующего HTML, CSS и JS. Кроме того, конструкция и дизайн впечатляют.

ПОЛУЧИТЕ КОД

11. Штрихи, тени + эффекты полутонов

См. «Штрихи пера, тени + эффекты полутонов» Марка Мида (@markmead) на CodePen.

Пользователь Codepen Марк Мид создал этот легендарный текстовый эффект. Он написан на HTML и CSS. Текстовые эффекты сочетаются с правильным фоном, уникальным текстовым шрифтом и текстовыми тенями, что придает изданию элегантный вид. Обратите внимание, что он совместим со многими браузерами, включая Chrome, Edge, Safari и Edge. Получите эти текстовые эффекты и создайте один из самых привлекательных текстов.

ПОЛУЧИТЕ КОД

12. Обводка текста: 4 способа

См. обводку текста ручкой: 4 способа от Kseso (@Kseso) на CodePen.

Этот эффект обводки текста является одним из самых разнообразных текстовых эффектов, которые вы можете адаптировать благодаря 4-сторонней настройке. Это код Kseso, написанный на HTML и CSS. Опция имеет несколько функций, включая обводку текста, тень текста, тень и текст внутри шаблона SVG. Кроме того, он отзывчив и сочетается со многими браузерами, включая Chrome, Firefox, Edge и т. д.

ПОЛУЧИТЕ КОД

13. Начните распространять новости

См. перо Начните распространять новости — плакат Нью-Йорка (обводка текста, фильтры и смешанный режим наложения) Мелиссы Эм (@meowwls) на CodePen.

Если вы ищете текстовый эффект, который соответствует вашим творческим способностям, то этот вариант — первоклассный. Это эффект, который включает в себя обводку текста, фильтры и режим смешивания и наложения для получения окончательного текста. Автор штрихового кода CSS — Мелиса Эм, использующая HTML и CSS. Обратите внимание, что он довольно отзывчив и совместим с несколькими веб-браузерами.

ПОЛУЧИТЬ КОД

14. Текстовая обводка CSS Outline

См. обводку текста Pen CSS от Viljami Salminen (@viljamis) на CodePen.

Обводка текста контура CSS создана пользователем Pro-Codepen, Вильями Салминеном, и написана с использованием CSS и HTML. Размер и цвет шрифта большие и быстро привлекают внимание всех людей, которые с ним сталкиваются. Поэтому это отличный выбор для рекламных щитов или плакатов. Кроме того, текстовый эффект имеет уникальную текстовую тень, которая выделяет текст.

ПОЛУЧИТЕ КОД

15. Обводка и градиентный текст CSS3

См. обводку и градиентный текст Pen CSS3 Джеймса Ноуланда (@jnowland) на CodePen.

Последний текстовый эффект в нашем списке создан пользователем Codepen Джеймсом Ноулэндом, написанным на HTML и CSS. Он имеет уникальный цвет фона, градиентную тень текста и крупный текстовый шрифт. Этот текстовый эффект обводки CSS отлично подходит для людей, которым нужен большой текст.

ПОЛУЧИТЬ КОД

Как добавить обводку к тексту в Photoshop: простой способ

Услуги по ретуши фотографий > Блог о ретуши > Советы по редактированию фотографий > Как добавить обводку к тексту в Photoshop: пошаговое руководство

Добавить обводку к тексту в Photoshop очень просто, даже если вы новичок в Photoshop. Вы можете добиться потрясающего эффекта, подобрав правильные шрифты, толщину линий, дизайн и форму. Следуйте этому пошаговому руководству, чтобы узнать, как профессионально добавить обводку текста в Photoshop.

Такой инструмент будет полезен при создании баннера YouTube в Photoshop. За несколько шагов вы можете создать столько штрихов, сколько пожелаете.

ЗАКАЗАТЬ ОБРАБОТКУ С ИЗОБРАЖЕНИЕМ

Если вам нужен дизайн баннера, обращайтесь к специалистам из команды FixThePhoto. Они помогут вам добавить к вашему изображению различные эффекты и реализовать любую идею быстро и по доступной цене.

ШАГ 1. Начните с создания нового документа

Перейдите в меню « Файл » в верхней части экрана и выберите « Новый ». Кроме того, вы можете использовать сочетание клавиш Ctrl+N в Windows или Command+N в macOS. Откроется диалоговое окно «Новый документ». Далее нужно задать размер изображения и нажать ОК . Диалоговое окно закроется, и вы увидите новый пустой документ.

ШАГ 2. Примените инструмент «Текст»

Далее вам нужно добавить текст. Для этого на панели инструментов найдите « Type Tool » или просто нажмите « T » на клавиатуре.

ШАГ 3. Выберите шрифт

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

ШАГ 4. Добавить текст

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

ШАГ 5. Добавьте «Обводку»

После добавления текста перейдите к значку « Стили слоя », расположенному внизу «9Панель «0139 Layers » и нажмите на нее. Найдите « Stroke » во всплывающем меню.

Далее вы увидите большое диалоговое окно « Layer Styles ». Параметры настройки « Обводка » будут в центре, а вокруг вашего текста уже появится стандартная красная обводка.

ШАГ 6. Установите размер обводки

Теперь установите размер обводки текста в Photoshop равным 6px. Для этого перейдите в ползунок « Размер » в верхней части диалогового окна. Далее вам нужно выбрать Опция внутри в меню « Позиция ». После настройки параметров выйдите из диалогового окна «Стиль слоя», нажав кнопку «ОК».

ШАГ 7. Перейдите к инструменту «Заливка»

Выделив текстовый слой, перейдите в верхнюю часть панели «Слои». Установите текстовый параметр «Заливка» на значение 0%. Это позволит вам скрыть текст, оставив обводку видимой.

ШАГ 8. Дублируем текстовый слой

Как правило, в Photoshop можно добавить только одну обводку к тексту, но я расскажу, как можно обойти это ограничение. Вы можете дублировать текстовый слой и добавлять разные штрихи к каждому дубликату. Чтобы сделать копию текстового слоя, быстро выделите его в области «9».0139 Layers ” и нажмите Ctrl+J (Win) / Command+J (Mac) . Дубликат будет расположен над исходным текстовым слоем.

ШАГ 9. Выберите цвет обводки

Хотя любой фоторедактор должен знать, как изменить цвет объекта в Photoshop, не менее важно знать, как изменить цвет обводки. Итак, вам нужно просто снова открыть Layer Styles . Затем закройте цветовую палитру, нажав OK . Образец цвета должен измениться на выбранный цвет. Не путайте изменение цвета обводки с изменением цвета текста в Photoshop.

После изменения цвета обводки текста Photoshop выберите параметр Outside в параметре Position. Это переместит ваш штрих за пределы текста. Выйдите из диалогового окна «Стиль слоя», нажав «ОК». Теперь вы можете видеть, что вокруг вашего текста есть два штриха. Первый находится внутри текста, а новый снаружи.

ШАГ 10.

Повторно продублируйте исходный текстовый слой

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

Итак, сегодня мы создали три отдельных штриха вокруг вашего текста. Вы можете добавлять обводку к тексту в Photoshop столько раз, сколько необходимо. Процедура остается прежней: в начале всегда дублируйте исходный текстовый слой, затем найдите его на панели слоев, откройте параметры обводки, задайте цвет вашей обводки и отрегулируйте ее размер, чтобы он стал виден за ранее добавленными обводками. . После освоения этой техники вам также может понадобиться просмотреть другие уроки по Photoshop на YouTube.

Bonus Tools

СКАЧАТЬ БЕСПЛАТНО

Если вы хотите сделать свой текст привлекательным и стильным, попробуйте использовать эти шрифты Photoshop, разработанные профессиональными ретушёрами фотографий. Выберите шрифт, который соответствует стилю вашей фотографии. Кроме того, вы можете применять такие шрифты в несколько кликов.

Часто задаваемые вопросы

Щелкните правой кнопкой мыши текстовый слой и выберите в меню « Параметры наложения ». В противном случае перейдите к Layer > Layer Style > Stroke . В диалоговом окне «Стиль слоя» найдите «Обводка» в списке стилей слева. Поэкспериментируйте с различными вариантами обводки, чтобы рамка текста выглядела так, как вам нравится.

Выберите область изображения или слой на панели « Слои ». Перейдите к Edit > Stroke (Outline) Selection . Установите любой из существующих параметров в диалоговом окне «Обводка», затем нажмите OK , чтобы подтвердить изменения.

В версиях ниже CS6 перейдите к Layer > Type > Convert to Work Path . В CS6 и более поздних версиях перейдите к Type > Convert to Work Path . Внимание: метод завершится ошибкой, если вы забудете выбрать слой на панели «Слои».