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





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

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


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

Подсказка

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

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

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

Стеклянная 3D иконка RSS


Шаг 1
Создайте новый документ размером 450х450 пикселей с белым фоном. Установите цвет заливки - #e2832f.

Шаг 2
Создайте новый слой (Create New Layer) и назовите его “Icon Base”. Выберите инструмент Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) в режиме фигур и установите значение радиуса – 40 пикселей. Создайте фигуру, показанную ниже, удерживая Shift, чтобы получился квадрат.

Стеклянная 3D иконка RSS


Шаг 3
Перейдите в режим Перспективы (Transform – Perspective) и измените фигуру, как показано ниже. Примените изменения (Enter), перейдите в режим Свободного трансформирования (Free Transform) и сожмите немного фигуру.

Стеклянная 3D иконка RSS

Стеклянная 3D иконка RSS


Шаг 4
Создайте новый слой, кликните на нём правой кнопкой в палитре слоёв и выберите Создать обтравочную маску (Create Clipping Mask). У вас появится стрелка, указывающая вниз, рядом с иконкой слоя. Теперь все пиксели, которые вы расположите на прямоугольнике, не выйдут за его границы.
Выберите инструмент Градиент (Gradient Tool), установите цвет заливки - #fac042, цвет фона - #d75927, стиль – радиальный градиент. Сделайте заливку снизу вверх, как показано ниже.

Стеклянная 3D иконка RSS


Шаг 5
Создайте новый слой “Top Reflection”, создайте обтравочную маску, как и в прошлом шаге.

Стеклянная 3D иконка RSS


Выберите инструмент Перо (Pen Tool) в режиме контуров и нарисуйте такой контур:

Стеклянная 3D иконка RSS


Кликните правой кнопкой на контуре и выберите Образовать выделенную область (Make Selection): Растушевка – 0 , Сглаживание – да, Новая выделенная область.
Выберите инструмент Градиент (Gradient Tool), установите цвет заливки - #f2b46b, стиль – линейный градиент, от заливки к прозрачному, режим – нормальный, непрозрачность – 100%. Сделайте заливку с правого верхнего угла в левому нижнему, как показано ниже. Вам не нужно вести заливку прямо до угла. Остановитесь на расстоянии примерно 80 пикселей от него.

Стеклянная 3D иконка RSS

Стеклянная 3D иконка RSS


Шаг 6
Сделайте копию слоя “Icon Base”. Для копии тоже нужно создать отбтравочную маску. Выберите нижний слой “Icon Base” и назовите его “Icon Body”, в режиме Свободного трансформирования (Free Transform) немного измените его.

Стеклянная 3D иконка RSS


Примените изменения. Потом снова перейдите в тот режим и измените верхнюю левую и правую нижние точки.

Стеклянная 3D иконка RSS


Нажмите Enter. Выберите инструмент Стрелка (Direct Selection Tool). Кликните на слое “Icon Body”, будьте осторожны, вам не нужно кликать на области слоя “Icon Base”, иначе вы выделите не ту часть. После клика вы увидите контур фигуры.
Кликните именно на сером контуре и вам станут видны якорные точки. Вам нужно передвинуть точки, отмеченные ниже, чтобы придать реалистичную перспективу.

Стеклянная 3D иконка RSS

Стеклянная 3D иконка RSS


Шаг 7
К слою “Icon Body” примените следующие стили:

Внутренняя тень: Режим – Линейный осветлитель.

Стеклянная 3D иконка RSS


Внутреннее свечение: Режим – Линейный осветлитель, Метод – Мягкий.

Стеклянная 3D иконка RSS


Тиснение: Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление, Режим тени – Умножение.

Стеклянная 3D иконка RSS


Глянец: Режим – Умножение.

Стеклянная 3D иконка RSS


Наложение градиента: Режим – Мягкий свет, Стиль – Линейный.

Стеклянная 3D иконка RSS


Шаг 8
Вы получите такой результат:

Стеклянная 3D иконка RSS


Сделайте копию слоя “Icon Base”, расположите копию под фоновым слоем и скройте её. Вернитесь к видимому слою “Icon Body”, создайте новый слой над ним и объедините их (Ctrl+E). Назовите полученный слой “Icon Body”.

Шаг 9
Создайте новый слой (Create New Layer), создайте обтравочную маску. Выберите инструмент Градиент, стиль – зеркальный, цвет заливки - #eca839, градиент от заливки к прозрачному, режим – нормальный, непрозрачность – 100%.
Сделайте заливку в трёх видимых углах слоя “Icon Body”.

Стеклянная 3D иконка RSS


Установите Режим наложения слоя – Осветление (Blending Mode – Screen) и Непрозрачность – 90%. Нажмите Ctrl+E, чтобы объединить его со слоем “Icon Body”.

Шаг 10
Выберите инструмент Осветлитель (Dodge Tool) размером 30 пикселей в диапазоне Света (Highlights) с экспозицией 11%. Включите функцию Аэрограф (Airbrush). Осветлите левый нижний угол:

Стеклянная 3D иконка RSS


Также осветлите левую сторону:

Стеклянная 3D иконка RSS


Шаг 11
Создайте новый слой (Create New Layer) и назовите его “Border”, создайте обтравочну маску и расположите, как показано ниже.

Стеклянная 3D иконка RSS


Сделайте выделение слоя “Icon Base” (Ctrl+Click) и перейдите в мен Редактирование»Выполнить обводку (Edit > Stroke): Расположение – По центру, Ширина – 24 пикселя.

Стеклянная 3D иконка RSS


Теперь нужно настроить перспективу обводки. Перейдите в режим Свободного трансформирования (Free Transform) и измените слой, как показано ниже.

Стеклянная 3D иконка RSS


К обводке примените стиль Наложение градиента: Режим – Нормальный, Стиль – Линейный.

Стеклянная 3D иконка RSS


Шаг 12
Создайте новый слой под слоем “Border”. Сделайте выделении слоя “Border” (Ctrl+Click), установите цвет заливки - #fdf8d2, цвет фона - #f5dc88. Перейдите в меню Редактирование»Выполнить обводку (Edit > Stroke): Расположение – По центру, Ширина – 4 пикселя.
Установите Режим наложения – Перекрытие (Blending Mode – Overlay), Непрозрачность – 50% и примените стиль Наложение градиента: Режим – Нормальный, Стиль – Линейный.

Стеклянная 3D иконка RSS


Объедините последний слой со слоем “Border” (Ctrl+E).Выберите инструмент Осветлитель (Dodge Tool) и добавьте света. Потом инструментом Затемнение (Burn Tool): Диапазон – Тени, Экспозиция – 11%, Аэрограф (Airbrush) – нет, и добавьте тёмные места.

Стеклянная 3D иконка RSS


Шаг 13
Создайте новый слой и расположите его над слоем “Icon Body”. Сделайте выделение слоя “Icon Base” (Ctrl+Click), создайте обтравочную маску для нового слоя и перейдите в меню Редактирование»Выполнить обводку (Edit > Stroke): Расположение – По центру, Ширина – 4 пикселя. Установите Режим наложения – Жёсткий свет (Blending Mode – Hard Light) и Непрозрачность – 70%. Кликните на иконку, показанную ниже.

Стеклянная 3D иконка RSS


Установите цвет заливки - #fbf2c7, цвет фона - #fbca30, выберите инструмент Градиент (Gradient Tool), от заливки к прозрачному, стиль – радиальный градиент, и сделайте несколько заливок в углах, и несколько затенений на основании.

Стеклянная 3D иконка RSS


Примените стиль Внешнее свечение: Режим – Линейный осветлитель, Метод – Мягкий.

Стеклянная 3D иконка RSS


Шаг 14
Сделайте выделение слоя “Icon Base”. Создайте новый слой между слоями “Icon Body” и обводкой, которую вы создали в предыдущем шаге. Оба слоя с обводкой и это новый слой должны иметь обтравочную маску. Назовите новый слой “Body 3D”, установите цвет заливки - #c35c18 и залейте выделение. Установите Режим наложения – Осветление основы (Blending Mode – Color Dodge) и Непрозрачность – 20%. Снимите выделение (Ctrl+D).

Стеклянная 3D иконка RSS


Шаг 15
Сделайте выделение слоя “Icon Base”, создайте новый слой над слоем “Top Reflection”, создайте обтравочную маску и назовите слой “Body 3D”.

Стеклянная 3D иконка RSS


Кликните на иконку сохранения прозрачности пикселей в верхней части палитры слоёв (мы уже делали это ранее). Установите цвет заливки - #f2af3b, цвет фона - #c25c18, выберите инструмент Градиент (Gradient Tool), от заливки к фону. Сделайте заливку от верхнего правого угла в левому нижнему.

Стеклянная 3D иконка RSS


Установите Режим наложения – Умножение (Blending Mode – Multiply) и Непрозрачность – 27%.

Шаг 16
Установите цвет заливки - #fcee88, создайте новый слой над слоем “Body 3D” и назовите его “Corners Glow”, выберите инструмент Градиент (Gradient Tool), стиль – радиальный градиент, от заливки к прозрачному, и сделайте заливку, как показано ниже.

Стеклянная 3D иконка RSS


Установите Режим наложения – Линейный осветлитель (Blending Mode – Linear Dodge), Заливку (Fill) – 35%.

Шаг 17
Снимите выделение (Ctrl+D), если оно есть. Сделайте выделение слоя “Body 3D” и установите цвет заливки - #c35c18. Создайте новый слой “Shadow 3D”, расположите его, как показано ниже:

Стеклянная 3D иконка RSS


Выберите инструмент Градиент (Gradient Tool), от заливки к фону, стиль – линейный градиент, и сделайте заливку с середины верхней стороны к левому нижнему углу, как показано ниже:

Стеклянная 3D иконка RSS


Понизьте Непрозрачность до 40%.

Шаг 18
Создайте новый слой:

Стеклянная 3D иконка RSS


Установите его Режим наложения – Линейный затемнитель (Blending Mode – Linear Burn) и Непрозрачность – 70%. Также понизьте Заливку (Fill) слоя “Top Reflection” до 90% и установите Режим наложения – Замена светлым (Blending Mode – Lighten). Сделайте выделение слоя “Body 3D”, инвертируйте его (Select – Inverse), выберите инструмент Градиент (Gradient Tool) с теми же настройками, что и раньше, и сделайте заливку с верхней середины. Снимите выделение (Ctrl+D).

Стеклянная 3D иконка RSS


Шаг 19
Создайте новый слой под слоем “Border”, назовите его “Reflection 1”. Сделайте выделение слоя “Icon Base”, выберите инструмент Овальная область (Elliptical Marquee Tool), в настройках сверх установите значение Пересечение с выделенной областью (Intersect with Selection), растушевка – 0, Сглаживание (Anti-alias) – да.
Сделайте выделение так, чтобы осталась только эта часть:

Стеклянная 3D иконка RSS


Установите Режим наложения – Осветление основы (Blending Mode – Color Dodge) и Заливку (Fill) – 35%.

Шаг 20
Снимите выделение:

Стеклянная 3D иконка RSS


Сделайте выделение слоя “Icon Base”, создайте новый слой под слоем “Reflection 1” и назовите его “Reflection 2”. При помощи того же инструмента выделения создайте такую выделенную область:

Стеклянная 3D иконка RSS


Тем же градиентом сделайте такую заливку:

Стеклянная 3D иконка RSS


Установите Режим наложения – Жёсткий свет (Blending Mode – Hard Light) и Заливку (Fill) – 25%.

Шаг 21
Сейчас у вас должно быть такое изображение:

Стеклянная 3D иконка RSS


Перейдём к созданию символа RSS. Загрузите эту фигуру. Создайте новый слой поверх остальных. Вставьте загруженную фигуру в наш документ и расположите, как показано ниже.

Стеклянная 3D иконка RSS


Инструментом Свободное трансформирование (Free Transform) , удерживая Ctrl потяните правый верхний угол, чтобы получить такую форму:

Стеклянная 3D иконка RSS


Шаг 22
Сделайте две копию символа и скройте их. Видимый слой с символом расположите под слоем “Reflection 2” и создайте обтравочную маску. Назовите слой “RSS Face”. Примените следующие стили:

Тиснение: Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление, Режим тени – Умножение.

Стеклянная 3D иконка RSS


Наложение цвета: Режим – Жёсткий свет.

Стеклянная 3D иконка RSS


Наложение градиента: Режим – Нормальный.

Стеклянная 3D иконка RSS


Понизьте Заливку (Fill) слоя до 90%.

Стеклянная 3D иконка RSS


Шаг 23
Одну из скрытых копий сделайте видимой и расположите под слоем “RSS Face”. Инструментом Перемещение (Move Tool) сдвиньте их немного влево и вниз, чтобы получилась тень.

Стеклянная 3D иконка RSS


Если нужно, измените копии, чтобы не было щелей между копиями. Измените цвет фигуры на #c35c18. Потом примените стиль Наложение градиента: Режим – Нормальный, Стиль – Линейный.

Стеклянная 3D иконка RSS


Понизьте Заливку (Fill) слоя до 35%.

Шаг 24
Вторую скрытую копию расположите под двумя другими слоями с символом. Измените её цвет на #c55f1a. Сдвиньте её немного влево и вниз.

Стеклянная 3D иконка RSS


Понизьте Заливку (Fill) слоя до 20%.

Стеклянная 3D иконка RSS


Финальный результат:

Стеклянная 3D иконка RSS





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





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