Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Web » Дизайн иконки приложения Google Calendar. Часть 2

Дизайн иконки приложения Google Calendar. Часть 2

Автор: Tina | Категория: Уроки Photoshop » Web | 17-01-2012, 20:45
Шаг 17
Настало время сделать вид Титульной страницы более реалистичной. Выделите ее пиксели при помощи Полигонального лассо так же, как описывалось в шаге 15, и создайте новый слой. Теперь, при помощи Кисти (Brush tool) прокрасим области, где нужно наложить светотени. Уменьшение Непрозрачности (Opacity) этого слоя должно смягчить черный цвет, как показано на скриншоте ниже. Я решил нанести легкую тень вдоль кромки страницы, и вдоль загибающегося вверх угла. Поверхность приподнятого уголка осталась нетронутой, в результате чего впечатление его загиба еще немного усиливается. Назовите этот слой Тень титульной страницы.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 18
Выберите слой с титульной страницей создайте его копию (Ctrl+J). Переместите дубликат под оригинальный слой. При помощи инструмента Перемещение (клавиша V) сдвиньте продублированное изображение на несколько пикселей ниже по отношению к оригинальному. При помощи коррекции Уровней сделайте его немного светлее.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 19
На данный момент у нас получилось всего 12 слоев. Даже работая над своими композициями, содержащими сотни слоев, я стараюсь вести счет слоям. Далее, я растрировал все слои, относящиеся в титульной странице, объединив их в один. То же самое я проделал и со слоями связки. Для этого нужно выбрать все слои, которые вы хотите объединить, и нажать Ctrl+J.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 20
Следующим шагом создаем “Другую страницу”. При помощи стиля слоя (Blending Option) Наложение градиента, примененного к слою со следующей страницей, получаем изображение как показано на скриншоте ниже. Растрируйте стиль слоя в сам слой, методом, описанным в шаге 4.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 21
Создайте дубликат слоя с Другой страницей и переместите его под оригинальный слой. Откройте окно коррекции Уровней (Ctrl+L) и сдвиньте черный бегунок вправо, а белый бегунок немного влево, в точности как показано на рисунке ниже. Таким образом интенсивность градиента будет несколько ослаблена. Передвиньте этот слой чуть ниже оригинального, так, чтобы показалась вторая “другая страница”. За счет уменьшения интенсивности градиента этого соля будет лучше просматриваться градиент этого малого участка.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 22
Создайте еще несколько копий только что позиционированной Другой страницы, продолжая размещать из одну под следующей и чуть сдвигая вниз, создавая, таким образом, впечатление целой подшивки календарных листов.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 23
Далее нам предстоит улучшить вид верхней поверхности нашей основы. Создайте копию поверхности, и инвертируйте ее цвет в белый (в этом вам может помочь коррекция Уровней).

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 24
Пройдите в меню Фильтр > Шум > Добавить шум (Filter > Noise > Add Noise).

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 25
Выберите понравившийся вам уровень шума. Я выбрал величину 58.91% равномерного (uniform), монохромного (monochromatic) шума.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 26
Выделите пиксели слоя с шумом. Затем, пройдите в меню Фильтр > Размытие > Динамическое размытие (Filter > Blur > Motion Blur).

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 27
В открывшемся окне постарайтесь подобрать такой угол (angle) размытия, чтобы он совпадал с углом наклона самой поверхности основания календаря. Затем, подберите расстояние (distance), при которой узор размытия напоминал бы деревянную фактуру.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 28
На палитре слоев задайте режим наложения этого слоя с шумом – Перекрытие (Overlay). Он должен почти полностью исчезнуть. Выберите слой с прямоугольником, обозначающим верхнюю часть основания календаря, откройте окно коррекции Уровней и сдвиньте черный бегунок немного вправо, усиливая черный пиксели изображения.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 29
Примените коррекцию уровней к этому уровню с шумом, фокусируя гистограмму на области эффекта, так, как показано на картинке ниже.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 30
На слое с верхней поверхностью основания выделите область в самой нижней части фигуры при помощи инструмента Полигональное Лассо.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 31
Снова сдвиньте серый бегунок в окне коррекции Уровней влево, чтобы немного осветлить выделенную область. У вас должна получиться симпатичная светлая кромка.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 32
Далее создадим еще один новый слой. На этом слое, при помощи Полигонального Лассо создадим выделенную область, которая впоследствии должна быть закрашена. На рисунке ниже вы можете увидеть, что я нарисовал таблицу со структурой ячеек 3х4. Это и будет, собственно, наш календарь. На этот шаг потребует некоторого времени. Не ограничивайте себя в количестве создаваемых слоев. Просто в конце процесса объедините все в один. Следите за тем, чтобы все ваши линии имели одинаковую длину.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 33
Создайте выделенную область, включающую ячейки, как показано на изображении ниже, и создайте еще один слой под слоем с только что созданной сеткой. Далее, залейте ее черным цветом и при помощи бегунка регулировки непрозрачности ослабьте интенсивность цвета.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 34
Нам понадобится еще один слой, созданный на этот раз поверх всех остальных слоев. Заполните его любым цветом на ваше усмотрение (я использовал бледно-красный, чтобы опять же не отклоняться от официальных цветов приложения Google Calendar)

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 35
Теперь выберите цвет чуть светлее выбранного вами в предыдущем шаге, затем выделите содержимое слоя (Ctrl+ЛКМ по иконке слоя на палитре слоев). При помощи кисти подходящего размера и до конца уменьшенной жесткостью (Hardness) кликните несколько раз по красной ячейке, чтобы наложить на нее интересный световой эффект.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 36
Открыв окно стилей слоя, примените к этому слою Внутреннюю тень (Inner Glow). Выберите здесь черный цвет с Непрозрачностью (Opacity) 25% и режимом наложения (blend mode) Умножение (Multiply).

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 37
Мы приближаемся к завершению. Настало время нанести кое-какой лоск. Выделите содержимое слоя с верхней поверхностью основания календаря, после чего создайте еще один новый слой поверх всех остальных слоев. Задайте для последней использованной кисти белый цвет и немного увеличьте ее размер. Кликните несколько раз в районе середины верхней кромки прямоугольника, накладывая большое светлое пятно. Установите режим наложения слоя Мягкий свет (Soft Light), и, если посчитаете нужным, подкорректируйте Непрозрачность (Opacity), чтобы придать некоторую глубину изображению.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 38
Проделайте то же самое для слоя со Связкой. Я решил установить режим наложения для этого слоя – Наложение (Overlay), чтобы подчеркнуть синюю основу.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 39
Создайте копию поверхности основания и переместите ее в самый низ палитры слоев. Затем, пройдите в меню Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian Blur). Мы используем этот слой в качестве тени.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 40
Задайте радиус размытия (Radius) равным примерно 8-9 пикселей, затем создайте несколько дубликатов слоя, наложенных один на другой. Таким образом тень получится более густой.

Дизайн иконки приложения Google Calendar. Часть 2


Шаг 41
Растрируйте (объедините в один) слои, образующие тень… И получите отличную собственную иконку Google Calendar.

Дизайн иконки приложения Google Calendar. Часть 2


Вот мы и закончили!
У вас получилась эксклюзивная, собственная иконка для приложения Google Calendar. Но более важно, чтобы вы получили представление того, как создаются подобные иконки. Я искренне надеюсь, что вы получили удовольствие от прочтения этого урока! До скорых встреч!

Дизайн иконки приложения Google Calendar. Часть 2


 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Другие новости по теме:


Просмотров: 467 | Напечатать | Комментарии (0)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Создание шоколадного вулкана с использованием 3D-эффектов. Часть 1
Создание шоколадного вулкана с использованием 3D-эффектов. Часть 1

Часть 1


Дизайн завораживающего постера для Часа Земли
Дизайн завораживающего постера для Часа Земли


На этом уроке мы научимся создавать концептуальный коллаж на тему Часа Земли. В ходе выполнения урока мы
проведем вас сквозь процесс придания изображению глубины при помощи нескольких мощных инструментов.
Вы так же научитесь накладывать изображения друг на друга настолько бесшовно, что они будут выглядеть как
одно цельное изображение.


Выделенные области в Photoshop Часть 2
Выделенные области в Photoshop Часть 2

Приветствую вас на второй части урока, посвященного выделенным областям в Photoshop. Прежде чем приступить к
ее выполнению, ознакомьтесь и выполните первую часть.

Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.