Как сделать горизонтальное меню с наклоном? Создаем наклонный текст в фотошопе.

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

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

Оба этих функционала содержат один и тот же инструмент (опцию) «Нарисовать надпись». Раскроем содержание функционала «Фигуры» и посмотрим, где находится инструмент «Нарисовать надпись»:

Итак, инструмент «Нарисовать надпись» находится в разделе набора фигур «Основные фигуры». Если мы однажды воспользовались данным инструментом или какой-то фигурой, то эти фигуры отражаются в верхнем разделе, с названием «Последние использованные фигуры».

Теперь, не покидая вкладку «Вставка», переместим курсор мыши в её раздел «Текст» и нажмём значок «Надпись» и в открывшемся окне обратим внимание на опцию «Нарисовать надпись»:

Это и есть всё тот же инструмент. Так что, мы имеем два варианта активизации инструмента, каким бы мы путём не пошли. Подтверждением активности инструмента «Нарисовать надпись» будет видоизменение курсора - он превратится в перекрестие из двух маленьких линий:

Нажав и удерживая левую кнопку мыши, создадим поле для текста, - нарисуем прямоугольник. Курсор автоматически окажется внутри прямоугольника, и мы можем начать ввод текста:

Итак, ввод текста завершён, можно начинать его поворачивать:

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

В тот момент, когда мы закончили рисовать поле для будущего текста и отпустили левую кнопку мыши, в верхнем меню произошли существенные изменения. Совершенно самостоятельно (автоматический режим) на смену опциям вкладки «Вставка» пришли другие опции другой вкладки «Формат»:

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

Для чего же нам делать поле невидимым? А для того, чтобы в случае написании текста на фоне с цветом отличным от белого рабочая область поля не была видна.

Итак, сделаем поле прозрачным, воспользовавшись некоторыми опциями вкладки верхнего меню «Формат». Наша задача сделать поле действительно прозрачным (сейчас оно белого цвета) и убрать его контур.

Начнём с удаления контура. Для этого раскроем содержание опции «Контур фигуры» и в перечне выберем вариант «Нет контура»:

Теперь сделаем поле прозрачным, то есть заливку белым цветом сведём к нулю. С этой целью выберем опцию «Заливка фигуры» и в раскрывшемся перечне вариантов, выберем вариант «Нет заливки»:

Такой вариант не всегда может нас устроить, по той причине, что под «нет заливки» подразумевается отсутствие заливки цветом отличным от белого цвета, а также градиентной заливки и заливки текстурой. То есть, поле, как было белого цвета, таким оно и осталось. В данном конкретном случае это ненужное действие. Сейчас я размещу под текстом треугольник, и мы в этом убедимся:

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

Если поле текста не выделено, то щелчком мыши в области текста, выделим его (поле захватили маркеры). Щелчком левой кнопки мыши по стрелочке в нижнем правом углу раздела «Стили фигур» вкладки «Формат», развернём окошко дополнительных настроек поименованное «Формат фигуры»:

В этом окошке отображаются те настройки, которые имеет поле на текущий момент. К полю применена сплошная заливка белым цветом на 100%, так как уровень прозрачности равен 0%:

Для того чтобы поле стало абсолютно прозрачным, нам необходимо передвинуть ползунок прозрачности вправо до появления в строке-окошке значения равного 100%. Если ползунок перемещать плавно, то мы можем наблюдать за тем, как поле текста становится всё более прозрачным:

Установив значение уровня прозрачности 100%, нажмём кнопку «Закрыть»:

И вот результат наших действий:

Теперь перейдём к повороту текста, а так же его наклону.

Для того чтобы вертеть текст так, как нам только того захочется, мы должны, не покидая и не сворачивая вкладку «Формат» верхнего меню, обратиться к опции «Эффекты фигур»:

И в открывшемся перечне действий выбрать пункт «Поворот объёмной фигуры»:

Нам откроется новое окошко детализации, где мы остановим свой выбор на пункте «Параметры поворота объёмной фигуры»:

И вот, наконец-то, мы добрались до окна настройки параметров:

В строках, где сейчас мы видим нулевые значения углов поворота текста по осям X, Y, Z, мы устанавливаем нужные значения, наблюдая за тем, как поворачивается или наклоняется текст. Мы можем устанавливать углы по всем трём осям координат, двум или одной. А можем воспользоваться значками с синими стрелочками, расположенными в два столбика правее строк ввода цифр (значений улов наклона и поворота). Всё что мы должны делать, так это щелкать левой кнопкой мыши по этим самым значкам и смотреть на то, что происходит с текстом:

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

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

И это нужное окошко к нашим услугам:

И чтобы мы могли начать установку параметров, нам нужно выбрать уже знакомую опцию «Поворот объёмной фигуры»:

Нам вовсе не обязательно вписывать значения углов в какие-то строки осей координат или щёлкать значки с синими стрелками правее строк ввода значений. Мы можем воспользоваться заготовками, набор которых расположен в верхней части окна настроек параметров:

Давайте щелчком левой кнопки мыши по стрелочке-кнопке развернём перечень заготовок и будем выбирать то одну, то другую заготовку, одновременно наблюдая за тем, как ведёт себя текст. Я сделаю ориентацию страницы альбомной и увеличу размер шрифта для лучшей видимости происходящих изменений:

Щёлкая стрелочками «вверх» и «вниз» мы можем делать текст в перспективе:

Если, например, по оси Х мы установим значение 180 градусов, то наш текст будет «задом наперёд»:

Для дополнительного воздействия на текст, мы, в этом же окошке, можем воспользоваться опцией «Надпись»:

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

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

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

Способ 1: палитра Символ

Об этой палитре подробно рассказано в уроке по редактированию текста в Фотошопе. Она содержит различные тонкие настройки шрифтов.

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

Способ 2: Наклон

В данном способе используется функция свободного трансформирования под названием «Наклон» .

1. Находясь на текстовом слое, нажимаем сочетание клавиш CTRL+T .

2. Кликаем ПКМ в любом месте холста и выбираем пункт «Наклон» .

3. Наклон текста производится при помощи верхнего или нижнего ряда маркеров.

Изогнутый текст

Для того чтобы сделать изогнутый текст, нам понадобится рабочий контур, созданный при помощи инструмента «Перо» .

1. Рисуем Пером рабочий контур.

2. Берем инструмент «Горизонтальный текст» и подводим курсор к контуру. Сигналом к тому, что можно писать текст, является изменение вида курсора. На нем должна появиться волнистая линия.

3. Ставим курсор и пишем необходимый текст.

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

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

Функции фотошопа не ограничены обработкой графических файлов. Данная программа также имеет большое количество встроенных инструментов для работы с текстом. Иногда перед пользователем стоит задача – наклонить буквы. Какими способами можно это сделать? Как наклонить текст в фотошопе?

Решить отмеченную задачу, в принципе, вполне реально разными способами. Чаще всего осуществление рассматриваемого действия – «наклон» текста – предполагает:

При этом отмеченные методы наклона текста могут задействоваться в различных сочетаниях. Изучим особенности их использования подробнее. Для этого мы будем задействовать программу Photoshop в версии CS6 – одну из самых распространенных в России и в мире, с английским интерфейсом.

Написание текста в фотошопе курсивом

Как известно, компьютерный шрифт, применяемый при создании текстов, может отображаться на экране в таких вариантах:

• обычный;
• полужирный;
• наклонный – курсив;
• подчеркнутый.

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

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

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

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

Наклон букв при горизонтальном положении текста

Популярен способ наклона текста, который предполагает соответствующую трансформацию букв при сохранении горизонтального положения слов. В фотошопе для этого нужно задействовать инструмент Rectangular Marquee Tool. Располагается он вторым сверху в панели инструментов, расположенной слева.

Выбрав соответствующий инструмент, следует навести мышку примерно на середину текста, кликнуть правой кнопкой и выбрать опцию Free Transform. После того как вокруг текста появится рамка, надо вновь кликнуть на нем правой кнопкой и выбрать опцию Skew.

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

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

При этом сохранится вертикальная ориентация букв.

Поворот слова

Следующая возможность, которая нередко пригождается пользователю, – поворот текста. Для того чтобы задействовать ее, необходимо вновь выбрать инструмент Rectangular Marquee Tool, кликнуть на тексте правой кнопкой, нажать на Free Transform, а затем – Rotate.

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

Отображение текста в виде фигуры

Еще один вариант «наклона» текста – его синхронизация с контурами некоторой фигуры. Для того чтобы задействовать данную возможность в фотошопе, следует выбрать инструмент Text, выделить слово, после – кликнуть на значке Create Warped Text, располагающемся справа от основных атрибутов шрифта.

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

С помощью опций Bend, Horizontal Distortion и Vertical Distortion можно тем или иным образом трансформировать «флаг», а также, соответственно, текст, который с ним синхронизирован.

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

Задача

Сделать горизонтальное меню, пункты которого имеют произвольный наклон (рис. 1).

Рис. 1. Вид меню с наклонными пунктами

Решение

За трансформацию элемента отвечает стилевое свойство transform , в качестве его значения используется функция skewX , которая и задаёт нужный наклон. Угол наклона проще устанавливать в градусах, к примеру, 30deg - это 30º от вертикали. Трансформация действует и на все дочерние элементы, поэтому текст внутри элемента также будет наклонён, что не лучшим образом отражается на его читабельности и красоте. Поэтому к тексту важно ещё раз применить наклон, но уже в другую сторону, для этого достаточно просто поменять знак перед значением градусов.

Браузеры поддерживают свойство transform преимущественно со своими префиксами, так что для универсальности в стилях следует повторить его несколько раз с одним и тем же значением, добавляя -moz- для Firefox, -webkit- для Safari и Chrome, -o- для Opera и -ms- для браузера Internet Explorer как показано в примере 1.

Пример 1. Наклон пункта меню

HTML5 CSS3 IE Cr Op Sa Fx

• Джокер
• Пазузу
• Палпатин
• Доктор Дум

В данном примере горизонтальное меню создаётся с помощью маркированного списка. Чтобы список был именно горизонтальным, в стилях к элементу li добавляется свойство display со значением inline-block . Для наклона применяется свойство transform с функцией skewX и значением -30º. К ссылкам внутри списка также применяется это свойство, но уже с положительным значением 30º, это обеспечивает правильное, а не наклонное отображение букв.

Браузеры Chrome, Safari и Firefox используют свойство transform для блочных или строчно-блочных элементов, поэтому для ссылок задано свойство display со значением block .