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





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

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


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

Подсказка

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

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

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


Иконка ошибки Vista


Шаг 1
Сначала взгляните на икону, которую мы будем создавать. Поняв технику, вы сможете создать любую другую иконку.


Иконка ошибки Vista


Шаг 2
Создайте новый документ размером 540х300 пикселей с белым фоном. Я расположил иконку ошибки в нижний угол, чтобы иметь представление о том, что мы создаём.
Создайте новый слой (Create New Layer) и назовите его “Border”. Выберите инструмент Овальная область (Elliptical Marquee Tool).


Иконка ошибки Vista


Шаг 3
Создайте круглое выделение размером 256х256 пикселей. Используйте меню Окно»Инфо (Window > Info), чтобы следить за размерами при создании круга, либо воспользуйтесь функцией Заданный размер в настройках инструмента сверху. Установите цвета по умолчанию (D) и залейте круг чёрным цветом (Alt+Backspace), не убирайте выделение.


Иконка ошибки Vista


Шаг 4
Теперь нужно вырезать среднюю часть и оставить только границы для иконки. Примените Сжатие (Modify – Contract) со значением 10 пикселей и нажмите Delete. Не убирайте выделение.


Иконка ошибки Vista


Шаг 5
Создайте новый слой (Create New Layer) и назовите его “Middle”, залейте выделение любым цветом на этом слое. Теперь можете снять выделение (Ctrl+D).


Иконка ошибки Vista


Шаг 6
Выберите слой “Border” и перейдите в меню Стилей слоя (Layer Style - Blending Options). Настройте так:

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


Иконка ошибки Vista


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Иконка ошибки Vista


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Иконка ошибки Vista

Иконка ошибки Vista


Шаг 7
Теперь выберите слой “Middle” и примените эти стили:

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


Иконка ошибки Vista


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Иконка ошибки Vista


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Иконка ошибки Vista

Иконка ошибки Vista


Шаг 8
Пора вставлять крестик. Если посмотрите внимательно на крест иконки, то на нём все края закруглены. Можно написать “+” и повернуть его. Я нашёл подходящий шрифт для этого, который вы можете скачать в конце урока. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите “+”.


Иконка ошибки Vista


Шаг 9
Инструментом Свободное трансформирование (Free Transform) наклоните крест под углом 45 градусов, и инструментом Перемещение (Move Tool) расположите крестик по центру.


Иконка ошибки Vista


Шаг 10
Сделайте копию слоя с крестиком и назовите оба слоя “X Bottom” и “X Top”, как показано ниже. Потом скройте верхний слой.


Иконка ошибки Vista


Шаг 11
К слою “X Bottom” примените такие стили:

Отбрасывание тени (Режим – Умножение):


Иконка ошибки Vista


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Иконка ошибки Vista


Шаг 12
Сделайте верхний слой видимым снова и примените эти стили:

Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Иконка ошибки Vista


Шаг 13
Инструментом Перемещение (Move Tool) сдвиньте крестик на верхнем слое влево на 1 пиксель.


Иконка ошибки Vista


Шаг 14
Мы почти закончили, осталось добавить градиентную заливку на иконку в стиле Web 2.0. Создайте новый слой (Create New Layer) и назовите его “Highlight”. Сделайте выделение слоя “Middle”.


Иконка ошибки Vista


Шаг 15
Установите цвета по умолчанию (D) и залейте выделение белым цветом в новом слое (Ctrl+Backspace). Установите Заливку (Fill) – 10%.


Иконка ошибки Vista


Шаг 16
Инструментом Овальная область (Elliptical Marquee Tool) создайте выделение, как показано ниже, и нажмите Delete. Можете убрать выделение (Ctrl+D).


Иконка ошибки Vista

Иконка ошибки Vista

Иконка ошибки Vista



PSD файл и другие файлы урока можете скачать здесь.



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

написал : АР

офигеть

---------------


написал : РомкЭ^^

спасибо хороший урок)
только крестик не могу вставить

---------------


написал : positive11

что мешает вставить крестик?

---------------


написал : Galaxy

---------------


написал : Ostron

Клево! все получилось

---------------


написал : Kord

админ это один из лучших сайтов в инете,уроки отличные... fellow wink

---------------


написал : Дрон4ік

Спастбо за урок)))) АФТАР ЖООТ lol

---------------


написал : hanc

Спасибо большое)))Все получилось))

---------------


написал : Евгения

Спасибо, мне очень понравился урок. Всё получилось smile

---------------


написал : Игорь

а на самом деле все так просто )))
СПС БОЛЬШОЕ!!!
отличный урок!

---------------


написал : Денис

Огромное спасибо=)

---------------


написал : Romzes7

Спасибо большое... Действительно простой но очень полезный урок. На редкость полезнный сайт, спасибо вам.

---------------


написал : positive11

Romzes7, Нам очень приятно! Рады стараться!

---------------


написал : olegikoligik

Хороший урок, всё понятно расписано. Даже для новичков всё понятно. Вот что у меня получилось:

---------------


написал : Павел

Все получилось, благодарю!

---------------


написал : Даня

Спасибо очень мне понравилось.

---------------


Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: