Создаём картридж Nintendo Game Boy в Фотошоп
Создаём картридж Nintendo Game Boy в Фотошоп
Сложность урока: Средний
В этом уроке мы узнаем, как создать иконку картриджа Nintendo Game Boy в Фотошоп, используя фигуры, стили слоя и маски слоя. После того как я поделился с пользователями данной иконкой для бесплатного скачивания, я подумал, что было бы неплохо написать урок по созданию этой когда-то известной иконки.
Финальное изображение:
![](/lessons/les3035/00.jpg)
Скачать архив с материалами к уроку
Шаг 1. Создание нового документа и основных фигур
Создайте новый документ с размерами 1024 х 1024 рх с прозрачным задним фоном. Заполните слой белым Edit > Fill > White (Редактирование – Выполнить заливку – Белый).
Выберите инструмент Rounded Rectangle Tool (U) (Прямоугольник со скруглёнными углами) с радиусом угла 15 рх и создайте фигуру размером 690 х 865 рх.
![](/lessons/les3035/1.jpg)
Создайте новый прямоугольник со скруглёнными угламив правой части основного прямоугольника размером 100 х 825 рх с радиусом угла 15 рх.
![](/lessons/les3035/2.jpg)
Выберите оба слоя, щёлкните правой кнопкой мыши и выберите Merge Shapes (Объединить фигуры) или Ctrl+E.
Примечание переводчика: Измените цвет объединённой фигуры на # 847982.
Для этой объединённой фигуры добавьте стили слоя Bevel & Emboss (Тиснение) и Drop Shadow (Тень), с параметрами, показанными ниже.
![](/lessons/les3035/3.jpg)
![](/lessons/les3035/4.jpg)
![](/lessons/les3035/5.jpg)
![](/lessons/les3035/6.jpg)
Теперь немного изменим основную форму, используя Layer Mask (Маска слоя), чтобы скрыть некоторые её части. На слое с фигурой создайте пустую маску слоя Layer > Layer Mask > Reveal All (Слои – Слой – маска – Показать всё).
Выберите инструмент Rectangle Tool (U) (Прямоугольник) и создайте два вертикальныхпрямоугольника - по одному на каждой стороне базовой фигуры. Загрузите выделение созданных прямоугольников, активируйте маску слоя на слое с базовой фигурой (щёлкните по ней) и залейте выделение чёрным Edit > Fill > Black (Редактирование – Выполнить заливку – Черный). Затем удалите слои с прямоугольниками.
Примечание переводчика: чтобы загрузить выделение двух прямоугольников – сначала с зажатой Ctrl щёлкните по иконке одного слоя, затем зажмите Ctrl+Shift и щёлкните по иконке второго слоя.
![](/lessons/les3035/7.jpg)
![](/lessons/les3035/8.jpg)
![](/lessons/les3035/9.jpg)
Теперь поработаем над верхней частью картриджа. Выберите инструмент Rectangle Tool (U) (Прямоугольник) и создайте фигуру горизонтальной формы размером 95 х 16 рх. Продублируйте слой с созданной фигурой 9 раз, чтобы получить 10 одинаковых фигур. Расположите по 5 фигур на каждой стороне картриджа с интервалом между ними 11 рх.
Примечание переводчика: дублируйте фигуру, сдвиньте стрелкой на клавиатуре вниз на 11 рх (отсчёт от нижнего края фигуры). Повторите процесс, пока не получится 5 фигур. Выделите все слои с созданными фигурами и нажмите Ctrl+J. Затем сдвиньте копии на другую сторону. При перемещении зажмите Shift, перемещение будет строго горизонтально.
![](/lessons/les3035/10.jpg)
Объедините все созданные фигуры прямоугольников в одну (Ctrl+E) и загрузите выделение.
![](/lessons/les3035/11.jpg)
Активируйте маску слоя базовой фигуры и залейте выделение чёрным. Затем удалите слои с прямоугольниками.
![](/lessons/les3035/12.jpg)
Выберите инструмент Ellipse Tool (U) (Овал) и создайте два круга размером 185 х 185 рх. Расположите их по краям горизонтальных полос, как показано ниже.
Примечание переводчика: создайте один круг, дублируйте слой и с зажатой Shift переместите.
![](/lessons/les3035/13.jpg)
Выделите круги. Удерживая нажатым сочетание клавиш Ctrl+Shift, щелкните по иконкам слоев с кругами, чтобы загрузить выделение. Активируйте маску слоя базовой фигуры и залейте выделение белым. Затем удалите слои с кругами.
![](/lessons/les3035/14.jpg)
![](/lessons/les3035/15.jpg)
Чтобы сделать картридж более реалистичным, я создал закруглённые углы на горизонтальных полосах. Для этого выберите инструмент Pen Tool (P) (Перо) и нарисуйте небольшой треугольник на углу левой верхней полосы. Продублируйте треугольник 3 раза и поместите копии фигуры на других полосах. Продублируйте все 4 треугольника, для этого выделите все слои с треугольниками и нажмите Ctrl+J. Затем нажмите Ctrl+T (для активации инструмента FreeTransformTool(Свободная трансформация)), далее щёлкните правой кнопкой мыши и выберите Flip Vertical (Отразить по вертикали). У вас должно получиться 8 треугольников по одному на каждый угол полос, как показано ниже.
![](/lessons/les3035/16.jpg)
Объедините все фигуры с треугольниками в одну (Ctrl+E). Затем загрузите выделение треугольников, активируйте маску слоя базовой фигуры и заполните выделение чёрным цветом.
![](/lessons/les3035/17.jpg)
![](/lessons/les3035/18.jpg)
Повторите то же самое для полос с другой стороны. Выделите 8 маленьких треугольников и с помощью инструмента «Свободная трансформация» отразите слой с треугольниками по горизонтали (щёлкните правой кнопкой мыши и выберите Flip Horizontal (Отразить по горизонтали)). Переместите их на полосы с правой стороны картриджа и повторите процесс с маской слоя. Удалите слой с треугольниками.
![](/lessons/les3035/19.jpg)
![](/lessons/les3035/20.jpg)
Выберите Pen Tool (P) (Перо) и создайте небольшой треугольник на левой средней части базовой формы. Загрузите выделение треугольника, выберите маску слоя базовой формы и залейте выделение чёрным цветом.
![](/lessons/les3035/21.jpg)
![](/lessons/les3035/22.jpg)
Повторите ту же процедуру на правой стороне. По окончании удалите слой с треугольником.
Примечание переводчика: отразите по горизонтали слой с треугольником и с зажатой клавишей Shift передвиньте на другую сторону.
![](/lessons/les3035/23.jpg)
Вот что должно получиться.
![](/lessons/les3035/24.jpg)
Шаг 2. Создание текстуры шума и фоновых фигур
Теперь у нас есть основная форма картриджа. Давайте добавим немного текстуры на эту форму. Создайте новый слой и заполните его белым цветом Edit > Fill > White (Редактирование – Выполнить заливку – Белый). Примените фильтр Filter > Noise > Add Noise (Фильтр – Шум – Добавить шум) Amount (Эффект) 50%, Gaussian (По Гауссу), Monochromatic (Монохромный).
![](/lessons/les3035/25.jpg)
![](/lessons/les3035/26.jpg)
Для слоя с шумом создайте обтравочную маску, щёлкнув по слою правой кнопкой мыши и выбрав пункт Create Clipping Mask (Создать обтравочную маску). Измените Fill (Заливка) слоя на 3% и режим наложения на Overlay (Перекрытие). Переименуйте слой в Noise1.
![](/lessons/les3035/27.jpg)
![](/lessons/les3035/28.jpg)
Продублируйте слой с шумом и переименуйте в Noise2. Сделайте инверсию цветов на этом слое Image > Adjustments > Invert (Изображение – Коррекция – Инверсия). Измените Fill (Заливка) слоя на 7%. Выберите инструмент Move Tool (V) (Перемещение) и стрелками на клавиатуре сдвиньте слой на 2 рх вниз и 2 рх вправо.
![](/lessons/les3035/29.jpg)
Выберите инструмент Rounded Rectangle Tool (U) (Прямоугольник со скруглёнными углами), Радиус 15 рх и создайте фигуру размером 748 х 625 рх, цвет # 847a82. Переместите слой ниже слоя с базовой формой.
![](/lessons/les3035/30.jpg)
![](/lessons/les3035/31.jpg)
Создайте ещё одну фигуру на верхней части картриджа с размером 748 х 168 рх, радиусом 15 рх, цветом # 8e838c. Переместите слой с новой фигурой ниже всех слоёв с фигурами.
Примечание переводчика: также можно воспользоваться инструментом Rectangle Tool (U) (Прямоугольник) с теми же размерами.
![](/lessons/les3035/32.jpg)
![](/lessons/les3035/33.jpg)
Шаг 3. Создание нижнего треугольника
В этом шаге мы создадим треугольник на нижней части картриджа из нескольких фигур. Выберите инструмент Ellipse Tool (U) (Овал) и создайте два круга 15 х 15 рх с интервалом 85 рх между ними.
![](/lessons/les3035/34.jpg)
Выберите Rectangle Tool (U) (Прямоугольник) и создайте горизонтальный прямоугольник между кругами.
Примечание переводчика: высота прямоугольника должна равняться высоте кругов – 15 рх.
![](/lessons/les3035/35.jpg)
Выберите Custom Shape Tool (U) (Произвольная фигура). На верхней панели инструментов в наборе фигур выберите округлую форму треугольника. Эта фигура доступна в наборе фигур по умолчанию Sign3 (Знак3). Создайте треугольник.
Примечание переводчика: если данной фигуры в вашем наборе нет, то в окне выбора фигур нажмите на шестерёнку и выберите из списка Simbols (Символы). В выпавшем окне нажмите на Append (Добавить).
![](/lessons/les3035/36.jpg)
Объедините все созданные фигуры в одну. Для этого выделите все слои с фигурами, щёлкните правой кнопкой мыши и выберите Merge Shapes (Объединить фигуры) или Ctrl+E.
Затем для объединённой фигуры примените стили слоя Bevel & Emboss (Тиснение) и Color Overlay (Наложение цвета) с параметрами, показанными ниже.
![](/lessons/les3035/37.jpg)
![](/lessons/les3035/38.jpg)
![](/lessons/les3035/39.jpg)
Шаг 4. Создание фонового стикера
Выберите Rounded Rectangle Tool (U) (Прямоугольник со скруглёнными углами). Создайте в центре картриджа фигуру с размерами 585 х 520 рх, радиусом 15 рх, цветом # 847b82. Примените стили слоя Bevel & Emboss (Тиснение) и Inner Shadow (Внутренняя тень) с параметрами, показанными ниже.
![](/lessons/les3035/40.jpg)
![](/lessons/les3035/41.jpg)
![](/lessons/les3035/42.jpg)
![](/lessons/les3035/43.jpg)
Шаг 5. Создание кругов
В этом шаге мы создадим два круга, которые должны располагаться за стикером, для того, чтобы наш картридж стал более реалистичным. Выберите Ellipse Tool (U) (Овал). Создайте круг размером 52 х 52 рх и цветом # 837b81. Примените следующие стили слоя:
![](/lessons/les3035/44.jpg)
![](/lessons/les3035/45.jpg)
![](/lessons/les3035/46.jpg)
![](/lessons/les3035/47.jpg)
![](/lessons/les3035/48.jpg)
В центре круга создайте круг поменьше размером 15 х 15 рх и цветом # 7f787d. Примените стиль слоя Inner Glow (Внутреннее свечение).
![](/lessons/les3035/49.jpg)
![](/lessons/les3035/50.jpg)
![](/lessons/les3035/51.jpg)
В центре двух созданных кругов создайте ещё один - размером 2,5 х 2,5 рх и цветом # 979196. Поместите все три круга в новую группу.
![](/lessons/les3035/52.jpg)
Затем создадим ещё один круг ниже. Выберите Ellipse Tool (U) (Овал). Создайте круг размером 22 х 22 рх и цветом # 837b81.
![](/lessons/les3035/53.jpg)
Добавьте несколько стилей слоя, чтобы создать красивый металлический эффект.
![](/lessons/les3035/54.jpg)
![](/lessons/les3035/55.jpg)
![](/lessons/les3035/56.jpg)
![](/lessons/les3035/57.jpg)
![](/lessons/les3035/58.jpg)
Шаг 6. Создание текста
Давайте создадим верхнюю часть картриджа с текстом. Выберите Ellipse Tool (U) (Овал) и создайте два круга размером 160 х 160 рх. Далее с помощью инструмента Rectangle Tool
(U) (Прямоугольник) нарисуйте между кругами прямоугольник. Объедините все три фигуры в одну, щелкнув правой кнопкой и выбрав Merge Shapes (Объединить фигуры). Для наглядности я выбрал розовый цвет, вы, в свою очередь, измените цвет на #877c85.
![](/lessons/les3035/59.jpg)
![](/lessons/les3035/60.jpg)
![](/lessons/les3035/61.jpg)
Добавьте стили слоя Bevel & Emboss (Тиснение) и Inner Shadow (Внутренняя тень) с параметрами, показанными ниже.
![](/lessons/les3035/62.jpg)
![](/lessons/les3035/63.jpg)
![](/lessons/les3035/64.jpg)
Для текста я использовал два шрифта. Первый Pretendo от Urbanfonts.com и второй системный Arial. Для первой части текста я написал слово «Supercolor» шрифтом Pretendo и добавил следующие стили слоя:
![](/lessons/les3035/65.jpg)
![](/lessons/les3035/66.jpg)
![](/lessons/les3035/67.jpg)
![](/lessons/les3035/68.jpg)
![](/lessons/les3035/69.jpg)
Для второй части текста «TUTS» я использовал шрифт Arial Bold Italic. Примените те же стили слоя, что и для первого слова.
![](/lessons/les3035/70.jpg)
![](/lessons/les3035/71.jpg)
Чтобы закончить текст, я написал «ТМ» шрифтом Arial Bold и применил те же стили слоя.
![](/lessons/les3035/72.jpg)
![](/lessons/les3035/73.jpg)
Шаг 7. Работа над стикером
Чтобы закончить работу над картриджем, вы можете добавить Изображение для стикера. Выберите Rounded Rectangle Tool (U) (Прямоугольник со скруглёнными углами) и создайте фигуру размером 555 х 495 рх и цветом # 827a80. Примените стиль слоя Drop Shadow (Тень).
![](/lessons/les3035/74.jpg)
![](/lessons/les3035/75.jpg)
![](/lessons/les3035/76.jpg)
![](/lessons/les3035/77.jpg)
Для того чтобы добавить собственный стикер, откройте любое Изображение в Фотошопе и переместите его в рабочий документ выше слоя со стикером. Из слоя с картинкой создайте обтравочную маску, для этого щелкните по нему правой кнопкой мыши и выберите пункт Create Clipping Mask (Создать обтравочную маску.)
![](/lessons/les3035/78.jpg)
![](/lessons/les3035/79.jpg)
Окончательный результат.
![](/lessons/les3035/80.jpg)
В итоге у нас получилось изображение когда-то известного картриджа Game Boy, которое можно использовать в качестве иконки или даже напечатать на футболке!
Автор урока: ADRIEN
Источник: supercolortuts.com
Комментарии 27
Спасибо за урок!
Спасибо за перевод!
Благодарю за отличный урок!
спасибо
Ещё вариант со стикером.
Спасибо за урок и за перевод.
Спасибо!
не совсем правильно, конечно, получилось. )
а зачем кнопки делали?
Наверно затем, что показано 2 варианта - с кнопками и без ...))
спасибо! вот что вышло..
большое спасибо)
И, последнне: если кто-то захочет обвинить меня в том, что в тогдашнем фотошопе этого сделать было невозможно в силу "того-то" или "чего-то", то могу предложить ознакомитться с творчеством Kai Krause, пиратские или взломанные утилиты которого, под названием "Alien Skin Eye Candy" или может быть какие иные KAI filters я испльзовал ещё тогда, когда в великом и могучем PhotoShop'e существовал откат лишь только на ОДИН-ЕДИНСТВЕННЫЙ ШАГ(!) - Ctrl+Z...![](/img/blank.gif)
Права на ошибку у вас не было!
Так как сохранять бесконечное количество вариантов на HD тоже не было: в то время "винт" у меня был примерно 60-80Мб
З.Ы. для модератов: не удаляйте мои ностальгические комменты хотя бы из прикола про "олдфагов" :)
"Angry SWAK" - никакая не пародия на всем известный и любимый "Hangry birds"!
Существуют ссылки на первоисточники...
Просто меня раздражали вот эти формы:
О, да! Тема интереснейшая!
В попытке оптимизации эргономики всем известного китайского "Тетриса", чисто в PhotoShop'е 20 лет назад у меня вышло такое:
пожалуйста,проверьте ссылку.
Спасибо!
Спс за урок!
Svetlana, спасибо за перевод! Я на таких уроках отдыхаю!
Шрифт Pretendo - на форуме в теме к этому уроку.
Мой вариант))
Вот ещё без изображения. Не знаю почему, но мне больше нравится работа без изображения)
Спасибо.