Делаем разрезную рамку в ФШ
 

ПАМЯТКА НАЧИНАЮЩИМ ФОТОШОППЕРАМ

ДЕЛАЕМ РАЗРЕЗНУЮ РАМКУ В ФШ

Урок написан по просьбе постоянных читателей.
Будем учиться делать вот такую фотошопную рамку

Здесь будет ваш текст Надеюсь, рамка вам нравится

Похожих уроков достаточно много, я просто хочу показать на примере одной рамки, какие приемы в ФШ можно здесь использовать.

Сначала запомним некоторые важные моменты.

1. Работать можно с любым размером рамки, но сохранять - не более 700 пикселей, иначе рамка растянет блог в сторону.
2. Каждый элемент рамки делается на отдельном слое! Не забываем об этом!!!
3. Рамку украшаем как угодно, но помним, что часть рамки (там, где будет текст), должна быть однотонной, без лишних деталей

Когда я делаю рамку, я не представляю, что получится в финале...Иногда фантазия уводит совершенно далеко от того, что задумывалось... В инете есть замечательные готовые скрап-наборы, вот сейчас мы одним таким и воспользуемся... Смотрим скрап-набор.

Для работы я взяла материалы из этого набора (вы можете взять любые другие), либо просто работать с цветом и текстурой.

Откроем в ФШ Уменьшим его до 800 пикселей.





Точно так же поступите еще с двумя фонами:

и

Откройте в ФШ новый файл размером 800х600 пикселей с прозрачным фоном













Ну, вот подготовительная работа закончена. А теперь будем украшать нашу рамку.

Сначала поработаем инструментом выделения. Любым! Хотите прямоугольным, а я хочу круглым.
Сначала вырежем уголки из рамки. Сделали круглое выделение (помним, что подредактировать его можно, нажав Select -Transform Selection (Выделение - Трнсформировать выделенную область).

Сдвигайте выделение стрелками на компе, трансформируйте, потянув за кружочки мышкой как угодно.

Я поставила выделение на край рамки, сняла трансформацию клавишей Enter и нажала на компьютере Delete (Удалить). Потом, не снимая выделения, перешла на слой с ромашками и снова - Delete. Видите, как преобразилась рамка?
Выделение пока не снимаем!


Теперь снова жмем Select -Transform Selection (Выделение - Трансформировать выделенную область) и стрелочкой на компе гоним наше выделение вниз, к нижнему уголку рамки (мы же хотим одинаковые дырочки?)
Пригнали, поставии как надо, сняли трансформацию - Enter И опять по-новой....Встали на верхний слой - Delete (Удалить). Перешли на нижний слой - Delete (Удалить). Второй уголок готов.
Снова трансформируем выделение и гоним его вправо....И т.д.
После всех манипуляций у вас получится вот такая заготовочка. Выделение, наконец-таки, можно снять Ctrl+D



Теперь будем делать кнопочки и вставлять их в уголки рамки. Вернее, сделаем одну кнопку, а потом будем ее только копировать.
Не забыли Правило № 2? Каждый элемент рамки делаем на новом слое!
Следовательно, делаем новый слой, жмем справа на нижний белый квадратик



Инструментом выделения на этом новом слое сделали кружок. Не попали с размером? Не беда...Мы умеем трансформировать выделение... Еще раз...Select -Transform Selection (Выделение - Трнсформировать выделенную область) Поправили, поставили кружок на место и снимаем трансформацию - Enter .
Теперь "ведерком" залили кружок зеленым узором (pattern), применили к нему стили слоя - Тиснение и Обводка, все точно так же, как с рамочкой. Хорошая кнопочка получилась?
Теперь жмем Ctrl+J - создали копию слоя. Инструментом перемещения переносим кнопку во второй угол.
Опять жмем Ctrl+J - вот и третья кнопка готова. Перемещаем ее на место. И точно так же поступаем с четвертой! Ну, вот так гораздо веселее стало!!!



Теперь точно так же, как и с кнопочкой, поступим с полосками. Что помним? Что каждую новую деталь делаем на новом слое!!
Создали новый слой. Инструментом прямоугольного выделения нарисовали полоску. Залили ее узором. Применили стили слоя - тиснение и обводку. Словом, ничего нового... Получилась широкой? Снимаем выделение - Ctrl+D, нажимаем Edit - Free Transform (Редактирование - Свободное тансформирование) и исправляем длину и ширину полоски... Потом сняли трансформацию - Enter
Делаем копию полоски - Crl+J и инструментом перемещения передвигаем вторую полоску на противоположную сторону рамки.
Точно так же поступаем со всеми выпуклыми частями рамки. Их можно выделять также другими инструментами, например, Многоугольное лассо (Polygonal Lasso Tool)
C его помощью можно сделать вот такую кнопочку


Вот как выглядит рамка на этом этапе.



Теперь встаем на слой с зеленым фоном рамки, будем делать в нем дырочки.
Сначала сделаем большое прямоугольное выделение и нажали Delete (Удалить), сняли выделение Ctrl+D



Теперь делаем круглые дырочки. Сделали круглое выделение на слое с зеленым фоном. Свободным трансформирование поставили куда надо.
Сняли трансформацию - Enter.
Нажали Delete (Удалить),. Выделение не снимаем!
Жмем ...Select -Transform Selection (Выделение - Трансформировать выделенную область) и стрелочкой компа гоним кружок вправо...до конца рамки...



И опять все по-новой...Трансформируем, двигаем на место, снимаем трансформацию, удаляем...
Надеюсь, вы уже запомнили.. Когда сделали все дырочки, сняли выделение Ctrl+D

Потом на этом же слое берем прямоугольное выделение и делаем два выреза по бокам рамки.
Вот, что у вас должно в итоге получиться..



Ну, а дальше..., у кого как работает фантазия... Скрап-набор перед вами, творите...
Не забудьте подписать свою работу. У меня вот что получилось...



Для того, чтобы разместить рамку в блог, ее надо разрезать на три части, причем средняя часть (для текста)
должна быть однотонной.
Нож в фотошопе работает точно так же, как и выделение. Начинайте обводить рамку с левой верхней части и вправо вниз - это первая часть. Чтобы легче было работать, вторую часть обводите начиная с левого нижнего уголка - слева направо и вверх. Линии разреза я пометила на картинке выше красными линиями.

Прежде чем сохранять рамку, надо убрать лишние прозрачные пиксели по краям рамки.
Нажимаем Image - Trim... (Изображение - Тримминг...), ОК!



Но...может быть такое...С одной стороны рамки прозрачные пиксели не убрались. Поступаем таким образом.
Инструментом перемещения двигаем рамку к этому краю. Подвинули? И снова повторите Image - Trim... (Изображение - Тримминг...), ОК!



Вот, теперь совсем другое дело!
Мы помним, что ширина нашей рамки не должна быть больше 700 пикселей.
Проверяем - Image - Image Size (Изображение - Размер изображения) Если больше или намного меньше, исправляем (не забудьте поставить галочку на сохранение пропорций).



Теперь сохраняем нашу рамку. Жмем File - Save for Web...(Файл -Сохранить для Веб...)





Все, работа в ФШ закончена. Теперь будем собирать нашу рамку.
Не мною придумана вот такая замечательная формула разрезной рамки:

<center> <table background="АДРЕС ВЕРХНЕЙ ЧАСТИ" border="0" cellpadding="0" cellspacing="0" height="ВЫСОТА" width="ШИРИНА"> <tr> <td> <a href="http://blogs.mail.ru/mail/gou2098/" target="_blank"> <img border="0" height="3" src="//i033.radikal.ru/1005/e5/ac5d9ea9c583.gif" width="3" /> </a></td> </tr> </table> <table background="АДРЕС СРЕДНЕЙ ЧАСТИ" border="0" cellpadding="0" cellspacing="0" height="ВЫСОТА" width="ШИРИНА"> <tr> <td> <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="600"> <center> <font color="#000000" face="Monotype Corsiva" style="font-size:25px"><i><b>Здесь будет ваш текст<br /> Надеюсь, рамка вам нравится</b></i></font></center> </td> </tr> </table> </td> </tr> </table> <table background="АДРЕС НИЖНЕЙ ЧАСТИ" border="0" cellpadding="0" cellspacing="0" height="ВЫСОТА" width="ШИРИНА"> <tr> <td> <center> <a href="АДРЕС ВАШЕГО ДНЕВНИКА" target="_blank"><img alt="" border="0" height="31" src="//img-fotki.yandex.ru/get/4117/136160416.ae/0_a855c_26c372b9_XS.gif.jpg" title="" width="36" /> </a></center> </td> </tr> </table> </center>



Как узнать адреса частей рамки? Очень просто. Идем в Радикал-Фото.




Аналогично узнам и вставляем адреса средней и нижней частей рамочки.
Адрес блога узнаем так.



Ну вот, пожалуй, и все! Вставив в формулу все свои значения, получаем вот такую рамку:

Здесь будет ваш текст Надеюсь, рамка вам нравится

для вас Лариса Гурьянова

Серия сообщений "Делаем рамки":

Часть 1 - Золотая рамочка с фильтром Factory C в ФОТОШОПЕ
Часть 2 - Рамочка с радужным градиентом
...
Часть 41 - Как сделать разрезную рамку в ФШ
Часть 42 - Коды для Мейла и ЛиРу
Часть 43 - Делаем разрезную рамку в ФШ
 

Серия сообщений "Делаем разные рамки":

Часть 1 - Делаем оригинальную рамку для фото
Часть 2 - КАК СДЕЛАТЬ "ЗАСНЕЖЕННУЮ" РАМОЧКУ В ФШ
...
Часть 6 - Делаем в ФШ рамку для видео
Часть 7 - Делаем акцент на картинке
Часть 8 - Делаем разрезную рамку в ФШ