В этом уроке вам предстоит пройти этапы и методы разработки простой, но привлекательной иконки Дома для вашего веб сайта.
В уроке используется не сложная работа с кривыми и кистью.
Цель урока – ознакомление с правильным использованием цвета и эффективное использование слоев и его стилей.
Программа: Photoshop CS и выше
Уровень сложности: Новичок
Предполагаемое время завершения: 30-45 мин
Шаг 1
Прежде всего, создайте новый документ 500px по 500px с белым фоном. Выберите инструмент Pen Tool (P) и сделать форму как показано ниже.
Шаг 2
Вам необходимо задать цвет форме и добавить тонкую белую полосу вокруг фигуры. Для этого дважды щелкните на слое и примените следующие параметры стиля.
Шаг 3
Продублируйте слой (Ctrl + J) и переверните слой По горизонтали, Edit> Transform> Flip Horizontal или (Ctrl + T), чтобы рядом получилось отражение фигуры, как показано ниже.
Шаг 4
Из-за аналогичных цветов на двух фигурах, крыша дома выглядит плоской. Нам необходимо исправить это. Откройте стили слоя-дубликата и сделайте следующие изменения.
Шаг 5
Задайте цвет переднего плана как “830F00″. Создайте новый слой с именем “крыша слева” и нарисуйте фигуру, как показано ниже с помощью Pen Tool (P) для левой части крыши.
Шаг 6
Продублируйте созданный слой и назовите его “крыша справа”. Выполните команду Edit> Transform> Flip Horizontal или (Ctrl + T), что бы перевернуть слой по-горизонтали. Переместите перевернутую фигуру так, как вы видите ниже.
Шаг 7
Создайте новый слой под слоями “крыша справа”, “крыша справа” и назовите его “Тело”. С помощью Tool (P), создайте форму черного цвета как показано ниже.
Шаг 8
Дважды кликните на слое “Тело” и задайте следующие параметры стиля.
Шаг 8
Шаг 9
Теперь необходимо сделать тень от крыши на тело дома. Чтобы сделать это, необходимо продублировать слои “крыша справа”, “крыша справа”. Дубликаты переместить под основные слои и сдвинуть их на несколько пикселей вниз выбрав инструмент “Перемещение”. Дубликаты слоев залейте цветом “5F5343″. (Ctrl + ЛКМ на слое поможет вам выделить фигуру на слое).
Шаг 10
Перемените для слоя с тенью Filter> Blur> Gaussian Blur, введите 10px и нажмите кнопку ОК.
Шаг 11
Что бы убрать лишнюю тень необходимо выполнить следующие действия. Выделите слой с тенью. Нажмите Ctrl + ЛКМ на слое “Тело”. Инвертируйте выделение командой Ctrl + Shift + I. Теперь убедитесь в том, что вы находитесь на слое с тенью и нажмите “Удалить”.
Шаг 12
Теперь вам необходимо нарисовать дверь. Для этого на новом слое выберите инструмент Rectangular Marquee Tool (M), сделайте выделение и заполните его черным цветом.
Шаг 13
Задайте слою с дверьми следующие параметры стиля.
Шаг 14
Теперь нам необходимо добавить некоторые детали к двери. Выберите Rounded Rectangle Tool (Shift + U) и нарисуйте черный прямоугольник с радиусом 3px.
Шаг 15
Примените к слою следующие настройки стиля.
Шаг 16
Продублируйте слой и переместите фигуру вниз как это показано на картинке.
Шаг 17
На новом слое, с помощью Ellipse Tool (U), сделайте небольшой круг (ручку) на двери. Залейте черным цветом.
Шаг 18
Задайте кругу теней и радиальный градиент.
Шаг 19
Вы можете добавить козырек над дверью. Создайте новый слой и используя инструмент Pen Tool (P) сделайте форму, как показано ниже.
Шаг 20
Зайдите в стили слоя и задайте ему Gradient Overlay аналогичного тона, как и крыша.
Шаг 21
Сделаем козырек объемным. На новом слое сделайте форму как на картинке ниже.
Шаг 22
Задайте стиль слоя.
Шаг 23
Создайте новый слой и залейте его черным цветом. Убедитесь, что этот слой расположен ниже слоя “двери” в палитре слоев.
Шаг 24
Задайте черной полосе Gradient Overlay из следующих цветов.
Шаг 25
Добавьте крыльцо к двери. Сделайте выделение на новом слое, как показано ниже с помощью Pen Tool (P).
Шаг 26
Добавьте стиль к данному слою.
Шаг 27
Придайте крыльцу 3D вид. Установите цвет переднего плана на “A26431″ и нарисуйте форму, как показано ниже.
Шаг 28
Пришло время добавить окно наш в дом. На новом слое сделайте выделение и заполните его черным цветом.
Шаг 29
Используйте Rectangular Marquee Tool (M), что бы заполнить выделение белым цветом на новом слое как показано на рисунке.
Шаг 30
Задайте стиль этому слою.
Шаг 31
Теперь вам нужно сделать ставни и подоконник. Их можно сделать по тому же принципу что двери и порог дома.
Шаг 32
Сделайте дубликаты слоев, которые относятся к окну и уменьшите их на 60% (Ctrl + T при уменьшении удерживайте Shift для соблюдения пропорций). Переместите уменьшенное окно справа от двери.
Шаг 33
Теперь Вы можете добавить дымоход к дому. Создайте новый слой и сделайте на нем выделение черным цветом.
Шаг 34
Задайте стиль слоя.
Шаг 35
Сделайте на новом слое выделение, как это показано ниже, чтобы придать дымоходу 3D изображение.
Шаг 36
Сделайте другую форму черного цвета, за трубой.
Шаг 37
Задайте параметры стиля для слоя.
Шаг 38
Установить цвет переднего плана “D6C08D” и сделать форму как показано ниже.
Шаг 39
Добавьте тень от дома. Создайте новый слой, затем с помощью Rectangular Marquee Tool (M) сделайте выделение и залейте черным цветом.
Шаг 40
Выполните Filter > Blur > Gaussian Blur, а так же Filter > Blur > Motion Blur с настройками 3.0 и 0, 40 – соответственно. Аналогичные действия сделайте для тени порога дома. Вы можете установить непрозрачность тени от 80-90% или 20-30%. Так же я добавила немного травы около дома для завершения иконки Дом.
Перевод: Юлия Ворожко
По материалам: http://psd.tutsplus.com
Урок просто ФАНТАСТИКА! Супер!
Побольше бы таких уроков. (inlove)