|
|
|
|
Создаем рамку для блока информации со скругленными углами. Автор: Андрей Краснокутский Дата: 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 минут я покажу и расскажу Вам, как Самостоятельно создать сайт
Просмотров: 8829 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Максим Саенко Но это для фиксированной ширины блока! А если например, у меня ширина контейнера 98%? Тогда как!? Комментарии добавил(а): Лариса Андрей, всеэто очень интересно, но для людей, владеющих фотошопом, я же только начала осваивать его. Комментарии добавил(а): светлана УУУУУУУУУУ я тоже только начинаю осваивать фотошоп для меня это еще темный лес, и конечно же всетаки нагляднее если было бы видео Добавить Ваш комментарий: |
Новости сайта Почтовая рассылка Новинка! Как реально заработатьв Интернете? "Обзор видов и способов заработка."
Специальный Отчет:  В подарок всем подписчикам! Полный список наших почтовых рассылок! Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |