Урок простой рамочки для текста.

Суббота, 09 Марта 2013 г. 15:13 + в цитатник

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

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

Урок простой рамочки для текста.

По просьбе Dimitr, сделала Урок простой рамочки для текста,сделанная в Фотошоп.
Конечно,некоторые скажут,есть сайты- генераторы,на которых такие рамочки просто и без проблем делать,но видно не все могут ими пользоваться)))Но это дело каждого...
Я постаралась сделать этот пост более понятным....
Мы будет в этом уроке делать вот такую рамочку....

~~Здесь будет ваш текст~~

SemIra

Код этой рамочки

<center><table border="0" background="//img-fotki.yandex.ru/get/4116/131624064.381/0_a6653_ca3a407c_XL" cellpadding="0" cellspacing="0" height="539" width="750"> <tr><td><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://blogs.mail.ru/mail/box1958"><img src="//i033.radikal.ru/1005/e5/ac5d9ea9c583.gif" width="3" height="3" border="0" /></a> </td></tr></table><table border="0" background="//img-fotki.yandex.ru/get/5643/131624064.381/0_a6655_374c2259_XL" cellpadding="0" cellspacing="0" height="109" width="750"><tr><td><table align="center" border="0" cellspacing="0" cellpadding="0"><tr> <td width="700"><center> <em><strong><span style="color: #FFFFFF"><span style="font-size: 20px;"><span style="font-family: Georgia">~~Здесь будет ваш текст~~<br /> </span></span></span> </strong></em> </center></td></tr></table> </td></tr></table><table border="0" background="//img-fotki.yandex.ru/get/6441/131624064.381/0_a6656_7ed588d6_XL" cellpadding="0" cellspacing="0" height="102" width="750"><tr><td><center><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://www.liveinternet.ru/users/semenova_irina/rubric/2712037/">SemIra<br />
</a></center> </td></tr></table></center>

Урок смотрим

Все картинки кликабельны.
Материал использованный в уроке:

Вы же можете взять свой,это не принципиально,желательно чтоб они были бесшовные,чтоб при растягивании не искажался рисунок,и смотрелся более красиво...
И так начнём:
1) Для начала Открываем наши фоны в программе и сохраняем их как узор...см.рис:

2)Создаём новый слой(например 750х750,цвет белый)
И делаем его две копии(Сочетание клавиш Ctrl+J,нажимаем два раза)
Можете слои переименовать.см.рис:

3) На первый и третий слой мы накладываем одинаковый узор (без рисунка).см.рис:

4)На слой 2 накладываем узор с рисунком:

5)Берём инструмент масштабирование(Ctrl+T)и зажав клавишу Shift и потянув за уголок уменьшаем второй и третий слой по очереди как на рисунке..

6)Теперь сделаем обводку всех трёх слоёв по очереди...

То что отмечено галочкой,вы можете менять,в зависимости от фона,рисунка и вообщем по желанию,как вам нравится)))
7)Копируем Слой 3(Ctrl+J)(не забываем ,когда работаем со слоем,он должен быть вкл.,
глазик виден и д.быть выделен)
И инструментом трансформированияCtrl+T,уменьшаем сверху вниз .см.рис:

8)Рамочка почти готова.Теперь открываем открытку,изображение,клипарт....то что вы хотите,при необходимости уменьшаем изображение,и перемещаем его под последний слой,см.рис:

9)Я ещё добавила на рамочку вот такой разделитель,в самом низу(для красоты)
вы же можете добавить свой,или не чего не добавлять...

10)Объединяем все наши слои,Shift+Ctrl+E.
И разделим нашу рамочку на три части.
И перемещаем черту 2 и 3,как показано на рисунке.
(просто берём и перемещаем)

Теперь сохраняем нашу рамочку-Меню-Файл-Сохранить для веб устройств.
Теперь сохраняем наши части на каком нибудь хостинге,но можно и здесь на Ли.ру,только пока сохраняйте в черновик.
Когда вы редактируете,в коде отображена ссылка на изображение и размеры.
Далее копируем формулу рамочки вот с этого окошка

<br />
<center><table border="0" background="Адрес картинки №1" cellpadding="0" cellspacing="0" height="Высота картинки №1" width="Ширина рамки№1"> <tr><td><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://blogs.mail.ru/mail/box1958"><img src="//i033.radikal.ru/1005/e5/ac5d9ea9c583.gif" width="3" height="3" border="0" /></a> </td></tr></table><table border="0" background="Адрес картинки №2" cellpadding="0" cellspacing="0" height="Высота картинки №2" width="Ширина рамки№2"><tr><td><table align="center" border="0" cellspacing="0" cellpadding="0"><tr> <td width="ШИРИНА ТЕКСТА"><center> <em><strong><span style="color: #ff0000"><span style="font-size: 20px;"><span style="font-family: Georgia">    ВАШ ТЕКСТ <br /> </span></span></span> </strong></em> </center></td></tr></table> </td></tr></table><table border="0" background="Адрес картинки №3" cellpadding="0" cellspacing="0" height="Высота картинки №3" width="Ширина рамки№3"><tr><td><center><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=Ссылка на ваш дневник">Ваша подпись<br />
</a></center> </td></tr></table></center><br />

Открываем простой редактор,вставляем нашу формулу, и вместо слов Адрес картинки1 или 2 или 3,всталяем код наших частей рамочек(Адрес картинки начинается с http://) ,а вместо слов Ширина и высота,соответственно цифры,наших частей.
Ну вот собственно и всё.
Спасибо за внимание)))

Серия сообщений "Мои уроки":

Часть 1 - Урок фотошопа"Фоновый рисунок"фильтр-Волна
Часть 2 - Урок фотошопа"Эффект-тонкого весеннего льда"
...
Часть 21 - Урок фотошопа-Анимация"Перелистывание листов"
Часть 22 - Продолжение урока анимации"Перелистывание листов"
Часть 23 - Урок простой рамочки для текста.
Часть 24 - Продолжение:Перелистывание 6 фонов.

Серия сообщений "УРОКИ ФОТОШОПА/ФОТОШОПИМ ВМЕСТЕ":
Часть 1 - Коллаж "Ondée Printanière "
Часть 2 - Как сделать рамку для изображения в Photoshop?
...
Часть 18 - Урок Форошопа-"Как загрузить в фотошоп сразу несколько изображений..."
Часть 19 - Урок "Рамочка сделанная в Фотошопе"
Часть 20 - Урок простой рамочки для текста.
Часть 21 - УРОК = КАК Я ДЕЛАЮ РАЗРЕЗНУЮ РАМОЧКУ В ФОТОШОП=
Часть 22 - Эффекты с текстом - уроки ФШ