Делаем рамочку с картинками

Вторник, 02 Апреля 2013 г. 23:02 + в цитатник

Цитата сообщения MANGIANA

Прочитать целиком В свой цитатник или сообщество!

Делаем рамочку с картинками

ИЗГОТОВЛЕНИЕ РАМОЧКИ.
УРОК №8

Ну что ...давно вы не читали моих уроков и не учились новому...То что вы проделываете со своими рамками -похвально...Вижу что я вас многих чему то научила...Умнички..У некоторых даже свой стиль "образовался" И это похвально....потому что узнаваемо))))А сегодня мы поговорим еще о рамочках...Я уже насмотрелась на мигание ...мерцание....блескучести и тому подобное и вот решила вас немного в другое русло "повернуть"..А вдруг вам спокойствие и классика понравится больше чем авангард и анархизм))))Для начала скажу....что при этих формулах не надо искать и подбирать такие разные и многообразные фоны , а надо всего-навсего иметь таблицу цветов под рукой....и формулу =шаблон слоя рамки (как обычно) А все остадльное это ваша фантазия...
Итак.....приступим...

Что нам необходимо..
1. Таблица цветов
вот она
http://web.njit.edu/~kevin/rgb.txt.html
кстати...больше этой таблицы и полнее просто не существует...
2. Шаблон-формула слоя

/www.fiestac.com/fondos/tira09.jpg"" target="_blank">http://www.fiestac.com/fondos/tira09.jpg") repeat scroll 0% 0% transparent; border-style: ridge; width: 90%; color: rgb(0, 51, 0); padding: 4px;">
<div style="background-color:#КОД ЦВЕТА ФОНА; border-style: ridge; color:#КОД ЦВЕТА БОРДЮРА;padding:8px;">

Что в ней такое есть?
Код цвета фона -это мы выбираем цвет каким хотим видеть фон рамки
Код цвета бордюра-это тот самый бордюрчик чья цветная полоса окаймляет нашу рамку и каждый слой...
ну и естественно шаблон текстового слоя.

/www.fiestac.com/fondos/tira09.jpg"" target="_blank">http://www.fiestac.com/fondos/tira09.jpg") repeat scroll 0% 0% transparent; border-style: ridge; width: 90%; color: rgb(0, 51, 0); padding: 4px;">
<div style="text-align: center; font: 20px Arial;font-style: italic;
color: #000000; padding:2px;">ВАШ <br>ТЕКСТ<br>КАРТИНКА<br></div>

С ним мы уже знакомы
Итак...схема работы...как обычно
1.Открываем окно с таблицей цветов..
2.открываем окно с "записать мысль"
3.Копируем шаблон-формулу нового слоя
4.Вставляем его в "записать мысль" 4 раза и в каждом слое СТАВИМ СВОИ ЦВЕТОВЫЕ ПАРАМЕТРЫ ВМЕСТО КОДА ЦВЕТА ФОНА взяв их в таблице цветов в колонке "RGB Hex"(она четвертая по счету) а вот код цвета бордюра должен быть один и тот же у всех 4-ёх слоев
5.добавляем в хвост текстовой слой-шаблон
и вот что получаем (я взяла синюю палитру цветов Они удобны тем что палитра одного цвета рядом так что просто выбираете близкородственные и сочетаемые цвета..)
Да..кстати...в последнем перед текстовым слоем( в 4-ом )ширину слоя поставьте 2 пикс.

ВАШ
ТЕКСТ
КАРТИНКА

Теперь выбираем какую нибудь картинку клип арт на прозрачном фоне
Ну например вот такую

вот её код
<img src="http://img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9aa_9d8b3a8e_M">
Она несколько великовата...поэтому как я вас учила в конце кода перед угловой скобкой добавляем теги
width="100" height="80"
и получаем вот такую уже картинку

смотрите и корректируете размеры в этих подставленных тегах чтобы картинка была пропорциональной...меняете или ширину(она первая) или высоту но по чуть-чуть
И вот этот код
<img src="http://img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9aa_9d8b3a8e_M"width="100" height="80">
Да..кстати..забыла сказать .ВСЕ ЧТО В КОДЕ КАРТИНКИ ЕСТЬ ЕЩЕ===стираем нафиг...нам больше ничего не нужно там может быть атрибут* border * или *alt* и цифры при них вот ЭТОГО НИЧЕГО НЕ НАДО ну или не нужно))))
Так вот...отвлеклась...этот код
берем и вставляем сразу перед словом ВАШ Вставили? Теперь ЕЩЕ РАЗ в хвост предидущему..А теперь немного доработаем...У нас перед словом ВАШ два кода одинаковых так вот в конце первого кода перед угловой скобкой ставим тег
align="left" Он будет выглядеть вот так
<img src="http://img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9aa_9d8b3a8e_M"width="100" height="80" align="left">
это значит картинка справа
а во второй код добавляем в конце
align="right"
и он будет выглядеть вот так
<img src="http://img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9aa_9d8b3a8e_M"width="100" height="80" align="right">
и вот что мы имеем

ВАШ
ТЕКСТ
КАРТИНКА

Нравится???Я думаю ..да..Что еще можем сделать.Ах да...Не забываем закрывашки для слоев...у нас 4 слоя плюс текст значит их в конце должно быть 5..
Ну можем еще взять просто код маленькой этой картинки и поставить сразу после слова КАРТИНКА и тега* br*и вот что мы получим
вот код
<img src="http://img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9aa_9d8b3a8e_M"width="100" height="80">
и вставляем....получаем

ВАШ
ТЕКСТ
КАРТИНКА

а вот тут код всей этой рамочки в котором вы уже умеете разбираться))))Проверьте...сравните....и СДЕЛАЙТЕ САМИ!!!
/img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9aa_9d8b3a8e_M"width="100"" target="_blank">//img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9...e_M"width="100" height="80"align="left" ><img src="//img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9...e_M"width="100" height="80"align="right">ВАШ <br>ТЕКСТ<br>КАРТИНКА<br><img src="//img-fotki.yandex.ru/get/5102/zomka.9d/0_4d9...e_M"width="100" height="80"></div></div></div></div></div>" size="35" />
Вот как просто только с одной таблицой цветов и формулами шаблонами....да еще имея картинки которые можно вставлять мы сделали рамочку...Должна сказать получилось прикольно)))
Удачи....мои хорошие...Экспериментируйте!!!
Ваша Zomka

Серия сообщений "Изготовление рамочек":

Часть 1 - Урок 5. Делаем вместе рамку с уголками.
Часть 2 - Делаем рамочку с картинками
Часть 3 - Коды для оформления блога
Часть 4 - Делаем 2-х слойную рамочку с применением фона и кода цвета
...
Часть 34 - КАК СДЕЛАТЬ ОРИГИНАЛЬНУЮ РАМКУ ИЗ МАЗКОВ КИСТИ
Часть 35 - РАМОЧКА С БЕГУЩИМИ ОГОНЬКАМИ
Часть 36 - УРОК =ДЕЛАЕМ РАМКИ В ФОТОШОП=

<a href="https://www.liveinternet.ru/users/menestrell/post268638997/">Р”РµР»Р°РµРј СЂР°РјРѕС‡РєСѓ СЃ РєР°СЂС‚РёРЅРєР°РјРё</a><br/>Р”РµР»Р°РµРј СЂР°РјРѕС‡РєСѓ СЃ РєР°СЂС‚РёРЅРєР°РјРё

РР—Р“РћРўРћР’Р›Р•РќРР• Р РђРњРћР§РљР. 
РЈР РћРљ в„–8

РќСѓ С‡С‚Рѕ ...РґР°РІРЅРѕ РІС‹ РЅРµ С‡РёС‚Р°Р»Рё РјРѕРёС… СѓСЂРѕРєРѕРІ Рё РЅРµ СѓС‡РёР»РёСЃСЊ РЅРѕРІРѕРјСѓ...РўРѕ С‡С‚Рѕ РІС‹ РїСЂРѕРґРµР»С‹РІР°РµС‚Рµ СЃРѕ СЃРІРѕРёРјРё СЂР°РјРєР°РјРё -РїРѕС…РІР°Р»СЊРЅРѕ...Р’РёР¶Сѓ С‡С‚Рѕ СЏ РІР°СЃ РјРЅРѕРіРёС… С‡РµРјСѓ С‚Рѕ РЅР°СѓС‡РёР»Р°...РЈРјРЅРёС‡РєРё..РЈ РЅРµРєРѕС‚РѕСЂС‹С… РґР°Р¶Рµ СЃРІРѕР№ СЃС‚РёР»СЊ "РѕР±СЂР°Р·РѕРІР°Р»СЃСЏ" Р СЌС‚Рѕ РїРѕС…РІР°Р»СЊРЅРѕ....РїРѕС‚РѕРјСѓ С‡С‚Рѕ СѓР·РЅР°РІР°РµРјРѕ))))Рђ СЃРµРіРѕРґРЅСЏ РјС‹ РїРѕРіРѕРІРѕСЂРёРј РµС‰Рµ Рѕ СЂР°РјРѕС‡РєР°С…...РЇ СѓР¶Рµ РЅР°СЃРјРѕС‚СЂРµР»Р°СЃСЊ РЅР° РјРёРіР°РЅРёРµ ...РјРµСЂС†Р°РЅРёРµ....Р±Р»РµСЃРєСѓС‡РµСЃС‚Рё Рё С‚РѕРјСѓ РїРѕРґРѕР±РЅРѕРµ Рё РІРѕС‚ СЂРµС€РёР»Р° РІР°СЃ РЅРµРјРЅРѕРіРѕ РІ РґСЂСѓРіРѕРµ СЂСѓСЃР»Рѕ "РїРѕРІРµСЂРЅСѓС‚СЊ"..Рђ РІРґСЂСѓРі РІР°Рј СЃРїРѕРєРѕР№СЃС‚РІРёРµ Рё РєР»Р°СЃСЃРёРєР° РїРѕРЅСЂР°РІРёС‚СЃСЏ Р±РѕР»СЊС€Рµ С‡РµРј Р°РІР°РЅРіР°СЂРґ Рё Р°РЅР°СЂС…РёР·Рј))))Р”Р»СЏ РЅР°С‡Р°Р»Р° СЃРєР°Р¶Сѓ....С‡С‚Рѕ РїСЂРё СЌС‚РёС… С„РѕСЂ... <a href="https://www.liveinternet.ru/users/menestrell/post268638997/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Рубрики

-Метки

-Музыка

-Приложения

-Всегда под рукой

-Поиск по дневнику

-Подписка по e-mail

-Друзья

-Постоянные читатели

-Сообщества

-Статистика

Делаем рамочку с картинками