Как сделать обводку текста, букв и других элементов в фотошопе (Photoshop)
С помощью этого метода можно сделать обводку в фотошобе для чего угодно, в том числе и обводку текста и букв.
Что бы сделать обводку текста нужно открыть в фотошопе нужное изображение, написать текст и перейти в оно наложения стилей.
В открывшемся окне можно настроить параметры обводки так как душе угодно. Немного опишу их:
- Размер обводки в пикселях
- Положение. Можно выбрать будет ли обводка снаружи или внутри объекта или текста. Если делаете обводку для прямоугольника то значение “Снаружи” делает углы скругленными это не всегда удобно, что бы они стали острыми нужно сделать обводку внутри.
- Непрозрачность обводки. Без комментариев
- Цвет. Кликнув по этому полю можно выбрать цвет из палитры.
Мы рассмотрели как сделать обводку в фотошопе. Удачи.
В ссылках ниже есть более новая версия статьи
Как сделать красивый шрифт и обводку текста
В этом уроке я покажу как сделать не только красивый, а и уникальный шрифт для своего сайта.
А так же покажу простой, но очень эффектный способ обводки текста границей. Причём границу вокруг букв можно будет сделать любых цветов и оттенков.
Итак, начнём с создания шрифта.
Для создания оригинального шрифта используем сервис 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.
Структуру обводки можно менять как душе угодно. Можно у самой обводки сделать границы, можно увеличить или уменьшить отдельные полосы составляющие обводку.
Если кто не в курсе, как это сделать, то инструкция по теням в статье Как делается тень
На этом пока всё. Теперь вы в курсе Как сделать красивый шрифт.
Желаю творческих успехов.