Beauty – ретушь для начинающих при помощи Photoshop.

Beauty – ретушь для начинающих при помощи Photoshop.

Эффект голограммы на фотографии.

Эффект голограммы на фотографии.

Создание портрета при помощи шрифтов.

Создание портрета при помощи шрифтов.

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

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

Необычный эффект глаз при помощи Photoshop.

Необычный эффект глаз при помощи Photoshop.

Создаем макет сайта о звездах и знаменитостях.

Создаем макет сайта о звездах и знаменитостях.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию футуристического логотипа в фотошоп.

Урок по созданию футуристического логотипа в фотошоп.

Создаем дизайн телефона на Android в Photoshop.

Создаем дизайн телефона на Android в Photoshop.

Создание макета сайта в стиле минимализма.

Создание макета сайта в стиле минимализма.

Как создать пиксельную кнопку в фотошопе

Как создать пиксельную кнопку в фотошопе

Создаем макет сайта для службы знакомств.

Создаем макет сайта для службы знакомств.

Создание RSS иконки.

Создание RSS иконки.

Урок по созданию простого  и современного  макета для сайта.

Урок по созданию простого и современного макета для сайта.

Графика для сайта.  Рисуем иконку на сайт.

Графика для сайта. Рисуем иконку на сайт.

Урок по созданию зимнего текста.

Урок по созданию зимнего текста.

Урок по созданию красивого новогоднего макета в фотошоп.

Урок по созданию красивого новогоднего макета в фотошоп.

Псевдо HDR.

Псевдо HDR.

Как создать основу для рекламы профессиональной косметики для волос.

Как создать основу для рекламы профессиональной косметики для волос.

Создание эффекта рисунка на фотографии.

Создание эффекта рисунка на фотографии.

Создаем макет сайта, продающий програмное обеспечение.

Создаем макет сайта, продающий програмное обеспечение.

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта для гостиниц и ресторанов.

Урок по созданию макета сайта для гостиниц и ресторанов.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию яркого красочного дизайна сайта.

Урок по созданию яркого красочного дизайна сайта.

Создание простого и стильного макета сайта.

Создание простого и стильного макета сайта.

Создаем макет блога в фотошоп.

Создаем макет блога в фотошоп.

Создаем оригинальный чистый стиль для сайта.

Создаем оригинальный чистый стиль для сайта.

Создаем профессиональную панель навигации для сайта.

Создаем профессиональную панель навигации для сайта.

Рисуем милую девчушку-смайл.

Рисуем милую девчушку-смайл.

Урок по рисованию прохлаждающегося солнца.

Урок по рисованию прохлаждающегося солнца.

Фантастический эффект фотографии.

Фантастический эффект фотографии.

Создание приятного макета сайта портфолио.

Создание приятного макета сайта портфолио.

Создание макета сайта для портфолио в стиле Веб 2.0

Создание макета сайта для портфолио в стиле Веб 2.0

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок рисования реалистичного динамика.

Урок рисования реалистичного динамика.

Создаем стильный коллаж.

Создаем стильный коллаж.

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок создание эффекта металлического текста

Урок создание эффекта металлического текста

Небесный коллаж

Небесный коллаж

Урок по созданию красивого новогоднего макета в фотошоп.

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

 

 

 

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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


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

Источник.

AddThis Social Bookmark Button
 

Добавить комментарий


Защитный код
Обновить

поиск
RSS
Что такое технический дизайн.

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

кол-во просмотров12814
Подробнее...

Основные правила набора текста.

Ниже приведены самые важные правила набора текста применимые к веб-дизайну.             1. Не ленитесь! Всегда после набора потратьте 10 минут на...

кол-во просмотров8188
Подробнее...

Приятный глазу сайт. Как его сделать.

     Когда пользователь попадает на сайт у него сразу же в первые доли секунды формируется мнение о нем. Что же...

кол-во просмотров6078
Подробнее...

Редизайн. Новая жизнь старого сайта.

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

кол-во просмотров6831
Подробнее...

Структура сайта. Как создать прочный каркас для сайта.

Структура сайта - то его внутренний каркас, который далеко не всегда видно, но который помогает пользователю найти необходимую информацию.Когда создается...

кол-во просмотров5265
Подробнее...