Как сделать с помощью css обводку текста

Содержание:

Как изменить текст в Фотошопе
Второй слой
Обратимся к привычным инструментам
Два главных свойства при работе с текстом
Прогрессивные усовершенствованиям и устаревшие браузеры
- Усовершенствования с помощью CSS3
Что может пойти не так
Трёхмерный текст
Как вырезать изображение в Фотошопе?
Цвет
Тиснение текста
Размещаем все вместе
Смело и нетривиально
Наконечники
Обводка для текста (коды HTML)
Как вырезать в Фотошопе CS5 и CS6 ?
Использование text-shadow
Что может пойти не так
Как обвести текст
Обводка по контуру
Как сделать обводку текста в фотошопе
Обводка текста по контуру
Решение
Два главных свойства при работе с текстом
Тиснение текста
Как добавить обводку с помощью text-shadow

Как изменить текст в Фотошопе

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

Если нужно немного сжать текст или растянуть, то применяем команду «Свободное трансформирование».

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

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

Изменение цвета текста и его шрифта выполняется, как было описано выше.

Второй слой

Перенос текста с помощью css и html

Если вы смотрели хоть одно мое видео с моего канала youtube, то возможно видели, что в начале каждого ролика у меня стоит заголовок, который обведен особым образом. Так вот, многие меня спрашивают, как я проделываю такой прием. И сейчас я вам поведаю свой секрет, хотя тут ничего секретного на самом деле и в помине нет.

Итак, для начала вы должны написать любой текст. Сделали? Молодцы! И теперь зажмите клавишу CTRL и нажмите на иконку «Т» в панели слоев. После этого у вас ваш текст должен выделиться пунктирной линией.
Теперь создайте новый слой и сделайте так, чтобы он находился прямо за текстовым слоем. То есть верхним слоем будет надпись, а ниже будет наш новый пустой слой. Да, и сразу встаньте на него, чтобы он был у вас активным.
Далее мы идем в верхнее меню и выбираем пункт «Выделение» — «Модификация» — «Расширить». В появившемся окне мы должны выбрать, насколько расширить нашу выделенную область. В своем примере я выберу на 3 пикселя, но вы можете экспериментировать. После чего нажимаем ОК.
И следующим шагом нам нужно будет выбрать инструмент «Заливка» и сменить цвет кисти на черный (ну или какой-либо еще). Ну а дальше заливаем выделенную область и смотрим на результат.
А в довершение к этом можно опять же залезть в стили слоя и выбрать там обводку, и работать с ней. И тогда уже получится более красивый эффект. Именно его я и использую для заголовков к моим видео.

Вот пара примеров того, что у меня получилось.

Кстати, если вы помните, то заливать область вы можете не только областью, но и какой-нибудь текстурой, тогда эффект может получиться еще интереснее. Так что всё в ваших руках. Ну а если вы всё же захотите изучить фотошоп с нуля буквально за пару недель, то я вам настоятельно рекомендую изучить этот классный видеокурс. Он просто потрясающе сочетает в себе простоту, легкость и полезность. смотрится просто на одном дыхании. А по промокоду KOSKOMP_E73 вы получите скидку 10% от стоимости курса!

Обратимся к привычным инструментам

Как сделать подчеркивание без текста в файле word

Долгое время, да и по сей день разработчики используют свойство text- shadow для создания контура вокруг символов. Но на самом деле названный элемент изначально был разработан для формирования теней вокруг текста.

Благодаря гибкому механизму управления слоями, с помощью text- shadow можно создать абсолютно разные эффекты: вдавленный или объемный, прозрачный или с градиентом текст и так далее. Конечно же данное свойство можно использовать и для реализации контуров.

Преимущество текущего инструмента состоит в том, что:

он привычен девелоперам в использовании;
прост в использовании;
позволяет создавать различные эффекты для контента.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Пример создания черного контура </title>
  <meta charset="utf-8">
<style>
h1{
  text-align: center;
  font-size: 39px;
  color:#fff;
  background: #FFE1FF;
  text-shadow: 0 0 2px #010010;
}
</style>
</head>
<body>
  <h1>Мега-супер-пупер заголовок</h1>
</body>
</html>

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

Два главных свойства при работе с текстом

Как сделать красивую тень для блока (элемента) с помощью css. (8 примеров)

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

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

Один из самых простых способов выделить любое слово с помощью CSS – сделать обводку текста. Для этого вам понадобиться запомнить всего два свойства. Первое – это text-stroke, а второе – это text-shadow. Вы можете использовать одно из них, или оба одновременно, создавая потрясающие эффекты.

Прогрессивные усовершенствованиям и устаревшие браузеры

IE6 и IE7не поддерживают псевдо-элементы CSS 2.1 и игнорируют все объявления и . Они не будут выводить все усовершенствования, но сохранят основу функционирования.

Внимание при использовании Firefox 3.0

Firefox 3.0 поддерживает псевдо-элементы CSS 2.1, но не поддерживает их позиционирование. Из-за такой частичной поддержки эффекты, которые явно зависят от свойств псевдо-элементов или могут выглядеть ужасно. Нет никакого альтернативного способа для Firefox 3.0, если вы использовали свойства или . Иногда некоторые улучшения можно получить при добавлении к стилям псевдо-элемента.

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

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

Усовершенствования с помощью CSS3

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

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

Что может пойти не так

Если вы откроете предыдущий документ в Explorer, то будете очень разочарованы. Этот браузер оставит все ваши усилия без внимания и отобразит обыкновенный текст без намека на обводку. Все потому что свойство пока еще является экспериментальным и не включено консорциумом W3W в официальные стандарты.

Также обратите внимание на вендорные префиксы:

Отдельно префиксов Mozilla, Opera и Explorer на 2018 год не существует

Поэтому применять CSS обводку текста желательно крайне осторожно. Не назначайте text-stroke жизненно важным элементам страницы, от которых будет зависеть смысл сайта

Добавляйте декорирование второстепенному контенту и обязательно проводите кросс-браузерное тестирование своих страниц.

Трёхмерный текст

Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.

Рис. 4. Трёхмерный текст

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

Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.

Пример 3. Тень для добавления трёхмерности

HTML5CSS3IE 9IE 10+CrOpSaFx

Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.

Как вырезать изображение в Фотошопе?

Теперь вам нужно понять, как вырезать изображение в Фотошопе — ведь сейчас движение человека ни к чему не приведет, нам нужно вставить его на совсем другой картинке, получив новый фон. Делается это очень просто, но давайте сначала уточним выделение при помощи уже знакомой кнопки «Уточнить край». Теперь нужно произвести более внимательную работу в выскочившем диалоговом окне. Яблоки — это простейший предмет. Контур человека более объемный. Нужно постараться избавиться от всех артефактов, иначе они будут сильно заметны.

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

Обратите внимание, человек получил некоторый 3D-эффект. В некоторых случаях такой эффект выглядит очень интересно

Вам же сейчас нужно перейти в панель «Слои». Здесь вы увидите новый слой, содержащий в себе эффект съемки.

Теперь нужно вырезать объект и вставить его в Фотошопе, но уже на другой картинке. Делается это методом обычного перетаскивания. Для начала откройте новую картинку при помощи Adobe Photoshop. Вернитесь к фотографии с человеком. В панели «Слои» наведите курсор на слой с человеком. Щелкните левой кнопкой мыши и удерживайте её. Теперь перетащите этот слой прямо на открытую только что картинку.
Получившегося результата можно добиться и другим способом. Он пригодится для тех людей, у которых картинки открываются в виде вкладок. Когда слой выбран — перейдите по пути «Редактирование>Вырезать». А на новом изображении следует перейти по пути «Редактирование>Вставить». Итог будет тот же.

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

Цвет

Цвет обводки в диалоговом окне Outline Pen (Атрибуты абриса) определяется в

раскрывающемся списке Color (Цвет).

Выделите мышью большой велосипед и вызовите

диалоговое окно Outline Pen

(Атрибуты абриса) нажатием кнопки всплывающей панели

инструмента Pen (Перо).

Откройте список

Color (Цвет). В нем в качестве цвета обводки

устанавливается любой из цветов палитры

Default CMYK Palette. Для перемещения по палитре используйте ползунок.

Задайте обводке объекта белый цвет. После нажатия

кнопки ОК обводка будет применена.

Создайте линии, как показано на рис. Они имеют

синюю обводку.

Выберите горизонтальную линию и измените цвет ее

обводки на красный, щелкнув правой кнопкой мыши в палитре цветов.

Поместите все линии на самый нижний уровень в

стопке объектов.

Тиснение текста

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

Рис. 5. Рельефный текст

Для добавления подобного эффекта нам понадобится две тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).

Пример 4. Рельефный текст

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.

Размещаем все вместе

Мы рассмотрели свойство -webkit-text-stroke и его использование. Теперь проиллюстрируем все это.

Перед тем, как сделать обводку текста CSS, создайте новый документ HTML и добавьте в него следующую разметку:

<!DOCTYPE html>
<html>
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Text Outline</title>
    <style>
        body {
            background-color: #0F1020;
            padding: 100px;
        }
         #textContainer p {
            font-family: sans-serif;
            font-size: 64px;
            fong-weight: 100;
            color: #E6E8E6;
            margin: 0;
        }
    </style>
</head>
 <body>
    <div id="textContainer">
        <p>Did you know that your
            fingerprint is unique?
            <span class="outline">Of course you did!</span></p>
    </div>
</body>
 </html>

Сохраните веб-страницу, а затем откройте ее в браузере. Вы должны увидеть примерно следующее:

CSS

<div id="textContainer">
    <p>Did you know that your
        fingerprint is unique?
        <span class="outline">Of course you did!</span></p>
</div>

Мы хотим разместить текст внутри элемента span и отобразить его с эффекта контура, о котором говорили ранее. Обводка должна быть шириной 1 пиксель и иметь зеленовато-лимонный цвет. Для этого добавьте следующий код в нижнюю часть блока style (ниже существующих правил стиля):

#textContainer .outline {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #AFFC41;
}

После этого сохраните веб-страницу и откройте (обновите) ее в браузере. Вы должны увидеть появившийся контур:

CSScolortransparent

#textContainer .outline {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #AFFC41;
    color: transparent;
}

После этого текст «Of course you did!» будет отображен только с помощью контура!

Смело и нетривиально

В качестве рамки для фотографий у людей, ценящих оригинальность, может стать даже отслужившее свой век велосипедное колесо: отберите снимки общей тематики, продумайте сюжет, вставьте фото между спицами или зафиксируйте прищепками – оригинальный декор готов.
Не стоит гадать, как отреагирует любитель охоты на подаренный ему портрет в рамке из стреляных гильз. Конечно же, с искренней благодарностью.
Вариант для рыболовов: прикрепите к удочке крючки или кронштейны, с помощью бечевки или не толстого троса с оригинальными морскими узлами повесьте на них рамки с фотографиями, добавьте пару поплавков.
Креативной рамкой для фотографии может стать даже обычная стеклянная банка: соответствующего размера фото поместите в выбранную емкость, пустое пространство в ней задекорируйте песком, ракушками, морскими звездами, светодиодными гирляндами или любым другим антуражем, близким сюжету снимка.

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

Наконечники

CorelDRAW позволяет задавать незамкнутым контурам наконечники,

превращая обычные линии в стрелки.

Выделите красную ломаную линию. Откройте

диалоговое окно Outline

Pen (Атрибуты абриса).

Наконечники устанавливаются в группе Arrows (Наконечники). Она содержит два

раскрывающихся списка, соответствующих начальной и конечной точкам

контура. По умолчанию обе эти точки лишены наконечников.

В меню Options (Параметры)

содержатся также команды Edit (Редактировать) и New

(Новый), дающие доступ к очень ограниченным возможностям

редактирования стрелки. Команда

Delete (Удалить) удаляет избранный наконечник.

Обводка для текста (коды HTML)

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

ОБВОДКА ДЛЯ ТЕКСТА БЕЗ ФОТОШОПА

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

Женщина остаётся Женщиной, Неважно, сколько ей лет, И сколько лет ей по паспорту,Замужем или нет. Она может быть молоденькой, И может быть средних лет, И дамой преклонного возраста, У Женщины возраста нет!

Копируем в окошечке код

Если надо вставить текст в рамку. Копируем в окошечке код.

Код будет выглядеть вот так (см. фото А)

Код дан с обводкой черного цвета. Код цвета обводки выделен красной рамочкой. Вместо цифр 000000 вставляете код(6 знаков) нужного вам цвета. Вместо слов «Здесь будет Ваш текст» вставляете свой текст, всё копируете и вставляете в рамочку.

Если надо вставить текст без рамки. Копируем в окошечке код.

Код будет выглядеть вот так (см. фото Б)

В код добавился параметр размера (синяя рамочка) и цвета (зеленая рамочка) шрифта. Их нужно заменить на свои.

Вот и всё!

Как вырезать в Фотошопе CS5 и CS6 ?

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

Мы будем совершать все операции в Adobe Photoshop CC. Но повторять за нами можно практически в любой версии графического редактора. Результат должен быть идентичным. Сперва мы попробуем поработать с изображением трех яблок на черном фоне. Мы вырежем эти фрукты, переместив их в левый нижний угол.
Заметьте, мы специально подобрали картинку с черным фоном. На этом примере легко понять работу функции вырезания. Если объект переместить, то пустующее место должно быть чем-то заполнено. Обычно «дыра» заполняется фоновым цветом. В нашем случае в качестве фонового нужно выбрать черный цвет. Тогда результат будет идеальным

Для выбора цвета обратите внимание на левую часть программы Adobe Photoshop. Под иконками инструментов находится пара разноцветных квадратиков

Первый отвечает за основной цвет, а второй за фоновый. Кликните по второму и найдите в отобразившейся палитре черный цвет.
Мы уже вплотную приблизились к ответу на вопрос, как вырезать в Фотошопе CS6 или любой другой версии графического редактора. Сейчас программе нужно указать, что именно мы хотим вырезать. В нашем случае это три яблока. Но указать — это не кликнуть в определенной части картинки. Этим мы просто укажем на отдельный пиксель, из множества которых состоит изображение. Объект необходимо выделить.

Для выделения в Photoshop можно использовать разные инструменты. Для выделения человека или других сложных объектов обычно задействуется инструмент «Магнитное лассо». К нему мы перейдем чуть позже, в следующих частях урока. Здесь же можно обойтись инструментом «Быстрое выделение». Дело в том, что яблоки находятся на контрастном фоне. Да и сами они состоят лишь из нескольких цветов. Поэтому графический редактор легко сможет самостоятельно отделить эти фрукты от фона.
После выбора инструмента «Быстрое выделение» курсор превратится в круг с крестиком в центре. Теперь вы можете щелкать по объекту, пока выделенными не окажутся все три яблока. Сложности могут возникнуть с темными областями. Если вы случайно выделили фон, то щелкните по нему левой кнопкой мыши при зажатой клавише Alt. Ещё при выделении может потребоваться уменьшение размера кисти. Это делается в верхней части программы. На выделение всех трех яблок у вас должны уйти буквально 30 секунд.
Ещё в верхней части программы присутствует кнопка «Уточнить край». Нажмите её, а в выскочившем диалоговом окне поставьте галочку около пункта «Умный радиус». Ползунок «Радиус» нужно передвинуть вправо до значения 7-10 пикселей. Остальные ползунки трогать не стоит. Когда результат устроит — нажмите кнопку «OK».
Далее всё очень просто. Выберите инструмент «Перемещение». Соответствующая иконка находится в самом верху левой части рабочего окна. Затем наведите курсор на выделенные яблоки. Зажмите левую кнопку мыши и перетащите их в левый нижний угол. К сожалению, результат вас не устроит. Как бы вы не уточняли выделение, следы от контура яблок могут остаться.
Теперь вернитесь к любому инструменту из группы выделения. Щелкните по яблокам правой кнопкой мыши. В появившемся контекстном меню выберите пункт «Вырезать на новый слой». Затем раскройте панель «Слои». Щелкните здесь по глазу, расположенному около нового слоя. Как правило, он имеет название «Слой 1». Это действие приведет к временному сокрытию яблок из вида. Отображаться будет лишь фоновый слой.
Теперь нужно стереть остатки контуров от яблок. Делается это при помощи инструмента «Ластик». Размер кисти увеличьте посильнее, чтобы справиться с задачей как можно быстрее. Затем начните водить курсором (теперь он представляет собой обычный круг) при зажатой левой кнопке мыши. Постепенно ни одного следа от яблок не останется, фон станет полностью черным.
Остается лишь вернуться в панель «Слои» и включить отображение слоя с фруктами. Результат получился идеальным. Теперь вы должны забыть о вопросе, как вырезать в Фотошопе тот или иной объект. Но для закрепления материала мы всё-таки перейдем от яблок на черном фоне к более сложной фотографии. Ведь нужно понимать о том, что вырезать объект можно не только для его перемещения по имеющемуся изображению. Возможна его вставка и на совсем другой картинке.

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Рис. 1. Параметры text-shadow

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

Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.

К сожалению, IE до версии 10.0 не поддерживает text-shadow , так что в этом браузере мы никаких красивостей не увидим.

Что может пойти не так

Также обратите внимание на вендорные префиксы:

Отдельно префиксов Mozilla, Opera и Explorer на 2018 год не существует

Как обвести текст

Мы имеем три слоя – фон, изображение, текст.

Сначала сделаем обводку текста. Вызываем окно стилей одним из способов:

Двойным щелчком по слою в палитре;
Нажать на слой в палитре правой кнопкой мыши и в появившемся списке выбрать Параметры наложения.

3. Нажатием на иконку стилей fx

внизу палитры, и в появившемся списке можно выбрать «Параметры наложения», но удобнее сразу выбрать стиль

В этот момент активным должен быть тот слой, с которым мы работаем.

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

Стиль сразу же применился к буквам – по контуру появилась черная линия. Если этого не видно в рабочем окне – поставьте галочку функции Просмотр (рис. 5). Теперь значения параметров можно изменить на свое усмотрение.

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

Функцию Режим наложения

рассматривать в уроках для начинающих нет смысла. Ее не часто используют даже продвинутые мастера фотошопа. Это взаимодействие с нижним слоем. Оставим без изменений режим Нормальный.

Строка Непрозрачность

, соответственно, отвечает за прозрачность обводки. Меняется передвижением ползунка либо введением числового значения в процентах.

Как видно на рисунке 6, положения «Внутри» и «Из центра» перекрывают часть контура букв. Если сделать обводку полностью прозрачной , то эта часть контура тоже станет прозрачной.

Обводка по контуру

Как сделать обводку в «Фотошопе?» Второй способ — это создание контура и его прорисовка.

Под контуром в «Фотошопе» подразумевается векторная линия, которая задает направление движения кисти. То есть обводка в данном случае – это рисование выбранной кистью по заданной траектории.

При помощи инструмента «Выделение», «Лассо» или «Волшебная палочка» выделите фрагмент изображения, который нужно обвести. Через пункт меню «Окно» вызовите «Контуры». В этом окне найдите кнопку «Сделать из выделенной области рабочий контур». На панели «Инструменты» выберите инструмент «Кисть», задайте его параметры (форму, цвет и т. д.). Затем в окне «Контуры» нажмите кнопку «Выполнить обводку контура кистью». Выделенная вами ранее область будет обведена. После этого удалите контур.

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

Обратите внимание на то, что обводка в этом случае будет размещена на указанном вами слое, в том числе новом

Как сделать обводку текста в фотошопе

В открывшемся окне выбираем «Параметры наложения» и затем выбираем стиль слоя «Обводка», при этом появляется окно настроек стиля.

Настройка «Размер», которая изображена в виде ползунка, позволяет установить нужную ширину обводки. Выбираем параметр для обводки 3 пикселя и применяем выбранный стиль к нашему тексту.

Следующий параметр «Положение» отвечает за расположение обводки – выбираем параметр «снаружи». «Режим наложения» устанавливаем «нормальный» и «непрозрачность» устанавливаем 100%.

В параметре «Тип обводки» выбираем цвет в палитре цветов. В нашем случае выбираем чёрный цвет.

Обводка текста по контуру

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

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

Описанные выше два способа обводки не взаимозаменяют, а взаимодополняют друг друга. Преимущество первого в том, что линию можно регулировать и затем возвращаться к регулировке, а также копировать и применять к другим слоям, в том числе в других файлах. Преимущество второго – в том, что обводка в «Фотошопе» будет выглядеть более художественно, так как в выборе кистей нет никаких ограничений.

Решение

Каждый эффект оттенения обязан специфицировать смещение оттенения и может по выбору специфицировать радиус рассеяния и цвет тени.

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

Значение цвета может быть по выбору специфицировано до или после значений length эффекта оттенения. Значение цвета будет использоваться как базис эффекта оттенения. Если цвет не специфицирован, вместо него будет использоваться значение свойства ‘color’.

Оттенения текста могут использоваться вместе с псевдоэлементами :first-letter и :first-line.

Следующий пример установит тень справа и снизу от текста элемента. Поскольку цвет не специфицирован, тень будет того же цвета, что и сам элемент, и, поскольку радиус рассеяния не специфицирован, тень текста не будет рассеиваться:

H1 Следующий пример установит тень справа и снизу от текста элемента. Тень будет иметь радиус рассеяния 5px и красный цвет:

H2 Следующий пример специфицирует список эффектов оттенения. Первая тень будет справа и снизу от текста элемента и будет красного цвета без рассеяния. Вторая тень будет перекрывать первую и будет жёлтая, с рассеянием и размещена влево и ниже текста. Третья тень будет справа и сверху над текстом. Поскольку у неё цвет не специфицирован, будет использоваться значение свойства ‘color’ элемента:

Рассмотри этот пример:

SPAN.glow background: white; color: white; text-shadow: black 0px 0px 5px; > Здесь свойства ‘background’ и ‘color’ имеют одинаковые значения, и свойство ‘text-shadow’ используется для создания эффекта «солнечного затмения»:

Можно сделать и без теней, но это подходит только для крупного шрифта. И возни много.

Два главных свойства при работе с текстом

Тиснение текста

Рис. 5. Рельефный текст

Пример 4. Рельефный текст

HTML5CSS3IE 9IE 10+CrOpSaFx

Как добавить обводку с помощью text-shadow

Изначально text-shadow разрабатывалось как свойство для добавления тени. Но если знать, как правильно добавить значения, то text-shadow начнет удачно симулировать поведение text-stroke

Если вы обратите внимание на CSS-генераторы обводки текста, то увидите, что работают они только с text-shadow

Свойство принимает четыре значения:

В HTML-документе стили записываются следующим образом:

Первые две величины, отвечающие за смещения по осям координат, принимают как положительные, так и отрицательные значения. Например, запись ниже создаст тень серого цвета на шесть пикселей ниже и пять пикселей левее основного текста.

Чтобы добиться полного визуального соответствия обводки текста, CSS-свойству text-shadow можно добавлять несколько значений, создавать не одну тень, а сразу несколько. Так станицы сайта обогатятся элементами с эффектами 3D, свечения или вдавленного текста. Откройте следующий код в браузере, чтобы увидеть все о чем написано на практике:

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

Источник