Как делать рамочки в фотошопе и не только в нём

Понедельник, 22 Августа 2011 г. 10:05 + в цитатник

Картинка в блестящей рамочке и Как делать разрезную рамку в фотошопе с дальнейшим наполнением(текст и т.д)
У меня часто спрашивают,как делать картиночки с блестящим обрамлением..как делать разрезные рамки в фотошопе и то-же с блестящим обрамлением и как туда ещё наполнение "вписать"..Вот в этом уроке,в несколько частей.. мы и разберёмся.Уроков в инете много по теме но я распишу свой вариант,как я делаю всё это

1.
Просто изображение
в обрамлении блестящей
рамочки

2.
разрезная фотошоп рамка
в обрамлении блестяшек
с кликабельными кнопками

Разрезная рамка
с наполнением
(текст и т.д)

Часть первая
"Картинка с обрамлением блестяшками"
Для увеличения изображения,жмите на картинки
1.
Для начала создаёте документ..размерами которые нужны Вам(по ширине и высоте)..Фон прозрачный

2.
Добавляете два новых слоя нажатием на конвертик в нижней части палитры слоёв
Далее..находитесь на самом последнем слое и загружаете нужную Вам картинку и перетаскиваете её на основную работу..Слой с картинкой окажется самым верхним-последним..
РЕДАКТИРОВАНИЕ-ТРАНСФОРМИРОВАНИЕ-МАСШТАБИРОВАНИЕ..
Уменьшаете изображение так как нужно Вам..что-бы видно было обрамление.
( Подсказка....Что-бы трансформирование было равномерным,зажмите-удерживайте клавишу SHIFT )

3.
Загружаете и сохраняете в УЗОР глиттеры..Как скачивать,загружать и сохранять глиттеры написано вот в этом уроке

Теперь будем их применять "в деле"

Переходите на самый первый-нижний слой..
Далее меню фотошоп..РЕДАКТИРОВАНИЕ-ВЫПОЛНИТЬ ЗАЛИВКУ

Далее..в выпавшем редакторе настройки как видите на скрине..и в выборе глиттеров находите "кадры" вашего сохранённого глиттера и нажимаете на самый первый..как видите на моём скрине..У меня глиттер жёлтый

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

Далее..в слоях переходите на второй слой для заливки..
Так-же меню РЕДАКТИРОВАНИЕ-ВЫПОЛНИТЬ ЗАЛИВКУ..настройки так-же как видите на скрине..РЕГУЛЯРНЫЙ и опять находите свой сохранённый глиттер но уже нажимаете на "второй его кадр" и жмите "ОК"

Далее..так-же заливаете и третий слой..Переходите на этот слой..далее РЕДАКТИРОВАНИЕ-ВЫПОЛНИТЬ ЗАЛИВКУ..регулярный...и находите Ваш сохранённый глиттер,его последний кадр и жмите "ОК"..
Таким вот образом мы применили глиттер-блестяшку ко всем слоям

ПОДСКАЗКА....Бывает так что в сохранённом глиттере меньше трёх кадр-слоёв(два) или больше чем три кадр-слоя..(четыре..даже шесть бывает и девять)..тогда слоёв для заливки делаете столько сколько кадр-слоёв у глиттера. А заливка делается так-же как и описано)
Теперь анимируем блестяшку.
Первый кадр--время 0.1-0.2 сек, а в палитре слоёв видимость включена на первом слое с заливкой и на изображении

Далее..Создаём второй кадр нажав на конвертик в палитре анимации
в слоях переходим на второй слой с заливкой и видимость включена на нём и на изображении..
Видимость остальных слоёв отключена

Далее..Создаёте третий кадр..а в слоях переходите на третий слой с заливкой. Видимость на нём и на изображении включена а с остальных слоёв выключена
Вот и всё. картинка с блестящим обрамлением готова. Сохраняете. ФАЙЛ-СОХРАНИТЬ ДЛЯ ВЕБ..формат GIF.

А вот тут урок с ещё одним вариантом обрамления изображения блестяшками

Часть вторая
"Разрезная на части картинка с обрамлением блестяшками"
Вариант первый
В этом примере я расскажу как сделать картинку с обрамлением блестяшками,разрезную на части
(А в качесте бонуса расскажу как сделать и кнопками-переход на какой либо ресурс..)
пример примитивный..просто для того что-бы уловили суть.
Для начала делаете всё как в первой части урока..Слои для заливки,потом изображение которое будете разрезать..(смысловое и целенаправленное по назначению кнопок)
Я вот сделала надписи..будущие кнопки для перехода на мой БЛГ..СООБЩЕСТВО и ФОРУМ.. Нажимая на эти кнопки будете попадать в нужное место
1.

Когда всё готово..и работа и анимация..приступим к разрезанию.
Нажимаем первый кадр(активный синего цвета) и становимся в слоях на самый первый слой.
Берём инструмент "РАСКРОЙКА"
2.

3.

4.

5.

6.

7.

8.
В предназначенной папке к сохранению работы или там где вообще Вы обычно сохраняете анимационные работы..появится папка "images"

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

10.
Теперь отправляетесь на хостинг загрузки изображений
ЖМИТЕ НА КАРТИНКУ

все галочки отключаете

Через ОБЗОР..находите и загружаете ФРАГМЕНТ-№1 (вашей разрезанной картинки) и копируете чистую ссылку..ССЫЛКА АДРЕСА ИЗОБРАЖЕНИЯ-№ 1
10-а.

11.
Теперь нам без кода HTML не обойтись
Я вот приготовила Вам кодик..Выделите его мышкой(нажмите в конце, левой кнопкой мышки и не отпуская ведите в левую сторону..Кодик выделится..и копируйте..Вставьте его куда нужно или в редактор записи или себе в "блокнот" и т.д

12.
Аккуратно,что-бы не удалить ковычки..удаляете слова АДРЕС СТРАНИЦЫ и вставляете туда,скопированный в строке браузера адрес ресурса на который будет проводить кнопочка(ссылку на ресурс в общем)..У меня это адрес моего блога

Далее удаляете слова АДРЕС КАРТИНКИ и вставляете туда скопированный адрес Вашего фрагмента первого из разрезанного изображения..адрес которого копировали в РАДИКАЛЕ по ссылке №1
Таким образом первая кликабельная кнопочка уже готова

Далее..делаете остальные кнопочки..вторую и третью и т.д..НО НЮАНС..Исходя из того на сколько частей в строке или столбике разрезано изображение..так и располагаете готовые коды кнопок..
Вот у меня к примеру..по одной строке в столбик..значит и коды кнопок я буду подставлять следующую под предыдущей..без пробелов
В коде это будет выглядеть так..

Вот и всё))

Часть вторая
Вариант второй
"Разрезная на части картинка с обрамлением блестяшками и с наполнением"
В этом варианте показан пример просто фотошопной рамки,так-же с обрамлением блестяшками и предназначенной для заполнения..В дальнейшем в эту рамку можно вставить текст и т.д
Вид изображения поля рамки для этого должна быть или одноцветная или верхняя часть с рисунком а остальное одноцветное..т.к если выставить неоднородного вида рамку..то когда вставите текст,рамочка растянется в низ и рисунок будет повторяться..будет не красиво
Всё делаете из первой части урока и из второй части
Создали всё как описано в первой части урока..Переходите к выполнению второй части,выполняя то что касается разрезать и сохранить фрагменты
Разрезаете на ТРИ ФРАГМЕНТА
Когда будете разрезать то второй фрагмент сделайте не широким по высоте
Смотрите как у меня на скрине..примерно так
1.

Разрезали..сохранили(всё как описывалось во второй части урока,первого варианта)

Далее..
Копируете себе этот код (как это делать то-же описывалось выше)

ЗДЕСЬ БУДЕТ ВАШ ТЕКСТ!!!

И так-же как описывалось во второй части урока,первого варианта..загружаете фрагменты через РАДИКАЛ..(фрагменты по порядку)..Ссылку радикала №1 копируете и подставляете в предоставленный код. Внимательно его изучаете,не торопитесь..Всё не так сложно как кажется..Слова удаляете аккуратно,что-бы не удалились ковычки
Подставляете адреса фрагментов..
Вписываете текст(там где указано)
ставите ссылку на себя,как автора творения (там где указано)..на свой блог или страницу..В рамке это будет скрыто..но если нажать на нижнюю часть рамки то будет переход на Ваш ресурс (это будет подтверждать Ваше авторство)
Не торопитесь и внимательно всё делайте

Особо не буду разъяснять т.к эти действия уже описывались во второй части урока,первого варианта,ну и цель урока выполнение просьбы..как всё-же делать рамочки с обрамлением блестяшками,в фотошопе...а уже HTML коды это отдельная тема и в других сообществах..созданных специально для обучения этому
Ну я по возможности подробно расписала и этот раздел))
Вот и всё))
ПОДСКАЗКА..

Часть №3.
"Рамка HTML"

А вот этот вариант..не фотошопная рамка а рамка построенная на кодах HTML
Я Вам для примера даю рамочку в два слоя по фону
Копируете вот этот кодик (выделяете мышкой и копируете)

Ваш текст

Далее внимательно рассмотрите код
1.
Можете изменить border="2" на свою цифру(наблюдайте по предпросмотру за изменениями)
2.
АДРЕС ФОНА-1..это адрес блестяшки(первого слоя фона)..как получить адрес я уже писала
3.
cellpadding="25" - тут цифру то-же можете менять..Если меньше то рамка блестящая будет узкой..а если больше то шире..Смотрите по предпросмотру
4.
width="450"
Это ширина рамки на размер которой она может расстянуться. Значит изображение содержимого или текст не должны превышать эту цыфру..т.к рамка расстягивается только в высоту..а в ширину не более той цифры которая указана
5
Далее.. border="2" background="АДРЕС ФОНА-2" ..это то-же самое что и с первым слоем я описывала..можете изменять цифру а вместо слов АДРЕС ФОНА-2 ставите адрес второго фона..
6.
Далее не трогаете ни чего и находите
size="3"- это размер текста..(если текст предусмотрен)
color="000066"-цвет текста
и вместо слов ВАШ ТЕКСТ пишете текст или ставите изображение или и то и другое(текст и изображение)
Вот у меня пример двухслойной рамки
Примерно будет так выглядеть

СОДЕРЖИМОЕ..ТЕКСТ или КАРТИНКА и т.д

Рубрики:

ОФОРМЛЕНИЕ БЛОГА/делаем рамочки, схемы
ОФОРМЛЕНИЕ БЛОГА/формулы