Как рисовать символы в фотошопе
В первых двух уроках по работе с текстом в Фотошоп мы изучили, как добавлять текст строкой, когда объем текста небольшой, и как добавлять текст в область, когда необходимо разместить текст на нескольких строках. В обоих уроках мы рассмотрели, что независимо от того какой способ текста выбран, панель настроек в верхней части экрана предоставляет нам быстрый доступ к наиболее часто используемым опциям, таким как выбор шрифта, цвета текста и т.д.
Программа Фотошоп также включает в себя расширенные опции текста, но их на панели настроек найти нельзя. В действительности, они расположены на панелях «Символ» (Character) и «Абзац» (Paragraph). В этом уроке мы изучим панель «Символ», а в следующем уроке мы рассмотрим дополнительные опции на панели «Абзац»
Доступ к панели «Символ»
Для того чтобы получить доступ к панели «Символ», необходимо выбрать раздел «Окно» (Window) на панели настроек в верхней части экрана, в результате чего откроется перечень доступных для нас панелей, и далее кликнуть по названию «Символ» (Character). Галочка слева от названия панели будет означать, что панель уже где-то открыта на вашем экране.
Выбираем «Окно» > «Символы»
Также можно получить доступ к панели при выбранном инструменте «Горизонтальный текст» (Type Tool), кликнув по значку переключения между панелями на панели настроек:
Кликните по значку переключения между панелями «Символ» и «Абзац»
Любой из вышеуказанных способов откроет панель «Символ» и одновременно панель «Абзац», поскольку они сгруппированы в одном месте. Мы можем переключаться между панелями, кликая по их заголовкам в верхней части панельной группы. По умолчанию, открывается и активна панель «Символ».
Выбор шрифта и цвета текста
Панель «Символ» напоминает расширенный вариант панели настроек, поскольку большинство тех же самых опций, которые расположены на панели настроек, также можно найти и на панели «Символ» (я сказал «большинство», поскольку одна из опций находится на панели «Абзац», а не на панели «Символ», как мы узнаем из следующего урока). Так, панель настроек позволяет нам выбрать шрифт, начертание и размер шрифта:
Опции выбора шрифта, начертания и размера шрифта на панели настроек
Те же самые опции: шрифт, начертание и размер шрифта – можно найти на панели «Символ». Поэтому нет никакой разницы, где вы будете с ними работать – на панели настроек или на панели «Символ»:
Те же опции выбора шрифта, начертания и размера шрифта на панели «Символ»
Подобным образом мы можем выбрать цвет для нашего текста, кликнув по образцу цвета на панели настроек:
Опция выбора цвета текста на панели настроек
Или мы можем кликнуть по образцу цвета на панели «Символ». И снова, неважно – какую панель вы выберете, в любом случае в результате этого действия откроется палитра цветов, где вы сможете выбрать нужный цвет для вашего текста
Та же опция выбора цвета текста на панели «Символ»
Сглаживание
Опция, которую мы с вами еще не рассмотрели, но которая также присутствует и на панели настроек, и на панели «Символ» – это «Сглаживание» (Anti-Aliasing). На панели настроек она расположена справа от опции размера шрифта:
Опция «Сглаживание» на панели настроек
На панели «Символ» опция «Сглаживание» расположена в правом нижнем углу:
Та же опция «Сглаживание» в правом нижнем углу панели «Символ»
Опция «Сглаживание» используется для того, чтобы края букв не выглядели острыми. Без любой из форм сглаживания большинство букв будет выглядеть с заостренными краями. В моем случае, я приблизил верхнюю половину букву S без примененной опции сглаживания. Обратите внимание на ее острые и иззубренные края:
Без применения опции сглаживания края букв могут выглядеть угловато
И наоборот после применения опции сглаживания края букв выглядят округло. В действительности, программа Фотошоп добавляет по краям букв дополнительные пиксели, для того чтобы сгладить переход между цветом текста и цветом заднего фона:
Та же буква после применения опции сглаживания
Программа предоставляет нам различные способы сглаживания, из которых можно выбрать нужный (Резкое (Sharp), Четкое (Crisp), Насыщенное (Strong) и Плавное (Smooth)), и каждый из данных способов по-разному повлияет на сглаживание букв вашего текста. По умолчанию, задан способ «Резкое», который я редко меняю на какой-либо другой, однако не стесняйтесь попробовать в работе и другие методы и выбрать тот, который подойдет Вам наилучшим образом.
Различные методы сглаживания. По умолчанию, выбран способ «Резкое», который работает достаточно хорошо
Интерлиньяж
Одна из опций, которую можно найти только на панели «Символ» – это опция «Интерлиньяж» (Leading), которая регулирует отступ между строками текста. По умолчанию, эта опция установлена на «Авто» (Auto):
Опция «Интерлиньяж» доступна только на панели «Символ»
Иногда можно оставить опцию «Интерлиньяж» со значением «Авто», и результаты будут достаточно неплохи, но если вам потребуется отрегулировать расстояние между строками, то вы сначала должны убедиться, что у вас выбран текстовый слой на панели слоев и далее либо внести новое значение отступа вручную в окошко ввода данных, либо выбрать из списка предлагаемых значений от 6 до 72 пикселей нужное. Ниже приведен образец теста с применением опции «Интерлиньяж»
Пара строк текста с использованием опции «Интерлиньяж»
При выборе параметра «Авто» программа устанавливает значение межстрочного отступа равным 120% от размера шрифта. Я уменьшу значение до 36 пикселей, что примерно равно размеру моего шрифта:
Устанавливаем значение интерлиньяжа равным размеру шрифта
Уменьшив значение межстрочного интервала, мы получаем более скученные строки текста:
Строки текста стали более скученными
Общее правило применения опции «Интерлиньяж» - это выбрать значение, которое позволит выглядеть вашему тексту естественно и быть легко читаемым. Во многом, это будет зависеть от выбранного шрифта. Если Вам кажется, что отступ между строками слишком большой или маленький, отрегулируйте расстояние нужным образом с помощью данной опции.
Применение динамических ползунков
Прежде чем мы продолжим рассматривать другие опции на панели «Символ», мне хотелось бы отметить одну вещь – если вы работаете в программе версии Photoshop CS или выше, то очень удобно регулировать опции на панели «Символ» (также как и на панели «Абзац», и панели настроек) с помощью динамических ползунков. Они позволяют нам изменять значения параметров путем простого перемещения мышки!
Для того чтобы получить доступ к динамическому ползунку, переместите курсор мыши на иконку опции с левой стороны от окошка ввода данных. Не все опции могут работать с динамическими ползунками, но, если это возможность доступна, ваш курсор мышки примет вид значка динамического ползунка – появится рука, указательный палец которой вытянут вперед, и от него влево и вправо расходятся маленькие стрелки. После появления иконки ползунка, нажмите и удерживайте нажатой кнопку мышки, при этом переместите мышку влево или вправо. По мере перемещения мышки, значение в окошке ввода данных начнет меняться. Этот способ изменения значения опций намного удобнее и быстрее, чем ввод значений вручную, особенно когда вы не знаете точно, какое значение опции вам нужно:
Многие параметры в Фотошопе можно отрегулировать с помощью динамических ползунков
Трекинг
Трекинг (Tracking) – еще одна опция, которую можно найти только на панели «Символ». Она регулирует расстояние между буквами или символами и расположена прямо под опцией «Интерлиньяж». По умолчанию ее значение равно 0.
Трекинг отвечает за расстояние между символами или буквами в строке
Для того чтобы задать значение трекинга, вы можете кликнуть по треугольнику справа от окошка ввода данных и выбрать из перечня появившихся значений нужное. Также вы можете ввести значение вручную или вы можете кликнуть кнопкой мыши, удержать ее нажатой до момента преобразования курсора в иконку ползунка и переместить мышку влево или вправо, о чем я рассказывал ранее. Используя отрицательные значения трекинга, вы сблизите буквы или символы, положительные же значения позволят вам растянуть буквы дальше друг от друга.
Для того чтобы применить трекинг ко всему тексту на текстовом слое за раз, просто выберите текстовый слой и введите нужное значение трекинга на панели «Символ». Или, вы можете сначала выделить часть текста и затем применить трекинг только к определённому ряду букв. В моему случае, я выбрал слово "space" (примечание переводчика: с англ. «расстояние») в предложении, два раза кликнув по нему кнопкой мышки при выбранном инструменте «Горизонтальный текст» (Type Tool), далее я увеличил значение трекинга, расширив интервалы между буквами слова, не изменяя другую часть предложения:
Трекинг можно использовать для регулирования расстояния между буквами как во всем тексте, так в отдельных словах
Кернинг
«Кернинг» (Kerning) – опция, которую тоже можно найти только на панели «Символ». Она расположена слева от опции «Трекинг» и по умолчанию установлена на «Метрический» (Metrics) (далее я объясню термин «Метрический»). Кернинг отвечает за расстояние между двумя отдельными буквами или символами:
Кернинг регулирует расстояние между двумя отдельными символами
Кернинг и трекинг часто путают друг с другом, потому что они кажутся похожими опциями, хотя, в действительности, они совершенно различны. В то время как трекинг отвечает за расстояние между рядом символов, кернинг контролирует промежуток между двумя отдельными символами. Можно запомнить таким образом: трекинг своего рода «глобальная» настройка для межбуквенного расстояния, а кернинг – «локальная» настройка.
Поскольку кернинг отвечает за расстояние между двумя отдельными буквами, опция не активна и подсвечена серым цветом до тех пор, пока вы после выбора инструмента «Горизонтальный текст» не разместите курсор между двумя символами в тексте (с этого момента неактивной становится опция «Трекинг», так как она работает только с рядом символов):
Опция «Кернинг» становится доступной только, когда мы помещаем наш курсор между двумя символами
Как я уже упоминал, по умолчанию, значение опции «Кернинг» задано на «Метрический» (Metrics). Это означает, что программа использует информацию о буквенных интервалах, которая была задана при разработке шрифта. Часто этот параметр дает нам наилучший результат, хотя он будет зависеть от качества шрифта, который вы применяете. Если вы нажмете на треугольник справа от окошка ввода данных опции «Кернинг», чтобы посмотреть перечень возможных значений, вы увидите, что доступно еще одно значение ниже значения «Метрический» - «Оптический» (Optical). Вместо того, чтобы положиться на информацию разработчика, этот параметр будет регулировать расстояние между буквами исходя из формы двух символов. И опять, результат будет зависеть, в основном, от самого шрифта, а не от того, какое значение вы зададите – «Метрический» или «Оптический».
Вы также можете выбрать одно из предложенных значений в списке, или ввести его вручную, или воспользоваться динамическим ползунком.
Масштаб по вертикали и масштаб по горизонтали
Под опциями «Кернинг» и «Трекинг» на панели «Символ» находятся опции «Масштаб по вертикали» (Vertical Scale) (слева) и «Масштаб по горизонтали» (Horizontal Scale) (справа):
Опции масштаба по вертикали и по горизонтали
Эти опции можно использовать для масштабирования текста либо по вертикали, либо по горизонтали. Выбрав на панели слоев текстовый слой, мы приведем к единому масштабу весь текст целиком. Также мы можем сначала выбрать отдельные символы или буквы и уже потом задавать для них определенный масштаб, не влияя на остальной текст.
По умолчанию, оба параметра установлены на 100%, и зачастую использовать их для изменения масштаба текста не совсем удобно, так как может исказиться первоначальное начертание букв шрифта:
Опции «Масштаб по вертикали» и «Масштаб по горизонтали» искажают первоначальное начертание шрифта
Если вам нужно изменить масштаб вашего текста, воспользуйтесь лучше командой «Свободное трансформирование» (Free Transform)
Смещение базовой линии
Опция «Смещение базовой линии» (Baseline Shift) расположена прямо под опцией «Масштаб по вертикали» на панели «Символ»:
Опция «Смещение базовой линии» также доступна только на панели «Символ». Она позволяет нам перемещать выбранные символы или слова выше или ниже линии текста. По умолчанию, значение опции равно 0. Положительные значения приподнимут выделенный текст над строкой, в то время как отрицательные – отпустят его ниже линии текста. Выбора предварительных значений у данного параметра не существует, поэтому мы либо вводим значение вручную в окошко ввода данных, либо применяем динамический ползунок:
Выделите символы или слова и далее примените опцию «Смещение базовой линии», чтобы сместить их выше или ниже строки текста
Дополнительные текстовые опции
В нижней части панели «Символ» расположен ряд иконок, которые предоставляют нам доступ к дополнительным текстовым параметрам. Слева направо представлены следующие параметры: «Псевдополужирное» (Faux Bold) и «Псевдокурсивное» (Faux Italic). Они позволяют создавать имитацию полужирного начертания и начертания курсивом тех шрифтов, у которых такое начертание изначально не предусмотрено (хотя все-таки лучше выбирать другой шрифт, который имеет возможность применения полужирного начертания и курсива)
Опции «Псевдополужирное» и «Псевдокурсивное» позволяют применить имитацию полужирного начертания и курсива к тем шрифтам, которые такое начертание не предусматривают
Далее у нас есть опции «Все прописные» (All Caps) и «Капители» (Small Caps) для преобразования всех строчных букв в заглавные или малые заглавные буквы:
Используйте опции «Все прописные буквы» (слева) и «Капители» (справа), чтобы заменить строчные буквы заглавными или малыми заглавными
Следом идут опции «Надиндекс» (Superscript) и «Подиндекс» (Subscript)
И завершают список опции «Подчеркнутое» (Underline) и «Зачеркнутое» (Strikethrough):
Опции «Подчеркнутое» (слева) и «Зачеркнутое» (справа)
Выбор языка
И, наконец, в левом нижнем углу панели «Символ» у нас есть окошко выбора языка. Было бы замечательно, если бы программа Photoshop могла переводить текст с одного языка на другой, но, к сожалению, эта опция не позволяет сделать такое. Она предназначена для подтверждения того, что вы применяете правильное написание и перенос слов в языке, на котором вы работаете в программе. Как правило, вы можете оставить значение этой опции по умолчанию:
Убедитесь, что программа знает, на каком языке вы работаете посредством правильного написания и переноса слов
Восстановление панели «Символ»
Если вы внесли много изменений в опции на панели «Символ», вы можете быстро все сбросить и восстановить значения параметров по умолчанию, кликнув по иконке меню в правом верхнем углу панели «Символ»:
Кликните по иконке меню в правом верхнем углу
Далее выберите в появившемся меню команду «Восстановить панель «Символ» (Reset Character)
Выбираем из списка команду «Восстановить панель «Символ»
И вот мы закончили! В этом уроке мы рассмотрели опции, которые можно найти на панели «Символ», одни из которых также встречаются на панели настроек (когда выбран инструмент «Горизонтальный текст»), в то время как другие, такие как «Интерлиньяж», «Трекинг», «Кернинг» и «Смещение базовой линии», расположены только на панели «Символ». В следующем уроке мы рассмотрим оставшиеся текстовые опции, такие как «Выравнивание», «Выключка», «Отступ», которые находятся на панели «Абзац»!
Панель «Глифы» служит для вставки знаков пунктуации, надстрочных и подстрочных символов, символов валют, чисел, специальных символов, а также глифов из других языков в текст в Photoshop.
Чтобы вызвать панель, выберите Текст > Панели > Глифы или Окно > Глифы.
A. Недавно использованные слоты глифов | B. Выбор семейства шрифтов | C. Выбор начертания | D. Выбор категории шрифта | E. Слоты глифов | F. Уменьшение масштаба | G. Регулятор масштаба | H. Увеличение масштаба | I. Уменьшение масштаба глифов | J. Увеличение масштаба глифов |
- Чтобы ввести глиф в активном текстовом слое, выполните следующие действия.
- Выберите место вставки глифа с помощью инструмента Текст .
- Дважды щелкните глиф на панели Глифы .
- Панель Глифы поддерживает латинский, греческий и кириллический алфавит. Ограниченная поддержка иврита, арабской и других сложных письменностей, таких как индийская.
- Для каждого шрифта глифы упорядочиваются по разным категориям, таким как «Базовая латиница», «Расширенная латиница A», «Расширенная латиница B», «Цифры», «Валюты», «Символы» и многие другие.
- Глифы также упорядочены по тому, какие функции OpenType они поддерживают, например: «Альтернативы», «Орнаменты», «Расширенные лигатуры», «Числители», «Знаменатели», «Наборы стилей», «Моноширинные цифры», «Порядковые номера» и многие другие.
A. Категория шрифта | B. Сценарий | C. Функции OpenType
- Панель Глифы автоматически находит альтернативы для первого выделенного символа во фрагменте текста.
- Слоты глифов со сплошным черным прямоугольником в нижнем правом углу указывают на то, что для данного конкретного глифа имеются варианты. Эти варианты можно просмотреть во всплывающем меню. Чтобы открыть его, щелкните и удерживайте слот или щелкните его, удерживая клавишу Alt или Option. Перетащите указатель мыши на вариант глифа и отпустите его, чтобы вставить его в активный слой.
- Наведите курсор на слот глифа, чтобы получить конкретные сведения, включая идентификатор глифа, значение Юникод, функцию OpenType и имя Юникод этого глифа.
- Ползунок в нижней части диалогового окна позволяет увеличить или уменьшить размер глифов на панели.
- Меню шрифтов представляет собой развернутое меню, содержащее те же элементы, что на панели «Символ» и «Параметры». Однако поиск шрифтов не поддерживается.
- Когда несколько шрифтов находятся в выделенной области на слое «Текст», на панелях «Символ», «Параметры» и «Глифы» не отображается шрифт.
- С панелью «Глифы» можно работать и без инициализации текстового слоя.
Если вы работаете в текстовом слое, можно выбрать глиф для быстрого просмотра вариантов к прямо на холсте. При нажатии значка в таблице вариантов открывается панель «Глифы».
При необходимости это поведение можно отключить. Для этого выберите «Установки» > «Текст» и снимите флажок Включить варианты глифов текстового слоя .
По мере добавления глифов в документ они автоматически вносятся в строку недавно использованных глифов, которая находится вверху панели «Глифы». Строка недавно использованных глифов:
- может содержать до 25 различных символов. При превышении лимита в 25 символов новые глифы добавляются слева, а предыдущие удаляются справа.
- содержит одинаковые символы. Символы не меняются при запусках программы в различное время.
- сохраняет начертание глифа и не учитывает его начертания в панелях «Параметры», «Символ» и «Глифы».
- определяет размер точки, цвет и другие значения глифа согласно аналогичным значениям в панелях «Символ» и «Параметры».
Photoshop теперь поддерживает шрифты SVG, которые включают несколько цветов и градиентов в одном глифе. Photoshop включает шрифт EmojiOne SVG. Также поддерживается шрифт Apple Color Emoji на платформе macOS.
Выполните следующие действия, чтобы использовать шрифты SVG.
- Откройте панель «Глифы» ( Окно > Глифы ).
- В списке шрифтов выберите EmojiOne или Apple Color Emoji (только для macOS).
- Дважды щелкните символ шрифта SVG, чтобы добавить его в текстовый слой в документе.
Можно создать композицию из символов шрифта SVG для создания новых глифов. Например, можно создать флаги стран или изменить цвет кожи для глифов, изображающих одного человека. Многие комбинированные глифы также можно разложить на составляющие символы, нажав клавишу Backspace.
Можно задать атрибуты текста перед вводом символов или сбросить их, чтобы изменить внешний вид выделенных символов в текстовом слое.
Прежде чем форматировать отдельные символы, их надо выделить. Можно выделить один символ, диапазон символов или все символы в текстовом слое.
Чтобы быстро научиться работать с текстовыми функциями Photoshop, см. раздел Добавление слов на картинку.
Чтобы выбрать текстовый слой, выполните одно из следующих действий:
- Выберите инструмент «Перемещение» и дважды щелкните текстовый слой на холсте.
- Выберите инструмент «Горизонтальный текст» или «Вертикальный текст» . Выберите текстовый слой на панели «Слои» или щелкните текст на изображении для автоматического выбора текстового слоя.
- Перетаскиванием курсором мыши выделите один или несколько символов.
- Щелкните внутри текста начало выделения, а затем щелкните конец выделяемого диапазона, удерживая нажатой клавишу «Shift».
- Выберите меню «Выделение» > «Все», чтобы выбрать все символы в слое.
- Дважды щелкните слово, чтобы выделить его. Трижды щелкните строку, чтобы выбрать ее. Четырежды щелкните абзац, чтобы выбрать его. Щелкните пять раз в любом месте текста, чтобы выбрать все символы в ограничительной рамке.
- Для выделения символов с помощью клавиатуры, щелкните текст, а затем, удерживая нажатой клавишу «Shift», нажимайте клавиши со стрелками влево и вправо. Для выделения слов при помощи клавиатуры, удерживая нажатыми клавиши «Shift»+«Ctrl» (Windows) или «Shift»+«Command» (Mac OS), нажимайте клавиши со стрелками влево и вправо.
Чтобы выделить все символы в слое, не помещая в текст курсор вставки, выберите текстовый слой на панели «Слои», а затем дважды щелкните значок этого текстового слоя.
Выделение и форматирование символов в текстовом слое переводит инструмент «Текст» в режим редактирования.
Панель «Символ» содержит параметры, предназначенные для форматирования символов. Некоторые параметры форматирования также доступны через панель параметров.
Панель «Символ» можно отобразить, выполнив следующие действия.
Выберите меню «Окно» > «Символ» или щелкните ярлык панели «Символ», если панель видна, но не активна.
Выберите инструмент «Текст» и нажмите кнопку «Панель» на панели параметров.
Чтобы установить параметр на панели «Символ», выберите значение из всплывающего меню справа от параметра. Для изменения значений числовых параметров можно воспользоваться стрелками вверх и вниз или же изменить значение непосредственно в текстовом поле. После непосредственного изменения значения нажмите клавишу «Ввод» («Return»), чтобы сохранить значение, «Shift» + «Ввод» («Shift» + «Return»), чтобы сохранить и выделить его, или «Tab», чтобы сохранить значение и перейти к следующему полю панели.
Выберите в диалоговом окне «Параметры шрифтов» пункт «Показывать параметры азиатского текста», чтобы на панели «Символ» появился параметр «Установить «цумэ»».
В меню панели «Символ» можно получить доступ к дополнительным командам и параметрам. Чтобы воспользоваться этим меню, щелкните треугольник в правом верхнем углу панели.
Динамические комбинации клавиш — это комбинации клавиш, которые отображаются в меню панели «Символ» только в момент ввода начала набора или типа абзаца, если выделен текст или когда курсор в тексте имеет I-образную форму. Динамические комбинации доступны для следующих параметров текста: «Псевдополужирный», «Псевдокурсивный», «Все прописные», «Капители», «Надстрочный индекс», «Подстрочный индекс», «Подчеркнутый» и «Зачеркнутый».
Размер шрифта определяет, насколько крупным текст будет выглядеть в изображении.
По умолчанию единицей измерения для текста являются пункты. Один пункт PostScript составляет 1/72 дюйма на изображении с разрешающей способностью 72 ppi. Существует, однако, возможность переключения с единиц измерения PostScript на традиционные определения размеров точки. Единицу измерения размера шрифта по умолчанию можно изменить в области «Единицы измерения и линейки» диалогового окна «Установки».
Введенный текст визуализуется текущим основным цветом, причем этот цвет можно изменить до или после ввода текста. При редактировании существующего текстового слоя можно изменить цвет как одного или нескольких выделенных символов, так и всего текста в слое.
В этом уроке мы создадим в Фотошоп набор иконок на одну тему.
Сложность урока: Средний
что получится в итоге
В этом уроке мы создадим набор иконок в Фотошопе. Набор иконок должен иметь одинаковый фон и одну тему. Для тренировки мы создадим иконки с солнцем, снежинкой и значком RSS. Давайте начнём.
1. Подготовка рабочей области
Шаг 1
Начнём с создания нового документа размером 350 px на 350 px. Кликните в белом квадрате возле настройки Содержимое фона (Background Contents), чтобы выбрать новый цвет фона рабочей области.
Шаг 2
Шаг 3
Всегда хорошо, когда работа с самого начала структурирована. Создайте группу слоёв и назовите её "Солнце" (Sun). Там будут размещаться все слои, относящиеся к созданию иконки с солнцем.
2. Создаём основу
Шаг 1
С помощью инструмента "Прямоугольник со скруглёнными углами" (Rounded Rectangle Tool ) нарисуйте прямоугольник с размерами 83 px × 64 px и установите радиус 8 px. Для получения более точного результата воспользуйтесь панелью Свойства (Properties). Здесь вы сможете просто ввести точные размеры.
Шаг 2
Удерживайте Shift, а затем нарисуйте ещё один прямоугольник со скруглёнными углами. Эта новая фигура будет добавлена к предыдущей. Установите её размер 36 px × 36 px с радиусом 3 px.
Шаг 3
Нажмите сочетание ctrl+T для трансформирования фигуры, а затем нажмите и перетащите за пределы ограничительной рамки, чтобы повернуть ее на 45 °.
Шаг 4
Убедитесь, что фигура находится в центре предыдущего прямоугольника. В CC 2014 вы можете проверить положение фигуры, перетащив её и привязав к направляющей в центре предыдущей фигуры.
Шаг 5
Нажмите Enter, чтобы сохранить результат. Вы можете обнаружить, что в диалоговом окне подтверждения вас информируют о том, что фигура превратится в обычный контур. Это означает, что вы больше не сможете редактировать её с помощью панели «Свойства». Просто нажмите «Да» (Yes).
Шаг 6
Расположите фигуру как показано на рисунке ниже.
Вот результат в масштабе 100%.
Шаг 7
Нарисуйте аналогичную фигуру поверх предыдущей, которая на 1 px меньше. Вы можете сделать это, дублируя фигуру, а затем изменяя её точки или просто создав новую фигуру.
Шаг 8
Шаг 9
Дважды щелкните по фигуре, а затем примените Обводку (Stroke) и Наложение градиента (Gradient Overlay), используя следующие настройки.
Для градиента используйте следующее расположение цветов. Чтобы открыть редактор градиента и изменить настройки градиента, щелкните окно предварительного просмотра градиента.
Шаг 10
Уменьшите уровень заливки (Fill) до 11%. Содержимое слоя будет прозрачным и останется неизменным.
3. Тень
Шаг 1
Создайте новый слой под основой. Активируйте инструмент "Кисть" (Brush Tool) (В) и затем под иконкой нарисуйте тень.
Шаг 2
По-прежнему используя инструмент "Кисть" (Brush Tool) (В), добавьте более сильную тень прямо под кончиком иконки.
Шаг 3
Зажав CTRL, кликните меньшую по размеру пиктограмму, чтобы выделить меньшую фигуру. Создайте новый слой и используйте белый цвет поверх выделенной области. Убедитесь, что вы используете мягкую кисть Жёсткость (Hardness)-0%.
Шаг 4
Когда закончите, снимите выделение (Ctrl+D) и уменьшите непрозрачность (Opacity) слоя.
Шаг 5
Создайте новый слой и снова выделите меньшую основу иконки. Заполните выделение градиентом от белого к черному. Измените режим наложения (Blend Mode) слоя на Перекрытие (Overlay), а затем уменьшите его непрозрачность (Opacity).
Шаг 6
Добавьте ещё один слой. Создайте большое эллиптическое выделение в нижней части иконки, а затем нажмите Ctrl на слое основы, чтобы пересечь его. Заполните выделение градиентом от белого к черному. Измените режим смешивания (Blend Mode) слоя на "Экран" Screen и уменьшите его непрозрачность (Opacity).
Так выглядит результат в масштабе 100%.
Шаг 7
Зажав Ctrl, кликните по миниатюре слоя-основы. Создайте сверху новый слой, затем выберите Редактирование > Обводка (Edit > Stroke). Установите светло-голубой цвет и ширину (Width) 1 px.
Ниже вы можете видеть разницу до и после добавления обводки внутри иконки.
Шаг 8
Добавьте маску к слою с обводкой. Залейте её чёрным цветом, чтобы спрятать все контуры. Проведите по некоторым участкам линии белым цветом, чтобы показать их. Таким образом, теперь у нас выделен край иконки.
На изображении ниже можно детально рассмотреть выделение края.
Шаг 9
Добавьте корректирующий слой Цветовой баланс (Color Balance) выше иконки. Мы используем его, чтобы изменить цвет фона.
Чтобы упростить управление слоями, давайте изменим имя слоя на Изменение цвета (color changer).
Шаг 10
Залейте маску корректирующего слоя чёрным. Выделите основу иконки, а затем заполните её белым. Таким образом, корректирующий слой влияет только на значок. Перетащите ползунки, чтобы изменить цвет.
Шаг 11
Дублируйте все слои основы иконки и поменяйте параметры в корректирующем слое Цветовой баланс (Color Balance) по отдельности.
4. Добавляем значки к иконкам
Шаг 1
Для нашей первой иконки мы добавим значок солнца. Начните с рисования желтого круга.
Шаг 2
Шаг 3
Используйте более светлый жёлтый цвет в центре солнца.
Шаг 4
Добавьте эллипс более яркого жёлтого цвета в верхнюю часть солнца.
Шаг 5
Нарисуйте тонкую, светлую фигуру на верхней правой стороне солнца, чтобы выделить её. Удалите лишнее с помощью мягкого ластика, чтобы придать естественности.
Шаг 6
Дальше нужно добавить солнцу сияние. Начните с рисования двух желтых треугольников, как показано ниже. Поместите их за солнцем.
Шаг 7
Выделите обе векторные фигуры и затем продублируйте их: Ctrl+C, а затем Ctrl+V. Поверните новые фигуры на 45 °.
Шаг 8
Продолжайте дублировать и вращать фигуры, пока у нас не будет достаточно лучей.
Шаг 9
Шаг 10
Скройте солнце, нажав значок глаза возле слоя. Нарисуйте больше жёлтых треугольников, как показано ниже.
Добавьте круговую фигуру в центр треугольников и установите режим траектории Вычесть переднюю фигуру (Subtract).
Мы закончили, поэтому давайте вернём вспышку и формы солнца.
Шаг 12
Чтобы получить реалистичное солнце, нам нужно нарисовать размытую жёлтую круглую форму за солнцем. Вы можете сделать это вручную, используя мягкую кисть, или сначала нарисуйте круг, а затем смягчите его, используя фильтр Размытие по Гауссу (Gaussian Blur).
Шаг 13
Дважды щёлкните слой группы значков, чтобы добавить стиль слоя. Добавьте Внутреннее свечение (Inner Glow) с черным цветом и установите режим смешивания - Умножение (Multiply).
Таким образом мы добавили к иконке тёмный силуэт.
Шаг 14
Далее мы создадим символ RSS в иконке. Начните с рисования круглой фигуры поверх основы.
Шаг 15
Продублируйте и вставьте контур (Ctrl+C и Ctrl+V). Нажмите Ctrl+T и уменьшите фигуру. Установите в операциях с контуром Вычесть переднюю фигуру (Subtract Front Shape).
Шаг 16
Дублируйте контур и уменьшите его. Установите режим "Объединить фигуры" (Combine Shapes).
Шаг 17
Повторяйте предыдущие шаги, пока не получите следующую фигуру.
Шаг 18
Добавьте два прямоугольника и установите их режим "Вычесть переднюю фигуру" (Subtract Front Shape). Чтобы правильно их расположить, смотрите изображение ниже.
Шаг 19
Дважды кликните на слое "Символ RSS" и настройте Внутреннее свечение (Inner Glow), Наложение градиента (Gradient Overlay), и Тень (Drop Shadow).
Вот результат в масштабе 100%.
Шаг 20
Затем мы добавим символ снежинки в третий значок. Активируйте инструмент "Произвольная фигура" (Custom Shape Tool) и загрузите набор векторных фигур природы из панели параметров.
Появится диалоговое окно с предупреждением о замене или добавлении темы "Природа" в уже существующие фигуры. Вы можете нажать OK.
Шаг 21
Выберите фигуру снежинки (Snowflake) в выпадающем списке.
Шаг 22
Кликните и нарисуйте фигуру снежинки поверх иконки.
Это результат в масштабе 100%.
Заключение
Как видно из урока, в создании набора иконок нет ничего трудного. Прежде чем приступить к рисованию символа, вам нужно подготовить общую тему. В данном случае значок помещается в прямоугольник с закругленными углами и треугольник. Надеюсь, вам понравился урок, и вы узнали что-то новое.
В этом уроке вы узнаете, как при помощи фигур и стилей слоя создать красивый логотип в Фотошоп.
Сложность урока: Легкий
Сегодня я покажу вам, как с помощью фигур и стилей слоя создать красивый логотип Apple WWDC в программе Photoshop CS5. Вы узнаете, как создать красивый логотип, при этом, не используя множество технических приёмов. Ссылка на PSD файл урока указана в конце урока. Итак, давайте приступим!
Примечание переводчика: WWDC (Apple Worldwide Developers Conference) — всемирная конференция разработчиков на платформе Apple. Проводится ежегодно в Калифорнии, США.
Итоговый результат
Шаг 1
Примечание переводчика: цвет заливки для слоя с задним фоном будет зависеть от ваших предпочтений, а также, всё будет зависеть от того, на каком фоне будет расположен логотип Apple.
Шаг 2
Мы получим следующий результат.
Шаг 3
Итак, мы создали контур логотипа. Теперь мы добавим к нему следующий квадратик. В данном случае, я выбрал инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)), в настройках данного инструмента установил Радиус (Radius) 15 px, далее, удерживая клавишу (Shift)+нарисуйте следующий квадратик, как показано на скриншоте ниже. Далее, с помощью инструмента Свободная трансформация (Free Transform (Ctrl+T)), поверните квадратик на 45 градусов.
Уменьшите значение Заливки (Fill) до 0% для слоя с квадратиком. Далее щелкните по значку Добавить стиль слоя (Add a layer style) в нижней части панели слоев, чтобы применить стиль слоя Тень (Drop Shadow).
Далее, примените стиль слоя Наложение градиента (Gradient Overlay):
Поменяйте режим наложения для слоя с квадратиком на Жёсткий свет (Hard Light).
Мы получили следующий результат.
Шаг 4
Мы должны растрировать новый слой. Для этого, создайте новый слой поверх слоя с квадратиком, далее, выделите оба слоя, а затем, нажмите клавиши (CTRL+E), чтобы объединить их вместе. Теперь, с помощью инструмента Перемещение (Move Tool (V)), мы можем расположить квадратик внутри контура логотипа. При использовании инструмента Перемещение (Move Tool (V)), удерживайте клавишу (Alt)+потяните за квадратик, чтобы создать дубликат квадратика. Создайте несколько квадратиков. С помощью инструмента Свободная трансформация (Free Transform (Ctrl+T)), варьируйте размеры квадратиков.
Шаг 5
Для дубликатов слоёв с квадратиками мы применим другое значение Заливки (Fill).
Примечание переводчика: для оригинального слоя с квадратиком значение заливки было 0%, для дубликатов слоёв с квадратиками значение заливки будет 70%.
Далее, мы также поменяем цвет квадратиков.
Примечание переводчика: автор к розовым квадратикам добавляет синие квадратики.
В данном случае, создайте ещё один дубликат слоя с квадратиком (выбрав инструмент Перемещение (Move Tool (V)) + удерживая клавишу (Alt)+потяните мышкой квадратик, чтобы создать дубликат слоя). Далее, нажмите клавиши (CTRL+U) и в диалоговом окне коррекции Цветовой тон / Насыщенность (Hue/Saturation) сместите бегунок опции Цветовой тон (Hue) влево, чтобы изменить цветовой тон квадратика.
Теперь, продублируйте слой с синим квадратиком. Расположите дубликаты синих квадратиков, как показано на скриншоте ниже:
Примечание переводчика: не забывайте варьировать размер дубликатов квадратиков.
Шаг 6
Продолжайте добавлять квадратики, на этот раз уже другого цвета. Чтобы поменять цвет, используйте ту же самую команду коррекции Цветовой тон / Насыщенность (Hue/Saturation). Теперь, несколько раз продублируйте слой с квадратиком, используя технику, которая описана выше.
Мы получили следующий результат.
Шаг 7
Слои с квадратиками должны располагаться друг за другом. Далее, мы возвращаемся на слой с первым квадратиком, создаём дубликат слоя (с помощью инструмента Перемещения (Move Tool (V))+клавиши (Alt)). А затем, меняем цвет квадратика с помощью коррекции Цветовой тон / Насыщенность (Hue/Saturation (CTRL+U)).
Теперь, несколько раз продублируйте слой с квадратиком, используя технику, которая описана выше.
Шаг 8
Продолжайте добавлять квадратики различных цветовых оттенков. Создайте дубликат самого первого слоя с квадратиком, используя технику, которая описана выше. А затем, поменяйте цвет дубликата квадратика с помощью коррекции Цветовой тон / Насыщенность (Hue/Saturation (CTRL+U)).
Мы получили следующий результат.
Шаг 9
Используя вышеописанную технику, добавьте ещё квадратики различных цветовых оттенков.
Шаг 10
В центральной части логотипа, мы добавим разноцветные квадратики размером побольше. Примените к этим слоям различную степень Непрозрачности (Opacity), а также различные режимы наложения, например, Перекрытие (Overlay), Жёсткий свет (Hard Light), Мягкий свет (Soft Light). Варьируйте размер квадратиков с помощью Свободной трансформации (Free Transform (Ctrl+T)).
Шаг 11
Теперь, удалите слой с контуром логотипа.
Шаг 12
Нажав на значок «Создать новый корректирующий слой или слой-заливку» (Create new fill or adjustment layer) в нижней части панели слоев, добавьте корректирующий слой Кривые (Curves) поверх всех слоёв. Установите кривую, как показано на скриншоте ниже, чтобы провести небольшую коррекцию цвета.
Читайте также: