Воскресенье, 20.07.2025, 20:35
Приветствую Вас Гость | RSS
Главная | Рисуем фотореалистичный плеер компании Apple. - Форум ::NDZ Pub Server CS1.6 | Регистрация | Вход
Форма входа
Поиск
Наш опрос
Вы кто...
Всего ответов: 28
Мини-чат
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика
    ::NDZ Pub Server CS1.6
    [ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
    • Страница 1 из 1
    • 1
    Рисуем фотореалистичный плеер компании Apple.
    NET_DOSTYPAДата: Пятница, 15.08.2008, 01:39 | Сообщение # 1
    Админ в законе
    Администраторы
    Сообщений: 2137
    Репутация: 39
    Offline
    Здравствуйте, сегодня мы будем рисовать фотореалистичный плеер от компании Apple.

    Шаг 1.
    Создаем новый документ (Ctrl+N) 800х600px.
    Используя Paint Bucket Tool (G) закрасьте фон черным цветом:

    Шаг 2.
    Берем инструмент Rounded Rectangle Tool (U) , выставляем радиус округления углов около 5px и создаем форму белого цвета. Назовите этот слой “Remote Shape”:

    Шаг 3.
    Зажмите Ctrl и в окне слоев щелкните по иконке слоя “Remote Shape” для загрузки выделения. Далее создаем новый слой (Shift+Ctrl+N), берем инструмент Gradient Tool (G) и закрашиваем выделение слева направо (левый цвет #FFFFFF, правый #E4E4E4;):

    Шаг 4.
    Сейчас мы будем добавлять оттенки на нашу форму.
    Создайте новый слой.
    Возьмите инструмент Brush Tool (B) размером около 5px с жесткими краями, зажмите Shift и нарисуйте вертикальную линию:

    Применяем к этой линии “Filter > Blur > Gaussian Blur” с использованием небольшого радиуса:

    Шаг 5.
    Теперь повторив шаг №4, создайте более темную и тонкую линию (я использовал цвет #898988 и кисть размером 4px):

    Шаг 6.
    Берем инструмент Move Tool (V) и переносим эти линии ближе друг к другу и размещаем их на левой части слоя “Remote Shape”:

    Далее дублируем слои с линиями (Layer > Duplicate Layer), выполняем “Edit > Transform > Rotate 180” и переносим их в правую часть:

    Шаг 7.
    Дублируем слой “Remote Shape” и размещаем получившийся слой под слой “ Remote Shape”. Меняем для копии цвет на черный (в окне слоев два раза щелкните по белой иконке формы для вызова палитры цветов) и инструментом Move Tool (V) поднимаем его чуть выше. Желательно поменять цвет фона, что бы лучше видеть, что вы делаете, я использовал цвет #DEDEDE:

    Шаг 8.
    Сейчас нам нужно сделать маску, для слоев с линиями.
    Зажимаем Ctrl и в окне слоев щелкаем по иконке слоя “Remote Shape”, для загрузки выделения.
    После этого зажимаем Shift+Ctrl и щелкаем по иконке слоя “Remote Shape Copy”, для добавления выделения к уже существующему. Далее в окне слоев выбираем любой из четырех слоев с полосками и выполняем “Layer > Layer Mask > Reveal Selection”. Повторите эти действия для всех слоев с полосками:

    Шаг 9.
    Теперь изменим прозрачность для слоев с полосками, пока они не будут выглядеть как показано ниже (я использовал для белых полос “Opacity:90%”, для серых “Opacity:15%”):

    Шаг 10.
    Основа нашего плеера готова, теперь добавим кнопки.
    Берем инструмент Ellipse Tool (U) и с зажатой клавишей Shift, рисуем круг любого цвета:

    Добавьте кругу обводку (Layer > Layer Style > Blending Options), цвет #C7C7C7.
    Установите “Fill:0%”:

    Шаг 11.
    Теперь добавим кнопки, “Старт”, “Пауза”, “Следующий трек”, “Предыдущий трек”, “Громкость выше” и “Громкость ниже”.
    Создадим новый круг выше и больше предыдущего:

    Далее зажимаем “Alt” (около курсора должен появиться знак минус) и создаем круг в середине только что сделанного, таким образом мы уберем внутреннюю часть круга:

    Шаг 12.
    Меняем цвет этой формы на #F6F6F8 и настраиваем стиль слоя (Layer > Layer Style > Blending Options):

    Шаг 13.
    Далее вы должны создать круг на том месте, где до этого вычитали. Используйте цвет #F6F6F8 и настройте стиль слоя:



    Шаг 14.
    Добавим надпись “Menu” (шрифт “Arial Black” цвет #C4C4C4) и значки “Play”, “Pause” “Forward”, “Backward”.
    Для создания значка “Play”, берем инструмент Custom Shape Tool (U) , выбираем форму треугольника и создаем его, используя цвет #C4C4C4 и выполняем “Edit > Transform Path > Rotate 90 CW”.
    Для значка “Pause” просто создайте два прямоугольника, инструментом Rectangle Tool (U) . Примерно также сделайте кнопки “Forward”, “Backward”. Кнопки “+” и “-“ напечатайте текстом:

    Шаг 15.
    Добавим блики на кнопки.
    Для этого зажимаем Ctrl и в окне слоев щелкаем по иконке слоя с основанием кнопки “Play/Pause”, загрузится выделение. Далее берем инструмент Elliptical Marquee Tool (M) , зажимаем Alt и выделяем часть уже существующего выделения. Далее создаем новый слой и закрашиваем выделение белым цветом:

    Шаг 16.
    Таким же методом добавьте блик на основу других кнопок:

    Шаг 17.
    С плеером мы закончили.
    Но не маловажно, как вы представите свою продукцию, поэтому сейчас мы будем создавать красивый фон.
    Создайте новый слой, разместите его под плеером.
    Возьмите инструмент Gradient Tool (G) от белого к черному, тип “Radial Gradient” и закрасьте созданный слой. Установите прозрачность слоя (Opacity) 20 - 30%:

    Шаг 18.
    Сейчас объедините все слои относящиеся к плееру в одну группу. Выберите их в окне слоев, с зажатым Ctrl и выполните “Layer > Group Layers (Ctrl+G)”.
    Теперь дублируем эту группу “Layer > Duplicate Group” и объединяем копию группы в один слой, для этого в окне слоев щелкните правой кнопкой мыши по группе и выберите “Merge Group”. Примените к получившемуся слою “Edit > Transform > Flip Vertical” и разместите его под слой с градиентом, который мы создали в предыдущем шаге.
    Далее применяем “Filter > Blur > Gaussian Blur” со значением “Radius:2px” и инструментом
    Move Tool (V) располагаем его как на скриншоте:

    Шаг 19.
    Добавим блестящий пол.
    Создайте новый слой под слоем с отражением плеера.
    Используя инструмент Rectangular Marquee Tool (M) создайте выделение.
    Далее выберите Gradient Tool (G) от белого к прозрачному, тип “Linear Gradient” и закрасьте выделение. Меняйте прозрачность слоя на свое усмотрение, у меня 25%:

    Шаг 20.
    Добавим небольшую тень.
    Создайте новый слой, над слоем с градиентом.
    Инструментом Elliptical Marquee Tool (M) создаем выделение и закрашиваем черным цветом. Далее применяем “Filter > Blur > Gaussian Blur” со значением “Radius:8px” и меняем прозрачность слоя на 7-10%:

    Ну вот мы и закончили, поздравляю!

    Бонус.
    А сейчас, небольшой бонус для вас. Я расскажу вам, как быстро изменить цвет вашего плеера.
    В окне слоев находим форму основы плеера, над этим слоем находится слой с градиентом, который мы делали в шаге №3. Скрываем этот градиент, выбираем слой с основой, в качестве основного цвета выбираем тот цвет, в который будем перекрашивать, и нажимаем Ctrl+Backspace:

    Так же перекрашиваем основания кнопок:

    Теперь измените прозрачность бликов у кнопок и добавьте отражение:

    Конечный итог:



    Если хочешь сказать спасибо жми к репутации
     
    • Страница 1 из 1
    • 1
    Поиск:

    Хостинг от uCozCopyright MyCorp © 2025