Главная | Регистрация | Вход | RSSЧетверг, 30.01.2025, 22:56

PhotoShopWorld

Форма входа
PhotoShopWorld
Уроки Фотошоп
Фотошоп дополнения
Учебник Фотошоп
Фотошоп Ещё...
Категории раздела
Эффекты [243]
Работа с текстом [188]
Работа с фото [444]
Графика для сайта [96]
Дизайн/Рисование [389]
Анимация [43]
Практика [53]
Работа с планшетом [33]
Кисти [22]
Фильтры / Плагины [17]
Рамки [1]
Текстуры (фоны) [11]
Экшены [0]
Стили [0]
Градиенты [7]
Шрифты [0]
Фигуры [2]
Шаблоны для фото [0]
Иконки [0]
PSD исходники [0]
Основы работы [65]
Установка дополнений [7]
Описание инструментов [32]
Фотошоп Ещё... [0]
Фотошоп
Орфография
Система Orphus
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Мир Фотошопа

Главная » Файлы » Графика для сайта

Навигация для игрового сайта
18.03.2011, 15:23

В данном уроке мы ещё раз освоим немного техники рисования, выделения и будем применять различные стили слоёв.

Создаем новый документ(Ctrl+N), зальем его каким-нибудь темным цветом (например, с помощью инструмента Заливка (G)).  Потом с помощью инструмента Прямоугольная область (М)  выделяем нужную нам область, скопируем её на новый слой trl+J) и зальем её другим цветом, например тем, что показано на рисунке.


Далее, находясь на этом слое, применим следующий параметр наложения Обводка (Stroke). Для этого зайдем, Слой > Стиль слоя > Параметры наложения > Обводка (Layer> LayerStyle> Blending Options > Stroke) и устанавливаем такие параметры, как указаны ниже


Создаем новый слой (Shft+Cntr+N), рисуем две белые линии (инструментом Перо (Pen Tool (Р))), на полученных двух слоях фигур понизим Непрозрачность (Opacity), автор понизил до 10%.


Создаем новый слой (Shft+Cntr+N), рисуем черный прямоугольник, как  на рисунке ниже (легко это сделать опять же с помощью Пера (P)).

К слою с этим же прямоугольником применим Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian Blur). У автора были такие настройки, вы же можете установить по своему вкусу.

Оставшиеся части вне прямоугольника можно стереть с помощью Ластика (Eraser).


Рисуем далее внутреннюю линию, подобно той, что показана на рисунках ниже. Это тоже можно выполнить с помощью Пера (Pen Tool, (P)).


Далее установите непрозрачность (Opacity) для этой линии на ваш вкус, автор поставил на 20%

Создаем новый слой (Shft+Cntr+N), выбираем инструмент Карандаш (Pencil Tool (В)), размер 1 пиксель, чтобы нарисовать 4 точки, как показаны ниже.


Далее перейдём в Параметры наложения (Blending Options), и установим следующие стили:
Bevel and Emboss (Тиснение) и Drop Shadow (Тень), и установите настройки, как указано ниже.



У вас должно получиться следующее:


Создаем новый слой и используя инструмент выделения Овальная область (М) - выделяем круг. Потом с помощью Заливки (G) зальём его белым цветом.


Опять переходим в Параметры наложения (Blending Options), и применяем следующие стили:
Внутренняя тень (InnerShadow) и Обводка (Stroke), как указано ниже.


Находясь на этом же слое, используя инструмент выделения Овальная область (М) - выделяем маленький круг внутри белого, и копируем
(
Ctrl+J) его на новый слой. На этом новом полученном слое удалите предыдущие эффекты.


Переходим в Параметры наложения (Blending Options) и применяем опять следующие стили:
Inner Shadow (Внутренняя тень) и Gradient Overlay (Наложение градиента). Настройки указаны на рисунке.


Должно получиться следующее:


Также при желании можете добавить Inner Glow (Внутреннее свечение).

Далее опустимся на первый слой,  где мы создали документ и, используя инструмент выделения Прямоугольная область (М), выделяем прямоугольник, как показано на рисунке ниже. Скопируем его на новый слой (Ctrl+J), и этот полученный слой перенесём мышкой на самый верх в окне слоёв (F7).


На этом слое переходим на Параметры наложения (Blending Options) и применяем следующий стиль:
Inner Shadow (Внутренняя тень), как показано на рисунке.


Должно получиться следующее:


Далее создав несколько таких кнопок и поэкспериментировав с настройками, соедините их вместе. Вот, что у вас должно получиться в итоге.

Категория: Графика для сайта | Добавил: Photoshop-master
Просмотров: 394 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
Фотошоп-Мастер
Фотоэффекты онлайн
Фотошоп с нуля!
Фотошоп уроки!
Photoshop
RSS лента

Кликните по иконке, чтобы получать новые уроки по RSS каналу

Создать фоторамку
Опросы
Есть ли у вас проблемы с закачкой дополнений с сайта?
Всего ответов: 21
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz

  • Copyright MyCorp © 2025
    Сделать бесплатный сайт с uCoz