В этой статье мы будем рассматривать работу с текстом в Photoshop для верстальщика, хотя, возможно, она пригодится и дизайнерам, которые только начинают работать с PSD-макетами.
Для того чтобы создавать текст в Photoshop, на палитре Инструментов (Tools), которая обычно находится слева, выберите инструмент Текст (Type Tool). Также он вызывается английской клавишей T и имеет такую же иконку . Это не один инструмент, а группа, из которой чаще всего используется инструмент Горизонтальный текст (Horizontal Type Tool), т.к. большинство языков мира предполагают горизонтальное написание текста слева направо или справа налево. Есть еще инструмент Вертикальный текст (удобен для японского языка, например, или для создания каких-либо декоративных или поясняющих надписей) и два инструмента, создающие вертикальный и горизонтальный текст-маску (Vertical и Horizontal Type Mask Tool), который мы рассмотрим чуть ниже.
Для просмотра всех инструментов группы нужно нажать на инструмент Текст и удерживать некоторое время курсор в таком состоянии, сделать правый клик на иконку инструмента или щелкать по ней при зажатой клавише ALT
, пока не появится нужный инструмент.
Текстовый инструмент в Photoshop автоматически создает особый текстовый слой в палитре Слои (Layers), которая обычно находится справа внизу или по центру. Обычно названием слоя является тот текст, который на нем размещен или часть этого текста, если он большой.
Виды текстовых блоков в Photoshop
При создании текстовых блоков в Photoshop можно сделать клик инструментом Текст (Text). В этом случае вы будете набирать текст от той точки, в которой сделали клик в одну строку до тех пор, пока не остановитесь или не нажмете клавишу Enter. В результате получим текст, который чаще всего применяется в заголовках, т.к. много текста в них, как правило, не бывает. В Photoshop CC 2019 у вас возникает сразу выделенный шаблонный текст Lorem Ipsum, который исчезнет, если вы начнете набирать свой текст.
Вторым вариантом при наборе текста является создание текстового блока. В этом случае с помощью инструмента Текст вы растягиваете прямоугольную рамку, которая имеет либо произвольную, либо вполне конкретную ширину и высоту (например, она располагается между направляющими) и вводите в нее текст, который по достижении края рамки автоматически переносится на новую строку. По умолчанию Photoshop CC 2019 предлагает вам опять-таки шаблонный текст Lorem Ipsum, но уже с большим количеством слов. Размер текстового блока вы можете регулировать с помощью 8 маркеров, размещенных по углам и в середине каждой из сторон габаритной рамки. Если текста больше, чем может поместиться внутри данной рамки, Photoshop сообщит вам об этом в виде красного плюсика в нижнем правом углу, как на скриншоте ниже. Вы можете увеличить размеры текстового блока или изменить настройки шрифта (размер шрифта или межстрочное расстояние), чтобы весь текст поместился в заданные направляющими размеры. Для ряда макетов это будет важным, хотя следует учитывать, что далеко не всегда при добавлении текста, предоставленного заказчиком, вы сможете уложиться в заданный размер без потери качества внешнего вида и без головной боли верстальщика в дальнейшем.
Для выделения определенного текста в Photoshop CC 2019 можно сделать двойной клик на текстовом блоке (заголовочном тексте) и попасть внутрь этого блока для его редактирования. В 2019-й и предыдущих версиях Photoshop можно дважды кликнуть на иконке слоя в виде буквы T. При этом будет выделен весь текст, относящийся к этому слою.
Подтвердить ввод текста можно нажатием клавиш CTRL + Enter
или толькоEnter
на цифровой клавиатуре, а отменить - нажатием на клавишу ESC
. В палитре Options есть 2 кнопки - для отмены и подтверждения ввода текста.
Настройки Photoshop для текста
Как только вы выбираете инструмент Текст, в палитре настроек (Options) вверху вы увидите шрифтовые настройки:
- поле для выбора шрифта (соответствует css-свойству
font-family
). Если вы выбирали несколько разных шрифтов, Photoshop отобразит вам их в начале списка. Это удобно, т.к. всегда можно быстро вернуться к одному из них; - поле для выбора типа шрифта (соответствует css-свойствам
font-weight
и/илиfont-style
): Regular -обычный шрифт, Bold - жирный, Italic - курсивный, Bold Italic - жирный и курсивный. В зависимости от того, какие варианты этого шрифта существуют в вашей системе, в списке могут быть еще такие варианты, как Light - тонкий, Condenced - плотный, Semibold - полужирный и т.п. - размер шрифта (соответствует css-свойству
font-size
); - антиалиасинг, т.е. сглаживание шрифта (стоит оставить по умолчанию);
- выравнивание текста (соответствует css-свойству
text-align
); - прямоугольник для выбора цвета текста (соответствует css-свойству
color
), щелчок по которому приводит к открытию окна Color Picker для точного указания цвета. В нем можно ввести цвет в 16-ричном формате, если у вас есть такая необходимость, или выбрать "на глаз". - в конце палитры Options размещаются кнопки отмены (перечеркнутый кружок) и подтверждения (галочка) ввода текста. Подтвердить ввод текста также можно нажатием на клавиши
CTRL + Enter
, отменить ввод или выйти вообще из режима ввода текста можно клавишейESC
.
В палитре Properties (Свойства), которая расположена обычно справа вверху или посередине вы увидите повторение настроек из палитры Options. В этой палитре вы также можете менять различные свойства при выделенном текстовом слое или части текста.
Палитры Символ (Character) и Параграф (Paragraph)
Помимо палитр Options (Настройки) и Properties (Свойства) в Photoshop для управлением текстом существуют еще 2 палитры: Символ (Character) и Параграф (Paragraph), которые вызываются нажатием на клавиши CTRL +T
или через главное меню Window (Окно) или кликом по кнопке в палитре Options, когда вы набрали или выделили текст. Они имеют большее количество настроек, которые, соответственно, относятся к управлению начертанием текста и размещением параграфов, т.е. отдельных его блоков. Для использования этих палитр должны быть выделены либо часть текста, либо текстовый слой. Часть настроек совпадает с уже рассмотренными, поэтому остановимся на неизвестных.
В палитрtt Символ (Character) стоит обратить внимание на настройку в виде иконки, показывающей расстояние между двумя строчками. В CSS ей соответствует свойство line-height
. В случае значения auto
, как на скриншоте, значение этого свойства составляет 120%, а вот при других значениях его нужно либо указывать в пикселях, либо рассчитывать в процентах на основе размера шрифта.
Важно также обращать внимание на строку с кнопками в виде различных букв T - во включенном (нажатом) состоянии они будут соответствовать таким свойствам, как font-weight: bold
, font-style: italic
, text-transform: uppercase
, vertical-align: super и sub
, а также text-decoration: underline и line-through
.
В палитре Параграф (Paragraph), которая размещена рядом с Character, можно посмотреть на выравнивание текста (свойство text-align
), отступы слева и справа (padding-left и padding-right
), красную строку, т.е. отступ первой строки текста (text-indent
). В самом низу может стоят флажок Hyphenate (Перенос), который отвечает за переносы длинных слов в тексте на следующую строку и может быть использовано в css-свойстве hyphens
, которое, к сожалению, поддерживается пока не всеми браузерами. Интересно, что все эти свойства с точки зрения блочной модели браузера можно выставить только для блочных элементов, к строчным они не могут быть применены. И палитра Параграф отвечает также за блоки текста.
Текст-маска
Текст-маска в Photoshop скорее удобен для дизайнеров, чем для верстальщиков, т.к. представляет собой по сути выделение на основе текста. Когда вы выбираете этот инструмент из группы инструментов Текст, при первом клике на фоновом слое в Photoshop вы получаете красную полупрозрачную заливку, аналогичную быстрой маске (Quick Mask) - одному из видов выделений в Photoshop. Но, в отличие от стандартной быстрой маски здесь вы не работаете кисточкой, а имеете возможность сразу набрать текст.
Как только набирать текст вы закончили, нажмите CTRL + Enter
и увидите, как ваш текст превратился в выделение. Никакого текстового слоя при использовании этого инструмента создано не будет. Чаще всего такой текст-маску используют, чтобы сделать либо растровую маску слоя, либо для того, чтобы скопировать то, что попало в выделение на новый слой (клавиши CTRL +J
).
Растровая маска слоя
Для того чтобы создать из нашего выделения растровую маску слоя, необходимо внизу палитры Слои (Layers) сделать клик на 3-ей слева кнопке . Adobe Photoshop самостоятельно разблокирует фоновый слой и превратит его в обычный с именем Слой 0 (Layer 0) + создаст маску по нашему выделению. Эта маска скрывает те области, которые не попали в выделение, поэтому на скриншоте внизу мы видим пиксели фоновой картинки только в пределах нашего текста-выделения.
Обратите внимание, что иконка слоя поменялась - к ней добавился черный прямоугольник с белым текстом. В данном случае белым цветом Photoshop показывает те области маскируемой картинки, которые мы видим, а черным - те, которые спрятаны. Если для маски использовать такой инструмент, как кисть (Brush, вызывается клавишей B
), то можно увеличить область видимой части, рисуя белым цветом, и напротив, скрыть что-либо, рисуя черным цветом.
Изменения в маске слоя в большей степени вам могут пригодится, как дизайнерский элемент. Их можно сохранить, как картинку и вставить в тег <img>
на сайт или использовать в css-свойстве background-image
. Ниже можно увидеть скриншот, в котором с помощью маски почти стерты первая и последняя буквы в слове STREET и к каждой букве добавлены мазки кистью.
Когда маска слоя уже создана, ею можно управлять в палитре Properties (Свойства). Чтобы элементы управления были доступны, нужно кликнуть на саму маску. Затем кнопками внизу палитры Properties вы можете отключить или удалить саму маску или замаскированную область. Скорей всего, вам эти функции, как верстальщику, вряд ли понадобятся.
Можно также добавить какой-либо слой под нашу маску, например, с радиальным градиентом, и посмотреть, как будет выглядеть текст на таком фоне.
Минусом создания растровой маски слоя с помощью текста-маски является невозможность редактирования самого текста после того, как вы получили выделение на его основе.
Создание обтравочной маски (Clipping Mask) в Photoshop
Еще одной маской, которую очень любят создавать в Photoshop дизайнеры, является обтравочная маска (Clipping Mask). Для того, чтобы ее сделать, нам понадобится инструмент Горизонтальный текст. Кроме того, фоновый слой (Background), который по умолчанию имеет наше открытое изображение, нужно сначала превратить в обычный слой. Фоновый слой является заблокированным, о чем свидетельствует значок в виде замка справа от его названия, поэтому необходимо снять эту блокировку, т.к. слой с картинкой мы будем перемещать. Для этого в палитре Слои (Layers) сделайте двойной клик рядом с именем слоя.
Теперь переместим слой с изображением выше слоя с текстом и сделать ALT + клик
между слоями. В результате мы получим отображение картинки в пределах текстового слоя. Визуально об этом нам сообщит и Photoshop: в палитре Слои (Layers) на слое с картинкой появится стрелка вниз, которая говорит о взаимосвязи двух слоев.
В отличие от растровой маски слоя, текст можно редактировать. Можно также добавить к нему каких-либо эффектов слоя, например, тень. Кстати, эффекты слоя можно добавлять к любому тексту, необязательно при этом использовать маски.
Для того чтобы тень была более заметной, добавим еще один слой с белой заливкой и перетащим его в самый низ.
Текст-маска с помощью CSS-свойства background-clip: text
На данный момент текст-маску можно легко реализовать на html-странице с помощью свойства background-clip: text
, причем неважно, каким способом в Photoshop ее сделал дизайнер. В примере ниже текст внутри заголовка первого уровня является редактируемым, как в случае обтравочной маски (кстати, само свойство также содержит слово clip: background-clip - Clipping Mask), и выглядит примерно так же, как на наших скриншотах. Заметна может быть лишь разница в шрифтах на разных компьютерах в зависимости от установленного на них набора шрифтов, но ради одного примера не хотелось загружать дополнительный шрифт Showcard Gothic.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <style> .mask-text { background: url(//html-plus.in.ua/wp-content/uploads/2019/04/street-2.jpg) no-repeat center; background-size: cover; color: #fff; font-family: Showcard Gothic, fantasy; font-size: 7em; text-transform: uppercase; text-align: center; text-shadow: 0px 14px 16.74px rgba(0, 0, 0, 0.54); padding: 1em; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style> ------------------------ <div class="mask-text"> <h1>My Street</h1> </div> |
На данный момент поддержка свойства background-clip: text
весьма внушительна по данным сайта caniuse.com, поэтому можно смело использовать этот код, не забыв добавить префикс -webkit-
для браузеров Chrome и Safari, а также свойство -webkit-text-fill-color: transparent
.
Пример ниже - это уже не картинка, а код, поэтому можете выделить текст курсором мыши.
My Street
О других способах создания текста-картинки можно прочитать в статье "Техника создания текстурного текста".
Растрирование текстового слоя
Инструмент Текст создает особый слой, который в любой момент может быть отредактирован в плане изменения как всего текста, так и его части. Но иногда бывают ситуации, когда текст нужно превратить в обычный слой, например, у вас нет другого способа подключить шрифт, кроме как вставить картинку с ним, т.к. шрифт, использованный дизайнером, отсутствует в вашей системе. В этом случае вам нужно использовать растрирование слоя, т.е. превращение букв в обычные пиксели, как на любой картинке.
Чтобы растрировать слой, сделайте правый клик рядом с названием слоя, а затем выберите пункт "Растрировать текст" (Rasterize Type). Обратите внимание, что слой после этого изменил свою иконку: вместо буквы T - обычный полупрозрачный слой. После этого вы можете сделать экспорт этого слоя в формате PNG, чтобы потом использовать на html-странице.