Рубрика: Photoshop Уроки | Урок прочитали: 670
 (голосов: 0)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Jack
Перевод:  Луговских Татьяна
Ссылка на источник

           

Похожие файлы и публикации:

Информационный блок для сайта
В этом уроке Вы научитесь создавать оригинальные веб - кнопки для сайта.
Информационный блок для сайта
Сегодня мы будем учиться делать  привлекательное портфолио для веб-сайта.
Информационный блок для сайта
В этом уроке я расскажу Вам о том, как создать торшер с нуля.
Информационный блок для сайта
Привет друзья! Вы знаете, как создать изображение женской туфельки в программе Фотошоп? Давайте посмотрим, как это можно сделать.
Информационный блок для сайта
Программа Photoshop – фантастическая программа, с помощью которой можно обрабатывать не только фотографии, но и создать реальные объекты. В сегодняшнем уроке, мы продемонстрируем, как создать изображение реалистичного ножа похожего на фотографию в программе Photoshop, используя векторные инструменты для рисования, стили слоя, текстуры, и эффекты.
Информационный блок для сайта
Шаг 1. Создайте новый документ размером 500px на 400px с разрешением 72 dpi в режиме RGB.
Информационный блок для сайта
Вот такой домик получится после данного урока
Информационный блок для сайта
В этом уроке мы будем создавать стильную черную навигацию для сайта. Вот так она будет выглядеть в конце урока:
Информационный блок для сайта
Шаг 1. Создайте новый документ 102*50 пикселей. Фон залейте цветом  #838383. Выберите инструмент Rounded tool (Прямоугольник со скругленными краями). Установите следующие настройки:
Информационный блок для сайта
Этот урок по Фотошопу покажет вам, как сделать дизайн сайта или портфолио.
Информационный блок для сайта
Друзья! Вы знаете, как в программе Фотошоп создать изображение медиа-плеера?
Информационный блок для сайта
Шаг 2. Создайте новый слой и назовите его “camera2”. Выделите содержимое слоя “camera1” (CTRL + клик по миниатюре слоя). Выполните команду “Select > Modify > Contract” (Выделение > Модификация > Сжать). Установите сжатие в 7 пикселей. Залейте выделение цветом.
Информационный блок для сайта
В этом уроке Вы узнаете, как создать иконку в виде дома. Вот так будет выглядеть иконка в конце этого урока:
Информационный блок для сайта
Привет друзья! Вы знаете, как в программе Фотошоп создать изображение электронных часов? Если нет, то я предлагаю освоить эту несложную технику рисования пером!
Информационный блок для сайта
В этом Photoshop уроке мы будем учиться создавать баннер с простым, но эффектным дизайном.
Информационный блок для сайта
В этом уроке будем учиться создавать креативный дизайн для блога.
Информационный блок для сайта
В данном уроке мы будем учиться создавать «цветовую» шапку для сайта.
Информационный блок для сайта
Сегодня мы будем рисовать вот такой карандаш.
Информационный блок для сайта
Иногда, бывает нужно быстро применить какой-либо эффект и в этом на помощь придут экшены. Одним нажатием кнопки, Вы без труда воссоздадите нужный эффект.
Информационный блок для сайта
В этом Фотошоп-уроке я покажу вам как нарисовать увеличительное стекло и сделать правильное отражение в нем. Сначала вы должны найти соответствующую картинку для работы с ней. Я использовал эту фотографию газеты. Свободно используйте ее, если хотите. Ок, после того как мы нашли правильное изображение для работы, можем приступать к уроку. Создайте новый документ около 500х500 пикселей и копируйте наше изображение в него.