В этом уроке представлен один из примеров того, как я делаю рамочки для текста.
ШАГ 1. Photoshop.
1. У понравившейся картинки удаляем фон. Так же потребуется найти или создать подходящий бесшовный фон.
читать дальше2. Создаем новый файл. Допустим его ширина будет 600px, высоту делаю примерно такой же.
Итак, моя рамочка будет состоять из трех частей: 1-верхняя; 2-средняя, в ней будет находиться наш текст; 3- нижняя часть.
3. В документе располагаю фон так, чтобы его нижняя граница касалась нижней части файла. Это очень важно. Далее просто редактирую фон, округляю сверху края (с помощью маски, можно сделать с помощью инструмента "Прямоугольник с округлыми краями"), так же меняю оттенок фона, чтобы он подходил под выбранное изображение, вставляю нашу картинку, добавляю и меняю другие детали или эффекты на свое усмотрение. Верхняя часть готова, сохраняем ее (в формате .png или .gif).
4. Открываем файл с нашим фоном и применяем к нему все те же эффекты, что и к первой части, ведь этот фон будет продолжением нашей рамки. Сохраняем изображение.
5. Чтобы не усложнять урок, я решила сделать нижнюю часть обычной линией в цвет обводки рамочки с шириной 600px и высотой 3px. Сохраняем.
6. Все детали готовы, можно загрузить их в Библиотеку изображений.
P.S. Не забываем про вес изображений ^^
ШАГ 2. Собираем нашу рамочку.
1. Как выглядит упрощенный код из урока (все так просто ^^):
<img scr=""/>
<div>ТЕКСТ<img scr=""/></div>
<div>ТЕКСТ<img scr=""/></div>
А теперь усложним:
<img src="АДРЕС ИЗОБРАЖЕНИЯ" width="ШИРИНА ИЗОБРАЖЕНИЯ" height="ВЫСОТА ИЗОБРАЖЕНИЯ"/>
<div style="width: ШИРИНА ЭЛЕМЕНТА background-image: url('АДРЕС ИЗОБРАЖЕНИЯ');">
<center>
<p style="padding: ОТСТУП СВЕРХУpx ОТСТУП СПРАВАpx ОТСТУП СНИЗУpx ОТСТУПСЛЕВА color: #ЦВЕТ ТЕКСТА; font-family: ИМЯ ТЕКСТА; font-style: СТИЛЬ ТЕКСТА;">ВАШ ТЕКСТ.</p>
</center>
<img src="АДРЕС ИЗОБРАЖЕНИЯ" width="ШИРИНА ИЗОБРАЖЕНИЯ" height="ВЫСОТА ИЗОБРАЖЕНИЯ"/>
</div>
<div style="width: ШИРИНА ЭЛЕМЕНТА background-image: url('АДРЕС ИЗОБРАЖЕНИЯ');">
<center>
<p style="padding: ОТСТУП СВЕРХУpx ОТСТУП СПРАВАpx ОТСТУП СНИЗУpx ОТСТУПСЛЕВА color: #ЦВЕТ ТЕКСТА; font-family: ИМЯ ТЕКСТА; font-style: СТИЛЬ ТЕКСТА;">ВАШ ТЕКСТ.</p>
</center>
<img src="АДРЕС ИЗОБРАЖЕНИЯ" width="ШИРИНА ИЗОБРАЖЕНИЯ" height="ВЫСОТА ИЗОБРАЖЕНИЯ"/>
</div>
2. Разберем его поподробнее.
<img src="АДРЕС ИЗОБРАЖЕНИЯ" width="ШИРИНА ИЗОБРАЖЕНИЯ" height="ВЫСОТА ИЗОБРАЖЕНИЯ"/>
Это верхняя часть, здесь все просто.
Далее открывается тег <div>:
<div style="width: ШИРИНА ЭЛЕМЕНТА background-image: url('АДРЕС ИЗОБРАЖЕНИЯ');">
Сюда мы вставляем адрес нашей рамочки.
Внутри <div>...</div> находится наш тест, описываем его стиль и положение внутри рамочки:
<center><p style="padding: ОТСТУП СВЕРХУpx ОТСТУП СПРАВАpx ОТСТУП СНИЗУpx ОТСТУПСЛЕВА color: #ЦВЕТ ТЕКСТА; font-family: ИМЯ ТЕКСТА; font-style: СТИЛЬ ТЕКСТА;">ВАШ ТЕКСТ.</p></center>
После располагается код нижней части:
<img src="АДРЕС ИЗОБРАЖЕНИЯ" width="ШИРИНА ИЗОБРАЖЕНИЯ" height="ВЫСОТА ИЗОБРАЖЕНИЯ"/>
и закрывается </div>
Важно: в "background-image:url('ИЗОБРАЖЕНИЕ'); - адрес ссылки пишется без "//static.diary.ru"
Это верхняя часть, здесь все просто.
Далее открывается тег <div>:
<div style="width: ШИРИНА ЭЛЕМЕНТА background-image: url('АДРЕС ИЗОБРАЖЕНИЯ');">
Сюда мы вставляем адрес нашей рамочки.
Внутри <div>...</div> находится наш тест, описываем его стиль и положение внутри рамочки:
<center><p style="padding: ОТСТУП СВЕРХУpx ОТСТУП СПРАВАpx ОТСТУП СНИЗУpx ОТСТУПСЛЕВА color: #ЦВЕТ ТЕКСТА; font-family: ИМЯ ТЕКСТА; font-style: СТИЛЬ ТЕКСТА;">ВАШ ТЕКСТ.</p></center>
После располагается код нижней части:
<img src="АДРЕС ИЗОБРАЖЕНИЯ" width="ШИРИНА ИЗОБРАЖЕНИЯ" height="ВЫСОТА ИЗОБРАЖЕНИЯ"/>
и закрывается </div>
Важно: в "background-image:url('ИЗОБРАЖЕНИЕ'); - адрес ссылки пишется без "//static.diary.ru"
3. Мой вариант:
<img src="img-fotki.yandex.ru/get/5012/134889438.7d/0_c06..." width="600" height="379"/>
<div style="width: 600 background-image: url('/userdir/3/2/5/9/3259691/81509596.gif');">
<center><p style="padding: 0px 20px 0px 20 color: #49241f; font-family: Segoe Print; font-style: italic;">ВАШ ТЕКСТ.</p></center>
<img src="img-fotki.yandex.ru/get/9797/134889438.7d/0_c06..." width="600" height="3"/></div>
<div style="width: 600 background-image: url('/userdir/3/2/5/9/3259691/81509596.gif');">
<center><p style="padding: 0px 20px 0px 20 color: #49241f; font-family: Segoe Print; font-style: italic;">ВАШ ТЕКСТ.</p></center>
<img src="img-fotki.yandex.ru/get/9797/134889438.7d/0_c06..." width="600" height="3"/></div>
Ссылки на изображения которые я использовала:
fotki.yandex.ru/users/katherinelunar/view/78798...
img-fotki.yandex.ru/get/9493/134889438.7d/0_c06...
Результат можно посмотреть в самом низу, после урока.
Если у вас остались вопросы, задавайте их в комментариях этого урока.
Навигация по урокам сообщества: Перейти.
Результат урока:
Цветком печальным на ветру,
Не пророняя слов,
Увянет роза поутру
Под градом лепестков.
Придёт садовник в старый сад
Собрать букет цветов,
А на траве росой лежат
Слезинки лепестков.