Строение
Создание иконки браузера Опера
Тема в разделе "Веб-Дизайн", создана пользователем kult, 14 авг 2010.
  1. kult

    kult Новичок

    Сообщения:
    193
    Симпатии:
    39
    Баллы:
    0
    Создание иконки браузера Опера
    В этом уроке мы будим, учится создавать иконку всем известного браузера Опера. Я выбрал данный браузер не случайно, т.к. сам его использую, и он меня в полнее устраивает. В уроке мы будим использовать стандартные фигуры в режиме контур. Вы увидите, как можно с помощью простых примитивных или встроенных в редактор фигур можно с легкостью сделать то, что вам необходимо.

    Создание основы
    Создаем новый документ с размерами 512х512 в Adobe Photoshop.
    Далее рисуем обычный круг в режиме контур. Трансформируем его, что бы он получился немного овальный. Делаем мы это с помощью вот этого инструмента (стрелка). На рисунке наглядно это представлено.

    Создание основы буквы «О»

    Заливаем наш круг, нажав сочетание горячих клавиш Ctrl + Enter(создать выделение) и залить цветом #df1313.


    Заливаем основу

    Следующим шагом создаем внутренний овал.
    Делаем его мы точно так же как и в прошлый раз.
    Создаем круг в режиме контур и трансформируем его.


    Создаем внутренний овал

    Заливаем полученный овал любым цветом, я залил его белым. Выделяем наш овал, нажав сочетание кнопок Ctrl + Левая кнопка мыши на нашем слое с овалом. И удаляем эту фигуру с круга который мы создали ранее, нажав клавишу Del.
    Вот что должно получиться.


    Создание основы буквы «О»


    Применяем стиль к полученной выше буквы «О». Стили я не буду расписывать, т.к. они представлены в исходнике, который прикреплен к этому посту.


    Применение стиля к букве «О»

    Создание рельефности
    Заходим в палитру контуры и выбираем наш овал.
    Трансформируем его, нажав клавиши Ctrl + Т и устанавливаем процентное соотношение ширина 115%, высота 108%.
    Заливаем полученную фигуру и вычитаем из неё предыдущий овал.


    Создание рельефности

    Применяем к слою стиль. Дублируем его Ctrl + J, затем выделяем данный слой идем Выделение – Модификация – Сжать и ставим значение 3 пикселя, инвертируем выделение Ctrl + I и удаляем лишнее. Применяем стиль и вот, что должно получится на данный момент.



    Создание Бликов
    Создаем блики. Дублируем наш слой буквы «О», перетаскиваем наверх. Опускаем слой на 3 пикселя вниз. Выделяем слой, наше выделение спускаем на 6 пикселей вниз и удаляем. Оставшаяся внизу часть слоя тоже удаляем. Применяем стиль и слой маску.


    Удаляем лишнее

    Повторим эти манипуляции с нижним бликом.


    Значок Оперы без тени
     
    Последнее редактирование модератором: 14 авг 2010
  2. kult

    kult Новичок

    Сообщения:
    193
    Симпатии:
    39
    Баллы:
    0
    Создание Тени
    Создаем новый слой и поместим его в самый низ. Нажмём клавишу М и создадим овальную область, затем зальем её. Применим стиль и слой маску. Создадим побольше овал, и повторим манипуляции.


    Создаем выделение и заливаем его

    К тени меньшего размера применим Фильтр – Размытие – Размытие по Гауссу со значение 4 пикселя. К большей тени Размытие по Гауссу со значение 2 пикселя.


    Создаем выделение и заливаем его для большей тени

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


    Исходник
    Автор Slimmi
    С вами был kult
     
    Последнее редактирование модератором: 14 авг 2010
  3. kiwii

    kiwii Новичок

    Сообщения:
    54
    Симпатии:
    25
    Баллы:
    0
    Ну да вполне похоже, но вот верхная часть слишком тускловата, а так вполне всё отлично!
    Урок хороший и полезный ;)
    5
     
  4. master#1

    master#1 Новичок

    Сообщения:
    1.709
    Симпатии:
    72
    Баллы:
    0
    5+ за урок! Все пошагово расписано, все коротко, ясно и доступно для каждого:) Думаю, с таким подробным описанием даже для новичка не составит сложности нарисовать такой же значок
     
  5. kult

    kult Новичок

    Сообщения:
    193
    Симпатии:
    39
    Баллы:
    0
    А вы посмотрите на иконку Оперы, там вроде так же;)
     
  6. master#1

    master#1 Новичок

    Сообщения:
    1.709
    Симпатии:
    72
    Баллы:
    0
    ну это уже пустая придирка! Согласитесь, работа сделана на отлично:) и доступна другим
     
    4 пользователям это понравилось.
  7. kiwii

    kiwii Новичок

    Сообщения:
    54
    Симпатии:
    25
    Баллы:
    0
    Извините, посмотрел и убедился что так, и есть мне казалось нет :rolleyes: :eek:
     
    Последнее редактирование модератором: 22 авг 2010
  8. TiamatInc

    TiamatInc Moderator

    Сообщения:
    4.721
    Симпатии:
    1.221
    Баллы:
    0
    Что ж, действительно вышло очень похоже на оригинальную иконку Оперы. Вот только круги можно рисовать сразу залитыми, а не заливать уже после после того, как контур создали. К чему лишние операции... :D
     
  9. deFzone

    deFzone Новичок

    Сообщения:
    79
    Симпатии:
    37
    Баллы:
    0
    Отличный урок, иконка очень похожа, и верхняя часть в том числе. Можно будет попробовать эффект буквы опера, для какого нибудь дизайна..
     
  10. DropSanya

    DropSanya Новичок

    Сообщения:
    11
    Симпатии:
    4
    Баллы:
    0
    5+ идеальное сходство!
     
Показать ещё