Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Создаем рамку для блока информации со скругленными углами.

Автор: Андрей Краснокутский

Дата: 2012-03-29

Как сделать на сайте блок со скругленными углами

В последнее время большой популярность в дизайне сайтов и блогов пользуются различные блоки со скругленными углами. Есть много разных способов создавать подобные блоки. Один из способов заключается в том, что для создания такого блока используются графические файлы, заранее отрисованные в Photoshop. В этом уроке мы научимся создавать именно такие заготовки для создания блоков с круглыми углами.

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

Для работы нам понадобится графический редактор Photoshop. Открываем его и начинаем работать.

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

Я возьму произвольный размер (для примера) 350 пикселей в ширину, высота здесь не играет роли, но пускай будет 150 пикселей.

Итак, в Фотошоп "идем" в меню: Файл, выбираем пункт: Новый и создаем файл с размерами: 350х150 пикселей. Фоновый цвет у данного файла установите, такой же как на вашем сайте в том месте где будете размещать данный блок.

Теперь идем в меню: Слои, выбираем пункт: Новый и создаем новый слой. В панели Слои:

Фотошоп. Панель Слои.

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

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

 

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

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

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

В панели инструментов Фотошоп, кликнув по цветовому индикатору, можно установить нужный цвет для каждого слоя.

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

Устанавливаем нужный цвет и рисуем блок нужных размеров

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

В панели Слои Фотошоп придаем слою нужные эффекты: рамку, тень, обводку, градиент, свечение

Я уменьшил прозрачность до 50%, добавил небольшую тень и обводку в 1 пиксель. Вы же можете подкорректировать внешний вид данного слоя на свое усмотрение.

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

Я выбрал белый цвет, немного поработал с эффектами, установил внутреннюю тень, небольшую обводку и в результате получился вот такой блок:

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

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

В панели инструментов берем инструмент: Прямоугольная область:

Фотошоп. Инструмент: прямоугольная область

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

Задаем фиксированные размеры для Выдененной области

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

В панели: Слои, нажав клавишу: Ctrl, выделяем оба имеющихся слоя:

Выделяем все нужные слои и копируем в буфер обмена

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

Выделяем область заданного размера

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

Идем в меню: Редактирование

Фотошоп. Меню: Редактирование.

и выбираем пункт: Скопировать совмещенные данные.

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

Появляется новый слой. Идем в меню: Редактирование

Выбираем инструмент ВКЛЕИТЬ в меню Редактирование

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

Верхний файл обрамления графической рамки

Как Вы наверное уже поняли это и будет верхняя графическая часть нашего блока. Сохраняем его под именем: top.jpg.

Точно таким же образом создаем еще два файла: ser.jpg - для средней части блока, bot.jpg - для нижней часть блока.

При создании среднего файла: ser.jpg высота у него не критична, он все равно будет растягиваться на всю высоту блока. Поэтому давайте установим ему небольшой размер, например высоту в 10 пикселей.

В результате мы получим 3 графических файла такого вида:

3 графических файла из которых и будет состоять весь графический блок

из этих файлов и будет формироваться графическая рамка для нашего блока.

Первый файлик: top.jpg (верхний) 350х25 пикселей - будет обрамлять верхнюю часть блока.

Второй файлик: ser.jpg 350х10 пикселей - будет растягиваться на всю длину блока, т.е. длина блока может быть абсолютно любая.

Третий файлик (нижний) bot.jpg 350х25 пикселей - будет обрамлять нижнюю часть блока.

О том как написать код для корректного отображения рамки я расскажу Вам вледующем уроке: Создаем графическую рамку вокруг текстового блока.

Всего Вам доброго.

 

Читайте так же другие наши материалы.

Достойный Проект или Развод для Лохов?

Подготовка изображение для вашего web-сайта или блога.

Как создать реально работающую модель бизнеса?

Что такое Домены второго уровня? Как зарегистрировать Домен?

C чего начинать бизнес в Интернете?

За 9 часов и 45 минут я покажу и расскажу Вам, как Самостоятельно создать сайт

 

Просмотров: 6994


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Максим Саенко
Дата: 2012-03-30

Но это для фиксированной ширины блока! А если например, у меня ширина контейнера 98%? Тогда как!?

Комментарии добавил(а): Лариса
Дата: 2012-03-30

Андрей, всеэто очень интересно, но для людей, владеющих фотошопом, я же только начала осваивать его.

Комментарии добавил(а): светлана
Дата: 2012-04-30

УУУУУУУУУУ я тоже только начинаю осваивать фотошоп для меня это еще темный лес, и конечно же всетаки нагляднее если было бы видео

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Видео Курс по созданию
Информационного Бизнеса в Интернете
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT