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

Вторник, 12 Февраля 2013 г. 20:33 + в цитатник

Цитата сообщения 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 - Урок простой рамочки для текста.

Рубрики:

Уроки дизайна

Метки: уроки уроки дизайна фотошоп
Понравилось: 3 пользователям

<a href="https://www.liveinternet.ru/users/dimitr74/post260992774/">РЈСЂРѕРє РїСЂРѕСЃС‚РѕР№ СЂР°РјРѕС‡РєРё РґР»СЏ С‚РµРєСЃС‚Р°.</a><br/>РЈСЂРѕРє РїСЂРѕСЃС‚РѕР№ СЂР°РјРѕС‡РєРё РґР»СЏ С‚РµРєСЃС‚Р°.

РџРѕ РїСЂРѕСЃСЊР±Рµ  Dimitr, СЃРґРµР»Р°Р»Р° РЈСЂРѕРє РїСЂРѕСЃС‚РѕР№ СЂР°РјРѕС‡РєРё РґР»СЏ С‚РµРєСЃС‚Р°,СЃРґРµР»Р°РЅРЅР°СЏ РІ Р¤РѕС‚РѕС€РѕРї.
РљРѕРЅРµС‡РЅРѕ,РЅРµРєРѕС‚РѕСЂС‹Рµ СЃРєР°Р¶СѓС‚,РµСЃС‚СЊ СЃР°Р№С‚С‹- РіРµРЅРµСЂР°С‚РѕСЂС‹,РЅР° РєРѕС‚РѕСЂС‹С… С‚Р°РєРёРµ СЂР°РјРѕС‡РєРё РїСЂРѕСЃС‚Рѕ Рё Р±РµР· РїСЂРѕР±Р»РµРј РґРµР»Р°С‚СЊ,РЅРѕ РІРёРґРЅРѕ РЅРµ РІСЃРµ РјРѕРіСѓС‚ РёРјРё РїРѕР»СЊР·РѕРІР°С‚СЊСЃСЏ)))РќРѕ СЌС‚Рѕ РґРµР»Рѕ РєР°Р¶РґРѕРіРѕ...
РЇ РїРѕСЃС‚Р°СЂР°Р»Р°СЃСЊ СЃРґРµР»Р°С‚СЊ СЌС‚РѕС‚ РїРѕСЃС‚ Р±РѕР»РµРµ РїРѕРЅСЏС‚РЅС‹Рј....
РњС‹ Р±СѓРґРµС‚ РІ СЌС‚РѕРј СѓСЂРѕРєРµ РґРµР»Р°С‚СЊ РІРѕС‚ С‚Р°РєСѓСЋ СЂР°РјРѕС‡РєСѓ....
    ~~Р—РґРµСЃСЊ Р±СѓРґРµС‚ РІР°С€ С‚РµРєСЃС‚~~    SemIra
 
РљРѕРґ СЌС‚РѕР№ СЂР°РјРѕС‡РєРё
    ~~Р—РґРµСЃСЊ Р±СѓРґРµС‚ РІР°С€ С‚РµРєСЃС‚~~    SemIra
 
РЈСЂРѕРє СЃРјРѕС‚СЂРёРј

Р’СЃРµ РєР°СЂС‚РёРЅРєРё РєР»РёРєР°Р±РµР»СЊРЅС‹.
РњР°С‚РµСЂРёР°Р» РёСЃРїРѕР»СЊР·РѕРІР°РЅРЅС‹Р№ РІ СѓСЂРѕРєРµ:

Р’С‹ Р¶Рµ РјРѕР¶РµС‚Рµ РІР·СЏС‚СЊ СЃРІРѕР№... <a href="https://www.liveinternet.ru/users/dimitr74/post260992774/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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