Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Информационный блок для сайта
Adobe Photoshop » Уроки 27 февраля 2011 PolKiloПечать


Информационный блок для сайта

В данном уроке мы будем учиться создавать информационный блок для сайта.


Информационный блок для сайта

Итак, приступим!

Шаг 1. Создайте новый документ с фоном темно-серого цвета. Создайте новый слой, и нарисуйте выделение похожее на то, что представлено на рисунке. Для создания такого выделения, воспользуйтесь инструментом Rectangular Marquee (Прямоугольная область выделения).

Информационный блок для сайта

Шаг 2. Заполните выделение любым цветом, и примените к залитой цветом области выделения тень: Layer Style (Стили слоя) – Drop Shadow (Тень) с показателями, указанными в рисунке, и снимите выделение, нажав комбинацию клавиш +:

Информационный блок для сайта

Шаг 3. Теперь примените Bevel & Emboss (Тиснение), с показателями, как показано на рисунке:

Информационный блок для сайта

Шаг 4 . Далее примените Gradient Overlay (Наложение градиента):

Информационный блок для сайта

Шаг 5. Теперь пришло время для Stroke (Обводка):

Информационный блок для сайта

Шаг 6. Далее, снова загрузите выделение, которое мы сняли в шаге 2, щелкнув по иконке слоя при нажатой клавише , затем, войдите в меню: Select> Modify> Contract (Выделение – Модификация – Сжать) и сожмите выделение на 5 пикселей и нажмите ОК.

Информационный блок для сайта

Шаг 7. Снимите выделение комбинацией клавиш +. Изображение должно выглядеть таким образом:

Информационный блок для сайта

Шаг 8. На том же слое, где мы создавали первую выделенную область, и применяли к ней стили слоя, нарисуйте инструментом Pencil tool (Карандаш) границы по всей ширине слоя – от границы – до границы, как показано на рисунке:

Информационный блок для сайта

Шаг 9. Создайте прямоугольное выделение в верхнем блоке:

Информационный блок для сайта

Шаг 10. Создайте новый слой, залейте его любым цветом, например, красным. Нажмите , чтобы снять выделение. Войдите в меню: Layer Style (Стили слоя) и выберите команду Gradient Overlay (Наложение градиента):

Информационный блок для сайта

Шаг 11. Ваше изображение станет похоже на этот рисунок:

Информационный блок для сайта

Шаг 12. Удерживая клавишу , кликните на иконку слоя с красным градиентом, для того, чтобы загрузить выделение. Активизируйте инструмент Elliptical Marquee Tool (Овальная область выделения), и, удерживая нажатой клавишу , перетаскивайте выделение, создавая фигуру, как показано ниже. Нажатая клавиша позволяет вычитать выделение из уже созданного выделения.

Информационный блок для сайта

Шаг 13. Создайте новый слой и заполните его белым цветом. Уменьшите Opacity (Непрозрачность) до 25%, и в качестве режима наложения, установите Overlay (Перекрытие).

Информационный блок для сайта


Шаг 14. Теперь вернемся к слою с верхним блоком. Активизируйте инструмент Pencil tool (Карандаш), и создайте несколько прямоугольных фигур по краям этого блока. После этого добавьте необходимый текст. Окончательный вариант информационного блока выглядит так:


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

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