Tags: уроки веб дизайна | Графика для сайта | Уроки Photoshop | уроки web дизайна

Дизайн вот такой странички мы попробуем создать в этом уроке.

Создайте новый документ размером 1100*1150 пикселей. Залейте его красным цветом be0000.

Создайте новый слой под названием "Градиент" и создайте градиент от цвета #930000 к прозрачному с низу вверх. Это позволит оттенить ваш заголовок и добавит определенную глубину цвета в верхней части холста.

Далее создаем новый слой под названием "Белый верх градиента" Выберите инструмент Радиальный градиент и перетащите его из верхней центральной части холста цветом от белого к прозрачному. Далее измените режим наложения на Перекрытие и уменьшите непрозрачность до 30 %

На новом слое Кисти создайте изображение подобное тому что приведено на картинке ниже . Убедитесь в том что вы используете кисть с непрозрачностью 30%, хотя для каждого эта настройка может быть персональной. Чтобы добавить резкости изображения перейдем в меню Фильтр-Усиление резкости.

Подобные кисти можно скачать здесь.

Далее создаем основную область. Инструментом Прямоугольная область создаем фигуру в верхней части холста.

Добавим с этому слою следующие стили:

Добавим в верхнюю часть прямоугольника изображение неба. Затем с помошью инструмента Кадрирование обрежьте ненужные области и уменьшите непрозрачность слоя до 30 %.

Далее с помощью маски слоя обработайте края изображения до получения результата как показано на картинке ниже:

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

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

Далее добавляем к этому слою корректирующие слои так же как добавляли их на слой с небом. Применяем настройки для этих корректирующих слоев как показано на рисунке.

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

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

Добавьте корректирующие слои на данный слой и примените к ним настройки как показано на рисунке:

В итоге у вас должен получится такой снежный пейзаж.

Создайте новый слой назовите его "Лента" и при помощи инструмента Перо создайте фигуру как показано на рисунке ниже и заполните его цветом  #eab631 (золото).

Далее добавим к этому слою следующие стили:

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

На слое "Темная лента" измените режим наложения на Умножение  и уменьшите непрозрачность слоя до 36%.
На слое "Светлая лента измените режим наложения на Перекрытие.

Добавим изображение золотистого новогоднего банта и вставим его на край нашей ленты.

Добавим к нему следующие стили слоя:

Применим к нашему банту несколько корректирующих слоев. После этого наш бант должен выглядеть ярче и насыщеннее.

Далее создадим новый слой и заполним его серым цветом с непрозрачность 50%. Изменим режим наложения этому слою на Перекрытие. Далее используем мягкую черную кисть чтобы добавить темных тонов на изображение с бантом, затем мягкую белую кисть чтобы высветлить основные моменты нашего банта.

Добавим изображение многоугольника как показано на рисунке ниже:

Далее добавим изображение новогоднего подарка в виде праздничной коробки в верхнюю левую часть нашего изображения:

Добавим в левый верхний угол логотип. Настройки для текста приведены на картинке.

Далее с помощью инструмента Прямоугольник со скругленными углами добавим пункт меню. Заполним его градиентом от цвета  #d40000 до #940000.

Далее инструментом Линия добавим белые разделительные линии на пункты меню. После того как вы создали необходимые линии соединяем  их в один слой и изменяем режим наложения на перекрытие.

Далее при помощи инструмента Прямолинейное Лассо добавим стрелочку для активного пункта меню и окрасим его красным цветом #940000.

Далее при помощи инструмента Перо создадим обтекаемые области на нашем меню.

Добавляем текст на пункты меню.

Воспользуйтесь инструментом Фигуры и найдите там стрелочку добавьте ее в первый пункт меню добавим на слой со стрелочкой следующие стили:

Добавим текст в наш макет:

Далее создадим Прямоугольник со скругленными углами (радиус 5 пикселей) Это будет кнопка "Подробнее". Добавим этой кнопке следующие стили:

Далее создадим прямоугольную область (e8e8e8)  в нижней части макета. Добавим ему следующие стили:

Далее создадим линию разделитель (1px толщина, cbcbcb) инструментом Линия.

Добавим несколько Рождественских изображений в нашу серую область:

Далее под каждым изображением добавим текст и знак со стрелочкой:

Создадим новый слой и на нем создадим градиент от белого к прозрачному. Изменим режим наложения на Перекрытие и уменьшите непрозрачность до 30% таким образом мы оттеним нижнюю часть макета.

И наконец чтобы закончить наш макет добавим текст в нижнюю часть макета.

И вот что у нас получилось :

Надеюсь урок вам понравился и будет многим полезен.

Источник.