Делаем полупрозрачный текст в Фотошопе
Выполнить данную манипуляцию достаточно просто. Все что вам необходимо сделать – это уменьшить непрозрачность заливки до минимума и указать стиль, который выполняет подчеркивание контуров букв.
Создание прозрачного текста
В данной статье будет описываться, как создать стеклянный текст, чтобы сквозь него было видно фон. Для этого выполните такие действия:
-
Создайте в Фотошопе документ и с помощью заливки закрасьте фон черным.
На этом этапе все, но пока что необходимого эффекта вы не добились. Для того чтобы завершить процесс выполните следующие действия:
- Вызовите стили, как было описано выше.
- В графе «Тиснение» выставьте такие показатели: «Стиль» — внутренний скос; «Метод» — плавное; Глубина – сто %; «Направление» — вниз; «Размер» — 13 pixel; «Смягчение» — ноль; «Угол» — сто двадцать; «Высота» — тридцать; разместите флажок возле строки «Глобальное освещение» и «Сглаживание»; «Контур глянца» — выберите картинку с волнистой линией; «Режим подсветки» — экран; «Непрозрачность» — семьдесят пять %; «Режим тени» переведите в положение — умножение, а цвет – темно-серый.
Следующий этап уже завершен. Далее необходимо сделать текст прозрачным. Для этого просто установите значение «Заливки» — ноль.
Выполнив все описанные действия, вы получите прозрачный текст. Остается только выбрать необходимый вам фон. Когда вы выбрали заставку, уменьшите показатель непрозрачности. Конкретного значения тут нет, и вы можете установить такой показатель, который необходим для каждого конкретного случая.
При выборе процента непрозрачности, постарайтесь не делать слишком яркий нижний текстовый слой. В противном случае эффект прозрачности текста будет не так хорош как этого хотелось бы.
Выбирая фон для своего текста, вы можете создать его по своим предпочтениям, или выбрать из тех, которые вам предложит программа.
Создаём полупрозрачный текст в Фотошоп
Стили слоя являются мощным инструментом в Photoshop, которые позволяют быстро создавать эффекты, которые можно применить к дополнительным объектам.
Сегодня мы покажем, как использовать стили слоя для создания эффекта заполнения жидкостью текста в Photoshop.
Давайте начнем!
Шаг 1. Начните с создания нового документа, 1500px по 1000px.
Заполните фон с линейным градиентом 
, используя цвет #acacac, как цвет переднего плана и #e1e1e1 как цвет фона. Начните с нижней части документа и направление должно быть вверх.
Шаг 2. Теперь введите текст, который вы хотите "полузалить", используя цвет #dbdbdb, размер 300 пикселей, и шрифт типа "Cooper Std". Было бы неплохо использовать жирный шрифт.
Дублируйте слой с текстом комбинацией (Сtrl + J), и переименуйте оба слоя, как показано на рисунке ниже.
Шаг 3. Дважды щелкните на нижний слой (Ваш текст — внизу), и примените следующие стили слоя:
Шаг 4. Теперь, измените значение заливки верхнего слоя (Ваш текст — сверху), со значением (0%), затем дважды щелкните по нему, и примените следующие стили слоя:
Шаг 5. Используйте Rectangle Tool 
— "Прямоугольник",чтобы нарисовать прямоугольник, который охватывает нижнюю половину текста, цвет должен быть #aa4280. Убедитесь, что слой прямоугольник между двумя слоями текста ("Ваш текст — снизу" и "Ваш текст — сверху").
Шаг 6. Выберите Add Anchor Point Tool — Инструмент "Перо+", и начинайте добавлять узловые точки на краях букв, где они пересекаются с прямоугольником.
Шаг 7. Как только вы закончите, начинайте добавлять точки между ребрами, чтобы они определяли вершины и основания жидкости. После добавления точек, используйте Direct Selection Tool — Инструмент "Стрелка", чтобы выбрать те точки и переместить их вверх и вниз.
Вы можете также использовать "Удалить опорную точку", чтобы удалить нежелательные точки. Продолжайте изменять положения точек, пока вы не будете удовлетворены результатом.
Шаг 8. Мы собираемся применить растеризацию слоя прямоугольной формы, Для этого правой кнопкой мыши кликаем на копию, и выберите Rasterize Layer — "Растрировать слой". Щелкните правой кнопкой мыши на значке одного из текстовых слоев, чтобы создать выделение, а затем нажмите Ctrl + Shift + I, чтобы инвертировать выделение, и нажмите Удалить.
Шаг 9. Дважды щелкните на "Растрировать слой формы", и примените следующие стили:
Вот в принципе и все, но вы все равно можете изменить цвет жидкости заполнить путем простого добавления тона и насыщенности корректирующего слоя, и выбрать цвет который вам по душе.
(нажмите на изображение, чтобы увеличить)
Полупрозрачный текст на фоне в CSS
На этом уроке я покажу вам как сделать очень необычный текстовый эффект, применяя чистый CSS. Для этого потребуется большая фотография в качестве фона, а сверху фона мы напишем крупный заголовок нестандартным шрифтом.
Как обычно начнем с HTML разметки:
Заголовок h1 мы поместили в контейнер div, оба элемента — блочные и на странице пока виден — невзрачный текст. Разметка сделана, переходим в файл стилей. Обнуляем поля и отступы одновременно у body и h1.
body, h1 <
margin: 0;
padding: 0;
font-family: 'Alegreya Sans SC', sans-serif;
>
Я не зря выше упомянул, что h1 тоже является блочным элементом, а это значит, что вокруг заголовка браузеры по умолчанию создают свои поля и отступы.
После обнуления margin и padding, проблема исчезает. Еще, я прописал шрифт из коллекции Google Font, если в названии шрифта больше одного слова, то его заключают в кавычки. Кроме того, все сторонние шрифты, которых обычно нет на компьютере пользователя, обязательно надо подключать в файле стилей.
Фотография на все окно браузера
На сайте pixabay.com выбираете понравившееся вам фото, сохраняете себе на компьютер или просто копируете URL картинки и вставляете в код селектора div.
div <
background: url(https://cdn.pixabay.com/photo/2018/03/19/20/20/wheat-3241114_1280.jpg);
>
Все прописанные свойства ниже, растягивают фотографию, как фон, на весь экран браузера.
div <
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
>
Поверх фона идет крупный текст, примерно посередине окна, у которого все буквы заглавные. Ничего особенного, выглядит скучно, как бы фон сам по себе, а заголовок сам по себе.
h1 <
font-size: 6em;
position: absolute;
top: 30%;
text-align: center;
text-transform: uppercase;
>
Эффект полупрозрачного текста с наложением слоев
Для эффекта надо добавить всего лишь 4 свойства для селектора h1.
Цвет текста делаем белым и полупрозрачным.
Создаем тень для заголовка
Создаем нижнюю тень для блока h1
Это придаст небольшую объемность всей композиции.
Смешиваем слои, теперь нижний слой с фотографией чётко проглядывает сквозь полупрозрачный текст, не перекрывая его. Красота эффекта напрямую будет зависеть от выбранного изображения и шрифта.
Поддержка браузерами
Свойство mix-blend-mode, поддерживается всеми современными браузерами, за исключением Internet Explorer и Edge. Однако Microsoft реализацию поддержки включил в список «на рассмотрении» для Edge. Поэтому у нас есть надежда, на скорейшую полную поддержку всеми браузерами.
Код полупрозрачного текста на фоне:
Для систематического изучения HTML5 и CSS3, будет полезным пройти мой видеокурс.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
How to change text transparency in HTML/CSS?
However, I’m not sure how to change its opacity. I’ve tried looking online, but I’m not sure exactly what to do with the code I find.
10 Answers 10
opacity applies to the whole element, so if you have a background, border or other effects on that element, those will also become transparent. If you only want the text to be transparent, use rgba .
Also, steer far, far away from <font> . We have CSS for that now.
Check Opacity, You can set this css property to the div, the <p> or using <span> you want to make transparent
And by the way, the font tag is deprecated, use css to style the text
Edit: This code will make the whole element transparent, if you want to make ** just the text ** transparent check @Mattias Buelens answer
Just use the rgba tag as your text color. You could use opacity , but that would affect the whole element, not just the text. Say you have a border, it would make that transparent as well.
Your best solution is to look at the «opacity» tag of an element.
So in your case it should look something like :
However don’t forget the tag isn’t supported in HTML5.
You should use a CSS too 🙂
What about the css opacity attribute? 0 to 1 values.
But then you probably need to use a more explicit dom element than «font». For instance:
As an additional information I would of course suggest you use CSS declarations outside of your html elements, but as well try to use the font css style instead of the font html tag.
For cross browser css3 styles generator, have a look at http://css3please.com/
Easy! after your:
you just have to change the ".6" for a decimal number between 1 and 0
There is no CSS property like background-opacity that you can use only for changing the opacity or transparency of an element’s background without affecting the child elements, on the other hand if you will try to use the CSS opacity property it will not only changes the opacity of background but changes the opacity of all the child elements as well. In such situation you can use RGBA color introduced in CSS3 that includes alpha transparency as part of the color value. Using RGBA color you can set the color of the background as well as its transparency.