 Автор поста 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://img-fotki.yandex.ru/get/4612/35204204.fb/0_83dea_67bd4f77_XL.jpg
3) АДРЕС НИЖНЕЙ КАРТИНКИ 3 на ссылку, полученную из первой строки Радикала для третьей картинки.
У меня он равен http://s56.radikal.ru/i153/1005/e7/265353dd2a23.jpg
4) ШИРИНА РАМКИ У меня эта цифра равна 700
5) ШИРИНА ТЕКСТА Эта цифра равна ширине рамки минус ширина двух боковых бордюров.
Высчитывается экспериментально или замеряется фотошопе область от бордюра до бордюра.
У меня эта цифра равна 550
Если вы захотите поставить свою авторскую ссылку, то сделать это можно:
1) как вы делаете в обычных рамках последней строчкой в тексте, или
2) заменив фразу АДРЕС ВАШЕГО БЛОГА на собственно адрес вашего блога.
Как его получить?
Войти к себе в блог и в верхнем левом углу в адресной строке браузера будет искомый адрес. Вот оттуда его и надо скопировать. При этом нижняя картинка 3 вашей рамочки станет банером, при нажатии на который можно будет попасть к вам в блог.
Заполнять это поле не обязательно и стоит делать лишь тогда, когда Вы на нижней картинке делаете свою подпись.
Ну вот, вроде бы все.
Для тренировки попробуйте взять код из окошка и проставить туда мои цифры.
Вместо слов КОД РАЗДЕЛИТЕЛЯ вставьте код
<![CDATA[<img src="http://www.liveinternet.ru/images/nopreview.gif"/> <a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://s002.radikal.ru/i198/1001/86/fbdefd1b4fa4.gif" target=_blank border="0">[показать]</a>]]>
Если Вы сделаете все правильно, то появится моя рамочка
Здесь я описала техническую часть вопроса создания рамочек.
А вот насколько красивыми они у Вас получатся зависит только от Вас, Вашего мастерства и фантазии.
[показать]
Удачи и всех благ!
С уважением La@Perla (Маргарита)
Еще материалы по оформлению блога
можно найти ЗДЕСЬ
[150x] Оригинал поста здесь
|
|
|
|
