Немного о технике изготовления рамочек -"свитков" и код к ним.

Автор поста La_Perla

Немного о технике изготовления рамочек -"свитков"
и код к ним

Как и обещала, попробую описать процесс изготовления рамочек вот такого вида

Для себя я называю их рамочками - "свитками" потому, что как и в свитках у них есть неизменная верхняя и неизменная нижняя часть... А середина раскручивается по вертикали при наполнении рамочки текстом.

Важно, что в ширину эти рамочки не растягиваются, поэтому ширину рамки мы закладываем сразу во время изготовления исходников в Фотошопе.

За основу берем рамочку для фото.

Ее можно:
1) изготовить самим в программе Фотошоп.
В интернете существует множество уроков, как это сделать. Вы можете воспользоваться любым, например уроком от ИСКАТЕЛЬНИЦА *A.ilona*

2) воспользоваться готовыми рамочками для фото.
Их можно найти и в наших сообществах по фотошопу, и в интернете.

3) воспользоваться плагинами и програмками, способными генерировать рамочки.
Я использовала программу ФотоДЕКОР, одной из функций которой является генерирование рамок.

Прочесть о программе ФотоДЕКОР 3.61 Portable Rus и скачать ее можно в сообществе
Фотошоп копилочка

Итак, в этой програмке я получила исходник:

Это - уменьшенное изображение.
Оригинал можно посмотреть нажав на картинку.

Далее - я загрузила эту картинку в Фотошоп, для того, чтобы впоследствии разрезать ее на три части, которые понадобятся мне для создания рамки.

Но предварительно я нанесла внизу картинки свою подпись и отмасштабировала ее по ширине.

Шаг 1 Выставляем ширину рамочки.

У нас в блогах пост имеет ширину примерно 820-830px, поэтому я решила, что моя рамочка будет в ширину 700px.
Идем в Image > Image Size и выставляем в окошечке
width=700 и жмем ОК.
Все, картинка готова к работе.

Шаг 2 Отделяем от исходной картинки верхнюю часть.

Воспользовавшись инструментом прямоугольное выделение (прямоугольник) Rectangular Marquee Tool

выделила верхнюю часть картинки, далее
Image > Crop
При этом отрезается все, что находится за пределами выделения.
Сохранила и получила картинку 1.

Шаг 3 Отделяем от исходной картинки среднюю часть (фон будущей рамочки).

Отступаем по истории (History) на несколько шагов назад до шага выделения,
и выделяем полосу из середины.
Обрезаем лишнее, сохраняем.
Получилась картинка 2

Эта картинка очень важна, т.к. именно она будет являться фоном нашей рамочки и поэтому должна отвечать требованиям:
1. Должна гармонично желательно без шва стыковаться с верхней картинкой,
2, Должна не давать швов при повторении ее по вертикали (т.е. нужно подбирать рисунок).

Шаг 4 Отделяем от исходной картинки нижнюю часть.

Опять возвращаемся по истории (History) на несколько шагов назад до шага выделения,
и выделяем самый низ картинки. Далее опять
Image > Crop
и сохраняем картинку 3

Все... основная часть работы выполнена...

Шаг 5 Теперь загружаем картинки 1, 2. 3 на любой Хостинг картинок (Например, Радикал).

Перед загрузкой снимаем все галочки.

Далее нам потребуются для вставки в код ССЫЛКА (пункт 1).
Адрес изображения в интернете и ссылка на изображение - это одно и то же.

А вот и сам код рамки.

Шаг 6 Далее из белого кодового окна забираем код рамки и наполняем его своими цифрами.

Чтобы не тянуть код от начала до конца используйте следующий прием:
наводите курсор на окошко, жмете на правую кнопку мыши, выбираете из меню пункт "Выделить все"...
(при этом весь код посинеет), и спокойно копируете.

В коде мы заменим фразы:

1) АДРЕС ВЕРХНЕЙ КАРТИНКИ 1 на ссылку, полученную из первой строки Радикала для первой картинки.
У меня он равен http://s59.radikal.ru/i165/1005/55/b6ca6617c924.jpg

2) АДРЕС СРЕДНЕЙ КАРТИНКИ 2 на ссылку, полученную из первой строки Радикала для второй картинки.
У меня он равен http://i055.radikal.ru/1005/bf/1467bb6dc875.jpg

3) АДРЕС НИЖНЕЙ КАРТИНКИ 3 на ссылку, полученную из первой строки Радикала для третьей картинки.
У меня он равен http://s56.radikal.ru/i153/1005/e7/265353dd2a23.jpg

4) ШИРИНА РАМКИ У меня эта цифра равна 700

5) ШИРИНА ТЕКСТА Эта цифра равна ширине рамки минус ширина двух боковых бордюров.
Высчитывается экспериментально или замеряется фотошопе область от бордюра до бордюра.
У меня эта цифра равна 550

Если вы захотите поставить свою авторскую ссылку, то сделать это можно:
1) как вы делаете в обычных рамках последней строчкой в тексте, или
2) заменив фразу АДРЕС ВАШЕГО БЛОГА на собственно адрес вашего блога.
Как его получить?
Войти к себе в блог и в верхнем левом углу в адресной строке браузера будет искомый адрес. Вот оттуда его и надо скопировать. При этом нижняя картинка 3 вашей рамочки станет банером, при нажатии на который можно будет попасть к вам в блог.
Заполнять это поле не обязательно и стоит делать лишь тогда, когда Вы на нижней картинке делаете свою подпись.

Ну вот, вроде бы все.

Для тренировки попробуйте взять код из окошка и проставить туда мои цифры.
Вместо слов КОД РАЗДЕЛИТЕЛЯ вставьте код
<img src="http://s002.radikal.ru/i198/1001/86/fbdefd1b4fa4.gif" border="0">

Если Вы сделаете все правильно, то появится моя рамочка

Здесь я описала техническую часть вопроса создания рамочек.
А вот насколько красивыми они у Вас получатся зависит только от Вас, Вашего мастерства и фантазии.

Немного о технике изготовления рамочек -

Удачи и всех благ!

.
С уважением La_Perla (Маргарита)
Еще материалы по оформлению блога
можно найти ЗДЕСЬ

Оригинал поста здесь

Предыдущие записи блогера :

01.05.2010 — Как самому сделать музыкальную открытку? (плэйкаст)

30.04.2010 — Три рамочки для текста (фиолетовые).

30.04.2010 — Картинки для комментов Цветы. Букеты. Корзины с цветами.Стикеры

30.04.2010 — Красная рамочка для текста.

26.04.2010 — Как вставить музыку в блог, не добавляя ее в Мой Мир

24.04.2010 — Создание флешек и анимации в программе SWF Text

20.04.2010 — Рамочка с картинкой своими руками (продолжение урока).

20.04.2010 — Как сделать новую рамочку для текста, заменив в коде две цифры.

18.04.2010 — Цветовая палитра Color Wizard

11.04.2010 — ВСЕ,ЧТО ДОЛЖЕН ЗНАТЬ КАЖДЫЙ БЛОГГЕР О КОДЕ ИЗОБРАЖЕНИЯ.

Архив записей в блогах:

"Заявление 14-ти": не ждите ответа

Глава российского государства Дмитрий Медведев оставит без комментариев открытое письмо группы известных общественных деятелей, считающих, что в стране уничтожен институт демократических выборов Москва. 30 мая. ...

Про мигрантов, избивших инвалида.

Два «ценных специалиста», избивших за замечание о парковке на тротуаре потерявшего на войне руку инвалида-ветерана СВО. Избивали ногами. Уроженцы Грузии Иракли Мунчава и Рустам Лакашия. Как видим по фото, веселятся, не переживают, диаспора их уже отмазывает. Во время избиения орали ...

Где бы взять запчасти?

У меня сложилось двоякое отношение к одноразовым предметам обихода. Я признаю несомненную пользу и резон таких вещей как шприцы, презервативы, памперсы. Я допускаю удобство одноразовой посуды в отдельно взятых ситуациях. И в то же время чувствую, как нечто в душе моей демонстрирует ...

Трекинговые ботинки CLORTS 3A007E. Вскрытие.

Куплены были ещё в 16 году, когда не было THB и "Сплав" торговал ими. Год пролежали на шкафу, ожидая, пока окончательно умрут "Karrimor"ы, отходили по городу три сезона (то есть столько же, сколько и другая обувь у меня) и в прошлом году были отправлены в отставку. Распотрошить сумел ...

Новизна

Прикольный фильмец на днях посмотрели: о знакомствах через мобильные приложения, сексе и свободных отношениях. Трейлер сейчас покажу. Особенно будет интересно увидеть тем, кто в теме. Что интересно, мы вообще не знали, о чем этот фильм, не смотрели трейлер и не читали анонсы или ...

Немного о технике изготовления рамочек -"свитков" и код к ним.

Немного о технике изготовления рамочек -"свитков" и код к ним.

Оставить комментарий

Популярные посты: