Создаем рамку для блока информации со скругленными углами.
Автор: Андрей Краснокутский
Дата: 2012-03-29 Как сделать на сайте блок со скругленными углами
В последнее время большой популярность в дизайне сайтов и блогов пользуются различные блоки со скругленными углами. Есть много разных способов создавать подобные блоки. Один из способов заключается в том, что для создания такого блока используются графические файлы, заранее отрисованные в Photoshop. В этом уроке мы научимся создавать именно такие заготовки для создания блоков с круглыми углами.
Применять подобные блоки можно в любом месте сайта, например для боковых блоков информации или же в панели в качестве меню, да в общем то где угодно. Ведь подобный блок можно создать любых размеров и любого дизайна, следовательно и разместить можно где угодно и для любых целей.
Для работы нам понадобится графический редактор Photoshop. Открываем его и начинаем работать.
Первое что мы делаем - это определяемся с размерами блока, т.е. определяем место на сайте где будет размещаться подобный блок. Например, Вы хотите сделать подобные отдельные блоки в боковых панелях своего сайта и разместить в этих блоках навигацию, регистрацию, партнерские товары, контекстную рекламу и т.д., короче все то, что обычно размещают в боковых панелях. Обычно ширина боковых панелей колеблется от 150 до 250 пикселей. Значит и графические файлы, которые мы будем сейчас создавать должны вписываться в эти размеры. Поэтому размер ширины блока решайте для себя сами, исходя из целей и места на сайте где будут размещаться блоки со скругленными углами.
Я возьму произвольный размер (для примера) 350 пикселей в ширину, высота здесь не играет роли, но пускай будет 150 пикселей.
Итак, в Фотошоп "идем" в меню: Файл, выбираем пункт: Новый и создаем файл с размерами: 350х150 пикселей. Фоновый цвет у данного файла установите, такой же как на вашем сайте в том месте где будете размещать данный блок.
Теперь идем в меню: Слои, выбираем пункт: Новый и создаем новый слой. В панели Слои:

выделяем новый слой. Идем в панель: Инструментов, выбираем инструмент: Прямоугольнок со скругленными углами

В верхней панели устанавливаем радиус скругления углов, я устанавливаю радиус: 15 пикселей:

В панели инструментов кликнув по цветовому индикатору:

Устанавливаем нужный Вам цвет, этот цвет будет цветом самой рамки. Теперь на новом слое рисуем прямоугольнок нужной формы:

Переключившись на инструмент: Перемещение, выравниваем новый прямоугольник на белом фоне примерно по центру. Можно данному слою уменьшить прозрачность, придать различные эффекты - это уже на Ваше усмотрение, как Вам больше понравится.

Я уменьшил прозрачность до 50%, добавил небольшую тень и обводку в 1 пиксель. Вы же можете подкорректировать внешний вид данного слоя на свое усмотрение.
Теперь повторяем проделанные операции (см. выше): создаем новый слой, придаем ему свой цвет, таперь это уже будет фоновый цвет внутри блока, на котором будет располагаться информация и отрисовываем новый примоугольник, но уже меньшего размера. Можно уменьшить радиус скругления до 10 пикселей.
Я выбрал белый цвет, немного поработал с эффектами, установил внутреннюю тень, небольшую обводку и в результате получился вот такой блок:

Теперь из этого блока мы и будем нарезать нужные нам заготовки (графические файлы).
В панели инструментов берем инструмент: Прямоугольная область:

В верхней панели выставляем следующие параметры:

Стиль: Заданный размер, Ширина: 350 пикселей, Высота: 25 пикселей. Высоту файла выбираем из расчета, чтобы у нас в область выделения поместились скругленные края.
В панели: Слои, нажав клавишу: Ctrl, выделяем оба имеющихся слоя:

Теперь на нашем блоке кликаем в произвольном месте, образуется выделенная область:

с заданными размерами: 350 х 25 пикселей. Используя на клавиатуре стрелки (вверх/вниз) выравниваем эту область по верхнему краю.
Идем в меню: Редактирование

и выбираем пункт: Скопировать совмещенные данные.
Теперь идем в меню: Файл, выбираем пункт: Новый. Так как в буфере обмена у нас уже имеется информация о только что скопированном фрагменте изображения, то Фотошоп сам определит нужные размеры и предложит создать файл с заданными параметрами, а именно: Ширина 350 пикселей, Высота 25 пикселей. Подтвердите, нажав кнопку: ОК.
Появляется новый слой. Идем в меню: Редактирование

И выбираем пункт: Вклеить. И в результате получаем вот такой графический файлик:

Как Вы наверное уже поняли это и будет верхняя графическая часть нашего блока. Сохраняем его под именем: top.jpg.
Точно таким же образом создаем еще два файла: ser.jpg - для средней части блока, bot.jpg - для нижней часть блока.
При создании среднего файла: ser.jpg высота у него не критична, он все равно будет растягиваться на всю высоту блока. Поэтому давайте установим ему небольшой размер, например высоту в 10 пикселей.
В результате мы получим 3 графических файла такого вида:

из этих файлов и будет формироваться графическая рамка для нашего блока.
Первый файлик: top.jpg (верхний) 350х25 пикселей - будет обрамлять верхнюю часть блока.
Второй файлик: ser.jpg 350х10 пикселей - будет растягиваться на всю длину блока, т.е. длина блока может быть абсолютно любая.
Третий файлик (нижний) bot.jpg 350х25 пикселей - будет обрамлять нижнюю часть блока.
О том как написать код для корректного отображения рамки я расскажу Вам вледующем уроке: Создаем графическую рамку вокруг текстового блока.
Всего Вам доброго.
Читайте так же другие наши материалы.
Достойный Проект или Развод для Лохов?
Подготовка изображение для вашего web-сайта или блога.
Как создать реально работающую модель бизнеса?
Что такое Домены второго уровня? Как зарегистрировать Домен?
C чего начинать бизнес в Интернете?
За 9 часов и 45 минут я покажу и расскажу Вам, как Самостоятельно создать сайт
Просмотров: 10264
Но это для фиксированной ширины блока! А если например, у меня ширина контейнера 98%? Тогда как!?
Андрей, всеэто очень интересно, но для людей, владеющих фотошопом, я же только начала осваивать его.
УУУУУУУУУУ я тоже только начинаю осваивать фотошоп для меня это еще темный лес, и конечно же всетаки нагляднее если было бы видео
|