 Автор поста 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 на ссылку, полученную из первой строки Радикала для первой картинки.
У меня он равен //s59.radikal.ru/i165/1005/55/b6ca6617c924.jpg
2) АДРЕС СРЕДНЕЙ КАРТИНКИ 2 на ссылку, полученную из первой строки Радикала для второй картинки.
У меня он равен //img-fotki.yandex.ru/get/4612/35204204.fb/0_83dea_67bd4f77_XL.jpg
3) АДРЕС НИЖНЕЙ КАРТИНКИ 3 на ссылку, полученную из первой строки Радикала для третьей картинки.
У меня он равен //s56.radikal.ru/i153/1005/e7/265353dd2a23.jpg
4) ШИРИНА РАМКИ У меня эта цифра равна 700
5) ШИРИНА ТЕКСТА Эта цифра равна ширине рамки минус ширина двух боковых бордюров.
Высчитывается экспериментально или замеряется фотошопе область от бордюра до бордюра.
У меня эта цифра равна 550
Если вы захотите поставить свою авторскую ссылку, то сделать это можно:
1) как вы делаете в обычных рамках последней строчкой в тексте, или
2) заменив фразу АДРЕС ВАШЕГО БЛОГА на собственно адрес вашего блога.
Как его получить?
Войти к себе в блог и в верхнем левом углу в адресной строке браузера будет искомый адрес. Вот оттуда его и надо скопировать. При этом нижняя картинка 3 вашей рамочки станет банером, при нажатии на который можно будет попасть к вам в блог.
Заполнять это поле не обязательно и стоит делать лишь тогда, когда Вы на нижней картинке делаете свою подпись.
Ну вот, вроде бы все.
Для тренировки попробуйте взять код из окошка и проставить туда мои цифры.
Вместо слов КОД РАЗДЕЛИТЕЛЯ вставьте код
<![CDATA[<img border="0" src="//s002.radikal.ru/i198/1001/86/fbdefd1b4fa4.gif" />]]>
Если Вы сделаете все правильно, то появится моя рамочка
Здесь я описала техническую часть вопроса создания рамочек.
А вот насколько красивыми они у Вас получатся зависит только от Вас, Вашего мастерства и фантазии.
Удачи и всех благ!
С уважением La@Perla (Маргарита)
Еще материалы по оформлению блога
можно найти ЗДЕСЬ
Оригинал поста здесь |
|
|
|
Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
ОткрыткиПерерожденный каталог открыток на все случаи жизни
Дешевые авиабилетыВыгодные цены, удобный поиск, без комиссии, 24 часа. Бронируй сейчас – плати потом!
Всегда под рукойаналогов нет ^_^
Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
Каталог блоговКаталог блогов позволяет упорядочить блоги людей и сообществ по категориям, позволяя быстрее находить нужные и интересные блоги среди огромного количества блогов на сайте li.ru
