Создаем закругленные блоки для сайта в фотошопе
В этой статье я покажу, как создать закругленный блок для сайта. Также не забывайте, что все материалы (PSD-файлы) к данной статье вы сможете скачать.
Что мы будем делать (кликните по изображению, чтобы увидеть закругленные блоки в натуральную величину):
1 Для начала создайте новый документ в фотошопе размером, например, 900 на 800px. Конечно, вы можете использовать любые другие размеры на ваше усмотрение.
![создаем новый документ](/images/rounded_box/a.jpg)
2 С помощью инструмента Paint Bucket Tool
создайте черный (#000000
) фон.
3 Сейчас давайте создадим блок под наш контент. Выберите инструмент rounded rectangle tool
, поставьте радиус в 15px и нарисуйте прямоугольник.
![создаем закругленный прямоугольник](/images/rounded_box/b.jpg)
4 Теперь давайте добавим навигационную панель к нашему блоку. С помощью инструмента rounded rectangle tool создайте прямоугольник, наподобие того, который вы можете увидеть ниже.
![создаем закругленный прямоугольник для навиг-ой панели](/images/rounded_box/c.jpg)
5 Слой с будущей навигационной панелью расположите под слоем с блоком для контента. Для навигационного блока (слоя) установить следующие стилевые свойства:
![gradient](/images/rounded_box/d.jpg)
![gradien settings](/images/rounded_box/e.jpg)
![stroke](/images/rounded_box/f.jpg)
6 У вас должно получиться что-то похожее на:
![настраиваем навигационный блок](/images/rounded_box/g.jpg)
7 Теперь давайте добавим заголовок к нашей навигационной панели. С помощью инструмента rounded rectangle tool
создайте прямоугольник (с радиусом 15px), наподобие того, который вы можете увидеть ниже.
![настраиваем заголовок у навигационного блока](/images/rounded_box/gg.jpg)
8 И примените к нему следующие стилевые свойства:
![gradient_2](/images/rounded_box/h.jpg)
![stroke_2](/images/rounded_box/i.jpg)
9 Навигационная панель должна выглядеть так:
![настраиваем навигационный блок_2](/images/rounded_box/j.jpg)
10 Теперь добавим сияние навигационной панели. Удерживая CTRL, кликните по слою с панелью, тем самым вы выделите навигационную панель. Не забудьте уменьшить выделенную область на 2px, так как у нас есть обводка.
![выделяем область заголовка](/images/rounded_box/k.jpg)
11 На отдельном слое залейте выделение белым цветом (#ffffff
) и, используя rectangle marquee tool
, удалите белую нижнюю часть.
![редактируем область заголовка](/images/rounded_box/l.jpg)
12 Поставьте у слоя blending mode
на overlay
и понизьте непрозрачность до 20%.
![понижаем непрозрачность у области заголовка](/images/rounded_box/m.jpg)
13 Теперь назовите как-нибудь вашу навигационную панель. Затем возьмите шрифт, например, Helvetica и добавьте ссылки. Также, при необходимости, вы можете создать закругленный блок у правой стороны, повторив необходимые пункты статьи. Кликните по изображению, чтобы увидеть закругленный блок в натуральную величину.
Комментарии к статье