[Lesson] Google Chrome. Часть первая - vibosBG
vibosDE — авторский проект, полигон моего дизайнерского творчества
В портфолио собраны некоторые из моих работ: сайты, иллюстрации, листовки и пр.
Если Вы заинтересованы в сотрудничестве — воспользуйтесь формой обратной связи
vibosDE
vibosBG
Главная » 2010 » November » 3 » [Lesson] Google Chrome. Часть первая
[Lesson] Google Chrome. Часть первая

Давно я ничего не писал в этом блоге. Поэтому пусть новый месяц начнется с хорошего урока. 

Мы будем рисовать большой вариант иконки браузера Google Chrome. Сразу скажу, что точного сходства я не стремился добиться, меня интересовал лишь похожий эффект металла.

Шаг 1

Создадим документ размером 800x800 пикселей. На новом слое, используя окружность ellipse в режиме путей , нарисуем большой круг. Цвет в принципе не важен.

Шаг 2

Далее создадим ещё один путь в виде круга в центре, но меньшего диаметра, он поможет нам создать другие основные фигуры:

Шаг 3

Теперь самая сложная часть урока. С помощью инструментов семейcтва Pen Tool pen нам необходимо сделать из двух уже созданных путей-окружностей фигуру, показанную на скриншоте ниже. Так как две первые окружности нам ещё понадобятся, то перед тем как их изменять, дублируйте слой с ними на панели путей. Вот что должно получится:

Шаг 4

Зальем на новом слое нашу фигуру. затем на новом слое (уже на третьем) создадим внутреннюю окружность, так, как показано на скриншоте ниже:

Шаг 5

Дублируем слой с большим кругом и немного его уменьшаем. Должно получится вот что (новый, уменьшенный круг я залил темно серым цветом):

Шаг 6

Сейчас нам необходимо придать нашей фигуре трехмерный объем. Для этого, сначала скрываем слой с внешним большим кругом, иначе он будет мешать. Затем открываем слой на панели путей, на котором у нас был сохранен путь с фигурой. Разделяем этот путь на 3 отдельных пути для каждого фрагмента фигуры и дублируем их на три разных слоя. Затем на каждом из этих слоев изменяем путь таким образом, чтобы он обозначал объемную часть своего фрагмента. Рассказываю я достаточно запутанно, но скриншоты помогут вам разобраться. Путь с первым фрагментом:

Путь со вторым фрагментом:

Путь с третьим фрагментом:

Каждый из путей заливаем цветом на отдельный слой на панели слоев и размещаем полученные слои под основной фигурой. Затем создаем ещё один слой и делаем обод вокруг маленького центрального круга. И точно так же делаем обод вокруг внешнего круга, на новом слое. Теперь вся наша фигура должна получить объем. Результат:

Шаг 7

Со всем сложными объектами мы закончили. Теперь необходимо разделить нашу основную фигуру на три части (как мы это делали с путями) и поместить каждую созданную часть на отдельный слой. Затем по очереди выбрать каждый из трех слоев и нажать Ctrl+G, это сгруппирует их со слоем фигуры. Так же необходимо сгруппировать со слоем фигуры слой с нашим большим кругом. Проверьте расположение слоев:

Если всё совпадает, вы можете начать назначение стилей для каждого слоя.

Теперь мы будем назначать стили слоя для каждого из созданных слоев. Для того, чтобы назначить стиль слоя, необходимо правой кнопкой мыши щелкнуть на слое в панели слоев и выбрать Blending options. Затем в открывшемся диалоговом окне произвести необходимые настройки и нажать OK.

Шаг 8

Давайте назначим стили слоя для слоя "фрагмент 1". Для него нам необходимо установить стиль Color overlay с цветом #ff0000 и параметром Blend mode установленном на Linear burn. Аналогично необходимо поступить и со слоями "фрагмент 2" и "фрагмент 3", соответственно используя цвета #fff600 и #7dba62. Затем у всех трех слоев параметр Fill нужно перевести в 0.

Шаг 9

Теперь установим стили слоя для слоя "Фр 1 объем". Сделайте это основываясь на парметрах на скрине ниже:

Затем параметры для слоя "Фр 2 объем":

И наконец для слоя "Фр 3 объем":

В итоге мы должны увидеть вот это:

Шаг 10

Если цвета и оттенки совпадают - идем дальше. Поработаем со слоем "Большой круг". Сделаем его видимым (если ранее вы его выключили, как и должны были) и установим для него параметр Fill на 0, а затем применим к нему следующий стиль (цвета градиента указаны на скриншоте):

Шаг 11

Затем установим стили для слоя "фигура":

Вот как всё должно выглядеть на этом шаге:

Шаг 12

Теперь применяем к слою "Маленький круг" стили слоя:

А у слоя "Обод", параметр Fill переводим в 0, затем применяем стиль Color overlay с цветом #80b9ff и параметром Multiply.

Шаг 13

Теперь применим стили для слоя "Круг внутренний":

Шаг 14

Затем дублируем этот слой. Правой кнопкой мыши нажимаем на него в панели слоев и выбираем Clear layer style. Называем этот слой "Тень". Ставим для него Fill на 0. Теперь по порядку делаем следующее (убедитесь, что выбран слой "тень"): Ctrl+Щелчок правой кнопкой мыши на иконке слоя "фигура" на панели слоёв. Должно появится выделение. Нажимаем Delete. Теперь так же щелкаем по иконке слоев "Фр 1 объем", "Фр 2 объем", "Фр 3 объем" и "Маленький круг" и каждый раз при этом нажимаем Delete. Во время всех этих действий должен был быть выбран, то есть помечен синим на панели слоев, слой "Тень". Теперь перетащите слой "Тень" на самый верх списка слоев и примените 2 стиля слоя:



Просмотров: 853 | Комментариев: 0 | Опубликовано: 03.11.2010 - 09:23

Вы так же можете использовать встроенные комментарии
но учтите, что не сможете вернуться к комментированию через ВКонтакте

Небольшой опрос

Какой браузер вы используете?

Всего ответов: 97

Поиск по сайту

Мои Контакты

GTalk: mr.vibos
ICQ: 441-764-376
Email: alex@vibos.org

Я в соц. сетях

ВКонтакте: vibos07
FaceBook: vibos07
Twitter: vibos07