Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

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

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:

Иконка Google


Шаг 1
Создайте документ размером 128х128 пикселей. Нужно будет отвести горизонтальные и вертикальные направляющие:

Вертикальные на отметках: 0px, 32px, 64px, 96px, 128px
Горизонтальные на отметках: 0px, 20px, 128px

Иконка Google


Шаг 2
Перейдите в меню Изображение»Размер холста (Image > Canvas Size). Введите значение ширины 600 пикселей и высоты 400 пикселей. Направляющие останутся в центре.
Создайте новый слой “background” и залейте холст радиальным градиентом от #ffffff к #eeeeee.

Иконка Google


Шаг 3
Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте фигуру размером 128х128 пикселей. Цвет фигуры - #343434, радиус – 20 пикселей.

Иконка Google


Шаг 4
Растрируйте слой (Rasterize – Shape),сделайте 4 копии слоя. В общем должно быть 5 слоёв с закруглённым прямоугольником:

Первый слой – “icon bottom”
Второй слой – “ icon top 1”
Третий слой – “ icon top 2”
Четвёртый слой – “ icon top 3”
Пятый слой – “ icon top 4”

При помощи инструмента Прямоугольная область (Rectangular Marquee Tool) и направляющих, отсеките часть каждого слоя. На слое “icon bottom” отсеките верхние 20 пикселей. На слое “icon top 1”отсеките всё, кроме верхней области 32х32 пикселя. У остальных слоёв оставляйте такую же область (32х32 пикселя), но в разных места (смотрите на картину ниже).

Иконка Google

Иконка Google

Иконка Google

Иконка Google

Иконка Google


Шаг 5
Перейдите в меню Стилей слоя “icon bottom” (Layer Style - Blending Options). Примените эти стили:

Тиснение: Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление, Режим тени – Умножение
Наложение градиента: Режим – Нормальный, Стиль – Линейный. Цвет: #1d1d1d – #292929

Иконка Google

Иконка Google


Шаг 6
К слою “icon top 1” примените эти стили:

Внутренняя тень: Режим – Умножение
Наложение цвета: Режим – Нормальный, Цвет - #f23a3f.

Иконка Google

Иконка Google


Шаг 7
Кликните правой кнопкой на слое “icon top 1” и выберите Скопировать стили слоя (Copy Layer Styles), потом кликните правой кнопкой на следующем слое “icon top” и выберите Вставить стиль слоя (Paste Layer Style). Это нужно будет сделать для каждого слоя “icon top” и изменить цвет каждой фигуры через стиль Наложение цвета:

“icon top 2”- #5988f5
“icon top 3”- #5fb816
“icon top 3”- #ffc000

Иконка Google


Step 8
Сделайте выделение всей иконки любым способом. Создайте новый слой “radial gradient”. Сделайте радиальную заливку градиентом из верхней центральной части иконки. Цвет – от белого к прозрачному. Установите Режим наложения – Перекрытие (Blending Mode – Overlay) и Непрозрачность – 30%.

Иконка Google

Иконка Google


Шаг 9
На иконку нужно добавить букву “g”. Её можно взять с логотипа Google. Вставьте букву в новый документ и перейдите в меню Выделение»Цветовой диапазон (Select > Color Range). Кликните на синей букве и настройте, как показано ниже. У Вас должна быть выделена буква “g”.

Иконка Google


Вставьте букву “g” в наш документ. Расположите на тёмной области иконки слева от центра. Примените стиль Наложение цвета (Layer Style - Color Overlay):

Иконка Google

Иконка Google


Шаг 10
Инструментом Горизонтальный текст (Horizontal Type Tool) напишите знак “+”.

Иконка Google

Иконка Google


Набор иконок Google



Обсудить данный урок на форуме





Ссылка на источник урока