Необычный Логотип, построенный из букв

/ 👁 2958

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

дополнительные материалы к урокам

демо версия урока

1. Я возьму за основу изображение гимнастки (оно есть у Вас в дополнительных материалах), Вы же можете взять любое свое изображение или использовать мое. Здесь главное понимать, что изображение должно быть таким, чтобы по его контуру можно было понять: что на нем изображено.
Так вот, открываем изображение в программе Adobe Photoshop. Разблокируем его, дважды нажав по слою с изображением и далее кликнув OK.

2. Теперь установим в панели инструментов: Foreground Color на #121212, а Background Color на #000000. Выбрав Радиальный Градиент (G), проведите линию от центра к краю рабочей области, предварительно перейдя на чистый слой, который находится под нашей картинкой.

3. Выделим нашу фигуру. Для этого создадим новый слой над слоем с изображением. Возьмем инструмент перо (P), выберем для него настройку Shape, заливку сделаем белой. Теперь выделяем нашу фигуру.

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

Старайтесь делать аккуратный контур, но без фанатизма, ему не обязательно нужно быть идеальным (но все-таки аккуратным он должен быть).

4. Теперь уменьшим непрозрачность (Opacity) двух наших последних слоев до 40%. После этого заблокируем оба слоя, нажав на изображения замка над слоями.

5. Теперь начинается самое интересное. Выбираем инструмент Текст (T), из списка шрифтов выберите тот, который понравится. Наводим курсор на фигуру, в это время курсор должен выглядеть как буква Т в кружочке. Кликаете по экрану и вся фигура выделяется. Напишите фразу или слово. Оно будет вписываться в фигуру. С помощью клавиши Enter можно спускать текст ниже по фигуре. Когда найдете подходящее место, просто щелкнете на инструмент Move Tool (черная стрелочка).

6. Теперь превратим наш текст в фигуру. Для этого нужно щелкнуть по слою с текстом правой кнопкой мыши, а затем выбрать пункт Convert to Shape.

7. Теперь можно сделать некоторые манипуляции с фигурой из текста. Выберите трансформация (при активном слое, сочетание клавиш Ctrl и Enter), фигура выделится для трансформации. После этого кликаем правой кнопкой мыши по выделению и выбираем Warp. Сейчас мы можем деформировать наш текст по фигуре гимнастки. После окончания, чтобы подтвердить изменения нажмите клавишу Enter.

8. Для того, чтобы деформировать отдельные буквы при активном слое используйте инструмент Direct Selection Tool (A). Когда Вы сделаете этот инструмент активным, все буквы выделятся и у них появятся точки, двигая которые можно менять форму каждой отдельной буквы.

9. Для того, чтобы внести разнообразие предлагаю еще один вариант. Снова переходите на слой с выделением с девушкой, выбираете инструмент текст (все как и в прошлый раз). Можно выбрать уже другой шрифт. Пишите фразу или текст, потом идете в Стили слоя и добавляете обводки (Stroke) такого же цвета как и текст.

Далее параметр слоя Fill выставляем на 0%.


Дальше все как раньше – преобразуем текст в фигуру, искажаем весь текст, искажаем отдельные буквы и получается что-то подобное:


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

11. Теперь напишем текст по контуру нашей фигуры. Для этого делаем слой с главной выделенной фигурой активным. Выбираем инструмент Текст, подводим курсор к контуру нашей фигуры. И когда возле буковки Т появится изогнутая линия, щелкаем мышкой. Все, теперь можно писать текст. Он опишет весь контур нашей фигуры. Только учтите, что размер шрифта не должен быть большим, а то фигура будет выглядеть «мохнатой» и сложно будет различить что это.

12. Теперь выделим все наши слои с текстом и объединим их в папку. Для этого, после выделения всех слоев (выделяем с помощью зажатой клавиши Shift) идем во вкладку Layer – New – Group from Layers.

Далее делаем дубликат созданной группы. Для этого жмем правой кнопкой мыши на вновь созданную папку и выбираем Duplicate Group. (Дубликат мы делаем на всякий случай).

Теперь скроем дубликат. А в первой папке объединим все слои в один. Для этого выделяем все слои папки, щелкаем правой кнопкой мыши и выбираем Merge Layers.

13. Также скроем слои основной картинки и выделенной фигуры.

14. Добавим к тексту градиент. Для этого идем в Layer – Layer Style – Gradient Overlay…

В открывшемся окне выберите цвета градиента.

Нажмите ОК. Должно получится примерно так.

15. Давайте сделаем заголовок к нашему логотипу. Напишите текст, который Вы хотите и скопируйте градиент с папки (с предыдущего шага) на вновь написанный заголовок. Для этого с зажатой клавишей Alt перетащите градиент из прошлого шага на новый слой.

16. Теперь добавим текстуру. Вы можете взять ее из дополнительных материалов и открыть в нашем рабочем документе. Поместите слой с текстурой в самом верху всех слоев, растрируйте его (кликаем по слою правой кнопкой мыши и выбираем опцию Rasterize Layer). После этого обесцвечиваем изображение нажатием сочетания клавиш CTRL, Shift, U.

17. Создадим новый слой вверху. Установим Foreground Color: # 6d8fe3, а Background Color: #000000. Далее идем в меню Filter – Render – Clouds.

Далее устанавливаем новому слою режим смешивания на Overlay, а слою с текстурой непрозрачность на 10%.

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

Надеюсь урок был Вам полезен. Скоро будет опубликовано много новых интересных уроков. Подпишитесь на обновление блога и Вы всегда будете в курсе свежих материалов.
А также пишите в комментариях о чем бы Вы хотели получать новые уроки или статьи. Ваше мнение очень важно и будет обязательно учтено.
Удачи Друзья!

Leave a Reply