|
|
|||||||||||||||||||||||||||||
|
Уроки Photoshop. Рубрика: Графика для сайта. Создаём Photoshop новогодний дизайн для сайтаИсточник: photoshop-master Tom; Переводчик: Артеменко Любовь
Создаём Фотошоп новогодний дизайн для сайтаВ этом уроке мы с Вами создадим, красивый Новогодний дизайн сайта. Шаг 1. Создайте новый документ (Ctrl+ N) размером 1100px на 1150px. Шаг 2. Создайте новый слой (Ctrl+Shift+N) под названием "Градиент заголовка" и проведите Линейный градиент (Linear Gradient) от верхней части документа вниз, цвет от #930000 к прозрачному. Это должно добавить определенную глубину вашему заголовку, затемнив верхнюю часть холста. Шаг 3. Теперь создайте новый слой (Ctrl+Shift+N) под названием "Белый градиент". Выберите инструмент Радиальный градиент (Radial Gradient) и перетащите градиент от верхней к центральной части холста (цвет от белого к прозрачному). Шаг 4. Далее нам понадобятся кисти фрактальной линии. Автор, не может найти источник кистей, которые он использовал, однако, он рекомендует этот альтернативный набор кистей. Шаг 5. Теперь создадим новый слой (Ctrl+Shift+N) под названием "Контент". Шаг 6. Добавим стиль слоя (Add a layer style) Обводка (Stroke): Загрузите фото, Облачное небо. Шаг 8. Теперь перейдем в меню Слой-> Слой - маска-> Показать всё (Layer-> Apply layer mask-> Reveal all). Используйте мягкую черную Кисть (Brush), чтобы на маске скрыть края, фото облачного неба, пока вы не будете довольны тем, как оно выглядит. Не беспокойтесь о нижнем крае фотографии, так как оно будет покрыто в конечном результате, другими фотографиями. Шаг 9. Теперь мы применим пару корректирующих слоев, для нашего, фото неба. Для того, чтобы каждый корректирующий слой применялся только к этому слою, а не всему нашему документу, мы должны будем, применить Слой-> Создать обтравочную маску (Layer-> Apply clipping mask) для каждого корректирующего слоя. Затем, Слой-> Новый корректирующий слой-> Цветовой баланс (Layer-> New Adjustment Layer -> Color Balance) Шаг 10. Загрузим фото дома с Новогодними гирляндами. Шаг 11. Перейдем Слой-> Новый корректирующий слой-> Цветовой тон/Насыщенность (Layer-> New Adjustment Layer -> Hue/Saturation) Затем, Слой-> Новый корректирующий слой-> Цветовой баланс (Layer-> New Adjustment Layer -> Color Balance) Шаг 12. Загрузим фото снега и вставим его в документ. Шаг 13. Изменим размер изображения, и также на Маске слоя (layer mask), скроем края, используя мягкую черную Кисть (Brush). Шаг 14. Теперь примените корректирующий слои Цветовой тон/Насыщенность (Hue/Saturation) и корректирующий слой Уровни (levels) (добавим Обтравочную маску (Clipping mask) для обоих слоев): Шаг 15. Теперь повторите эту технику для создания других областей снега, пока вы не получите снежный пейзаж перед вашим домом: Шаг 16. Создайте новый слой (Ctrl+Shift+N) под названием "Лента". Шаг 17. Добавим стили слоя (Add a layer style) для ленты. Внутренняя тень (Inner Shadow): Шаг 18. Теперь Ctrl + клик на вашем слое с лентой в палитре слоев. Затем создайте новый слой (Ctrl+Shift+N) под названием "Лента блики". Затем используйте мягкую белую Кисть (Brush), чтобы закрасить в других местах вашей ленты. На слое "Тень ленты", изменим Режим смешивания (Blend Mode) на Умножение (Multiply) и уменьшим Непрозрачность (Opacity) до 36%. Шаг 19. Загрузим фото бантика. Добавим стиль слоя (Add a layer style) Тень (Drop Shadow): Шаг 20. Добавим корректирующий слой Слой-> Новый корректирующий слой-> Цветовой баланс (Layer-> New Adjustment Layer -> Color Balance) для бантика. Не забудьте добавить Обтравочную Маску (Clipping mask). Это сделает ваш бант более насыщенным и золотым. Шаг 21. Теперь создайте новый слой (Ctrl+Shift+N) под названием "Лента Осветление/Затемнение". Используйте мягкую черную Кисть (Brush), чтобы сделать тень на ленте под бантом, а затем мягкую белую Кисть (Brush), чтобы осветлить немного над бантом. На изображении ниже вы можете посмотреть, как выглядят изображения с Нормальным (Normal) Режимом смешивания (Blend Mode) и с Режимом смешивания (Blend Mode) Перекрытие (Overlay). Шаг 22. Загрузите этот значок. Шаг 23. Скачайте этот значок Новогодний подарок. Шаг 24. Теперь напишите текст, для вашего логотипа. (Настройки ниже). Шаг 25. Выберите инструмент Произвольная фигура (Custom Shape Tool) (найдите Кнопка на вкладке) и начните создавать выравненное по левому краю меню. Шаг 26. Теперь используйте инструмент Линия (Line Tool) для создания серии белых 1px разделительных линий, между каждой кнопкой меню. Затем слейте все линии в один слой, (удерживая клавишу Ctrl, выделите их в палитре слоев и нажмите комбинацию клавиш Ctrl+E) и измените Режим смешивания (Blend Mode) этого слоя на Перекрытие (Overlay). Шаг 27. Теперь, используя инструмент Лассо (Lasso Tool) создадим стрелку в правой части, верхней кнопки меню. Шаг 28. Теперь перейдите в верхний левый угол меню, и также используя любой инструмент выделения и Заливка (Paintbucket Tool) создадим эффект обтекания меню: Шаг 29. Напишем текст меню. Шаг 30. Затем создайте стрелку рядом с вашим пунктом меню "Home". Она будет указывать на "активный" пункт меню. Внешнее свечение (Outer Glow): Шаг 31. Теперь напечатайте текст приветствия, который находится справа от вашего меню. Шаг 32. Далее инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool), создадим прямоугольник (радиус 5 пикселей), он будет у нас в качестве кнопки Подробней, под нашим текстом приветствия. Внутренняя тень (Inner Shadow): Наложение градиента (Gradient Overlay): Шаг 33. Теперь создайте новый слой (Ctrl+Shift+N) под названием "Серая зона". Шаг 34. Используя инструмент Линия (Line Tool) создадим тонкую разделительную линию, в верхней части вашей серой зоны. Шаг 36. Вставим несколько Новогодних изображений в нашей серой области: Шаг 36. Напишите какой-то текст под каждым фото, а также добавьте простой значок со стрелкой рядом с каждым текстом: Шаг 37. Создайте новый слой под названием "Футер". Проведите Радиальный градиент ( Radial Gradient) внизу в центре вашего документа. (От белого к прозрачному). Шаг 38. Наконец, чтобы закончить наш макет, добавим текст и значки, в нижней части нашего макета.
Ссылки по теме
|
|