Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Текстовый эффект в стиле тетриса в Adobe Photoshop

21 августа 2015 | Опубликовано в Уроки | 15 Комментариев »

В этом уроке мы научимся создавать текстовый эффект в стиле тетриса в Adobe Photoshop. Начнем с создания паттерна, который станет основой работы, затем создадим детали тетриса. А после этого вы узнаете как просто сменить цвета деталей и как использовать шрифт в качестве основы для создания эффекта.

 

Результат

Исходники

Шаг 1

Для начала нам понадобится паттерн для фона. Создайте документ размером 16x 16px, в меню выберите View > Show > Grid/Просмотр>Показать>Сетку. Так мы включим сетку. Теперь выберите в меню View > Snap To > Grid/Просмотр>Привязка>Сетка. Нажмите Control + K, чтобы открыть окно Preferences/Установки. Откройте вкладку Guides, Grid & Slices/Направляющие, сетка и пластины и введите настройки, показанные на картинке ниже. В нашем примере в некоторых шагах сетка отключена ( Control + ‘ ), чтобы был лучше виден процесс работы, но вам этого делать необязательно. Сетка поможет добиться лучшего результата.

tetris_text_1

Шаг 2

Обратите внимание на панель инструментов. Укажите в качестве первого цвета #283239 и возьмите инструмент Rectangle/Прямоугольник.
В нашем документа создайте фигуру размером 14x 2px и разместите ее как показано ниже.

Шаг 3

Используйте тот же цвет и инструмент, чтобы создать еще одну фигуру размером 16x 2px и разместите его как показано ниже.

Шаг 4

Смените первый цвет на #323E45 и убедитесь что инструмент Rectangle/Прямоугольник все еще активен.
Создайте фигуру размером 14x 14px и поместите как показано ниже.

Шаг 5

Выберите в качестве первого цвета #414F58 и создайте фигуру размером 14x 1px. Разместите ее как показано на картинке.
В меню выберите Edit > Define Pattern/Редактировать>Определить узор, укажите имя вашему паттерну и нажмите OK.

Шаг 6

Нажмите Control + N, чтобы создать новый документ. Укажите размер документа в 578x 402px.
В палитре Layers/Слои выберите фоновый слой и кликните по иконке замка, чтобы разблокировать слой.

tetris_text_6

tetris_text_6a

Шаг 7

В той же палитре Layers/Слои кликните дважды по фоновому слою, чтобы вызвать окно Layer Style/Стиль слоя. Активируйте слой Pattern Overlay/Перекрытие узора и укажите настройки как на картинке ниже. Используйте только что созданный нами паттерн. Чтобы выровнять паттерн в вашем документе, просто кликните по рабочей области и потяните в нужную сторону.

tetris_text_7

tetris_text_7a

Шаг 8

Смените первый цвет на #D1A423 и возьмите инструмент Rectangle/Прямоугольник.
Создайте фигуру размером 14x 14px и поместите ее как показано ниже.

tetris_text_8

Шаг 9

Откройте окно Layer Style/Стиль слоя для слоя с желтым квадратом, и введите параметры, указанные на картинке ниже.

tetris_text_9

tetris_text_9a

Шаг 10

Выберите в качестве первого цвета #7F7F7F и создайте фигуру размером 14x 7px. Разместите ее точно так, как показано ниже.
Возьмите инструмент Direct Selection/Прямое выделение, выделите по очереди нижние точки и переместите каждую из них на 7px ближе к центру.
В палитре Layers/Слои укажите этому слою Blend Mode/Режим наложения Soft Light/Мягкий свет.

tetris_text_10

tetris_text_10c

tetris_text_10b

tetris_text_10a

Шаг 11

Откройте окно Layer Style/Стиль слоя для треугольника и укажите параметры как на картинке ниже.

tetris_text_11

tetris_text_11a

Шаг 12

Вновь вернитесь в палитру Layers/Слои и убедитесь что по прежнему активен слой с треугольником. Нажмите Control + J, чтобы дублировать слой. Кликните по копии слоя правой кнопкой и выберите Clear Layer Style/Очистить стиль слоя, затем смените Blending Mode/Режим наложения на Soft Light/Мягкий свет. Теперь в меню выберите Edit > Transform > Flip Vertical/Редактировать>Трансформировать>Отразить вертикально, смените для треугольника цвет заливки на черный (#000000) и перетяните вниз, как показано на картинке ниже.

tetris_text_12

Шаг 13

Дублируйте ( Control + J ) векторный треугольник из предыдущего шага и смените цвет заливки копии на #353535. Нажмите Control + T, чтобы в режиме свободной трансформации повернуть фигуру на -90 градусов, нажмите Enter после того как расположите фигуру как показано ниже.

Подсказка: Удерживайте Shift, чтобы повернуть фигуру ровно на -90 градусов.

tetris_text_13

Шаг 14

Дублируйте ( Control + J ) фигуру из предыдущего шага и вновь отразите ее, разместив как показано ниже.

tetris_text_14

Шаг 15

Выберите в качестве первого цвета #C1C1C1 и возьмите инструмент Rectangle/Прямоугольник.
Создайте фигуру размером 8x 8px и разместите ее как показано ниже.
В палитре Layers/Слои смените Blend Mode/Режим наложения на Soft Light/Мягкий свет и снизьте Opacity/Непрозрачности до 70%.

tetris_text_15

Шаг 16

Выделите все фигуры, составляющие желтую деталь и нажмите Control + G, чтобы объединить их в группу. В палитре Layers/Слои переименуйте группу в “Yellow”.
Размножьте группу и разбросайте их по документу в случайном порядке, как показано ниже. Теперь, чтобы сменить цвет группы, просто кликните по самому нижнему прямоугольнику и выберите для него другой цвет заливки.

tetris_text_16

Шаг 17

Давайте создадим первый блок деталей. Выберите группу с желтым блоком и убедитесь что она идеально выровнена по фоновому узору. Теперь размножьте группу как показано на картинках ниже.

tetris_text_17

tetris_text_17a

tetris_text_17b

tetris_text_17c

Шаг 18

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

tetris_text_18

Шаг 19

Возьмите инструмент Horizontal Type/Горизонтальный текст и используйте шрифт Aldo the Apache Regular, чтобы создать вашу надпись.
Укажите шрифту размер в 200px, цвет #FFFFFF и снизьте Opacity/Непрозрачность до 15%.

tetris_text_19

tetris_text_19a

Шаг 20

Теперь начнем создавать надпись. Используйте текст в качестве ориентира, и по нему размещайте фигурки, создавая текст. Следите за тем, чтобы фигуры были идеально выровнены по фоновому узору.

tetris_text_20

tetris_text_20c

tetris_text_20b

tetris_text_20a

Шаг 21

Закончив с первой буквой, переходим ко второй. Вы можете оставить одну из букв «недостроенной», повесив фигуру над положенным ей местом.

tetris_text_21

tetris_text_21c

tetris_text_21b

tetris_text_21a

Шаг 22

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

tetris_text_22

tetris_text_22b

tetris_text_22a

Шаг 23

И наконец, когда вы оформите последнюю букву, вернитесь в палитру Layers/Слои и удалите слой с ориентировочным текстом.

tetris_text_23

tetris_text_23c

tetris_text_23b

tetris_text_23a

Результат

Автор урока Razvan Gabriel

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Егор
    Thumb up Thumb down 0

    doc38753199_414904306?hash=c9235ca4840a555ba8&dl=37050479ea43223b1f

    Ответить

    Егор Ответ:

    Thumb up Thumb down 0

    эта не работает

    Ответить

  2. Егор
    Thumb up Thumb down 0

    vk.com/doc38753199_414904...050479ea43223b1f

    Ответить

    Егор Ответ:

    Thumb up Thumb down 0

    не работает

    Ответить

  3. Егор
    Thumb up Thumb down 0

    goo.gl/BW3IIC

    Ответить

    Егор Ответ:

    Thumb up Thumb down 0

    Только эта ссылка работает.

    Ответить

  4. Merziuz
    Thumb up Thumb down 0

    z43UEX pills2sale.com viagra online

    Ответить

  5. Fernando
    Thumb up Thumb down 0

    Insert your card sleepwell mattress jaipur ** BATS Global Markets, the third-largest U.S. stockexchange, is in advanced talks to merge with smaller rivalDirect Edge Holdings LLC, the Wall Street Journal reported onFriday, citing sources familiar with the matter.

    Ответить

  6. Parker
    Thumb up Thumb down 0

    How much is a Second Class stamp? prozac 20 mg fiyat While the list of countries may seem random, these are the places where Three's parent company, Hutchison Whampoa, operates mobile networks under the Three brand. However, the customers can roam on to any networks in these countries – not just Three operations.

    Ответить

  7. Jewell
    Thumb up Thumb down 0

    Did you go to university? p6 red bodybuilding Prosecutors said people in 28 states ate the cantaloupe and 147 people were hospitalized. In addition to the 33 official deaths, the listeria caused a woman to miscarry, and more patients who had the illness died of varied causes months after the outbreak.

    Ответить

  8. Florencio
    Thumb up Thumb down 0

    I'm a housewife good food made simple spinach burrito Dan turned to him. “Alistair, c’mon. We know you’re hurting, but let’s keep it in perspective.” Dan turned to Mae. “I’ll point out the obvious. Mae, we’re talking about Alistair’s Portugal brunch.”

    Ответить

  9. Monte
    Thumb up Thumb down 0

    Where do you come from? ciprocinal i dojenje Shareholders will have the chance to vote on the proposednew directors at the annual meeting on July 25. They will alsovote on the re-appointment to the board of two existingdirectors, whom M&G has said it will be voting against.

    Ответить

  10. Micheal
    Thumb up Thumb down 0

    I support Manchester United fate hollow ataraxia english download Gypsy moth caterpillars lay their eggs on trees and emerge in May and early June. Forests with more than 50 acres of trees that have an average of more than 500 egg masses per acre qualify for the spraying program.

    Ответить

  11. Getjoy
    Thumb up Thumb down 0

    We work together side effects of stopping estradiol and progesterone Eugeme Fama and Lars Peter Hansen of the University of Chicago, along with Yale's Robert Shiller, received the award from the Stockholm-based Royal Swedish Academy of Sciences said Monday. Fama, the oldest of the three at 74, published his first research spelling out the «efficient markets hypothesis» in 1970, arguing that asset markets rapidly incorporate most, if not all, information about an asset into its price, making it nearly impossible for mutual funds and other investors to consistently beat the market.

    Ответить

Оставить ответ


два + 7 =

Вставить изображение