Adobe Photoshop, уроки, кисти фотошоп, плагины, стили, макросы, градиенты, текстуры, шрифты, иконки
Ваш логин   Пароль
Забыли пароль?

Loading Interface - уроки фотошоп

28 апреля 2008 | Пользователь NonSa

Загрузите из Интернета такую или подобную текстуру, я использовал эту, размером 1280x1024 px и 72 точки на дюйм.

Loading Interface - уроки фотошоп


Нажимаем CTRL+SHIFT+U

Loading Interface - уроки фотошоп


Выставляем следующие параметры для слоя с текстурой, для этого щелкаем правой клавишей мыши по слою (предварительно создав дубликат слоя или перенеся текстуру в новый документ) и в Blending Options выбираем Gradient Overlay (Опции смешивания/ перекрытие градиентом):

Loading Interface - уроки фотошоп


Параметры градиента:

Loading Interface - уроки фотошоп


Loading Interface - уроки фотошоп


Затем, используя инструмент Ellipse Tool (U) (Эллипс), создаем круг: (слой-фигура на новом слое)

Loading Interface - уроки фотошоп


Параметры стиля этого слоя: Blending Options>Outer Glow (Внешнее свечение)

Loading Interface - уроки фотошоп


Blending Options>Inner Glow (/ Внутреннее свечение)

Loading Interface - уроки фотошоп


Blending Options>Gradient Overlay (/Перекрытие градиентом) (Angle - Угловой)

Loading Interface - уроки фотошоп


Градиент:

Loading Interface - уроки фотошоп


Blending Options>Stroke (/Кайма, Обводка)

Loading Interface - уроки фотошоп


Loading Interface - уроки фотошоп


Создаем еще один круг цветом #565656. Для начала инструментом Ellipse Tool (U) чертим круг такого же диаметра, как и предыдущий (оставляя видимой только окантовку), а затем, удерживая Alt, вырезаем внутреннюю часть, применяя такой же инструмент. (NS: для того чтобы вырезать центральную часть – включите в панели опций режим Subtract from shape area (Вычесть из области фигуры). Удерживая Alt, устанавливаем курсор в центр круга, нажимаем левую клавишу мыши и плавно ведем её в сторону).

Loading Interface - уроки фотошоп


Параметры стиля этого слоя: Blending mode-Lighten (Режим смешивания – Замена светлым)
Blending Options>Inner Glow (Опции смешивания/ Внутреннее свечение)

Loading Interface - уроки фотошоп


Blending Options>Bevel and Emboss (Скос и рельеф)

Loading Interface - уроки фотошоп


Loading Interface - уроки фотошоп


Используя тот же инструмент Ellipse Tool (U), создаем следующий слой-фигуру:

Loading Interface - уроки фотошоп


Параметры этого слоя: Blending Options>Gradient Overlay (Опции смешивания / Перекрытие градиентом)

Loading Interface - уроки фотошоп


Loading Interface - уроки фотошоп


Blending Options>Stroke

Loading Interface - уроки фотошоп


Loading Interface - уроки фотошоп


Используйте в последний раз инструмент эллипса, чтобы создать следующий слой:

Loading Interface - уроки фотошоп


Параметры слоя: Fill 0% (Заливка)
Blending Options>Drop Shadow (Опции смешивания/ Тень)

Loading Interface - уроки фотошоп


Blending Options>Inner Glow (/Внутреннее свечение)

Loading Interface - уроки фотошоп


Blending Options>Gradient Overlay (/Перекрытие градиентом)

Loading Interface - уроки фотошоп


Параметры градиента:

Loading Interface - уроки фотошоп


Blending Options>Stroke (/Кайма, Обводка)

Loading Interface - уроки фотошоп


Параметры градиента:

Loading Interface - уроки фотошоп


Loading Interface - уроки фотошоп


Выберите инструмент Rectangle Tool (U) (Прямоугольник), и тянем вертикальную черную полосу, пересекающую центр цветного круга:

Loading Interface - уроки фотошоп


Сделайте двадцать - тридцать копий этого последнего слоя (с полосой) и, выбрав Free Transform (Свободное трансформирование), поворачиваем копии под определенным одинаковым углом:

Loading Interface - уроки фотошоп


Loading Interface - уроки фотошоп


Комбинируем в группу все слои, содержащие черные линии (удерживая Ctrl, щелкаем по соответствующим слоям в палитре слоев, чтобы выделить их, а затем, удерживая нажатой левую клавишу мыши, тянем контур выделения вниз палитры к иконке Create a new group (Создать новую группу)). Затем измените параметры для новой группы: Opacity 20% (Непрозрачность 20%).

Loading Interface - уроки фотошоп


Сделайте копию группы, содержащей черные линии. Добавим копии Opacity (Непрозрачность) до 100% и сотрем на копии все линии, кроме показанных ниже: (NS: можете просто удалить лишние слои копии или скрыть их видимость).

Loading Interface - уроки фотошоп


Выберите инструмент Ellipse Tool (U) (Эллипс), чтобы создать следующий слой элемента в центральной части цветного круга:

Loading Interface - уроки фотошоп


Параметры слоя: Blending Options>Outer Glow (/ Внешнее свечение)

Loading Interface - уроки фотошоп


Blending Options>Gradient Overlay (/ Перекрытие градиентом)

Loading Interface - уроки фотошоп


Параметры градиента:

Loading Interface - уроки фотошоп


Blending Options>Stroke

Loading Interface - уроки фотошоп


Loading Interface - уроки фотошоп


Этим же инструментом создаем еще один круг. Сначала мы чертим внешний край этого круга, а затем удерживая Alt (включите в панели опций режим Subtract from shape area (Вычесть из области фигуры)), создаем другой круг меньшего диаметра, и таким образом вырезаем среднюю часть круга. После этого той же техникой вырезаем еще часть кольца, подобно изображению ниже:

Loading Interface - уроки фотошоп


Параметры этого слоя: Fill 20% (Заливка)
Blending Options>Drop Shadow (Опции смешивания / Тень)

Loading Interface - уроки фотошоп


Blending Options>Gradient Overlay

Loading Interface - уроки фотошоп


Параметры градиента:

Loading Interface - уроки фотошоп


Loading Interface - уроки фотошоп


Используя инструмент Pen Tool (P) (Перо), чертим следующую слой-фигуру. Форму можно подправить инструментом Convert Point Tool (Угол, Преобразовать узел).

Loading Interface - уроки фотошоп


Параметры этого слоя: Blending Options>Inner Glow (/ Внешнее свечение)

Loading Interface - уроки фотошоп


Blending Options>Gradient Overlay (/ Перекрытие градиентом)

Loading Interface - уроки фотошоп


Loading Interface - уроки фотошоп


Blending Options>Stroke (Кайма, Обводка)

Loading Interface - уроки фотошоп


Параметры градиента:

Loading Interface - уроки фотошоп


Loading Interface - уроки фотошоп


Выберите еще раз Pen Tool (P), чтобы изобразить блик. Чертим форму белого цвета и правим инструментом Convert Point Tool.

Loading Interface - уроки фотошоп


Параметры для слоя блика: Fill 20%

Loading Interface - уроки фотошоп


Инструментом Pen Tool (P) чертим треугольник.

Loading Interface - уроки фотошоп


Параметры этого слоя: Blending Options>Drop Shadow (/Тень)

Loading Interface - уроки фотошоп


Blending Options>Gradient Overlay

Loading Interface - уроки фотошоп


Loading Interface - уроки фотошоп


Blending Options>Stroke

Loading Interface - уроки фотошоп


Loading Interface - уроки фотошоп


Применяя инструменты Pen Tool (U) и Convert Point Tool, чертим другой блик белого цвета:

Loading Interface - уроки фотошоп


Меняем для этого слоя: Fill 17% (Заливка)

Loading Interface - уроки фотошоп


Сейчас мы, используя Ellipse Tool (U) (Эллипс), чертим блик белого цвета (круг). Затем, используя инструмент Add Anchior Point (Добавить узловую точку), изменим форму в нижней части (как показано на скриншоте): (Удерживая левую клавишу мыши, устанавливаем курсор на нижней узловой точке и перемещаем её вверх, затем добавляем новую опорную точку и с помощью направляющих правим форму).

Loading Interface - уроки фотошоп


Параметры этого слоя: Fill 20%

Loading Interface - уроки фотошоп


Создайте новый документ (File>New) 4x4 px и 72 точки на дюйм. Используя инструмент Pencil Tool (B)(Карандаш) (диаметром 1 px), создаем белым цветом такой же образец:

Loading Interface - уроки фотошоп


Edit> Define Pattern (Редактировать> Определить Образец)
Следующий шаг – выбираем инструмент Ellipse Tool (U) и создаем новый слой, на котором используем сделанный образец. (Чертим круг).

Loading Interface - уроки фотошоп


Параметры этого слоя: Opacity 20%, Fill 0% (Непрозрачность, Заливка)
Blending Options>Pattern Overlay (Опции смешивания / Перекрытие узором)

Loading Interface - уроки фотошоп


Loading Interface - уроки фотошоп


Работа закончена!

Loading Interface - уроки фотошоп

Перевод: NonSa

Источник: adobetutorialz.com


Отзывов: 8 | Просмотров: 1161

Похожие новости:


  • уроки photoshop - Проектирование деловых форм
  • уроки фотошоп - Saint Valentine
  • Открытка - Веселое рождество
  • Проект интерфейса StarCraft - уроки фотошоп
  • Обои «Новогодние или Рождественские шары».

  • каментыкомментарии


    Аватар

    Группа: Посетители

    Публикаций: 0

    Комментариев: 2

    #1 Ответил arfc, 28 апреля 2008 21:11

    Прикольно, мне понравилось, спс Нонса.

    ответить

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

    Аватар

    Группа: Посетители

    Публикаций: 0

    Комментариев: 11

    #2 Ответил TIGR, 28 апреля 2008 21:20

    а для чего это можно использовать?

    ответить

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

    Аватар

    Группа: Посетители

    Публикаций: 0

    Комментариев: 2

    #3 Ответил arfc, 29 апреля 2008 00:07

    для саморазвития.

    ответить

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

    Аватар

    Группа: Посетители

    Публикаций: 0

    Комментариев: 38

    #4 Ответил Любава, 29 апреля 2008 02:55

    спасибо, обязательно сделаю.

    ответить

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

    Аватар

    Группа: Посетители

    Публикаций: 0

    Комментариев: 4

    #5 Ответил Destroyer, 30 апреля 2008 14:33

    Для навигации сайта, конечно! Только сначала нужно переделать на флеш эту картинку. Вот себе собираюсь сделать такой! Спасибо, Нонса!

    ответить

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

    Аватар

    Группа: Посетители

    Публикаций: 0

    Комментариев: 2

    #6 Ответил scvorec, 1 мая 2008 13:13

    кто может расскажите как из этого анимацию сделать для сайта пожалуйста!

    ответить

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

    Аватар

    Группа: Главный редактор

    Публикаций: 178

    Комментариев: 368

    #7 Ответил NonSa, 3 мая 2008 20:48

    scvorec,
    Основа любой анимашки - прорисовка кадров!
    Задумали, к примеру, двигать стрелочку - значит копируете слой стрелки и поворачиваете и так далее... чем больше слоев и меньше угол поворота, тем больше пластики в анимашке. Можете изменить цвет....
    Посмотрите уроки по анимации. :-))

    ответить

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

    Аватар

    Группа: Посетители

    Публикаций: 0

    Комментариев: 1

    #8 Ответил Kolbass, 4 мая 2008 05:50

    Я как то раз делал подобное но не так круто получилось.. )

    ответить

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


    добавитьДобавить комментарий:


    Добавить комментарий как «Гость» (вход на сайт / регистрация)


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

    Символы на картинке:

     

    О сайте: ↓

    Всё об известнейшем графическом редакторе Adobe Photoshop. На сайте можно найти много интересных обучающих уроков, достойную коллекцию учебников от известных отечественных и зарубежных мастеров, а так же скачать кисти, плагины, шрифты, макросы, иконки. Так же у нас Вы можете скачать последню версию Adobe Photoshop CS3 и узнать историю происхождения этого грандиозного графического редактора!

    Скачать Adobe Photoshop CS3

     

     

    Adobe Photoshop CS3

    Статистика ↓

    Голосование ↓

    Какой версией Photoshop вы пользуетесь?
    7.0
    CS
    CS2
    CS3
    другой
    не пользуюсь pardon

    Онлайн учебник ↓

    подробнее

    Реклама↓

    История Adobe Photoshop

    История создания Adobe Photoshop

    Подробнее